refactor: destructuring & removing old files

calblueprint · May 18, 2024 · 4e1bcb8 · 4e1bcb8
1 parent 126707e
commit 4e1bcb8
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 138 deletions.
diff --git a/assets/icons/Icon.tsx b/assets/icons/Icon.tsx
diff --git a/assets/icons/logo.svg b/assets/icons/logo.svg
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
@@ -101,15 +101,15 @@ export const LinkButton = styled(Link)`
   ${ButtonStyles}
   text-decoration: none;
 `;
+
 export const SmallLinkButton = styled(Link)`
   ${ButtonStyles}
   text-decoration: none;
   padding: 0.25rem 0.75rem;
   font-weight: 400;
   border-radius: 0.313rem; // 5px
   border: 2px solid
-    ${props =>
-      props.$primaryColor ? props.$primaryColor : props.$secondaryColor};
+    ${({ $primaryColor, $secondaryColor }) => $primaryColor || $secondaryColor};
   &:hover {
     color: white !important;
   }
@@ -274,6 +274,7 @@ export const BigAsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(
     );
   },
 );
+
 BigAsyncButton.displayName = 'BigAsyncButton';
 
 export const BigBlueAsyncButton = forwardRef<
@@ -294,3 +295,38 @@ export const BigBlueAsyncButton = forwardRef<
   </BigAsyncButton>
 ));
 BigBlueAsyncButton.displayName = 'BigBlueAsyncButton';
+
+export const ProfileButton = styled(Link)`
+  ${sans.style}
+
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  outline: none;
+  background: none;
+  border: none;
+
+  color: white;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    width: 1.5625rem;
+    height: 1.75rem;
+    background-image: url("data:image/svg+xml,%3Csvg width='17' height='20' viewBox='0 0 18 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.19565 10.5557C10.5135 10.5557 11.7774 10.0289 12.7092 9.0912C13.6411 8.15352 14.1646 6.88175 14.1646 5.55566C14.1646 4.22958 13.6411 2.95781 12.7092 2.02013C11.7774 1.08245 10.5135 0.555664 9.19565 0.555664C7.87781 0.555664 6.61394 1.08245 5.68208 2.02013C4.75022 2.95781 4.22671 4.22958 4.22671 5.55566C4.22671 6.88175 4.75022 8.15352 5.68208 9.0912C6.61394 10.0289 7.87781 10.5557 9.19565 10.5557ZM7.42158 12.4307C3.59783 12.4307 0.5 15.5479 0.5 19.3955C0.5 20.0361 1.0163 20.5557 1.65295 20.5557H16.7384C17.375 20.5557 17.8913 20.0361 17.8913 19.3955C17.8913 15.5479 14.7935 12.4307 10.9697 12.4307H7.42158Z' fill='white'/%3E%3C/svg%3E");
+    background-position: center;
+    background-size: 1.5625rem 1.75rem;
+    background-repeat: no-repeat;
+  }
+`;
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
@@ -3,12 +3,11 @@
 import { useMemo } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import ProfileButton from '@/components/ProfileButton';
+import Icon from '@/components/Icon';
 import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
 import { useProfile } from '@/utils/ProfileProvider';
-import Icon from '../../../assets/icons/Icon';
-import { SmallLinkButton } from '../Buttons';
+import { ProfileButton, SmallLinkButton } from '../Buttons';
 import * as Styles from './style';
 
 export default function NavBar() {
@@ -79,7 +78,7 @@ export default function NavBar() {
         <Styles.NoUnderlineLink
           href={link.path}
           $color="white"
-          isactive={link.active}
+          $isActive={link.active}
         >
           {link.name}
         </Styles.NoUnderlineLink>
@@ -97,7 +96,7 @@ export default function NavBar() {
     <Styles.NavBarContainer>
       <Styles.NavBarSectionDiv>
         <Link href="/">
-          <Icon type="logo" />
+          <Icon type="IJPLogo" />
         </Link>
         {navlinks.map(NavLink => renderLink(NavLink))}
       </Styles.NavBarSectionDiv>

diff --git a/src/components/NavBar/style.ts b/src/components/NavBar/style.ts
@@ -29,11 +29,11 @@ export const AuthButtons = styled.div`
   top: 0;
   right: 0;
 `;
-export const NoUnderlineLink = styled(LinkColored)<{ isactive: boolean }>`
+export const NoUnderlineLink = styled(LinkColored)<{ $isActive: boolean }>`
   ${sans.style}
   text-decoration: none;
   margin: 10px;
-  font-weight: ${props => (props.isactive ? '600' : '400')};
+  font-weight: ${({ $isActive }) => ($isActive ? '600' : '400')};
   cursor: pointer;
 `;