Migrated Wrapper styling to css modules

Author: Satoshi-Sh

components/containers/Wrapper/Wrapper.module.scss

@@ -0,0 +1,7 @@
+.wrapper {
+  padding: 1rem 0;
+
+  &.primary__accent {
+    background-color: var(--color-primary-accent);
+  }
+}

components/containers/Wrapper/index.js

@@ -1,5 +1,8 @@
-import S from './styles';
+import styles from './Wrapper.module.scss';
 
 export default function Wrapper({ customClass, children }) {
-  return <S.Wrapper $colorVarient={customClass}>{children}</S.Wrapper>;
+  const wrapperClass = customClass
+    ? `${styles.wrapper} ${styles[customClass]}`
+    : styles.wrapper;
+  return <div className={wrapperClass}>{children}</div>;
 }

components/containers/Wrapper/styles.js

@@ -7,6 +7,7 @@
   --color-grey: #d9d9d9;
   --color-white: #ffffff;
   --color-light-bg: #8cd5e8;
+  --color-primary-accent: #ffcc4c;
   --color-primary-content: #292929;
   --color-transparent: transparent;
   --color-box-shadow: rgba(0, 0, 0, 0.08);