some styles

ramory-l · Jan 6, 2021 · cf81caf · cf81caf
1 parent ea13272
commit cf81caf
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/frontend/src/components/searchForm.jsx b/frontend/src/components/searchForm.jsx
@@ -110,15 +110,15 @@ class SearchForm extends Form {
                 isSearchForm={true}
                 onTagsForSearchForm={this.handleTagsForSearchForm}
               />
-              {this.renderButton("Search")}
+              {this.renderButton("Search", "btn btn-primary mt-2")}
               <button
                 onClick={() =>
                   this.handleSort({
                     path: "distance",
                     order: this.context.sortBy.order,
                   })
                 }
-                className="btn btn-dark mx-2"
+                className="btn btn-dark mx-2 mt-2"
               >
                 Sort by distance{" "}
                 {this.context.sortBy.order === "asc" ? (
@@ -134,7 +134,7 @@ class SearchForm extends Form {
                     order: this.context.sortBy.order,
                   })
                 }
-                className="btn btn-secondary mr-2"
+                className="btn btn-secondary mr-2 mt-2"
               >
                 Sort by rate{" "}
                 {this.context.sortBy.order === "asc" ? (
@@ -150,7 +150,7 @@ class SearchForm extends Form {
                     order: this.context.sortBy.order,
                   })
                 }
-                className="btn btn-success"
+                className="btn btn-success mt-2"
               >
                 Sort by age{" "}
                 {this.context.sortBy.order === "asc" ? (

diff --git a/frontend/src/components/styles/usersCarousel.scss b/frontend/src/components/styles/usersCarousel.scss
@@ -9,11 +9,13 @@
       }
     }
     .carousel-caption {
-      padding: 0;
+      line-height: 5px;
       right: 0;
       bottom: 0;
       left: 0;
+      padding: 0;
       background-color: rgba(0, 0, 0, 0.582);
+      font-family: "Cinzel Decorative", cursive;
       h5,
       p {
         color: white;
@@ -33,9 +35,11 @@
 
 @media (max-width: 500px) {
   .carousel.modified {
+    width: 100%;
     .carousel-inner {
       .carousel-caption {
-        height: 35px;
+        height: 90px;
+        bottom: -20px;
         h5,
         p {
           font-size: 7pt;
@@ -49,17 +53,20 @@
       right: 15px;
     }
     i {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+      background-color: black;
+      border-radius: 50px;
       font-size: 2em;
     }
   }
 }
 
-@media (max-width: 350px) {
+@media (max-width: 800px) {
   .carousel.modified {
-    .carousel-inner {
-      .carousel-caption {
-        height: 30px;
-      }
-    }
+    width: 100%;
   }
 }
diff --git a/frontend/src/components/usersCarousel.jsx b/frontend/src/components/usersCarousel.jsx
@@ -31,7 +31,6 @@ const UsersCarousel = ({ users, myData }) => {
       [searchContext.sortBy.path],
       [searchContext.sortBy.order]
     );
-    console.log(searchContext.sortBy);
     setFetchedUsers(sorted);
   }, [users, searchContext.sortBy, myData]);