style: reformat all files properly

- remove .json from .eslintignore
- add type intellisense to .prettierrc.js
- install missing @jest/types which is used in jest.config.js
- split up typecheck and lint into two separate commands
- remove --require-pragma flag from reformat-files which leads to unformatted files
- install suggested @types/prop-types and @types/react-loader dependencies
- add @ts-expect-error to Loader usages
- reformat all scss files automatically with reformat-files command

37 files changed, 615 insertions, 352 deletions

diff --git a/.eslintignore b/.eslintignore
index 79e0599d5..f1867f427 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -31,6 +31,3 @@ node_modules
 # package files
 package.json
 pnpm-lock.yaml
-
-# Json
-*.json
diff --git a/.prettierrc.js b/.prettierrc.js
index dd8e1aa20..f2feee853 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,3 +1,4 @@
+/** @type {import("prettier").Options} */
 module.exports = {
   singleQuote: true,
   arrowParens: 'avoid',
diff --git a/commitlint.config.js b/commitlint.config.js
index 28fe5c5bf..422b19445 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']}
+module.exports = { extends: ['@commitlint/config-conventional'] };
diff --git a/jest.config.js b/jest.config.js
index ba4ed9cd2..6639ca88b 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,8 +1,8 @@
-/** @type {import('@jest/types').Config.InitialOptions} */
 /*
  * For a detailed explanation regarding each configuration property and type check, visit:
  * https://jestjs.io/docs/configuration
  */
+/** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
   // Automatically clear mock calls, instances and results before every test
   clearMocks: true,
@@ -31,8 +31,8 @@ module.exports = {
     '/src/internal-server',
   ],
 
-  "transform": {
-    "^.+\\.tsx?$": "esbuild-runner/jest",
-    "^.+\\.ts?$": "esbuild-runner/jest"
-  }
+  transform: {
+    '^.+\\.tsx?$': 'esbuild-runner/jest',
+    '^.+\\.ts?$': 'esbuild-runner/jest',
+  },
 };
diff --git a/package.json b/package.json
index 049bb69ee..7a950caf7 100644
--- a/package.json
+++ b/package.json
@@ -30,15 +30,16 @@
     "dev": "node esbuild.mjs --watch",
     "test": "jest",
     "test:watch": "jest --watch",
-    "lint": "tsc --noEmit && eslint \"{src,test,scripts}/**/*.{js,jsx,mjs,ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"{src,test,scripts}/**/*.{js,jsx,mjs,ts,tsx}\"",
     "lint:fix": "eslint --fix \"{src,test,scripts}/**/*.{js,jsx,mjs,ts,tsx}\"",
     "extract": "formatjs extract \"src/**/*.{js,jsx,mjs,ts,tsx}\" --ignore=\"**/*.d.ts\" --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' --preserve-whitespace",
     "compile": "formatjs compile \"temp.json\" --out-file src/i18n/locales/en-US.json",
     "manage-translations": "pnpm extract && pnpm compile && rimraf temp.json",
     "build": "preval-build-info-cli && node esbuild.mjs && electron-builder",
     "contributors": "all-contributors",
-    "reformat-files": "prettier --ignore-path .eslintignore --write --require-pragma \"**/*.{js,jsx,mjs,ts,tsx,scss}\"",
-    "prepare-code": "pnpm lint:fix && pnpm reformat-files && pnpm manage-translations",
+    "reformat-files": "prettier --ignore-path .eslintignore --write \"**/*.{js,jsx,mjs,ts,tsx,scss}\"",
+    "prepare-code": "pnpm typecheck && pnpm lint:fix && pnpm reformat-files && pnpm manage-translations",
     "link-readme": "ts-node scripts/link-readme.ts",
     "minify-images": "./scripts/minify-images.sh",
     "start:server": "ts-node src/internal-server/test.ts",
@@ -133,6 +134,7 @@
     "@commitlint/config-conventional": "17.6.7",
     "@electron/notarize": "1.2.3",
     "@formatjs/cli": "6.1.3",
+    "@jest/types": "29.6.1",
     "@types/color": "3.0.3",
     "@types/expect.js": "0.3.29",
     "@types/fs-extra": "11.0.1",
@@ -140,8 +142,10 @@
     "@types/lodash": "4.14.195",
     "@types/ms": "0.7.31",
     "@types/node": "18.15.3",
+    "@types/prop-types": "15.7.5",
     "@types/react": "18.2.12",
     "@types/react-dom": "18.2.5",
+    "@types/react-loader": "2.4.5",
     "@types/react-transition-group": "4.4.6",
     "@types/route-parser": "0.1.4",
     "@types/tar": "6.1.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 515e51e90..eddb70357 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -270,6 +270,9 @@ devDependencies:
   '@formatjs/cli':
     specifier: 6.1.3
     version: 6.1.3
+  '@jest/types':
+    specifier: 29.6.1
+    version: 29.6.1
   '@types/color':
     specifier: 3.0.3
     version: 3.0.3
@@ -291,12 +294,18 @@ devDependencies:
   '@types/node':
     specifier: 18.15.3
     version: 18.15.3
+  '@types/prop-types':
+    specifier: 15.7.5
+    version: 15.7.5
   '@types/react':
     specifier: 18.2.12
     version: 18.2.12
   '@types/react-dom':
     specifier: 18.2.5
     version: 18.2.5
+  '@types/react-loader':
+    specifier: 2.4.5
+    version: 2.4.5
   '@types/react-transition-group':
     specifier: 4.4.6
     version: 4.4.6
@@ -1892,18 +1901,6 @@ packages:
       - supports-color
     dev: true
 
-  /@jest/types@29.5.0:
-    resolution: {integrity: sha512-qbu7kN6czmVRc3xWFQcAN03RAUamgppVUdXrvl1Wr3jlNF93o9mJbGcDWrwGB6ht44u7efB1qCFgVQmca24Uog==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    dependencies:
-      '@jest/schemas': 29.6.0
-      '@types/istanbul-lib-coverage': 2.0.4
-      '@types/istanbul-reports': 3.0.1
-      '@types/node': 18.15.3
-      '@types/yargs': 17.0.24
-      chalk: 4.1.2
-    dev: true
-
   /@jest/types@29.6.1:
     resolution: {integrity: sha512-tPKQNMPuXgvdOn2/Lg9HNfUvjYVGolt04Hp03f5hAk878uwOLikN+JzeLY0HcVgKgFl9Hs3EIqpu3WX27XNhnw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2540,6 +2537,12 @@ packages:
       '@types/react': 18.2.12
     dev: true
 
+  /@types/react-loader@2.4.5:
+    resolution: {integrity: sha512-eBtnKxGx/B+z6kSOMiVBYLPZmXLZDVoChSYk57N91HZKB1wSPICHPrgvlhC5j8Y7MCfoYRt4/emRwh2OQIhFrg==}
+    dependencies:
+      '@types/react': 18.2.12
+    dev: true
+
   /@types/react-transition-group@4.4.6:
     resolution: {integrity: sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==}
     dependencies:
@@ -7785,7 +7788,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/code-frame': 7.22.5
-      '@jest/types': 29.5.0
+      '@jest/types': 29.6.1
       '@types/stack-utils': 2.0.1
       chalk: 4.1.2
       graceful-fs: 4.2.11
@@ -7953,7 +7956,7 @@ packages:
     resolution: {integrity: sha512-RYMgG/MTadOr5t8KdhejfvUU82MxsCu5MF6KuDUHl+NuwzUt+Sm6jJWxTJVrDR1j5M/gJVCPKQEpWXY+yIQ6lQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@jest/types': 29.5.0
+      '@jest/types': 29.6.1
       '@types/node': 18.15.3
       chalk: 4.1.2
       ci-info: 3.8.0
diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx
index bdc12510d..b7bfe0fa6 100644
--- a/src/components/ui/InfoBar.tsx
+++ b/src/components/ui/InfoBar.tsx
@@ -72,6 +72,7 @@ class InfoBar extends Component<IProps> {
                 lines={10}
                 scale={0.3}
                 color="#FFF"
+                // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
                 component="span"
               />
               {ctaLabel}
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index 9782db151..a794a5e9b 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -85,6 +85,7 @@ class Infobox extends Component<IProps, IState> {
               lines={10}
               scale={0.3}
               color="#FFF"
+              // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
               component="span"
             />
             {ctaLabel}
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx
index 37555df16..d4457ae5f 100644
--- a/src/components/ui/Loader.tsx
+++ b/src/components/ui/Loader.tsx
@@ -28,6 +28,7 @@ class LoaderComponent extends Component<IProps> {
       color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color;
 
     return (
+      // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>'
       <Loader
         loaded={loaded}
         width={4}
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 9444efde2..1b648b1d5 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -206,6 +206,7 @@ class ButtonComponent extends Component<IProps, IState> {
               width={4}
               scale={0.45}
               // color={theme.buttonLoaderColor[buttonType!]}
+              // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>
               parentClassName={classes.loader}
             />
           )}
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index 45f81ff3b..361fc477b 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -34,6 +34,7 @@ class LoaderComponent extends Component<IProps> {
           width={4}
           scale={0.75}
           color={color || classes.color}
+          // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps></LoaderProps>
           parentClassName={classes.loader}
         />
       </div>
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
index 35125dec5..dcc9690fb 100644
--- a/src/styles/animations.scss
+++ b/src/styles/animations.scss
@@ -1,43 +1,51 @@
-@import "./globals.scss";
+@import './globals.scss';
 
 // FadeIn
-.fadeIn-appear { opacity: .01; }
+.fadeIn-appear {
+  opacity: 0.01;
+}
 
 .fadeIn-appear.fadeIn-appear-active {
   opacity: 1;
-  transition: opacity .5s ease-out;
+  transition: opacity 0.5s ease-out;
 }
 
 .fadeIn-enter {
-  opacity: .01;
-  transition: opacity .5s ease-out;
+  opacity: 0.01;
+  transition: opacity 0.5s ease-out;
 }
 
-.fadeIn-leave { opacity: 1; }
+.fadeIn-leave {
+  opacity: 1;
+}
 
 .fadeIn-leave.fadeIn-leave-active {
-  opacity: .01;
+  opacity: 0.01;
   transition: opacity 300ms ease-in;
 }
 
 // FadeIn Fast
-.fadeIn-fast-appear { opacity: .01; }
+.fadeIn-fast-appear {
+  opacity: 0.01;
+}
 
 .fadeIn-fast-appear.fadeIn-fast-appear-active {
   opacity: 1;
-  transition: opacity .25s ease-out;
+  transition: opacity 0.25s ease-out;
 }
 
 .fadeIn-fast-enter {
-  opacity: .01;
-  transition: opacity .25s ease-out;
+  opacity: 0.01;
+  transition: opacity 0.25s ease-out;
 }
 
-.fadeIn-fast-leave { opacity: 1; }
+.fadeIn-fast-leave {
+  opacity: 1;
+}
 
 .fadeIn-fast-leave.fadeIn-fast-leave-active {
-  opacity: .01;
-  transition: opacity .25s ease-in;
+  opacity: 0.01;
+  transition: opacity 0.25s ease-in;
 }
 
 // Slide down
@@ -48,12 +56,12 @@
 
 .slideDown-appear.slideDown-appear-active {
   max-height: 500px;
-  transition: max-height .5s ease-out;
+  transition: max-height 0.5s ease-out;
 }
 
 .slideDown-enter {
   max-height: 0;
-  transition: max-height .5s ease-out;
+  transition: max-height 0.5s ease-out;
 }
 
 // Slide up
@@ -65,18 +73,20 @@
 .slideUp-appear.slideUp-appear-active {
   opacity: 1;
   transform: translateY(0px);
-  transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
 .slideUp-enter {
   opacity: 0;
   transform: translateY(20px);
-  transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
-.slideUp-leave { opacity: 1; }
+.slideUp-leave {
+  opacity: 1;
+}
 
 .slideUp-leave.slideUp-leave-active {
-  opacity: .01;
+  opacity: 0.01;
   transition: opacity 300ms ease-in;
 }
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 53c03a40a..448b8c2b3 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -5,18 +5,20 @@
 
   .auth__container {
     background: $dark-theme-gray-darker;
-    box-shadow: 0 0 50px rgba($dark-theme-black, .2);
+    box-shadow: 0 0 50px rgba($dark-theme-black, 0.2);
   }
 
   .auth__logo.auth__logo--sm {
     border: none;
-    box-shadow: 0 0 6px rgba($dark-theme-black, .5);
+    box-shadow: 0 0 6px rgba($dark-theme-black, 0.5);
   }
 
   .auth__links {
     background: $dark-theme-gray-dark;
 
-    a { color: $dark-theme-text-color; }
+    a {
+      color: $dark-theme-text-color;
+    }
   }
 
   .welcome__featured-services {
@@ -26,7 +28,9 @@
   .legal {
     color: $dark-theme-text-color;
 
-    a { color: $dark-theme-gray-lightest; }
+    a {
+      color: $dark-theme-gray-lightest;
+    }
   }
 
   .locked__or_line {
@@ -53,14 +57,16 @@
   }
 
   .auth__container {
-    background: #FFF;
+    background: #fff;
     border-radius: $theme-border-radius;
     height: auto;
     margin: 40px auto 0;
     position: relative;
     width: 350px;
 
-    &.auth__container--signup { width: 450px; }
+    &.auth__container--signup {
+      width: 450px;
+    }
 
     &.auth__container--releasenotes {
       width: 90%;
@@ -77,16 +83,18 @@
     width: 150px;
 
     &.auth__logo--sm {
-      border: 4px solid #FFF;
+      border: 4px solid #fff;
       border-radius: 100%;
-      box-shadow: 0 0 6px rgba(black, .5);
+      box-shadow: 0 0 6px rgba(black, 0.5);
     }
   }
 
   .auth__form {
     padding: 20px;
 
-    h1 { text-align: center; }
+    h1 {
+      text-align: center;
+    }
   }
 
   .auth__button {
@@ -138,11 +146,11 @@
     margin-bottom: 20px;
 
     &:after {
-        background: #FFF;
-        content: 'or';
-        padding: 0 10px;
-        position: relative;
-        top: -9px;
+      background: #fff;
+      content: 'or';
+      padding: 0 10px;
+      position: relative;
+      top: -9px;
     }
   }
 
@@ -158,7 +166,9 @@
       margin-bottom: 8px;
       text-align: center;
 
-      &:last-of-type { margin-bottom: 0; }
+      &:last-of-type {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -175,24 +185,37 @@
     position: absolute;
     right: 25px;
 
-    img { width: 65px; }
+    img {
+      width: 65px;
+    }
   }
 
-  .auth__letter { margin-bottom: 30px; text-align: left; }
-  .scroll-container { z-index: 10; }
-  .info-bar { position: absolute; }
+  .auth__letter {
+    margin-bottom: 30px;
+    text-align: left;
+  }
+  .scroll-container {
+    z-index: 10;
+  }
+  .info-bar {
+    position: absolute;
+  }
 
   &__scroll-container {
     width: 100%;
     height: fit-content;
   }
 
-  .available-services { margin-bottom: 15px; }
+  .available-services {
+    margin-bottom: 15px;
+  }
 
   .unavailable-services {
     margin: 15px 0;
 
-    p { text-transform: capitalize; }
+    p {
+      text-transform: capitalize;
+    }
   }
 
   .legal {
@@ -220,7 +243,7 @@
   height: fit-content;
 
   &-item__secondary {
-    padding-left: 5px
+    padding-left: 5px;
   }
 }
 
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
index 78309ea18..0ac17c6ed 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -10,7 +10,6 @@
   }
 }
 
-
 .badge {
   background: $theme-gray-lighter;
   border-radius: $theme-border-radius;
@@ -21,12 +20,11 @@
 
   &.badge--primary {
     background: $theme-brand-primary;
-    color: #FFF;
+    color: #fff;
   }
 
   &.badge--success {
     background: $theme-brand-success;
-    color: #FFF;
+    color: #fff;
   }
-
 }
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 106caa6bc..98e8f515c 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -130,7 +130,9 @@
     color: $theme-brand-primary;
     padding: 10px 20px;
     @media (prefers-reduced-motion: no-preference) {
-      transition: background 0.5s, color 0.5s;
+      transition:
+        background 0.5s,
+        color 0.5s;
     }
     &:hover {
       background: darken($theme-brand-primary, 5%);
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index a33d26cf1..eada2bb1d 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,41 +1,49 @@
-@import "./type-helper";
+@import './type-helper';
 
-$theme-brand-primary:        convert-rgb-string-to-color($raw-theme-brand-primary);
-$theme-brand-gradient:       $theme-brand-primary;
-$theme-brand-success:        convert-rgb-string-to-color($raw-theme-brand-success);
-$theme-brand-info:           convert-rgb-string-to-color($raw-theme-brand-info);
-$theme-brand-warning:        convert-rgb-string-to-color($raw-theme-brand-warning);
-$theme-brand-danger:         convert-rgb-string-to-color($raw-theme-brand-danger);
+$theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary);
+$theme-brand-gradient: $theme-brand-primary;
+$theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success);
+$theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info);
+$theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning);
+$theme-brand-danger: convert-rgb-string-to-color($raw-theme-brand-danger);
 
-$theme-gray-dark:            convert-rgb-string-to-color($raw-theme-gray-dark);
-$theme-gray:                 convert-rgb-string-to-color($raw-theme-gray);
-$theme-gray-light:           convert-rgb-string-to-color($raw-theme-gray-light);
-$theme-gray-lighter:         convert-rgb-string-to-color($raw-theme-gray-lighter);
-$theme-gray-lightest:        convert-rgb-string-to-color($raw-theme-gray-lightest);
+$theme-gray-dark: convert-rgb-string-to-color($raw-theme-gray-dark);
+$theme-gray: convert-rgb-string-to-color($raw-theme-gray);
+$theme-gray-light: convert-rgb-string-to-color($raw-theme-gray-light);
+$theme-gray-lighter: convert-rgb-string-to-color($raw-theme-gray-lighter);
+$theme-gray-lightest: convert-rgb-string-to-color($raw-theme-gray-lightest);
 
-$theme-border-radius:        to-number($raw-theme-border-radius);
-$theme-border-radius-small:  to-number($raw-theme-border-radius-small);
+$theme-border-radius: to-number($raw-theme-border-radius);
+$theme-border-radius-small: to-number($raw-theme-border-radius-small);
 
-$theme-sidebar-width:        to-number($raw-theme-sidebar-width);
+$theme-sidebar-width: to-number($raw-theme-sidebar-width);
 
-$theme-text-color:           convert-rgb-string-to-color($raw-theme-gray-dark);
+$theme-text-color: convert-rgb-string-to-color($raw-theme-gray-dark);
 
-$theme-transition-time:      .5s;
+$theme-transition-time: 0.5s;
 
-$theme-inset-shadow:         inset 0 2px 5px rgba(0, 0, 0, .03);
+$theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
 
 // Dark Theme
-$dark-theme-black:           convert-rgb-string-to-color($raw-dark-theme-black);
-
-$dark-theme-gray-darkest:    convert-rgb-string-to-color($raw-dark-theme-gray-darkest);
-$dark-theme-gray-darker:     convert-rgb-string-to-color($raw-dark-theme-gray-darker);
-$dark-theme-gray-dark:       convert-rgb-string-to-color($raw-dark-theme-gray-dark);
-
-$dark-theme-gray:            convert-rgb-string-to-color($raw-dark-theme-gray);
-
-$dark-theme-gray-light:      convert-rgb-string-to-color($raw-dark-theme-gray-light);
-$dark-theme-gray-lighter:    convert-rgb-string-to-color($raw-dark-theme-gray-lighter);
-$dark-theme-gray-lightest:   convert-rgb-string-to-color($raw-dark-theme-gray-lightest);
-
-$dark-theme-gray-smoke:      convert-rgb-string-to-color($raw-dark-theme-gray-smoke);
-$dark-theme-text-color:      convert-rgb-string-to-color($raw-dark-theme-text-color);
+$dark-theme-black: convert-rgb-string-to-color($raw-dark-theme-black);
+
+$dark-theme-gray-darkest: convert-rgb-string-to-color(
+  $raw-dark-theme-gray-darkest
+);
+$dark-theme-gray-darker: convert-rgb-string-to-color(
+  $raw-dark-theme-gray-darker
+);
+$dark-theme-gray-dark: convert-rgb-string-to-color($raw-dark-theme-gray-dark);
+
+$dark-theme-gray: convert-rgb-string-to-color($raw-dark-theme-gray);
+
+$dark-theme-gray-light: convert-rgb-string-to-color($raw-dark-theme-gray-light);
+$dark-theme-gray-lighter: convert-rgb-string-to-color(
+  $raw-dark-theme-gray-lighter
+);
+$dark-theme-gray-lightest: convert-rgb-string-to-color(
+  $raw-dark-theme-gray-lightest
+);
+
+$dark-theme-gray-smoke: convert-rgb-string-to-color($raw-dark-theme-gray-smoke);
+$dark-theme-text-color: convert-rgb-string-to-color($raw-dark-theme-text-color);
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index b6a7949c2..fe4123242 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,26 +1,26 @@
-$raw-theme-brand-primary: "114,102,240";
-$raw-theme-brand-success: "92,184,92";
-$raw-theme-brand-info: "91,192,222";
-$raw-theme-brand-warning: "255,159,0";
-$raw-theme-brand-danger: "217,83,79";
-$raw-theme-gray-dark: "55,58,60";
-$raw-theme-gray: "85,89,92";
-$raw-theme-gray-light: "129,138,145";
-$raw-theme-gray-lighter: "236,238,239";
-$raw-theme-gray-lightest: "247,247,249";
+$raw-theme-brand-primary: '114,102,240';
+$raw-theme-brand-success: '92,184,92';
+$raw-theme-brand-info: '91,192,222';
+$raw-theme-brand-warning: '255,159,0';
+$raw-theme-brand-danger: '217,83,79';
+$raw-theme-gray-dark: '55,58,60';
+$raw-theme-gray: '85,89,92';
+$raw-theme-gray-light: '129,138,145';
+$raw-theme-gray-lighter: '236,238,239';
+$raw-theme-gray-lightest: '247,247,249';
 $raw-theme-border-radius: 6px;
 $raw-theme-border-radius-small: 3px;
 $raw-theme-sidebar-width: 68px;
-$raw-theme-text-color: "55,58,60";
-$raw-theme-transition-time: .5s;
-$raw-theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03);
-$raw-dark-theme-black: "26,26,26";
-$raw-dark-theme-gray-darkest: "30,30,30";
-$raw-dark-theme-gray-darker: "45,47,49";
-$raw-dark-theme-gray-dark: "56,58,59";
-$raw-dark-theme-gray: "71,73,75";
-$raw-dark-theme-gray-light: "81,83,85";
-$raw-dark-theme-gray-lighter: "138,139,139";
-$raw-dark-theme-gray-lightest: "255,255,255";
-$raw-dark-theme-gray-smoke: "206,208,209";
-$raw-dark-theme-text-color: "255,255,255";
+$raw-theme-text-color: '55,58,60';
+$raw-theme-transition-time: 0.5s;
+$raw-theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.03);
+$raw-dark-theme-black: '26,26,26';
+$raw-dark-theme-gray-darkest: '30,30,30';
+$raw-dark-theme-gray-darker: '45,47,49';
+$raw-dark-theme-gray-dark: '56,58,59';
+$raw-dark-theme-gray: '71,73,75';
+$raw-dark-theme-gray-light: '81,83,85';
+$raw-dark-theme-gray-lighter: '138,139,139';
+$raw-dark-theme-gray-lightest: '255,255,255';
+$raw-dark-theme-gray-smoke: '206,208,209';
+$raw-dark-theme-text-color: '255,255,255';
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
index d3010942f..514da8839 100644
--- a/src/styles/info-bar.scss
+++ b/src/styles/info-bar.scss
@@ -3,7 +3,7 @@
 .info-bar {
   align-items: center;
   background: $theme-brand-primary;
-  box-shadow: 0 0 8px rgba(black, .2);
+  box-shadow: 0 0 8px rgba(black, 0.2);
   display: flex;
   height: 50px;
   justify-content: center;
@@ -15,21 +15,23 @@
   .info-bar__content {
     height: auto;
 
-    .mdi { margin-right: 5px; }
+    .mdi {
+      margin-right: 5px;
+    }
   }
 
   .info-bar__close {
-    color: #FFF;
+    color: #fff;
     position: absolute;
     right: 10px;
   }
 
   .info-bar__cta {
-    border-color: #FFF;
+    border-color: #fff;
     border-radius: $theme-border-radius-small;
     border-style: solid;
     border-width: 2px;
-    color: #FFF;
+    color: #fff;
     margin-left: 15px;
     padding: 3px 8px;
 
@@ -47,26 +49,34 @@
     color: white;
   }
 
-  &.info-bar--bottom { order: 10; }
+  &.info-bar--bottom {
+    order: 10;
+  }
 
   &.info-bar--primary {
     background: $theme-brand-primary;
-    color: #FFF;
+    color: #fff;
 
-    a { color: #FFF; }
+    a {
+      color: #fff;
+    }
   }
 
   &.info-bar--warning {
     background: $theme-brand-warning;
-    color: #FFF;
+    color: #fff;
 
-    a { color: #FFF; }
+    a {
+      color: #fff;
+    }
   }
 
   &.info-bar--danger {
     background: $theme-brand-danger;
-    color: #FFF;
+    color: #fff;
 
-    a { color: #FFF; }
+    a {
+      color: #fff;
+    }
   }
 }
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss
index e287e5be7..cf43de3c4 100644
--- a/src/styles/infobox.scss
+++ b/src/styles/infobox.scss
@@ -8,38 +8,44 @@
   margin-bottom: 30px;
   padding: 15px 20px;
 
-  a { color: #FFF; }
+  a {
+    color: #fff;
+  }
 
-  .infobox__content { flex: 1; }
+  .infobox__content {
+    flex: 1;
+  }
 
   &.infobox--success {
     background: $theme-brand-success;
-    color: #FFF;
+    color: #fff;
   }
 
   &.infobox--primary {
     background: $theme-brand-primary;
-    color: #FFF;
+    color: #fff;
   }
 
   &.infobox--danger {
     background: $theme-brand-danger;
-    color: #FFF;
+    color: #fff;
   }
 
   &.infobox--warning {
     background: $theme-brand-warning;
-    color: #FFF;
+    color: #fff;
   }
 
-  .mdi { margin-right: 10px; }
+  .mdi {
+    margin-right: 10px;
+  }
 
   .infobox__cta {
-    border-color: #FFF;
+    border-color: #fff;
     border-radius: $theme-border-radius-small;
     border-style: solid;
     border-width: 2px;
-    color: #FFF;
+    color: #fff;
     margin-left: 15px;
     padding: 3px 8px;
 
@@ -54,7 +60,7 @@
   }
 
   .infobox__delete {
-    color: #FFF;
+    color: #fff;
     margin-right: 0;
   }
 }
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 687bcac64..a78bc185e 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -2,7 +2,9 @@
 @import './mixins.scss';
 
 .theme__dark .franz-form {
-  .franz-form__label { color: $dark-theme-text-color; }
+  .franz-form__label {
+    color: $dark-theme-text-color;
+  }
 
   .franz-form__input-wrapper {
     background: $dark-theme-gray-dark;
@@ -12,7 +14,9 @@
   .franz-form__input {
     color: $dark-theme-gray-lightest;
 
-    &::placeholder { color: $dark-theme-gray-lighter; }
+    &::placeholder {
+      color: $dark-theme-gray-lighter;
+    }
   }
 
   .franz-form__input-prefix,
@@ -26,7 +30,9 @@
     color: $dark-theme-gray-lighter;
   }
 
-  .franz-form__password-score { background: $dark-theme-gray-dark; }
+  .franz-form__password-score {
+    background: $dark-theme-gray-dark;
+  }
 }
 
 .franz-form {
@@ -38,11 +44,15 @@
 
     &.has-error {
       .franz-form__input-wrapper,
-      .franz-form__input-modifier { border-color: $theme-brand-danger; }
+      .franz-form__input-modifier {
+        border-color: $theme-brand-danger;
+      }
     }
   }
 
-  .franz-form__label { @include formLabel(); }
+  .franz-form__label {
+    @include formLabel();
+  }
 
   .franz-form__error {
     color: $theme-brand-danger;
@@ -68,7 +78,9 @@
     padding: 8px;
     width: 100%;
 
-    &::placeholder { color: lighten($theme-gray-light, 10%); }
+    &::placeholder {
+      color: lighten($theme-gray-light, 10%);
+    }
   }
 
   .franz-form__input-prefix,
@@ -101,10 +113,18 @@
       overflow: hidden;
       width: 100%;
 
-      &::-webkit-meter-bar { background: none; }
-      &::-webkit-meter-even-less-good-value { background: $theme-brand-danger; }
-      &::-webkit-meter-suboptimum-value { background: $theme-brand-warning; }
-      &::-webkit-meter-optimum-value { background: $theme-brand-success; }
+      &::-webkit-meter-bar {
+        background: none;
+      }
+      &::-webkit-meter-even-less-good-value {
+        background: $theme-brand-danger;
+      }
+      &::-webkit-meter-suboptimum-value {
+        background: $theme-brand-warning;
+      }
+      &::-webkit-meter-optimum-value {
+        background: $theme-brand-success;
+      }
     }
   }
 }
diff --git a/src/styles/invite.scss b/src/styles/invite.scss
index 594224f62..b68112478 100644
--- a/src/styles/invite.scss
+++ b/src/styles/invite.scss
@@ -4,5 +4,9 @@
   justify-content: center;
 }
 
-.invite__embed { text-align: center; }
-.invite__embed--button { width: 100%; }
+.invite__embed {
+  text-align: center;
+}
+.invite__embed--button {
+  width: 100%;
+}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 664108ed4..173ca3184 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -24,7 +24,8 @@ html {
     color: $theme-text-color;
 
     &::after {
-      box-shadow: inset 0 0 5px 0 $dark-theme-black,
+      box-shadow:
+        inset 0 0 5px 0 $dark-theme-black,
         inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
     }
 
@@ -159,7 +160,8 @@ body.win32:not(.isFullScreen) .app .app__content {
     z-index: 1000;
     pointer-events: none;
     clip-path: inset(10px 0 10px 10px);
-    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.12),
+    box-shadow:
+      inset 0 0 10px 0 rgba(0, 0, 0, 0.12),
       inset 0 0 2px 0 rgba(0, 0, 0, 0.24);
   }
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index eb7649bfa..8369c9298 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,5 @@
 @import '../../node_modules/electron-react-titlebar/assets/style';
 
-
 // modules
 @import './globals.scss';
 @import './reset.scss';
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index d87ce652a..929494514 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -3,19 +3,87 @@
 /* ============ RESET =========== */
 /* http://meyerweb.com/eric/tools/css/reset */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   border: 0;
   font: inherit;
   font-size: 100%;
@@ -23,11 +91,24 @@ time, mark, audio, video {
   padding: 0;
 }
 
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section { display: block; }
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
 
 ol,
-ul { list-style: none; }
+ul {
+  list-style: none;
+}
 
 blockquote,
 q {
@@ -50,11 +131,13 @@ button {
   border: none;
   padding: 0;
 
-  &:focus { outline: 0; }
+  &:focus {
+    outline: 0;
+  }
 }
 
 html {
-        font-size: 62.5%;
+  font-size: 62.5%;
   font-family: 'Open Sans';
 }
 
@@ -63,7 +146,9 @@ body {
   font-size: 1.4rem;
   line-height: 1;
 
-  &.theme__dark { color: $dark-theme-gray-smoke; }
+  &.theme__dark {
+    color: $dark-theme-gray-smoke;
+  }
 }
 
 * {
@@ -74,12 +159,20 @@ body {
   -webkit-user-select: none;
 }
 
-html, body, div {
+html,
+body,
+div {
   height: 100%;
   background: none;
   box-sizing: border-box;
 }
 
-*:focus { outline: none; }
-img { pointer-events: none; }
-a { cursor: default; }
+*:focus {
+  outline: none;
+}
+img {
+  pointer-events: none;
+}
+a {
+  cursor: default;
+}
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss
index 91453c600..4890454ff 100644
--- a/src/styles/searchInput.scss
+++ b/src/styles/searchInput.scss
@@ -8,7 +8,9 @@
   border-radius: $theme-border-radius;
   color: $dark-theme-gray-lightest;
 
-  input { color: $dark-theme-gray-lightest; }
+  input {
+    color: $dark-theme-gray-lightest;
+  }
 }
 
 .search-input {
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 513975f9c..c2f7a8db9 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -1,7 +1,7 @@
 @import './config.scss';
 @import './mixins.scss';
 
-$toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=";
+$toggle: 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=';
 
 .theme__dark .franz-form .franz-form__select {
   background-color: $dark-theme-gray-dark;
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss
index f2090685b..70a41e435 100644
--- a/src/styles/service-table.scss
+++ b/src/styles/service-table.scss
@@ -1,14 +1,22 @@
 @import './config.scss';
 
 .theme__dark .service-table {
-  .service-table__icon.has-custom-icon { border: 1px solid $dark-theme-gray-dark; }
-  .service-table__column-info .mdi { color: $dark-theme-gray-lightest; }
+  .service-table__icon.has-custom-icon {
+    border: 1px solid $dark-theme-gray-dark;
+  }
+  .service-table__column-info .mdi {
+    color: $dark-theme-gray-lightest;
+  }
 
   .service-table__row {
     border-bottom: 1px solid $dark-theme-gray-darker;
 
-    &:hover { background: $dark-theme-gray-darker; }
-    &.service-table__row--disabled { color: $dark-theme-gray; }
+    &:hover {
+      background: $dark-theme-gray-darker;
+    }
+    &.service-table__row--disabled {
+      color: $dark-theme-gray;
+    }
   }
 }
 
@@ -18,7 +26,9 @@
   .service-table__toggle {
     width: 60px;
 
-    .franz-form__field { margin-bottom: 0; }
+    .franz-form__field {
+      margin-bottom: 0;
+    }
   }
 
   .service-table__icon {
@@ -32,7 +42,9 @@
   }
 
   .service-table__column-icon,
-  .service-table__column-action { width: 40px }
+  .service-table__column-action {
+    width: 40px;
+  }
 
   .service-table__column-info {
     width: 40px;
@@ -47,17 +59,21 @@
   .service-table__row {
     border-bottom: 1px solid $theme-gray-lightest;
 
-    &:hover { background: $theme-gray-lightest; }
+    &:hover {
+      background: $theme-gray-lightest;
+    }
 
     &.service-table__row--disabled {
       color: $theme-gray-light;
 
       .service-table__column-icon {
         filter: grayscale(100%);
-        opacity: .5;
+        opacity: 0.5;
       }
     }
   }
 
-  td { padding: 10px; }
+  td {
+    padding: 10px;
+  }
 }
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 359a41ab0..7ce6f8c87 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -3,7 +3,9 @@
 .theme__dark .services {
   background: $dark-theme-gray-darkest;
 
-  .services__webview-wrapper { background: $dark-theme-gray-darkest; }
+  .services__webview-wrapper {
+    background: $dark-theme-gray-darkest;
+  }
 
   .services__webview,
   .services__info-layer {
@@ -14,7 +16,9 @@
   .services__info-layer {
     background: $dark-theme-gray-darkest;
 
-    h1 { color: $dark-theme-gray-lightest; }
+    h1 {
+      color: $dark-theme-gray-lightest;
+    }
   }
 }
 
@@ -31,21 +35,23 @@
   }
 
   @for $i from $split-columns-min through $split-columns-max {
-    &[data-columns="#{$i}"] .services .services__webview {
+    &[data-columns='#{$i}'] .services .services__webview {
       flex-basis: calc(100% / $i);
     }
   }
 }
 
 .services {
-  background: #FFF;
+  background: #fff;
   flex: 1;
   height: 100%;
   order: 5;
   overflow: hidden;
   position: relative;
 
-  .services__webview-wrapper { background: $theme-gray-lighter; }
+  .services__webview-wrapper {
+    background: $theme-gray-lighter;
+  }
 
   .services__webview,
   .services__info-layer {
@@ -66,9 +72,13 @@
       z-index: 100;
     }
 
-    &--force-repaint webview { z-index: 5; }
+    &--force-repaint webview {
+      z-index: 5;
+    }
 
-    &.is-loading webview { background: #FFF }
+    &.is-loading webview {
+      background: #fff;
+    }
   }
 
   .services__no-service,
@@ -86,12 +96,13 @@
     }
 
     .button,
-    button { margin: 40px 0 20px; }
+    button {
+      margin: 40px 0 20px;
+    }
   }
 
   .services__info-layer {
     position: absolute;
     z-index: 110;
   }
-
 }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index f16fc91fd..50accd8d7 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -23,7 +23,6 @@
 }
 
 .theme__dark {
-
   .settings__hr {
     color: rgba($dark-theme-gray, 0.8);
   }
@@ -236,7 +235,7 @@
       @extend %headline;
 
       &__secondary {
-        padding-left: 5px
+        padding-left: 5px;
       }
     }
 
@@ -416,17 +415,20 @@
     }
   }
 
-  .settings__open-recipe-file-button, .settings__open-settings-file-button {
+  .settings__open-recipe-file-button,
+  .settings__open-settings-file-button {
     cursor: pointer;
     margin-right: 10px;
   }
-  .settings__open-recipe-file-container, .settings__open-settings-file-container {
+  .settings__open-recipe-file-container,
+  .settings__open-settings-file-container {
     margin-top: 20px;
     display: flex;
     height: auto !important;
   }
 
-  .settings__open-settings-cache-button, .settings__open-settings-cache-container {
+  .settings__open-settings-cache-button,
+  .settings__open-settings-cache-container {
     cursor: pointer;
     margin-right: 10px;
   }
@@ -586,7 +588,8 @@
     padding: 0 20px;
     text-decoration: none;
     @media (prefers-reduced-motion: no-preference) {
-      transition: background $theme-transition-time,
+      transition:
+        background $theme-transition-time,
         color $theme-transition-time;
     }
     border-bottom: 1px solid darken($theme-gray-lightest, 3%);
@@ -613,7 +616,8 @@
   .badge {
     display: initial;
     @media (prefers-reduced-motion: no-preference) {
-      transition: background $theme-transition-time,
+      transition:
+        background $theme-transition-time,
         color $theme-transition-time;
     }
   }
@@ -642,86 +646,86 @@
 .releasenotes__body {
   line-height: 150%;
 
-    h1 {
-      margin-top: 0;
-      font-weight: 400;
-      font-size: xx-large;
-      text-align: center;
-    }
+  h1 {
+    margin-top: 0;
+    font-weight: 400;
+    font-size: xx-large;
+    text-align: center;
+  }
 
-    h2 {
-      margin-top: 10%;
-      font-weight: 400;
-      font-size: x-large;
-      text-align: center;
-      margin-bottom: 2%;
-    }
+  h2 {
+    margin-top: 10%;
+    font-weight: 400;
+    font-size: x-large;
+    text-align: center;
+    margin-bottom: 2%;
+  }
 
-    h3 {
-      margin-top: 5%;
-      font-weight: 400;
-      font-size: large;
-      text-align: center;
-      margin-bottom: 2%;
-    }
+  h3 {
+    margin-top: 5%;
+    font-weight: 400;
+    font-size: large;
+    text-align: center;
+    margin-bottom: 2%;
+  }
 
-    h4 {
-      margin-top: 5%;
-      font-weight: 400;
-      font-size: medium;
-      text-align: center;
-      margin-bottom: 2%;
-    }
+  h4 {
+    margin-top: 5%;
+    font-weight: 400;
+    font-size: medium;
+    text-align: center;
+    margin-bottom: 2%;
+  }
 
-    h5 {
-      margin-top: 5%;
-      font-weight: 400;
-      text-align: center;
-      margin-bottom: 2%;
-    }
+  h5 {
+    margin-top: 5%;
+    font-weight: 400;
+    text-align: center;
+    margin-bottom: 2%;
+  }
 
-    p {
-      margin-top: 4%;
-      margin-bottom: 4%;
-      user-select: text;
-    }
+  p {
+    margin-top: 4%;
+    margin-bottom: 4%;
+    user-select: text;
+  }
 
-    a {
-      color: rgb(0, 102, 255) !important;
-      user-select: text;
-    }
+  a {
+    color: rgb(0, 102, 255) !important;
+    user-select: text;
+  }
 
-    code {
-      background: #f4f4f4;
-      border: 1px solid #ddd;
-      border-radius: 5px;
-      padding: 0.2em 0.4em;
-      font-size: 85%;
-      color: #666;
-      font-family: monospace;
-      margin-bottom: 1.6em;
-      max-width: 100%;
-      overflow: auto;
-      user-select: text;
-    }
+  code {
+    background: #f4f4f4;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 0.2em 0.4em;
+    font-size: 85%;
+    color: #666;
+    font-family: monospace;
+    margin-bottom: 1.6em;
+    max-width: 100%;
+    overflow: auto;
+    user-select: text;
+  }
 
-    ul {
-      padding-left: 2rem;
-    }
+  ul {
+    padding-left: 2rem;
+  }
 
-    li {
-      margin-top: 2%;
-      list-style-type: disc;
-      user-select: text;
-    }
+  li {
+    margin-top: 2%;
+    list-style-type: disc;
+    user-select: text;
+  }
 
-    img {
-      max-width: 100%;
-      margin-top: 2%;
-      margin-bottom: 2%;
-      align-items: center;
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
+  img {
+    max-width: 100%;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    align-items: center;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss
index 36f69df28..a324902ae 100644
--- a/src/styles/status-bar-target-url.scss
+++ b/src/styles/status-bar-target-url.scss
@@ -4,7 +4,7 @@
   background: $theme-gray-lighter;
   border-top-left-radius: 5px;
   bottom: 0;
-  box-shadow: 0 0 8px rgba(black, .2);
+  box-shadow: 0 0 8px rgba(black, 0.2);
   color: $theme-gray-dark;
   font-size: 12px;
   height: auto;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 21a5e76ce..f5e60d158 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -49,12 +49,13 @@
     border-left-width: 4px;
     border-left-style: solid;
 
-    .tab-item__icon, .tab-item__label {
+    .tab-item__icon,
+    .tab-item__label {
       margin-left: -4px;
     }
   }
 
-  &.is-label-enabled{
+  &.is-label-enabled {
     height: min-content;
     overflow: hidden;
     padding-top: 8px;
@@ -149,7 +150,7 @@
     z-index: 99999;
   }
 
-  .tab-item__error-icon{
+  .tab-item__error-icon {
     font-size: 1.9em;
     color: red;
     position: absolute;
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss
index b6d28ac60..99c844c1c 100644
--- a/src/styles/title-bar.scss
+++ b/src/styles/title-bar.scss
@@ -10,7 +10,9 @@
     }
 
     &:not(.open) {
-      .menu-item .menu-label { opacity: 1; }
+      .menu-item .menu-label {
+        opacity: 1;
+      }
       > .toolbar-button > button:hover {
         background: $dark-theme-gray-darkest;
       }
@@ -43,18 +45,28 @@
 #electron-app-title-bar {
   background: $theme-gray-lightest;
   border-bottom: 0;
-  box-shadow: 0 0 8px rgba(black, .1);
+  box-shadow: 0 0 8px rgba(black, 0.1);
 
-  span { line-height: normal; }
+  span {
+    line-height: normal;
+  }
 
-  div { height: auto; }
+  div {
+    height: auto;
+  }
 
   .toolbar-dropdown {
-    &.open { box-shadow: 0 0 8px rgba(black, 0.1); }
+    &.open {
+      box-shadow: 0 0 8px rgba(black, 0.1);
+    }
 
     &:not(.open) {
-      .menu-item .menu-label { opacity: 1; }
-      > .toolbar-button > button:hover { background: $theme-brand-primary; }
+      .menu-item .menu-label {
+        opacity: 1;
+      }
+      > .toolbar-button > button:hover {
+        background: $theme-brand-primary;
+      }
     }
   }
 
@@ -63,14 +75,18 @@
       border-radius: $theme-border-radius-small;
       margin: 4px;
 
-      .status-icon { min-width: 12px; }
+      .status-icon {
+        min-width: 12px;
+      }
     }
 
     &.selected,
     &.selected:focus {
       background: none;
 
-      .menu-item { background: $theme-brand-primary; }
+      .menu-item {
+        background: $theme-brand-primary;
+      }
     }
   }
 
@@ -78,7 +94,7 @@
     &.menu-endblock {
       border-bottom-left-radius: $theme-border-radius-small;
       border-bottom-right-radius: $theme-border-radius-small;
-      box-shadow:  0px 15px 10px -15px rgba(black, .5);
+      box-shadow: 0px 15px 10px -15px rgba(black, 0.5);
       border-left-width: 0px;
     }
   }
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index ed4c0d11b..d7a65def6 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 @import './config.scss';
 
diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss
index b1da394b5..b618d24cf 100644
--- a/src/styles/type-helper.scss
+++ b/src/styles/type-helper.scss
@@ -1,23 +1,23 @@
 @function str-split($string, $separator) {
-    // empty array/list
-    $split-arr: ();
-    // first index of separator in string
-    $index : str-index($string, $separator);
-    // loop through string
-    @while $index != null {
-        // get the substring from the first character to the separator
-        $item: str-slice($string, 1, $index - 1);
-        // push item to array
-        $split-arr: append($split-arr, $item);
-        // remove item and separator from string
-        $string: str-slice($string, $index + 1);
-        // find new index of separator
-        $index : str-index($string, $separator);
-    }
-    // add the remaining string to list (the last item)
-    $split-arr: append($split-arr, $string);
+  // empty array/list
+  $split-arr: ();
+  // first index of separator in string
+  $index: str-index($string, $separator);
+  // loop through string
+  @while $index != null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index: str-index($string, $separator);
+  }
+  // add the remaining string to list (the last item)
+  $split-arr: append($split-arr, $string);
 
-    @return $split-arr;
+  @return $split-arr;
 }
 
 // ----
@@ -29,7 +29,6 @@
 /// @author Hugo Giraudel
 /// @access private
 
-
 /// Casts a string into a number
 ///
 /// @param {String | Number} $value - Value to be parsed
@@ -42,32 +41,42 @@
   } @else if type-of($value) != 'string' {
     $_: log('Value for `to-number` should be a number or a string.');
   }
-  
+
   $result: 0;
   $digits: 0;
   $minus: str-slice($value, 1, 1) == '-';
-  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
-  
+  $numbers: (
+    '0': 0,
+    '1': 1,
+    '2': 2,
+    '3': 3,
+    '4': 4,
+    '5': 5,
+    '6': 6,
+    '7': 7,
+    '8': 8,
+    '9': 9,
+  );
+
   @for $i from if($minus, 2, 1) through str-length($value) {
     $character: str-slice($value, $i, $i);
-    
-    @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
+
+    @if not(index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
     }
-    
+
     @if $character == '.' {
-      $digits: 1; 
+      $digits: 1;
     } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);  
+      $result: $result * 10 + map-get($numbers, $character);
     } @else {
       $digits: $digits * 10;
       $result: $result + map-get($numbers, $character) / $digits;
     }
   }
-  
-  @return if($minus, -$result, $result);;
-}
 
+  @return if($minus, -$result, $result);
+}
 
 /// Add `$unit` to `$value`
 ///
@@ -76,18 +85,32 @@
 ///
 /// @return {Number} - `$value` expressed in `$unit`
 @function to-length($value, $unit) {
-  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
-  
+  $units: (
+    'px': 1px,
+    'cm': 1cm,
+    'mm': 1mm,
+    '%': 1%,
+    'ch': 1ch,
+    'pc': 1pc,
+    'in': 1in,
+    'em': 1em,
+    'rem': 1rem,
+    'pt': 1pt,
+    'ex': 1ex,
+    'vw': 1vw,
+    'vh': 1vh,
+    'vmin': 1vmin,
+    'vmax': 1vmax,
+  );
+
   @if not index(map-keys($units), $unit) {
     $_: log('Invalid unit `#{$unit}`.');
   }
-  
+
   @return $value * map-get($units, $unit);
 }
 
-
-
-/// converts injectes rgb strings to sass colors 
+/// converts injectes rgb strings to sass colors
 @function convert-rgb-string-to-color($string) {
   $values: str-split($string, ',');
   $colorList: ();
@@ -97,4 +120,4 @@
 
   $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3));
   @return $rgbaColor;
-}
\ No newline at end of file
+}
diff --git a/src/styles/type.scss b/src/styles/type.scss
index 234c4d5c4..3b7a953af 100644
--- a/src/styles/type.scss
+++ b/src/styles/type.scss
@@ -59,7 +59,9 @@ button {
     position: relative;
     text-align: center;
     @media (prefers-reduced-motion: no-preference) {
-      transition: background 0.5s, color 0.5s;
+      transition:
+        background 0.5s,
+        color 0.5s;
     }
     cursor: pointer;
 
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index dd2ae4ed1..604f5aad6 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -23,8 +23,8 @@ $tabitem-bias: 30px;
     clip-path: inset(10px 10px 0 10px);
   }
 
-  >div:first-of-type {
-    overflow-x: scroll!important;
+  > div:first-of-type {
+    overflow-x: scroll !important;
     width: 100%;
   }
 
@@ -32,7 +32,6 @@ $tabitem-bias: 30px;
     flex-direction: row;
 
     .tab-item {
-
       &.is-active {
         border-left-width: 0px !important;
         border-top-width: 4px;
@@ -45,7 +44,7 @@ $tabitem-bias: 30px;
         padding-top: 4px;
       }
 
-      &.is-label-enabled{
+      &.is-label-enabled {
         min-width: 70px;
         max-width: 140px;
         height: $sidebar-width + 10;
@@ -61,7 +60,7 @@ $tabitem-bias: 30px;
       }
     }
   }
-  div{
+  div {
     overflow: hidden !important;
   }
 
@@ -92,8 +91,9 @@ $tabitem-bias: 30px;
     z-index: 1000;
     pointer-events: none;
     clip-path: inset(10px 0 10px 10px);
-    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12),
-                inset 0 0 2px 0 rgba(0, 0, 0, 0.36);
+    box-shadow:
+      inset 0 0 15px 0 rgba(0, 0, 0, 0.12),
+      inset 0 0 2px 0 rgba(0, 0, 0, 0.36);
   }
 }
 
@@ -103,8 +103,9 @@ $tabitem-bias: 30px;
   }
 
   .workspaces-drawer::after {
-    box-shadow: inset 0 0 10px 0 $dark-theme-black,
-                inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
+    box-shadow:
+      inset 0 0 10px 0 $dark-theme-black,
+      inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -114,7 +115,7 @@ $tabitem-bias: 30px;
   .sidebar__button--workspaces.is-active {
     height: $sidebar-width - $sidebar-bias;
   }
-  .tab-item .is-label-enabled{
+  .tab-item .is-label-enabled {
     height: $sidebar-width + $tabitem-bias;
   }
 }
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
index 3f90964a6..4e0080efa 100644
--- a/src/styles/welcome.scss
+++ b/src/styles/welcome.scss
@@ -122,7 +122,9 @@
       margin: 0 10px 15px;
       height: 35px;
       @media (prefers-reduced-motion: no-preference) {
-        transition: 0.5s filter, 0.5s opacity;
+        transition:
+          0.5s filter,
+          0.5s opacity;
       }
       width: 35px;