Merge pull request #34 from DevBigEazi/staging

Staging

src/components/Navbar.jsx

@@ -10,13 +10,23 @@ const Navbar = () => {
     <header className="bg-linen border-b-[1px] border-b-[#00000080] py-7 px-6 w-full absolute z-10 max-sm:py-4 max-sm:px-3.5">
       <nav className=" flex justify-between items-center max-container">
         <a href="/">
+          {/* Desktop */}
           <img
-            className="max-sm:w-[100px]"
+            className="max-sm:w-[100px] max-[390px]:hidden"
             src={icons.fullLogoBlue}
             alt="logo"
             width={120}
             height={20}
           />
+
+          {/* small phones */}
+          <img
+            className="hidden max-[390px]:block"
+            src={icons.logoBlue}
+            alt="logo"
+            width={120}
+            height={20}
+          />
         </a>
 
         <div className="h-11 w-55 border-[1px] border-primary transition-all duration-[0.5s] hover:bg-whitesmoke rounded-lg flex items-center py-3 px-7 max-sm:hidden">
@@ -46,6 +56,7 @@ const Navbar = () => {
                   width={100}
                   height={20}
                 />
+
                 <img
                   src={icons.crossSmall}
                   alt="close icon"

src/constants/icons.js

@@ -1,9 +1,9 @@
-import crossSmall from '../assets/icons/cross-small.png';
-import fullLogoBlue from '../assets/icons/full_logo_blue.png';
-import linkedin from '../assets/icons/linkedin.png';
-import logoBlue from '../assets/icons/logo_blue.png';
-import menuBurger from '../assets/icons/menu-burger.png';
-import telegram from '../assets/icons/telegram.png';
-import x from '../assets/icons/x.png';
+import crossSmall from '../assets/icons/cross-small.svg';
+import fullLogoBlue from '../assets/icons/full-logo-blue.svg';
+import linkedin from '../assets/icons/linkedin.svg';
+import logoBlue from '../assets/icons/logo-blue.svg';
+import menuBurger from '../assets/icons/menu-burger.svg';
+import telegram from '../assets/icons/telegram.svg';
+import x from '../assets/icons/x.svg';
 
 export default { crossSmall, fullLogoBlue, linkedin, logoBlue, menuBurger, telegram, x };

src/constants/images.js

@@ -1,11 +1,8 @@
-import balanceDesktop from '../assets/images/balance-desktop.png';
-import balanceMobile from '../assets/images/balance-mobile.png';
-import heroDesktop from '../assets/images/hero-desktop.png';
-import heroMobile from '../assets/images/hero-mobile.png';
-import swapDesktop from '../assets/images/swap-desktop.png';
-import swapMobile from '../assets/images/swap-mobile.png';
-import swap from '../assets/images/swap.png';
+import balanceDesktop from '../assets/images/balance-desktop.svg';
+import balanceMobile from '../assets/images/balance-mobile.svg';
+import heroDesktop from '../assets/images/hero-desktop.svg';
+import heroMobile from '../assets/images/hero-mobile.svg';
+import swapDesktop from '../assets/images/swap-desktop.svg';
+import swapMobile from '../assets/images/swap-mobile.svg';
 
-
-
-export default { balanceDesktop, balanceMobile, heroDesktop, heroMobile, swapDesktop, swapMobile, swap };
+export default { balanceDesktop, balanceMobile, heroDesktop, heroMobile, swapDesktop, swapMobile, };