apply conditional css class for the search bar to be wider when the u…

…ser is logged in
cornell-dti · Nov 14, 2023 · 0abd3ae · 0abd3ae
1 parent c78a123
commit 0abd3ae
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 9 deletions.
diff --git a/client/src/assets/profile_bear/profile_bear_gray.svg b/client/src/assets/profile_bear/profile_bear_gray.svg
diff --git a/client/src/modules/Globals/Navbar.tsx b/client/src/modules/Globals/Navbar.tsx
@@ -68,19 +68,19 @@ export default function Navbar({ userInput }: NavbarProps) {
         <a className="" href="/">
           <img
             src="/logo.svg"
-            className="img-fluid scale-logo-navbar"
+            className="scale-logo-navbar"
             alt="CU Reviews Logo"
           />
         </a>
       </div>
-      <div className="col navbar-searchbar-container">
+      <div className={`col navbar-searchbar-container${isLoggedIn ? "-wider" : "-not"}`}>
         <SearchBar
           userInput={userInput}
           contrastingResultsBackground={true}
           isInNavbar={true}
         />
       </div>
       {displayButton()}
-    </div>
+    </div >
   )
 }
diff --git a/client/src/modules/Globals/Styles/NavBar.css b/client/src/modules/Globals/Styles/NavBar.css
@@ -12,6 +12,16 @@
     margin-left: 21px;
     margin-right: 150px;
   }
+
+  .navbar-searchbar-container-wider {
+    width: 100%;
+    margin-right: 12%;
+  }
+
+  .navbar-searchbar-container-not {
+    width: 100%;
+    margin-right: 28%;
+  }
 }
 
 @media screen and (min-width: 992px) {
@@ -22,6 +32,16 @@
   .navbar-searchbar-container {
     margin-right: 220px;
   }
+
+  .navbar-searchbar-container-wider {
+    width: 100%;
+    margin-right: 15%;
+  }
+
+  .navbar-searchbar-container-not {
+    width: 100%;
+    margin-right: 15%;
+  }
 }
 
 .custom-navbar {

diff --git a/client/src/modules/Globals/Styles/ProfileDropdownNavBar.module.css b/client/src/modules/Globals/Styles/ProfileDropdownNavBar.module.css
@@ -76,4 +76,4 @@
     width: 40px;
     height: 40px;
   }
-}
+}
diff --git a/client/src/modules/Profile/Styles/App.css b/client/src/modules/Profile/Styles/App.css
@@ -20,7 +20,7 @@
     right: 30px;
     top: 40px;
 
-    width: 137px;
+    width: 10%;
     height: 39px;
 
     background: #ffffff;

diff --git a/client/src/modules/Results/Styles/ResultsDisplay.css b/client/src/modules/Results/Styles/ResultsDisplay.css
@@ -228,8 +228,7 @@
   color: #9fcbff !important;
 }
 
-.react-major-select__control--is-focused
-  .react-major-select__dropdown-indicator {
+.react-major-select__control--is-focused .react-major-select__dropdown-indicator {
   color: #0076ff !important;
 }
 
@@ -419,4 +418,4 @@ ul {
   padding-top: 28px;
   padding-right: 8%;
   padding-left: 1.5%;
-}
+}
diff --git a/client/src/modules/SearchBar/Styles/SearchBar.css b/client/src/modules/SearchBar/Styles/SearchBar.css
@@ -93,4 +93,4 @@
   border-style: solid;
   border-color: #6ba7ec;
   border-width: 0 1px 1px 1px;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,4 +76,4 @@ @@
         width: 40px;
         height: 40px;
       }
-    }
+    }