From bc35bf5a6b676b17e6ea62bc15181fec3b012a4b Mon Sep 17 00:00:00 2001 From: satoshi-sh Date: Sun, 3 Aug 2025 07:44:51 -0500 Subject: [PATCH 1/3] Migrated Bracket to scss --- .../decorations/Bracket/Bracket.module.scss | 42 +++++++++++++++++++ .../{Bracket.js => Bracket/index.js} | 0 pages/contact.js | 5 ++- pages/index.js | 7 ++-- styles/_mixins.scss | 6 +++ styles/pages/contactStyles.js | 36 ---------------- styles/pages/homeStyles.js | 20 +-------- 7 files changed, 55 insertions(+), 61 deletions(-) create mode 100644 components/decorations/Bracket/Bracket.module.scss rename components/decorations/{Bracket.js => Bracket/index.js} (100%) diff --git a/components/decorations/Bracket/Bracket.module.scss b/components/decorations/Bracket/Bracket.module.scss new file mode 100644 index 00000000..ffd7792d --- /dev/null +++ b/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%; + } +} diff --git a/components/decorations/Bracket.js b/components/decorations/Bracket/index.js similarity index 100% rename from components/decorations/Bracket.js rename to components/decorations/Bracket/index.js diff --git a/pages/contact.js b/pages/contact.js index 38a584d1..c529dbdc 100644 --- a/pages/contact.js +++ b/pages/contact.js @@ -2,7 +2,8 @@ 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([]); @@ -10,7 +11,7 @@ export default function ContactUs() { <> - + diff --git a/pages/index.js b/pages/index.js index 62b88b97..62f44aac 100644 --- a/pages/index.js +++ b/pages/index.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() { - + - - 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, }; diff --git a/styles/pages/homeStyles.js b/styles/pages/homeStyles.js index 2caf03ec..c9eecc60 100644 --- a/styles/pages/homeStyles.js +++ b/styles/pages/homeStyles.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 }; From 22897aee4e9aa4b3df687cc37159db591bf9869c Mon Sep 17 00:00:00 2001 From: satoshi-sh Date: Sun, 3 Aug 2025 08:11:17 -0500 Subject: [PATCH 2/3] Migrated Stick to scss --- .../decorations/Stick/Stick.module.scss | 15 ++++++++++++ .../decorations/{Stick.js => Stick/index.js} | 0 pages/index.js | 3 +++ styles/_mixins.scss | 6 +++++ styles/pages/homeStyles.js | 23 ------------------- 5 files changed, 24 insertions(+), 23 deletions(-) create mode 100644 components/decorations/Stick/Stick.module.scss rename components/decorations/{Stick.js => Stick/index.js} (100%) delete mode 100644 styles/pages/homeStyles.js diff --git a/components/decorations/Stick/Stick.module.scss b/components/decorations/Stick/Stick.module.scss new file mode 100644 index 00000000..3239f3ab --- /dev/null +++ b/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; + } +} diff --git a/components/decorations/Stick.js b/components/decorations/Stick/index.js similarity index 100% rename from components/decorations/Stick.js rename to components/decorations/Stick/index.js diff --git a/pages/index.js b/pages/index.js index 62f44aac..6a771041 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,6 +2,8 @@ import TwoColumn from '@/components/containers/TwoColumn'; import { CardsColumns } from '@/components/containers/CardColumns'; 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'; @@ -67,6 +69,7 @@ export default function Home() { + css` - @media (max-width: ${props.theme.breakpoints.desktopPlus}) { - transform: translate(-50%, -5rem); - width: 30%; - } - `} - - ${props => css` - @media (max-width: ${props.theme.breakpoints.desktopMinus}) { - display: none; - } - `} -`; - -export default { Stick: HomeStick }; From c4f19363724f9cf7ee8aa5bfe2173ab014751f92 Mon Sep 17 00:00:00 2001 From: satoshi-sh Date: Sun, 3 Aug 2025 08:13:00 -0500 Subject: [PATCH 3/3] Updated CHANGELOG.md --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 18701ee9..8659bc43 100644 --- a/CHANGELOG.md +++ b/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