upgrade more deps and resolve issues

Author: kylemh

.eslintrc.js

@@ -3,12 +3,13 @@
  */
 module.exports = {
   extends: [
+    'plugin:@typescript-eslint/eslint-recommended',
     'airbnb',
     'plugin:jsx-a11y/recommended',
-    'prettier',
     'plugin:cypress/recommended',
     'plugin:storybook/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:prettier/recommended',
+    'prettier',
   ],
   env: {
     browser: true,
@@ -19,7 +20,6 @@ module.exports = {
   },
   parser: '@babel/eslint-parser',
   plugins: [
-    'prettier',
     'unicorn',
     'cypress',
     '@operation_code/custom-rules',
@@ -77,9 +77,6 @@ module.exports = {
     // Lodash Plugin Rules
     'lodash/import-scope': ['error', 'method'],
 
-    // Prettier Plugin Rules
-    'prettier/prettier': 'error',
-
     // React Plugin Rules
     'react/function-component-definition': [
       'error',

.prettierrc

@@ -11,19 +11,16 @@
   "rules": {
     "prettier/prettier": true,
     "alpha-value-notation": null,
-    "color-hex-case": "lower",
     "color-hex-length": "long",
     "custom-property-pattern": null,
     "hue-degree-notation": null,
-    "indentation": 2,
     "keyframes-name-pattern": null,
     "color-function-notation": "legacy",
     "no-duplicate-selectors": true,
     "property-no-unknown": [true, { "ignoreProperties": ["composes", "composes-with"] }],
     "selector-id-pattern": null,
     "selector-class-pattern": null,
     "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }],
-    "shorthand-property-no-redundant-values": null,
-    "string-quotes": "double"
+    "shorthand-property-no-redundant-values": null
   }
 }

.stylelintrc

@@ -1,5 +1,5 @@
 /* Do not attempt to change values in themeMap - only change in ./variables.css */
-@import "./variables.css";
+@import url('./variables.css');
 
 /* stylelint-disable at-rule-no-unknown */
 @tailwind base;
@@ -9,11 +9,13 @@
 
 /* Global Styles */
 @font-face {
-  font-family: "DIN Condensed Bold";
+  font-family: 'DIN Condensed Bold';
   font-style: normal;
   font-weight: normal;
   font-display: auto;
+  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
   -webkit-font-smoothing: antialiased;
+  /* stylelint-disable-next-line at-rule-descriptor-no-unknown */
   -moz-osx-font-smoothing: grayscale;
 
   /* prettier-ignore */

common/styles/globals.css

@@ -5,6 +5,5 @@
 @custom-media --medium-viewport (max-width: 768px);
 @custom-media --large-viewport (max-width: 992px);
 @custom-media --extra-large-viewport (max-width: 1200px);
-
 @custom-media --mobile-viewport (--large-viewport);
 @custom-media --desktop-viewport (min-width: 992px);

common/styles/media-queries.css

@@ -20,8 +20,8 @@
   --errorDeep: hsl(355, 63%, 34%, 1);
 
   /* Fonts */
-  --primaryFontFamily: "DIN Condensed Bold";
-  --secondaryFontFamily: "Encode Sans";
+  --primaryFontFamily: 'DIN Condensed Bold';
+  --secondaryFontFamily: 'Encode Sans';
 
   /*
    * Breakpoint definitions used in Storybook

common/styles/variables.css

@@ -26,7 +26,7 @@ export const hasValidAuthToken = (token = cookie.get('token')) => {
     return false;
   }
 
-  const jwt = jwtDecode(token);
+  const jwt = jwtDecode<{ exp: number }>(token);
   const currentTime = new Date().getTime() / 1000;
 
   // Valid if jwt expiry is in the future

common/utils/cookie-utils.ts

@@ -33,12 +33,16 @@
   margin: 0 0.25rem;
   vertical-align: middle;
   transform: scale(1);
-  transition: 0.2s color linear, 0.2s transform linear;
+  transition:
+    0.2s color linear,
+    0.2s transform linear;
 }
 
 .alertCloseButton:hover {
   color: black;
   cursor: pointer;
   transform: scale(1.1);
-  transition: 0.2s color linear, 0.2s transform linear;
+  transition:
+    0.2s color linear,
+    0.2s transform linear;
 }

components/Alert/Alert.module.css

@@ -13,7 +13,9 @@
   min-width: 175px;
   padding: 1rem 0.75rem 0.75rem;
   white-space: nowrap;
-  transition: 0.2s linear background-color, 0.2s linear color;
+  transition:
+    0.2s linear background-color,
+    0.2s linear color;
   text-shadow: none;
 }
 

components/Buttons/Button/Button.module.css

@@ -14,11 +14,7 @@ function ErrorDisplay({ statusCode }: ErrorDisplayPropsType) {
         <meta name="robots" content="noindex, nofollow" key={statusCode} />
       </Head>
 
-      <div
-        className={
-          'h-screen text-white bg-[url("/static/images/TankFlip.gif")] flex flex-col justify-center w-full  bg-cover items-center'
-        }
-      >
+      <div className='h-screen text-white bg-[url("/static/images/TankFlip.gif")] flex flex-col justify-center w-full  bg-cover items-center'>
         <div className="mx-auto my-4 text-center">
           <h1 className="text-6xl text-white">{statusCode || 'Oh no'}!</h1>
           <p className="text-2xl text-white">