add Container component

package.json

@@ -30,7 +30,7 @@
     "lint:js": "eslint src/**/*.{js,jsx}",
     "lint": "eslint .",
     "lint:fix": "eslint --fix",
-    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
+    "format": "prettier --write ."
   },
   "eslintConfig": {
     "extends": [

public/404.html

@@ -42,7 +42,7 @@
             .join('/')
             .replace(/&/g, '~and~') +
           (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-          l.hash
+          l.hash,
       );
     </script>
   </head>

public/index.html

@@ -50,7 +50,7 @@
           window.history.replaceState(
             null,
             null,
-            l.pathname.slice(0, -1) + decoded + l.hash
+            l.pathname.slice(0, -1) + decoded + l.hash,
           );
         }
       })(window.location);

src/assets/styles/_mixins.scss

@@ -1,62 +1,62 @@
 @mixin container {
-    width: 100%;
-    padding-left: 16px;
-    padding-right: 16px;
-    margin: 0 auto;
-
-    @media screen and (min-width: 375px) {
-        width: 375px;
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-
-    @media screen and (min-width: 768px) {
-        width: 768px;
-        padding-left: 32px;
-        padding-right: 32px;
-    }
-
-    @media screen and (min-width: 1280px) {
-        min-width: 1280px;
-        max-width: 1440px;
-        padding-left: 24px;
-        padding-right: 24px;
-    }
+  width: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin: 0 auto;
+
+  @media screen and (min-width: 375px) {
+    width: 375px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  @media screen and (min-width: 768px) {
+    width: 768px;
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  @media screen and (min-width: 1280px) {
+    min-width: 1280px;
+    max-width: 1440px;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
 }
 
 @mixin visually-hidden {
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    border: 0;
-    padding: 0;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    margin: -1px;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  margin: -1px;
 }
 
 @mixin mobileSmall {
-    @media screen and (max-width: 374px) {
-        @content;
-    }
+  @media screen and (max-width: 374px) {
+    @content;
+  }
 }
 
 @mixin mobile {
-    @media screen and (min-width: 375px) and (max-width: 767px) {
-        @content;
-    }
+  @media screen and (min-width: 375px) and (max-width: 767px) {
+    @content;
+  }
 }
 
 @mixin tablet {
-    @media screen and (min-width: 768px) and (max-width: 1279px) {
-        @content;
-    }
+  @media screen and (min-width: 768px) and (max-width: 1279px) {
+    @content;
+  }
 }
 
 @mixin desktop {
-    @media screen and (min-width: 1280px) {
-        @content;
-    }
-}
+  @media screen and (min-width: 1280px) {
+    @content;
+  }
+}

src/assets/styles/_reset.scss

@@ -2,13 +2,13 @@
 @import './vars';
 
 html {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 p,
@@ -18,20 +18,20 @@ h3,
 h4,
 h5,
 h6 {
-    margin: 0;
+  margin: 0;
 }
 
 ul {
-    list-style: none;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
+  list-style: none;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
 }
 
 img {
-    display: block;
+  display: block;
 }
 
 a {
-    text-decoration: none;
-}
+  text-decoration: none;
+}

src/assets/styles/_vars.scss

@@ -1,15 +1,17 @@
-$accent-color: #BEDBB0;
-$accent-bright-color: #5255BC;
+$accent-color: #bedbb0;
+$accent-bright-color: #5255bc;
 $black-color: #121212;
-$dark-color: #1F1F1F;
-$white-color: #FFFFFF;
-$off-white-color: #F6F6F7;
+$dark-color: #1f1f1f;
+$white-color: #ffffff;
+$off-white-color: #f6f6f7;
 $black-text-color: #161616;
-$white-text-color: #FFFFFF;
-$priority-low-color: #8FA1D0;
-$priority-medium-color: #E09CB5;
-$priority-high-color: #BEDBB0;
+$white-text-color: #ffffff;
+$priority-low-color: #8fa1d0;
+$priority-medium-color: #e09cb5;
+$priority-high-color: #bedbb0;
 
-
-
-$start-background-color: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(190, 219, 176, 1) 100%);
+$start-background-color: linear-gradient(
+  180deg,
+  rgba(255, 255, 255, 1) 0%,
+  rgba(190, 219, 176, 1) 100%
+);

src/components/Container.jsx

@@ -0,0 +1,11 @@
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+
+export const Container = ({ children, className = '' }) => {
+  return <div className={clsx('container', className)}>{children}</div>;
+};
+
+Container.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};

src/index.scss

@@ -4,23 +4,23 @@
 @import './assets/styles/mixins';
 
 @font-face {
-  font-family: "Poppins-Regular";
-  src: local("Poppins-Regular"),
-    url("./assets/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
+  font-family: 'Poppins-Regular';
+  src: local('Poppins-Regular'),
+    url('./assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
   font-weight: 400;
 }
 
 @font-face {
-  font-family: "Poppins-Medium";
-  src: local("Poppins-Medium"),
-    url("./assets/fonts/Poppins/Poppins-Medium.ttf") format("truetype");
+  font-family: 'Poppins-Medium';
+  src: local('Poppins-Medium'),
+    url('./assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
   font-weight: 500;
 }
 
 @font-face {
-  font-family: "Poppins-SemiBold";
-  src: local("Poppins-SemiBold"),
-    url("./assets/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
+  font-family: 'Poppins-SemiBold';
+  src: local('Poppins-SemiBold'),
+    url('./assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
   font-weight: 500;
 }
 
@@ -32,7 +32,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
   color: $white-text-color;
-  
+
   background-color: $dark-color;
 }
 
@@ -44,3 +44,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.container {
+  @include container;
+}