Refactor/to scss decoration

CHANGELOG.md

@@ -175,7 +175,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Row
   - Container
   - Wrapper
-  - Extracted :root from themes.scss to globals.scss
+  - Decorations/Bracket
+  - Decorations/Stick
+
+- Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
 - Updated the prop name to propStyles in Container component to fix the name conflict that introduced a styling bug

components/decorations/Bracket/Bracket.module.scss

@@ -0,0 +1,42 @@
+@use '@/styles/mixins' as *;
+
+.homeBracket {
+  left: 0;
+  position: absolute;
+  transform: translate(10rem, -5rem);
+
+  @include desktop-breakpoint-plus {
+    transform: translate(50%, -5rem);
+    width: 30%;
+  }
+
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+}
+
+.yellowBracket {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+
+  @include tablet-max {
+    display: none;
+  }
+
+  @include tablet {
+    position: absolute;
+    top: 28%;
+    right: 120%;
+    width: 8rem;
+  }
+
+  @include desktop {
+    top: 25%;
+    right: 120%;
+  }
+
+  @include desktop-breakpoint-plus {
+    top: 45%;
+    right: 140%;
+  }
+}

components/decorations/Stick/Stick.module.scss

@@ -0,0 +1,15 @@
+@use '@/styles/mixins' as *;
+
+.homeStick {
+  right: 0;
+  position: absolute;
+  transform: translate(-10rem, -5rem);
+
+  @include desktop-breakpoint-plus-max {
+    transform: translate(-50%, -5rem);
+    width: 30%;
+  }
+  @include desktop-breakpoint-minus {
+    display: none;
+  }
+}

pages/contact.js

@@ -2,15 +2,16 @@ import { useState } from 'react';
 import ContactUsFormSubscribe from '@/components/ContactUs';
 import ContactUsCards from '@/components/ContactUs/ContactUsCards';
 import S from '@/styles/pages/contactStyles';
-
+import Bracket from '@/components/decorations/Bracket';
+import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 export default function ContactUs() {
   const [message, setMessage] = useState([]);
 
   return (
     <>
       <S.ContactUsContainer>
         <S.FormAndDecorations>
-          <S.YellowBracket />
+          <Bracket className={bracketStyles.yellowBracket} />
           <ContactUsFormSubscribe setMsg={setMessage} />
           <S.YellowColon src='/images/svg/yellow-colon.svg' />
           <S.ResponseMessage>

pages/index.js

@@ -1,6 +1,9 @@
 import TwoColumn from '@/components/containers/TwoColumn';
 import { CardsColumns } from '@/components/containers/CardColumns';
-import S from '@/styles/pages/homeStyles';
+import Bracket from '@/components/decorations/Bracket';
+import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
+import Stick from '@/components/decorations/Stick';
+import stickStyles from '@/components/decorations/Stick/Stick.module.scss';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { useTheme } from 'styled-components';
 
@@ -21,7 +24,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <S.Bracket />
+        <Bracket className={bracketStyles.homeBracket} />
         <TwoColumn
           title='Get involved.'
           content='Web Dev Path runs on volunteers. Here are the ways you can get involved with us:'
@@ -66,8 +69,7 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <S.Stick />
-
+        <Stick className={stickStyles.homeStick} />
         <TwoColumn
           title='Nonprofit?'
           content='Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how.'

styles/_mixins.scss

@@ -14,6 +14,12 @@
   }
 }
 
+@mixin tablet-max {
+  @media (max-width: $tablet-breakpoint) {
+    @content;
+  }
+}
+
 @mixin desktop {
   @media (min-width: $desktop-breakpoint) {
     @content;
@@ -26,6 +32,12 @@
   }
 }
 
+@mixin desktop-breakpoint-plus-max {
+  @media (max-width: $desktop-breakpoint-plus) {
+    @content;
+  }
+}
+
 @mixin medium-desktop {
   @media (min-width: $medium-desktop-breakpoint) {
     @content;

styles/pages/contactStyles.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import Bracket from '@/components/decorations/Bracket';
 
 const ContactUsContainer = styled.div`
   background-color: ${({ theme }) => theme.colors.lightBg};
@@ -43,40 +42,6 @@ const FormAndDecorations = styled.div`
   `}
 `;
 
-const YellowBracket = styled(Bracket)`
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-
-  ${props => css`
-    @media (max-width: ${props.theme.breakpoints.tablet}) {
-      display: none;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.tablet}) {
-      position: absolute;
-      top: 28%;
-      right: 120%;
-      width: 8rem;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktop}) {
-      top: 25%;
-      right: 120%;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktopPlus}) {
-      top: 45%;
-      right: 140%;
-    }
-  `}
-`;
-
 const YellowColon = styled.img`
   ${props => css`
     @media (max-width: ${props.theme.breakpoints.desktopMinus}) {
@@ -115,7 +80,6 @@ const ResponseMessage = styled.div`
 export default {
   ContactUsContainer,
   FormAndDecorations,
-  YellowBracket,
   YellowColon,
   ResponseMessage,
 };