👌 IMPROVE: Add resobin logo

relaxxpls · Dec 31, 2021 · 0623c91 · 0623c91
1 parent 2ccf906
commit 0623c91
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 36 deletions.
diff --git a/src/assets/svgs/logo.svg b/src/assets/svgs/logo.svg
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -1,22 +1,37 @@
 import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
-import { ResoBinLogo } from 'components/shared'
+import { ReactComponent as ResoBinLogo } from 'assets/svgs/logo.svg'
+import { Divider, ResoBinLogo as ResoBinText } from 'components/shared'
 import { displayYear } from 'helpers/format'
+import { useResponsive } from 'hooks'
 import { selectCurrentSemester } from 'store/courseSlice'
 import { device } from 'styles/responsive'
 
 const Header = () => {
-  const { isAuthenticated } = useSelector((state) => state.auth)
   const latestSemester = useSelector(selectCurrentSemester)
+  const { isMobile } = useResponsive(device.tablet)
 
   return (
     <Container>
-      <ResoBinLogo size="1.5rem" />
-      {isAuthenticated && latestSemester && (
+      {!isMobile && (
+        <TextContainer to="/">
+          <ResoBinText size="1.5rem" />
+        </TextContainer>
+      )}
+
+      <LogoContainer to="/">
+        <ResoBinLogo width="36" alt="logo" />
+      </LogoContainer>
+
+      {!isMobile && latestSemester && (
         <Term>
-          AY {displayYear(latestSemester)}
-          &nbsp;| {latestSemester.season}
+          <span>{latestSemester.season} sem</span>
+
+          <Divider margin="1px 0" style={{ borderColor: '#ffffff88' }} />
+
+          <span>AY {displayYear(latestSemester)}</span>
         </Term>
       )}
     </Container>
@@ -25,6 +40,21 @@ const Header = () => {
 
 export default Header
 
+const TextContainer = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  width: ${({ theme }) => theme.asideWidthLeft};
+`
+
+const LogoContainer = styled(Link)`
+  height: 100%;
+  display: flex;
+  align-items: center;
+`
+
 const Container = styled.div`
   position: sticky;
   top: 0;
@@ -39,21 +69,19 @@ const Container = styled.div`
 `
 
 const Term = styled.span`
-  display: none;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  padding: 0 1.5rem;
+  color: ${({ theme }) => theme.textColor};
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 80%;
+  letter-spacing: 1.5px;
+  white-space: nowrap;
   text-transform: uppercase;
-
-  @media ${device.min.md} {
-    position: absolute;
-    right: 0;
-    display: flex;
-    padding: 0 1.5rem;
-    color: ${({ theme }) => theme.textColor};
-    font-weight: 400;
-    font-size: 0.875rem;
-    line-height: 80%;
-    letter-spacing: 1.5px;
-    white-space: nowrap;
-  }
+  text-align: center;
 
   @media ${device.min.lg} {
     padding: 0 0.75rem;

diff --git a/src/components/shared/ResoBinLogo.jsx b/src/components/shared/ResoBinLogo.jsx
@@ -1,11 +1,13 @@
-import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
-const LogoContainer = styled(Link)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
+const ResoBinLogo = ({ size }) => (
+  <div>
+    <Title size={size}>ResoBin</Title>
+    <Underline size={size} />
+  </div>
+)
+
+export default ResoBinLogo
 
 const Title = styled.div`
   color: ${({ theme }) => theme.logo};
@@ -16,17 +18,8 @@ const Title = styled.div`
 `
 
 const Underline = styled.div`
-  width: 97%;
+  width: 100%;
   height: calc(${({ size }) => size} / 9);
   margin-bottom: 7px;
   background: ${({ theme }) => theme.logo};
 `
-
-const ResoBinLogo = ({ size }) => (
-  <LogoContainer to="/">
-    <Title size={size}>ResoBin</Title>
-    <Underline size={size} />
-  </LogoContainer>
-)
-
-export default ResoBinLogo