shrink sign-in button and add conditional css class to make searchbar…

… wider if user is logged in
cornell-dti · Nov 15, 2023 · 8a881ce · 8a881ce
1 parent 6c0defc
commit 8a881ce
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 59 deletions.
diff --git a/client/src/modules/Globals/Navbar.tsx b/client/src/modules/Globals/Navbar.tsx
@@ -68,12 +68,12 @@ 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}

diff --git a/client/src/modules/Globals/Styles/NavBar.css b/client/src/modules/Globals/Styles/NavBar.css
@@ -10,7 +10,17 @@
 
   .navbar-searchbar-container {
     margin-left: 21px;
-    margin-right: 70px;
+    margin-right: 150px;
+  }
+
+  .navbar-searchbar-container-wider {
+    width: 100%;
+    margin-right: 12%;
+  }
+
+  .navbar-searchbar-container-not {
+    width: 100%;
+    margin-right: 28%;
   }
 }
 
@@ -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 {
@@ -63,4 +83,4 @@
   margin-top: 12px;
   text-align: right;
   padding-right: 30px;
-}
+}
diff --git a/client/src/modules/Profile/Styles/App.css b/client/src/modules/Profile/Styles/App.css
@@ -14,6 +14,28 @@
   .scale-logo-homepage {
     margin: 120px 0px 0px 120px;
   }
+
+  .sign-in-button {
+    position: absolute;
+    right: 30px;
+    top: 40px;
+
+    width: 10%;
+    height: 39px;
+
+    background: #ffffff;
+    border-radius: 10px;
+
+    font-family: Source Sans Pro;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 23px;
+    text-align: center;
+    letter-spacing: -0.22px;
+
+    color: #000000;
+  }
 }
 
 @media (max-width: 992px) {
@@ -29,6 +51,28 @@
   .scale-logo-homepage {
     margin: 120px 0px 0px 30px;
   }
+
+  .sign-in-button {
+    position: absolute;
+    right: 30px;
+    top: 40px;
+
+    width: 100px;
+    height: 39px;
+
+    background: #ffffff;
+    border-radius: 10px;
+
+    font-family: Source Sans Pro;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 23px;
+    text-align: center;
+    letter-spacing: -0.22px;
+
+    color: #000000;
+  }
 }
 
 .scale-logo-homepage {
@@ -53,21 +97,17 @@
 
 .background-gradient_afternoonsummer {
   background-image: url('/bg_afternoon_summer.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(123, 179, 244, 0.7) 0%,
-      rgba(255, 255, 255, 0) 77.1%
-    );
+      rgba(255, 255, 255, 0) 77.1%);
 }
 
 .background-gradient_sunsetsummer {
   background-image: url('/bg_sunset_summer.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(91, 154, 226, 0.7) 19.17%,
       rgba(255, 228, 196, 0.7) 57.66%,
-      rgba(253, 144, 65, 0.7) 84.88%
-    );
+      rgba(253, 144, 65, 0.7) 84.88%);
 }
 
 .background-gradient_nightsummer {
@@ -77,21 +117,17 @@
 
 .background-gradient_afternoonfall {
   background-image: url('/bg_afternoon_fall.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 218, 175, 0.42) 77.1%
-    );
+      rgba(255, 218, 175, 0.42) 77.1%);
 }
 
 .background-gradient_sunsetfall {
   background-image: url('/bg_sunset_fall.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(0, 93, 189, 0.7) 19.17%,
       rgba(145, 125, 181, 0.7) 50.25%,
-      rgba(255, 164, 94, 0.7) 84.88%
-    );
+      rgba(255, 164, 94, 0.7) 84.88%);
 }
 
 .background-gradient_nightfall {
@@ -101,23 +137,19 @@
 
 .background-gradient_afternoonwinter {
   background-image: url('/bg_afternoon_winter.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(138, 185, 239, 0.7) 12.85%,
-      rgba(185, 217, 255, 0) 77.1%
-    );
+      rgba(185, 217, 255, 0) 77.1%);
 }
 
 .background-gradient_sunsetwinter {
   background-image: url('/bg_sunset_winter.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(2, 32, 66, 0.7) 14.7%,
       rgba(10, 68, 108, 0.7) 27.25%,
       rgba(144, 133, 147, 0.7) 55.16%,
       rgba(252, 137, 48, 0.7) 75.47%,
-      rgba(222, 89, 24, 0.7) 84.88%
-    );
+      rgba(222, 89, 24, 0.7) 84.88%);
 }
 
 .background-gradient_nightwinter {
@@ -127,22 +159,18 @@
 
 .background-gradient_afternoonspring {
   background-image: url('/bg_afternoon_spring.svg'),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(51, 145, 254, 0.7) 7.5%,
-      rgba(255, 255, 255, 0.7) 79.5%
-    );
+      rgba(255, 255, 255, 0.7) 79.5%);
 }
 
 .background-gradient_sunsetspring {
   background-image: url('/bg_sunset_spring.svg'),
-    linear-gradient(
-      201.93deg,
+    linear-gradient(201.93deg,
       rgba(164, 193, 209, 0.7) 19.17%,
       rgba(246, 228, 218, 0.7) 50.25%,
       rgba(255, 182, 121, 0.7) 73.5%,
-      rgba(247, 124, 74, 0.7) 84.88%
-    );
+      rgba(247, 124, 74, 0.7) 84.88%);
 }
 
 .background-gradient_nightspring {
@@ -162,26 +190,4 @@
 .full-height {
   height: 100%;
   background-color: #f4f9fe;
-}
-
-.sign-in-button {
-  position: absolute;
-  right: 30px;
-  top: 40px;
-
-  width: 137px;
-  height: 39px;
-
-  background: #ffffff;
-  border-radius: 10px;
-
-  font-family: Source Sans Pro;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 23px;
-  text-align: center;
-  letter-spacing: -0.22px;
-
-  color: #000000;
-}
+}