fix(Stylelint): Fix stylelint issues

package.json

@@ -10,7 +10,7 @@
     "prebuild": "rimraf dist",
     "build": "cross-env NODE_ENV=production webpack --env=prod",
     "lint": "eslint src --ext .js --ext .jsx",
-    "stylelint": "stylelint src/**/*.scss src/styles/**/*.scss",
+    "stylelint": "stylelint src/components/**/*.scss src/styles/**/*.scss",
     "start": "webpack-dev-server --hot --inline --progress --color --env=dev",
     "test": "jest",
     "test:watch": "npm run test -- --watch",

src/components/auth/Auth.module.scss

@@ -1,6 +1,6 @@
 .form-container {
-  width: 400px;
   margin: 0 auto;
+  width: 400px;
 
   > label:last-of-type {
     margin-bottom: calc(var(--spacing) * 2);

src/components/layout/Unauthorized.module.scss

@@ -5,16 +5,16 @@
 }
 
 .auth__img {
-  background-image: url("https://res.cloudinary.com/ddw0ktdva/image/upload/c_scale,f_auto,fl_any_format.force_strip.progressive,q_auto,w_2590/v1519689991/richard-boyle-309541-unsplash.webp");
-  background-size: cover;
-  background-repeat: no-repeat;
+  background-image: url("https://res.cloudinary.com/ddw0ktdva/image/upload/c_scale,f_auto,fl_preserve_transparency.progressive,q_auto:best,w_1000/v1519689991/richard-boyle-309541-unsplash.jpg");
   background-position: 50%;
-  mix-blend-mode: multiply;
+  background-repeat: no-repeat;
+  background-size: cover;
   filter: grayscale(100%);
+  mix-blend-mode: multiply;
 }
 
 .auth__form {
-  min-height: 100%;
   display: grid;
+  min-height: 100%;
   place-items: center;
 }

src/styles/utils/_helpers.scss

@@ -0,0 +1,40 @@
+/* ------------------------------------ *\
+    #Useful Sass Helper Functions
+\* ------------------------------------ */
+
+/**
+ * Truncate text after certain length to ...
+ */
+@mixin truncate($maxLength) {
+  max-width: $maxLength;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * CSS Media Query Helper
+ */
+@mixin mq($width, $type: min) {
+  @if map-has-key($map: $breakpoints, $key: $width) {
+    $width: map-get($map: $breakpoints, $key: $width);
+
+    @media only screen and (#{$type}-width: $width) {
+      @content;
+    }
+  }
+}
+
+/**
+ * Psuedo Selector Helper
+ */
+@mixin psuedo($display: block, $pos: absolute, $content: '') {
+  content: $content;
+  display: $display;
+  position: $pos;
+}
+
+/* ------------------------------------ *\
+    $Flex Helpers
+\* ------------------------------------ */
+

src/styles/variables/_typography.scss

@@ -1,5 +1,6 @@
 :root {
   --primary-font: "Faune", sans-serif;
+  --future-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --body-line-height: 1.5;
   --body-font-size: 16px;
   --spacing: 24px;