Merge pull request #258 from Web-Dev-Path/refactor/to-scss-Container

Refactor/to scss container

Author: Satoshi-Sh

CHANGELOG.md

@@ -168,6 +168,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - BlogPostsContainer
   - RevealContentContainer
   - Member
+  - Container
 
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling 

components/containers/Container/Container.module.scss

@@ -0,0 +1,7 @@
+@use '@/styles/variables' as *;
+
+.container {
+  margin: 0 auto;
+  width: 90%;
+  max-width: $large-desktop-breakpoint;
+}

components/containers/Container/index.js

@@ -1,9 +1,9 @@
-import S from './styles';
+import styles from './Container.module.scss';
 
-export default function Container({ className, children, styles }) {
+export default function Container({ className, children, style }) {
   return (
-    <S.Container className={className} style={styles}>
+    <div className={`${styles.container} ${className || ''}`} style={style}>
       {children}
-    </S.Container>
+    </div>
   );
 }

components/containers/Container/styles.js

@@ -1,4 +1,5 @@
 @use '@/styles/mixins' as *;
+@use '@/styles/variables' as *;
 
 .card {
   margin: 1rem 1rem 0 0.5rem;
@@ -25,15 +26,15 @@
 
 .name {
   font-style: italic;
-  font-family: var(--font-heading);
+  font-family: $heading-font;
   font-size: 1.5rem;
   color: var(--color-primary-content);
   margin-bottom: 0px;
   line-height: unset;
 }
 
 %headingStyle {
-  font-family: var(--font-heading);
+  font-family: $heading-font;
   font-size: 1rem;
   color: var(--color-primary-content);
   text-align: left;

components/containers/Member/Member.module.scss

@@ -11,7 +11,6 @@
   --color-box-shadow: rgba(0, 0, 0, 0.08);
   --dark-bg: #023047;
   --error: #be1313;
-  --font-heading: 'Open Sans';
 }
 
 // placeholder colors