refactor styled components and add id to navigation

marinakinalone · Dec 20, 2023 · 1ae0f68 · 1ae0f68
1 parent 3e11856
commit 1ae0f68
Show file tree

Hide file tree

Showing 13 changed files with 172 additions and 124 deletions.
diff --git a/app/components/About/CodingSkills.tsx b/app/components/About/CodingSkills.tsx
@@ -1,12 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import Subtitle from '../ui/Subtitle'
 import Container from '../ui/Container'
-
-// const Container = styled.div`
-// padding: 0;
-// margin-bottom: ${(props) => props.theme.spacing.xl};
-// `
+import Subtitle from '../ui/Subtitle'
 
 const SubContainer = styled(Container)`
  border-left: ${(props) => props.theme.border.highlight};

diff --git a/app/components/About/index.tsx b/app/components/About/index.tsx
@@ -14,19 +14,14 @@ const MainContainer = styled(Container)`
 `
 
 const TitleContainer = styled(Container)`
- ${(props) => {
- const { theme } = props
- return `
- border-top: ${theme.border.highlight};
- `
- }}
+ border-top: ${(props) => props.theme.border.highlight};
 `
 
 const InnerContainer = styled(Container)``
 
 const About = () => {
  return (
- <MainContainer>
+ <MainContainer id="about">
  <TitleContainer>
  <Title>{STRINGS.title}</Title>
  </TitleContainer>

diff --git a/app/components/Contact/index.tsx b/app/components/Contact/index.tsx
@@ -15,9 +15,10 @@ const MainContainer = styled(Container)`
 `
 const TitleContainer = styled(Container)`
  ${(props) => {
- const { theme } = props
+ const { color } = props.theme
+
  return `
- border-right: 10rem solid ${theme.color.neutral};
+ border-right: 10rem solid ${color.neutral};
  @media ${device.desktopMinWidth} {
  border-right-width: 30rem;
  }
@@ -30,20 +31,20 @@ const ContactListContainer = styled.ul`
  list-style-type: none;
 `
 const ContactListItem = styled.li`
- margin: 1rem 0rem;
+ margin: ${(props) => props.theme.spacing.s} 0rem;
 `
 const ContactLink = styled.a`
- margin-left: -1.5rem;
+ margin-left: -${(props) => props.theme.spacing.s};
 `
 const ContactIcon = styled.img`
  max-height: 1rem;
- padding-right: 0.5rem;
+ padding-right: ${(props) => props.theme.spacing.xs};
  vertical-align: middle;
 `
 
 const Contact = () => {
  return (
- <MainContainer>
+ <MainContainer id="contact">
  <TitleContainer>
  <Title>{STRINGS.title}</Title>
  </TitleContainer>

diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
@@ -11,11 +11,16 @@ const FooterContainter = styled.footer`
 `
 
 const FooterIcon = styled.img`
- max-height: ${(props) => props.theme.fontSize.regular.xs};
- margin-bottom: -0.1rem;
- @media ${device.desktopMinWidth} {
- max-height: ${(props) => props.theme.fontSize.desktop.xs};
- }
+ ${(props) => {
+ const { fontSize } = props.theme
+
+ return `
+ max-height: ${fontSize.regular.xs};
+ margin-bottom: -0.1rem;
+ @media ${device.desktopMinWidth} {
+ max-height: ${fontSize.desktop.xs};
+ `
+ }}
 `
 
 const Footer = () => {

diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -3,12 +3,12 @@ import styled from 'styled-components'
 
 const HeaderContainer = styled.header`
  ${(props) => {
- const { theme } = props
+ const { border, spacing } = props.theme
  return `
- border-bottom: ${theme.border.regular};
- padding: 0 0.5rem;
- margin-bottom: ${theme.spacing.l}; 
- margin-top: ${theme.spacing.s};
+ border-bottom: ${border.regular};
+ padding: 0 ${spacing.ws} ;
+ margin-bottom: ${spacing.l}; 
+ margin-top: ${spacing.s};
  `
  }}
 `

diff --git a/app/components/Navigation/Lightswitch.tsx b/app/components/Navigation/Lightswitch.tsx
@@ -6,42 +6,54 @@ const Wrapper = styled.label`
  position: absolute;
  width: 70px;
  height: 35px;
- margin-top: 0.5rem;
+ margin-top: ${(props) => props.theme.spacing.xs};
 `
 
 const Switch = styled.input`
- opacity: 0;
- width: 0;
- height: 0;
- &:checked + .slider {
- background-color: ${({ theme }) => theme.color.background};
- box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.neutral};
- }
- &:checked + .slider::before {
- transform: translateX(34px);
- background-color: ${({ theme }) => theme.color.neutral};
- }
+ ${(props) => {
+ const { color } = props.theme
+
+ return `
+ opacity: 0;
+ width: 0;
+ height: 0;
+ &:checked + .slider {
+ background-color: ${color.background};
+ box-shadow: inset 0 0 0 1px ${color.neutral};
+ }
+ &:checked + .slider::before {
+ transform: translateX(34px);
+ background-color: ${color.neutral};
+ }
+ `
+ }}
 `
 
 const Slider = styled.span`
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: ${({ theme }) => theme.color.secondary};
- box-shadow: inset 0 0 0 1px ${({ theme }) => theme.color.neutral};
- transition: 0.4s;
- &:before {
+ ${(props) => {
+ const { color } = props.theme
+
+ return `
  position: absolute;
- content: '';
- height: 27px;
- width: 27px;
- left: 4px;
- bottom: 4px;
- background-color: ${({ theme }) => theme.color.neutral};
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: ${color.secondary};
+ box-shadow: inset 0 0 0 1px ${color.neutral};
  transition: 0.4s;
+ &:before {
+ position: absolute;
+ content: '';
+ height: 27px;
+ width: 27px;
+ left: 4px;
+ bottom: 4px;
+ background-color: ${color.neutral};
+ transition: 0.4s;
+ `
+ }}
  }
 `
 

diff --git a/app/components/Navigation/index.tsx b/app/components/Navigation/index.tsx
@@ -22,29 +22,35 @@ const NavigationList = styled.ul`
 `
 
 const NavigationItem = styled.li`
- text-align: center;
- min-height: 100px;
- margin-bottom: ${({ theme }) => theme.spacing.xl};
- display: flex;
- justify-content: center;
- &:hover {
- .button {
- color: ${({ theme }) => theme.color.hover};
- border-color: ${({ theme }) => theme.color.hover};
- }
- .icon {
- filter: ${({ theme }) => theme.filter.hover};
- }
- }
- &:focus,
- &:active {
- .button {
- border-color: ${({ theme }) => theme.color.focus};
- color: ${({ theme }) => theme.color.focus};
- }
- .icon {
- filter: ${({ theme }) => theme.color.focus};
+ ${(props) => {
+ const { color, filter, spacing } = props.theme
+
+ return `
+ text-align: center;
+ min-height: 100px;
+ margin-bottom: ${spacing.xl};
+ display: flex;
+ justify-content: center;
+ &:hover {
+ .button {
+ color: ${color.hover};
+ border-color: ${color.hover};
+ }
+ .icon {
+ filter: ${filter.hover};
+ }
  }
+ &:focus,
+ &:active {
+ .button {
+ border-color: ${color.focus};
+ color: ${color.focus};
+ }
+ .icon {
+ filter: ${color.focus};
+ }
+ `
+ }}
 `
 
 const SwitchContainer = styled.li`
@@ -53,14 +59,20 @@ const SwitchContainer = styled.li`
 `
 
 const Button = styled.a`
- width: 80px;
- height: 80px;
- text-decoration: none;
- position: absolute;
- margin: 0 auto;
- border-radius: 50%;
- background-color: ${({ theme }) => theme.color.neutral};
- border: 3px solid ${({ theme }) => theme.color.neutral};
+ ${(props) => {
+ const { color } = props.theme
+
+ return `
+ width: 80px;
+ height: 80px;
+ text-decoration: none;
+ position: absolute;
+ margin: 0 auto;
+ border-radius: 50%;
+ background-color: ${color.neutral};
+ border: 3px solid ${color.neutral};
+ `
+ }}
 `
 
 const Icon = styled.img`

diff --git a/app/components/Projects/MoreProjects.tsx b/app/components/Projects/MoreProjects.tsx
@@ -16,12 +16,12 @@ const ArrowText = styled.span``
 
 const AnimatedArrow = styled.a<{ theme: DefaultTheme }>`
  ${(props) => {
- const { theme } = props
+ const { color } = props.theme
 
  return `
  text-decoration: none;
  display: inline-block;
- color: ${theme.color.neutral};
+ color: ${color.neutral};
  position: relative;
  transition: all 0.2s;
  
@@ -49,15 +49,15 @@ const AnimatedArrow = styled.a<{ theme: DefaultTheme }>`
  }
  &:focus,
  &:active {
- color: ${theme.color.focus};
+ color: ${color.focus};
  outline: none;
  > .arrowleft {
  > .shaft {
- background-color: ${theme.color.focus};
+ background-color: ${color.focus};
  
  &:before,
  &:after {
- background-color: ${theme.color.focus};
+ background-color: ${color.focus};
  }
  }
  }
@@ -114,7 +114,8 @@ const AnimatedArrow = styled.a<{ theme: DefaultTheme }>`
 
 const Arrow = styled.span<{ theme: DefaultTheme }>`
  ${(props) => {
- const { theme } = props
+ const { color } = props.theme
+
  return `
  width: ${SHAFT_WIDTH}px;
  transition: all 0.2s;
@@ -126,7 +127,7 @@ const Arrow = styled.span<{ theme: DefaultTheme }>`
  
  > .shaft {
  width: 0;
- background-color: ${theme.color.neutral};
+ background-color: ${color.neutral};
  
  &:before,
  &:after {
@@ -168,7 +169,7 @@ const Arrow = styled.span<{ theme: DefaultTheme }>`
  }
  
  > .shaft {
- background-color: ${theme.color.neutral};
+ background-color: ${color.neutral};
  display: block;
  height: ${SHAFT_THICKNESS}px;
  position: relative;
@@ -178,7 +179,7 @@ const Arrow = styled.span<{ theme: DefaultTheme }>`
  
  &:before,
  &:after {
- background-color: ${theme.color.neutral};
+ background-color: ${color.neutral};
  content: '';
  display: block;
  height: ${ARROW_HEAD_THICKNESS}px;