fix logo

RimRaider639 · Mar 6, 2023 · 6dc65b1 · 6dc65b1
1 parent db34fab
commit 6dc65b1
Show file tree

Hide file tree

Showing 9 changed files with 693 additions and 351 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,13 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/lint_favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
-    />
+      content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Lint</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/lint_darkmode.png b/public/lint_darkmode.png
diff --git a/public/lint_favicon.ico b/public/lint_favicon.ico
diff --git a/public/lint_lightmode.png b/public/lint_lightmode.png
diff --git a/src/components/HomePage.jsx b/src/components/HomePage.jsx
diff --git a/src/components/Navbar/MobileMenu.jsx b/src/components/Navbar/MobileMenu.jsx
@@ -23,7 +23,7 @@ export default function MobileMenu({ isOpen, onOpen, onClose }) {
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton onClick={onClose} />
-          <DrawerHeader borderBottomWidth="1px">Basic Drawer</DrawerHeader>
+          <DrawerHeader borderBottomWidth="1px">Categories</DrawerHeader>
           <DrawerBody>
             {gift.map(
               (label) => (

diff --git a/src/components/Navbar/MobileNav.jsx b/src/components/Navbar/MobileNav.jsx
@@ -1,20 +1,32 @@
-import React from 'react'
-import {GiHamburgerMenu} from "react-icons/gi"
-import {Flex, IconButton, useDisclosure, Image} from "@chakra-ui/react"
-import Bag from './Bag'
-import {Link} from "react-router-dom"
-import MobileMenu from './MobileMenu'
+import React from "react";
+import { GiHamburgerMenu } from "react-icons/gi";
+import { Flex, IconButton, useDisclosure, Image } from "@chakra-ui/react";
+import Bag from "./Bag";
+import { Link } from "react-router-dom";
+import MobileMenu from "./MobileMenu";
 const MobileNav = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
-    <Flex display={{base:"flex", md:"none"}} justify={'space-between'} p="10px 60px 10px 30px" align="center" w="100%">
-        <IconButton aria-label='hamburger' icon={<GiHamburgerMenu/>} onClick={onOpen}/>
-        <MobileMenu isOpen={isOpen} onClose={onClose}/>
-        <Link to='/' >  <Image h="60px" src="https://i.ibb.co/d27npvV/Lint-trimmy-1.png" alt="logo" /></Link>
-        <Bag fontSize="30px"/>
+    <Flex
+      display={{ base: "flex", md: "none" }}
+      justify={"space-between"}
+      p="10px 60px 10px 30px"
+      align="center"
+      w="100%">
+      <IconButton
+        aria-label="hamburger"
+        icon={<GiHamburgerMenu />}
+        onClick={onOpen}
+      />
+      <MobileMenu isOpen={isOpen} onClose={onClose} />
+      <Link to="/">
+        {" "}
+        <Image h="60px" src="lint_lightmode.png" alt="logo" />
+      </Link>
+      <Bag fontSize="30px" />
     </Flex>
-  )
-}
+  );
+};
 
-export default MobileNav
+export default MobileNav;
diff --git a/src/components/Navbar/NavTop.jsx b/src/components/Navbar/NavTop.jsx
@@ -4,50 +4,50 @@ import { RxCardStackPlus } from "react-icons/rx";
 import { AiFillDollarCircle } from "react-icons/ai";
 import "../../styles/NavTop.css";
 import AccountDropdown from "../Model";
-import {Link, useLocation} from "react-router-dom"
-import {Flex, Box} from "@chakra-ui/react"
+import { Link, useLocation } from "react-router-dom";
+import { Flex, Box, useBreakpointValue } from "@chakra-ui/react";
+
 import Bag from "./Bag";
 const NavTop = () => {
-
   return (
-
-
-      <div className="container">
-
-
+    <div className="container">
       <div className="logo">
-      <Link to='/' >  <img src="https://i.ibb.co/d27npvV/Lint-trimmy-1.png" alt="logo" /></Link>
-        </div>
-        <div className="search">
-          <input id="inp" type="text" placeholder="Search" />
-          <span>
-            <FiSearch />
-          </span>
-        </div>
-        <div className="icon_collection">
-          <span>
-            <RxCardStackPlus />
-            <p>Lint rewards+</p>
-          </span>
-          <span>
-            <AiFillDollarCircle />
-            <p>Coupons</p>
-          </span>
-          <span>
-            <p id="mod">
-              <AccountDropdown />
-            </p>
-          </span>
-          <span>
-
-            <Bag/>
-
-          </span>
-        </div>
-
-
+        <Link to="/">
+          {" "}
+          <img
+            src="lint_lightmode.png"
+            alt="logo"
+            style={{
+              height: "50px",
+            }}
+          />
+        </Link>
+      </div>
+      <div className="search">
+        <input id="inp" type="text" placeholder="Search" />
+        <span>
+          <FiSearch />
+        </span>
+      </div>
+      <div className="icon_collection">
+        <span>
+          <RxCardStackPlus />
+          <p>Lint rewards+</p>
+        </span>
+        <span>
+          <AiFillDollarCircle />
+          <p>Coupons</p>
+        </span>
+        <span>
+          <p id="mod">
+            <AccountDropdown />
+          </p>
+        </span>
+        <span>
+          <Bag />
+        </span>
       </div>
-      
+    </div>
   );
 };
 

diff --git a/src/styles/NavTop.css b/src/styles/NavTop.css
@@ -1,6 +1,7 @@
 #maindiv {
   background-color: white;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   width: 100%;
   position: fixed;
   z-index: 1000;
@@ -12,18 +13,10 @@
   width: 90%;
   margin: auto;
   align-items: center;
+  height: 90px;
 }
 
-.logo {
-  width: 10%;
-}
-
-
-.logo img {
-  width: 100%;
-}
-
-.logo>img:hover {
+.logo > img:hover {
   cursor: pointer;
 }
 
@@ -54,7 +47,6 @@
   font-size: 30px;
   margin-right: 10px;
   margin-left: 10px;
-
 }
 
 .icon_collection {
@@ -79,42 +71,41 @@
   border: 1px solid red;
   margin-top: 5px;
 } */
-@media screen and (max-width:1024px) {
+@media screen and (max-width: 1024px) {
   .logo {
-      width: 8%;
+    width: 8%;
   }
 
   .search {
-      /* border: 1px solid blue; */
-      width: 40%;
-      border-radius: 5px;
-      border: 1px solid gray;
-      align-items: center;
+    /* border: 1px solid blue; */
+    width: 40%;
+    border-radius: 5px;
+    border: 1px solid gray;
+    align-items: center;
   }
 
   .search input {
-      background: transparent;
-      border: none;
-      outline: none;
-      width: 100%;
-      padding: 5px;
-      background-color: white;
+    background: transparent;
+    border: none;
+    outline: none;
+    width: 100%;
+    padding: 5px;
+    background-color: white;
   }
 
   .search svg {
-      font-size: 20px;
-      margin-right: 8px;
-      margin-left: 8px;
-
+    font-size: 20px;
+    margin-right: 8px;
+    margin-left: 8px;
   }
 
   .icon_collection span svg {
-      font-size: 20px;
-      margin: auto;
+    font-size: 20px;
+    margin: auto;
   }
 
   .icon_collection span p {
-      font-size: 10px;
+    font-size: 10px;
   }
 
   /* .icon_collection {
@@ -124,25 +115,24 @@
   } */
 }
 
-@media screen and (max-width:650px) {
+@media screen and (max-width: 650px) {
   #maindiv {
     width: 100%;
     position: sticky;
     z-index: 1000;
   }
   .logo {
-      width: 15%;
-      margin-right: 20px;
+    width: 15%;
+    margin-right: 20px;
   }
-  .search{
-   display: none;
-
+  .search {
+    display: none;
   }
   .search input {
-      display: none;
+    display: none;
   }
   .search span svg {
-     display: none;
+    display: none;
   }
   /* .search input {
       background: transparent;
@@ -156,14 +146,13 @@
       display: none;
   } */
   .search input::placeholder {
-      font-size: 2px;
+    font-size: 2px;
   }
   .icon_collection span svg {
-      display: none;
+    display: none;
   }
 
   .icon_collection span p {
-      display: none;
-
+    display: none;
   }
-}
+}