Styling UI changes- menu ui, responsiveness

harinarayanan-kp · Nov 12, 2023 · 0f33fe6 · 0f33fe6
1 parent a52d8bb
commit 0f33fe6
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 45 deletions.
diff --git a/trek/.firebase/hosting.YnVpbGQ.cache b/trek/.firebase/hosting.YnVpbGQ.cache
@@ -4,13 +4,17 @@ logo192.png,1699103015724,3ee59515172ee198f3be375979df15ac5345183e656720a381b887
 logo512.png,1699103015793,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 manifest.json,1699103015405,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 robots.txt,1699103015914,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1699639003083,afe47f529b5c7e4f68fe215a77fb240d4fcc9fbe9e4ee51617a94d4bb89fe225
-index.html,1699639003083,6f322208a86c8244157c2c7cb5e75e8234d4851ae52b8521e7fffa0884a83d8e
-static/js/787.fa4747b5.chunk.js,1699639003095,84236de82cc3132705d91246886b5685787117d1085466bd3423c0dc82a71a05
-static/css/main.c12aabd2.css,1699639003095,ccce1ebd3d3fc9241cb9691a937b54cc9608c8d8c0e8d5f70603c8233ce288f7
-static/css/main.c12aabd2.css.map,1699639003095,e0ef0a1a46d502dc8aa55579d9dddb3171742520189d16e64133d59c80ceb5ce
-static/js/main.2b2f2ceb.js.LICENSE.txt,1699639003095,4d03e1c335f05c259ef38ea0f36999f6fd885a96f8360eaadc953d1a1524c712
-static/media/cart-shopping-svgrepo-com.735bc8ae1f1c71ef56f6cb39ffc139f8.svg,1699639003095,c6fdc2a753673188d6fedb292b94f9f6f447ec2a4252ae8a0545d27d7fe3c90b
-static/js/787.fa4747b5.chunk.js.map,1699639003095,c92d6be8c969eccaf38447c6cd0db2541fa63e03e4b1dfad781f1cd76b0a6c46
-static/js/main.2b2f2ceb.js,1699639003095,1530523945022e67665e46ace06da3cf5bf53ec7cf260f6b3d5a251819273c0a
-static/js/main.2b2f2ceb.js.map,1699639003096,9347247018b36662c8524683990a567636990bd060a2c8582241e11bcdc26843
+asset-manifest.json,1699782176773,e3bfa22b404333bebae20fba555ffc1b5729e2b355266d878e8f10fe7213a516
+index.html,1699782176773,3c62a69c6f0af6c4ae6ade3e05b5ddb8eabff46cf5f6e8906a37954de5e9b7b4
+static/css/main.77eed3da.css,1699782176789,083e9d9365e5c22aac75b18c5bb4df9edffc964c0b9526ce3cb54ae83bb2f47b
+static/js/787.fa4747b5.chunk.js,1699782176789,84236de82cc3132705d91246886b5685787117d1085466bd3423c0dc82a71a05
+static/css/main.77eed3da.css.map,1699782176789,5f5dc9329f186de3dc780f41613daaeebec36bb1a1759f4f22f6671d6b4afdae
+static/js/787.fa4747b5.chunk.js.map,1699782176789,c92d6be8c969eccaf38447c6cd0db2541fa63e03e4b1dfad781f1cd76b0a6c46
+static/media/cart-shopping-svgrepo-com.735bc8ae1f1c71ef56f6cb39ffc139f8.svg,1699782176789,c6fdc2a753673188d6fedb292b94f9f6f447ec2a4252ae8a0545d27d7fe3c90b
+static/js/main.e4d7d524.js.LICENSE.txt,1699782176789,4d03e1c335f05c259ef38ea0f36999f6fd885a96f8360eaadc953d1a1524c712
+static/media/like.0a4ce72418b8a45c1a6f18dfcf2cc486.svg,1699782176789,bf0b755380f8cb57d3248d767e5e6cc8c2f5129a7fb29f2fdbc618ec37e1e4c6
+static/media/profile.a9f6537dc3a00db8bacb46233237b96c.svg,1699782176789,535830f96dad65abafad49b40796932d72e4ecec63c310d8989d28cdda9fca26
+static/media/search.bca8fa4956c91ec2fa88c0c96cde9fdc.svg,1699782176789,688c63f21304d177788bcc5921c7d881fd8899371b7ca767b02b2f004a884b03
+static/media/menu.6c556b789d863ce0dd00d40116401a5d.svg,1699782176789,0c942e1317b5a6e6ee0e568ea39a26b364d19897ae071936a1c8b32450d1fade
+static/js/main.e4d7d524.js,1699782176789,6c878552de24d787326f6e94624bc686aa7ea5b44549379cb6c3637b92789d50
+static/js/main.e4d7d524.js.map,1699782176791,c8359d3d284677ae8c4292658dcf1a4ec7cecc05947bbac01d83a4c7dd11f957
diff --git a/trek/src/components/CartScreen/cart.css b/trek/src/components/CartScreen/cart.css
@@ -36,10 +36,18 @@
 
 @media (max-width: 768px) {
   .ListPrice {
-    font-size: 30px;
+    font-size: large;
   }
   .ListTitle {
-    font-size: 30px;
+    font-size: large;
+  }
+  .ListTile{
+    height: 200px;
+  }
+  .ListImage{
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
   }
 }
 

diff --git a/trek/src/components/HomeScreen/slide/slide.css b/trek/src/components/HomeScreen/slide/slide.css
@@ -4,6 +4,14 @@
   height: 500px;
   overflow: hidden;
 }
+@media (max-width: 768px) {
+  .slidecontainer {
+    width: 350px;
+    height: 500px;
+  }
+
+}
+
 
 .slider {
   display: flex;

diff --git a/trek/src/components/Login/Login/LoginPage.js b/trek/src/components/Login/Login/LoginPage.js
@@ -64,10 +64,10 @@ const LoginPage = () => {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
-        <button className='button pointer' type="button" onClick={Login}>Login</button>
+        <button className='loginbutton pointer' type="button" onClick={Login}>Login</button>
         <Link to="/signup"> New User? Sign UP here.</Link><Outlet/>
         <>or</>
-        <button className=' button pointer' type="button" onClick={SignInWithGoogle}>Sign in with Google</button>
+        <button className=' loginbutton pointer' type="button" onClick={SignInWithGoogle}>Sign in with Google</button>
     </section>
   );
 };

diff --git a/trek/src/components/Login/SignUp/LoginPage.js b/trek/src/components/Login/SignUp/LoginPage.js
@@ -62,9 +62,9 @@ const SignupPage = () => {
             value={password}
             onChange={(e) => setPassword(e.target.value)}
           />
-        <button className='button pointer' type="button" onClick={SignUp}>Sign Up</button>
+        <button className='loginbutton' type="button" onClick={SignUp}>Sign Up</button>
         <>or</>
-        <button className=' button pointer' type="button" onClick={SignInWithGoogle}>Sign in with Google</button>
+        <button className=' loginbutton' type="button" onClick={SignInWithGoogle}>Sign in with Google</button>
     </section>
   );
 };

diff --git a/trek/src/components/Login/login.css b/trek/src/components/Login/login.css
@@ -1,6 +1,7 @@
 .inputfield{
-    min-width: 500px;
-    width: 50vw;
+    min-width: 100px;
+    width: 80vw;
+    max-width: 500px;
     height: 50px;
     border-radius: 14px;
     font-size: 24px;
@@ -11,7 +12,7 @@
 }
 
 .signup-container{
-    min-width: 100vh;
+    min-width: 100vw;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -20,12 +21,19 @@
 
 }
 
-.button{
+.loginbutton{
     background: #D9D9D9;
-    height: 5vw;
-    width: 30vw;
+    font-size: large;
+    padding: 25px;
+    min-width: 100px;
+    width: 50vw;
+    max-width: 300px;
     border-radius: 24px;
     margin: 28px;
+    transition: 0.3s;
+}
+.loginbutton:hover{
+    box-shadow: 0px 0px 20px black;
 }
 
 .pointer:hover{

diff --git a/trek/src/components/Navbar/LoginButton.jsx b/trek/src/components/Navbar/LoginButton.jsx
@@ -38,10 +38,10 @@ const LoginButton = () => {
         return (
             <div style={{display: "flex"}}>
                 <Link to="/search">
-                    <div className='searchbutton center'><img alt='' src={search}/></div>
+                    <div className='searchbutton'><img alt='' src={search}/></div>
                 </Link>
                 <Link to="/favourites">
-                    <div className='favourites center'><img alt='' src={like}/></div>
+                    <div className='favourites'><img alt='' src={like}/></div>
                 </Link>
                 <Link to="/account">
                     <div className='myaccount'><img alt='' src={profile}/></div>

diff --git a/trek/src/components/Navbar/navbar.css b/trek/src/components/Navbar/navbar.css
@@ -3,12 +3,19 @@
 h3 {
   font-weight: 300;
 }
-
+/* 
 @media (max-width: 768px) {
   .navbarcenter {
     display: none;
   }
-}
+  .logo {
+    padding-left: 0px;
+    height: 30px;
+  }
+  .searchbutton{
+    display: none;
+  }
+} */
 
 .Navbar {
   margin-top: 15px;
@@ -39,7 +46,7 @@ h3 {
   padding-left: 30px;
   padding-right: 30px;
 }
-.navbarcenter button:hover{
+.navbarcenter button:hover {
   background-color: #cbcbcb;
 }
 
@@ -70,12 +77,6 @@ h3 {
   font-family: "Inter", sans-serif;
 }
 
-@media (max-width: 768px) {
-  .navbarcenter {
-    display: none;
-  }
-}
-
 @media (min-width: 768px) {
   .menuicon {
     display: none;
@@ -99,31 +100,43 @@ h3 {
   margin-right: 15px;
 }
 
-.menusection{
+.menusection {
+ background-color: #bbbbbb;
   z-index: 100;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
   top: 0px;
-  /* border: 5px solid black; */
-  height: 100vh;
-  backdrop-filter: blur(5px);
-  width: 50vw;
+  border-radius: 30px;
   position: fixed;
+  top: 100px;
   right: 0px;
   display: flex;
   flex-direction: column;
 }
 
-.menusection button{
-  box-shadow: 5px 5px rgb(0, 0, 0);
+.menusection button {
+  box-shadow: 5px 5px 10px rgb(0, 0, 0);
   border-radius: 50px;
   font-size: 30px;
   width: 50vw;
   backdrop-filter: grayscale(30%);
   background-color: rgb(222, 222, 222);
-  height: 20vh;
+  margin: 10px;
 }
-.hide{
+
+.hide {
   display: none;
-}
+}
+
+@media (max-width: 768px) {
+  .navbarcenter {
+    display: none;
+  }
+  .logo {
+    padding-left: 10px;
+    height: 30px;
+  }
+  .searchbutton {
+    display: none;
+  }
+}
diff --git a/trek/src/components/listwindow/list.css b/trek/src/components/listwindow/list.css
@@ -20,7 +20,7 @@
 .imgwrap {
     position: relative;
     overflow: hidden;
-
+    border-radius: 20px;
     height: 400px;
     object-fit: cover;
 }
@@ -45,6 +45,7 @@
 @media (max-width: 768px) {
     .listtilecontainer {
         grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+        height: 300px;
     }
     .listcard {
         width: 100%;