Merge main branch into refactor/to-scss-Wrapper

Author: Satoshi-Sh

CHANGELOG.md

@@ -171,10 +171,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - BlogPostsContainer
   - RevealContentContainer
   - Member
+  - Row
   - Container
   - Wrapper
-  - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
-  - Updated SearchInput width to 100% for better styling
-  - Reverted the prop name to styles in Container component as the change of the name introduced a styling bug 
-  - Extracted :root from themes.scss to globals.scss 
-  - Created a combineClasses function to clean up conditional class handling
+- Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
+- Updated SearchInput width to 100% for better styling
+- Reverted the prop name to styles in Container component as the change of the name introduced a styling bug 
+- Rename RowAlignLeft to Row
+- Extracted :root from themes.scss to globals.scss
+- Created a combineClasses function to clean up conditional class handling
+

components/containers/Row/Row.module.scss

@@ -0,0 +1,5 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+}

components/containers/Row/index.js

@@ -1,9 +1,5 @@
-import S from './styles';
+import styles from './Row.module.scss';
 
-export function Row({ customClass, children }) {
-  return <S.Row>{children}</S.Row>;
-}
-
-export function RowAlignLeft({ customClass, children }) {
-  return <S.RowAlignLeft>{children}</S.RowAlignLeft>;
+export function Row({ children }) {
+  return <div className={styles.row}>{children}</div>;
 }

components/containers/Row/styles.js

@@ -4,7 +4,7 @@ import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoa
 import Title from '@/components/snippets/Title';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
-import { RowAlignLeft } from '@/components/containers/Row';
+import { Row } from '@/components/containers/Row';
 import Member from '@/components/containers/Member';
 import { whoWeAre } from '@/utils/about';
 import { useTheme } from 'styled-components';
@@ -230,7 +230,7 @@ export default function AboutUs() {
         <Wrapper customClass='primary__accent'>
           <Container>
             <Title title='Who we are' />
-            <RowAlignLeft>
+            <Row>
               {whoWeAre.map(_ => {
                 return (
                   <Member
@@ -245,7 +245,7 @@ export default function AboutUs() {
                   />
                 );
               })}
-            </RowAlignLeft>
+            </Row>
           </Container>
         </Wrapper>
       </RevealContentContainer>