style: adjust the kwoc logo in center

kossiitkgp · Nov 15, 2024 · 8b66256 · 8b66256
1 parent f3e2bfb
commit 8b66256
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 100 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -3,106 +3,108 @@ import { Link, useLocation } from "react-router-dom";
 import kwoc_logo from "../assets/kwoc_logo.png";
 import "../styles/Navbar.css";
 import {
-    ROUTER_PATHS,
-    GH_OAUTH_URL,
-    REGISTRATIONS_OPEN,
+  ROUTER_PATHS,
+  GH_OAUTH_URL,
+  REGISTRATIONS_OPEN,
 } from "../util/constants";
 import { useAuthContext } from '../util/auth';
 import { UserType } from '../util/types';
 
 function LoginButton() {
-    const authContext = useAuthContext();
-
-    return (
-      <>
-        {authContext.isAuthenticated ? (
-          <Link
-            to={
-              authContext.isRegistered
-                ? authContext.dashboardLink
-                : authContext.formLink
-            }
-          >
-            <img
-              className="profile-picture-navbar"
-              src={`https://github.com/${authContext.userData.username}.png`}
-            />
-          </Link>
-        ) : REGISTRATIONS_OPEN ? (
-          ["mentor", "student"].map((userType, i) => (
-            <button
-              className='reg-button'
-              key={i}
-              onClick={(e) => {
-                e.preventDefault();
-
-                authContext.setUserType(userType as UserType);
-                window.location.href=GH_OAUTH_URL
-              }}
-            >
-              {userType.toUpperCase()} LOGIN
-            </button>
-          ))
-        ) : (
-          <Link
-            to={GH_OAUTH_URL}
+  const authContext = useAuthContext();
+
+  return (
+    <>
+      {authContext.isAuthenticated ? (
+        <Link
+          to={
+            authContext.isRegistered
+              ? authContext.dashboardLink
+              : authContext.formLink
+          }
+        >
+          <img
+            className="profile-picture-navbar"
+            src={`https://github.com/${authContext.userData.username}.png`}
+          />
+        </Link>
+      ) : REGISTRATIONS_OPEN ? (
+        ["mentor", "student"].map((userType, i) => (
+          <button
+            className='reg-button'
+            key={i}
+            onClick={(e) => {
+              e.preventDefault();
+
+              authContext.setUserType(userType as UserType);
+              window.location.href = GH_OAUTH_URL
+            }}
           >
-            LOGIN
-          </Link>
-        )}
-      </>
-    );
-  }  
+            {userType.toUpperCase()} LOGIN
+          </button>
+        ))
+      ) : (
+        <Link
+          to={GH_OAUTH_URL}
+        >
+          LOGIN
+        </Link>
+      )}
+    </>
+  );
+}
 
 const Navbar = () => {
-    const location = useLocation();
-    const [LINKS, setLINKS] = useState([
-        { name: "Home", link: ROUTER_PATHS.HOME, isActive: false },
-        // { name: "Projects", link: ROUTER_PATHS.PROJECTS_LIST, isActive: false },
-        { name: "FAQs", link: ROUTER_PATHS.FAQ, isActive: false },
-    ]);
-    const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+  const [LINKS, setLINKS] = useState([
+    { name: "Home", link: ROUTER_PATHS.HOME, isActive: false },
+    // { name: "Projects", link: ROUTER_PATHS.PROJECTS_LIST, isActive: false },
+    { name: "FAQs", link: ROUTER_PATHS.FAQ, isActive: false },
+  ]);
+  const [isOpen, setIsOpen] = useState(false);
 
-    useEffect(() => {
-        setLINKS((prevLinks) =>
-            prevLinks.map((link) => ({
-                ...link,
-                isActive: link.link === location.pathname,
-            }))
-        );
-    }, [location.pathname]);
-
-    return (
-        <div className='navbar'>
-            <div className="container">
-                <Link to="/">
-                    <img
-                        className="logo"
-                        src={kwoc_logo}
-                        alt="KWoC Logo"
-                    />
-                </Link>
-                <div className="dots dot1"></div>
-                <div className="dots dot2"></div>
-                <div className="dots dot3"></div>
-                <div className="dots dot4"></div>
-                <div className="dots dot5"></div>
-                <div className="dots dot6"></div>
-            </div>
-            <ul className={`link-container ${isOpen ? 'open' : ''}`}>
-                {LINKS.map((link) => (
-                    <li key={link.name}>
-                        <Link to={link.link} className={link.isActive ? `link nav-glow` : `link`}>
-                            {link.name}
-                        </Link>
-                    </li>
-                ))}
+  useEffect(() => {
+    setLINKS((prevLinks) =>
+      prevLinks.map((link) => ({
+        ...link,
+        isActive: link.link === location.pathname,
+      }))
+    );
+  }, [location.pathname]);
 
-                <LoginButton />
-            </ul>
-            <div className='burger' onClick={() => setIsOpen(!isOpen)}>{isOpen ? '✖' : '☰'}</div>
+  return (
+    <div className='navbar'>
+      <div className='light-logo'>
+        <Link to="/">
+          <img
+            className="logo"
+            src={kwoc_logo}
+            alt="KWoC Logo"
+          />
+        </Link>
+        <div className="container">
+          <div className="dots dot1"></div>
+          <div className="dots dot2"></div>
+          <div className="dots dot3"></div>
+          <div className="dots dot4"></div>
+          <div className="dots dot5"></div>
+          <div className="dots dot6"></div>
         </div>
-    )
+      </div>
+      <ul className={`link-container ${isOpen ? 'open' : ''}`}>
+        {LINKS.map((link) => (
+          <li key={link.name}>
+            <Link to={link.link} className={link.isActive ? `link nav-glow` : `link`}>
+              {link.name}
+            </Link>
+          </li>
+        ))}
+
+        <LoginButton />
+      </ul>
+      <div className='burger' onClick={() => setIsOpen(!isOpen)}>{isOpen ? '✖' : '☰'}</div>
+    </div>
+  )
 }
 
 export default Navbar
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
@@ -10,8 +10,17 @@
 .logo {
     height: 60px;
     width: 60px;
-    animation: anti-rotate 20s linear infinite;
     cursor: pointer;
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 51%;
+    transform: translate(-50%,-50%);
+}
+
+.light-logo {
+    position: relative;
+    transform: scale(0.7);
 }
 
 .link-container {
@@ -93,6 +102,10 @@
     .burger {
         display: none;
     }
+
+    .light-logo{
+        transform: scale(0.9);
+    }
 }
 
 .link-container.open {
@@ -203,16 +216,6 @@
     }
 }
 
-@keyframes anti-rotate {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(-360deg);
-    }
-}
-
 /* Positions for each dot */
 .dot1 {
     background-color: rgba(217, 43, 68, 1);