fix logo on mobile nav

src/components/Navbar/Navbar.jsx

@@ -291,142 +291,137 @@ const Navbar = () => {
           py: 0.5
         }} disableGutters>
 
-          {/* Left Section: Logo */}
-          <Box sx={{
-            mr: 5,
-            display: {
-              xs: "none",
-              md: "none",
-              lg: "block",
-            }
-          }}>
-            <a href="/">
-              <img src={logoSrc} alt="Logo"
-                style={{
-                  width: 150,
-                  height: 25,
-                }} />
-            </a>
-          </Box>
-
-          {/* SIDEBAR BUTTON */}
-          <Box sx={{
-            display: {
-              xs: "block",
-              md: "block",
-              lg: "none"
-            }
-          }}>
-
-            <IconButton
-              onClick={() => setOpen(true)}
-              className="navItem"
-              sx={{
-                backgroundColor: "transparent",
-                color: (isAtTop) ? "white" : "black",
-                "&:hover": {
-                  backgroundColor: "rgba(0, 0, 0, 0.1)",
-                },
-              }}
-            >
-              <MenuIcon fontSize="large" />
-            </IconButton>
-
-          </Box>
-
-          {/* Center Section: Nav Items */}
-          <Box
-            sx={{
-              flexGrow: 1,
+          <Box sx={{ display: "flex", alignItems: "center", width:"100%", position:"relative" }}>
+            {/* SIDEBAR BUTTON */}
+            <Box sx={{
               display: {
-                xs: "none",
-                md: "none",
-                lg: "flex"
-              },
-              gap: 2
-            }}
-          >
-
-            {navItem.map(({ productType, collection }) => (<Button
-              sx={{
-                position: "relative",
-                ':hover': {
-                  backgroundColor: "rgba(0,0,0,0)",
-                }
-              }}
-              color="inherit"
-              onClick={() => {
-                sessionStorage.setItem('amber-select-product-type', productType)
-                sessionStorage.removeItem('amber-select-collection')
-                window.location.href = `/products`;
-              }}
-              onMouseEnter={() => {
-                displayCollectionList(collection, productType)
-              }}
-            >
-              <Typography variant="body2"
+                xs: "block",
+                md: "block",
+                lg: "none"
+              }
+            }}>
+
+              <IconButton
+                onClick={() => setOpen(true)}
                 className="navItem"
                 sx={{
-                  fontWeight: "400",
+                  backgroundColor: "transparent",
                   color: (isAtTop) ? "white" : "black",
-                  transition: "all 0.3s ease-in-out",
-                  ":hover": {
-                    color: "#95AAC5 !important"
-                  }
-                }}>{productType}</Typography>
-            </Button>))}
-
-          </Box>
-
-          {/* Right Section: Search and Profile */}
-          <Box sx={{ display: "flex", alignItems: "center", gap: 1.2, ml: "auto" }}>
-
-            {/* <FormControl
+                  "&:hover": {
+                    backgroundColor: "rgba(0, 0, 0, 0.1)",
+                  },
+                }}
+              >
+                <MenuIcon fontSize="large" />
+              </IconButton>
+
+            </Box>
+
+            {/* Left Section: Logo */}
+            <Box sx={{
+              mx: "auto",
+            }}>
+              <a href="/">
+                <img src={logoSrc} alt="Logo"
+                  style={{
+                    width: 150,
+                    height: 25,
+                  }} />
+              </a>
+            </Box>
+
+            {/* Center Section: Nav Items */}
+            <Box
               sx={{
+                flexGrow: 1,
                 display: {
                   xs: "none",
-                  lg: "block"
-                }
+                  md: "none",
+                  lg: "flex"
+                },
+                gap: 2
               }}
             >
-              <LanguageSelect
-                value={language}
-                onChange={handleChange}
-                label=""
-                MenuProps={{
-                  PaperProps: {
-                    style: {
-                      backgroundColor: 'black',
-                      color: 'white'
-                    },
-                  },
+
+              {navItem.map(({ productType, collection }) => (<Button
+                sx={{
+                  position: "relative",
+                  ':hover': {
+                    backgroundColor: "rgba(0,0,0,0)",
+                  }
+                }}
+                color="inherit"
+                onClick={() => {
+                  sessionStorage.setItem('amber-select-product-type', productType)
+                  sessionStorage.removeItem('amber-select-collection')
+                  window.location.href = `/products`;
+                }}
+                onMouseEnter={() => {
+                  displayCollectionList(collection, productType)
                 }}
               >
-                <LanguageSelectItem value="English">English</LanguageSelectItem>
-                <LanguageSelectItem value="Malay">Malay</LanguageSelectItem>
-                <LanguageSelectItem value="Chinese">Chinese</LanguageSelectItem>
-              </LanguageSelect>
-            </FormControl> */}
-
-            <IconButton>
-              <SearchIcon className="navItem" style={{
-                transition: "all 0.3s ease-in-out",
-                color: (isAtTop) ? "white" : "black",
-              }} />
-            </IconButton>
-
-            <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
-              <LocalMallIcon className="navItem" style={{
-                transition: "all 0.3s ease-in-out",
-                color: (isAtTop) ? "white" : "black",
-              }} />
-            </Badge>
-
-            {/* <IconButton color="inherit">
-              <AccountCircleIcon sx={{ color: "white" }} />
-            </IconButton> */}
-          </Box>
+                <Typography variant="body2"
+                  className="navItem"
+                  sx={{
+                    fontWeight: "400",
+                    color: (isAtTop) ? "white" : "black",
+                    transition: "all 0.3s ease-in-out",
+                    ":hover": {
+                      color: "#95AAC5 !important"
+                    }
+                  }}>{productType}</Typography>
+              </Button>))}
+
+            </Box>
+
+            {/* Right Section: Search and Profile */}
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1.2 }}>
+
+              {/* <FormControl
+                sx={{
+                  display: {
+                    xs: "none",
+                    lg: "block"
+                  }
+                }}
+              >
+                <LanguageSelect
+                  value={language}
+                  onChange={handleChange}
+                  label=""
+                  MenuProps={{
+                    PaperProps: {
+                      style: {
+                        backgroundColor: 'black',
+                        color: 'white'
+                      },
+                    },
+                  }}
+                >
+                  <LanguageSelectItem value="English">English</LanguageSelectItem>
+                  <LanguageSelectItem value="Malay">Malay</LanguageSelectItem>
+                  <LanguageSelectItem value="Chinese">Chinese</LanguageSelectItem>
+                </LanguageSelect>
+              </FormControl> */}
+
+              <IconButton>
+                <SearchIcon className="navItem" style={{
+                  transition: "all 0.3s ease-in-out",
+                  color: (isAtTop) ? "white" : "black",
+                }} />
+              </IconButton>
 
+              <Badge sx={{ cursor: "pointer" }} onClick={() => { window.location.href = "/cart" }} badgeContent={cartAmount} color="primary">
+                <LocalMallIcon className="navItem" style={{
+                  transition: "all 0.3s ease-in-out",
+                  color: (isAtTop) ? "white" : "black",
+                }} />
+              </Badge>
+              {/* <IconButton color="inherit">
+                <AccountCircleIcon sx={{ color: "white" }} />
+              </IconButton> */}
+            </Box>
+          </Box>
         </Toolbar>
 
         {/* On Hover Collection */}

src/components/NewsLetter/NewsLetter.jsx

@@ -25,7 +25,7 @@ const NewsLetter = () => {
           width: '100%',
           height: '100%',
           display: 'flex',
-          backgroundColor: 'rgba(50, 50, 50, 0.5)', // Filter overlay
+          backgroundColor: 'rgba(50, 50, 50, 0.1)', // Filter overlay
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',

src/index.css

@@ -355,4 +355,32 @@
   }
 
 
+  /*
+  * Scroll Custom
+  */
+  /* Style for WebKit-based browsers (e.g., Chrome, Edge, Safari) */
+::-webkit-scrollbar {
+  width: 10px; /* Adjust scrollbar width */
+  height: 10px; /* Adjust scrollbar height for horizontal scrolling */
+}
 
+::-webkit-scrollbar-track {
+  background: #FFF; /* Background color of the scrollbar track */
+  border-radius: 5px; /* Rounded corners for the track */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #95AAC5; /* Scroll thumb color */
+  border-radius: 5px; /* Rounded corners for the thumb */
+}
+
+/* Optional: Style for hover state */
+::-webkit-scrollbar-thumb:hover {
+  background: #7A98B5; /* Slightly darker color for hover */
+}
+
+/* Add for Firefox */
+* {
+  scrollbar-width: thin; /* Thin scrollbar */
+  scrollbar-color: #95AAC5 #FFF; /* Thumb color and track color */
+}