Migrated Bracket to scss

Author: Satoshi-Sh

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/Bracket.js components/decorations/Bracket/index.jscomponents/decorations/Bracket.js renamed to components/decorations/Bracket/index.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/contact.js

@@ -1,6 +1,7 @@
 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 RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { useTheme } from 'styled-components';
 
@@ -21,7 +22,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 +67,6 @@ export default function Home() {
       </RevealContentContainer>
 
       <RevealContentContainer>
-        <S.Stick />
-
         <TwoColumn
           title='Nonprofit?'
           content='Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how.'

pages/index.js

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

styles/_mixins.scss

@@ -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,
 };

styles/pages/contactStyles.js

@@ -1,24 +1,6 @@
 import styled, { css } from 'styled-components';
-import Bracket from '@/components/decorations/Bracket';
 import Stick from '@/components/decorations/Stick';
 
-const HomeBracket = styled(Bracket)`
-  left: 0;
-  position: absolute;
-  transform: translate(10rem, -5rem);
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktopPlus}) {
-      transform: translate(50%, -5rem);
-      width: 30%;
-    }
-  `}
-  ${props => css`
-    @media (max-width: ${props.theme.breakpoints.desktopMinus}) {
-      display: none;
-    }
-  `}
-`;
 const HomeStick = styled(Stick)`
   right: 0;
   position: absolute;
@@ -38,4 +20,4 @@ const HomeStick = styled(Stick)`
   `}
 `;
 
-export default { Bracket: HomeBracket, Stick: HomeStick };
+export default { Stick: HomeStick };