From 4bd3d6764bfd48c881d9722825309ddb5956c758 Mon Sep 17 00:00:00 2001 From: MCMXC <16797721+mcmxcdev@users.noreply.github.com> Date: Tue, 25 Jul 2023 09:20:43 -0600 Subject: 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 --- .eslintignore | 3 - .prettierrc.js | 1 + commitlint.config.js | 2 +- jest.config.js | 10 +-- package.json | 10 ++- pnpm-lock.yaml | 31 ++++--- src/components/ui/InfoBar.tsx | 1 + src/components/ui/Infobox.tsx | 1 + src/components/ui/Loader.tsx | 1 + src/components/ui/button/index.tsx | 1 + src/components/ui/loader/index.tsx | 1 + src/styles/animations.scss | 50 ++++++----- src/styles/auth.scss | 67 +++++++++----- src/styles/badge.scss | 6 +- src/styles/button.scss | 4 +- src/styles/colors.scss | 72 ++++++++------- src/styles/globals.scss | 46 +++++----- src/styles/info-bar.scss | 34 ++++--- src/styles/infobox.scss | 26 +++--- src/styles/input.scss | 40 ++++++--- src/styles/invite.scss | 8 +- src/styles/layout.scss | 6 +- src/styles/main.scss | 1 - src/styles/reset.scss | 139 ++++++++++++++++++++++++----- src/styles/searchInput.scss | 4 +- src/styles/select.scss | 2 +- src/styles/service-table.scss | 34 +++++-- src/styles/services.scss | 29 ++++-- src/styles/settings.scss | 162 +++++++++++++++++----------------- src/styles/status-bar-target-url.scss | 2 +- src/styles/tabs.scss | 7 +- src/styles/title-bar.scss | 36 +++++--- src/styles/toggle.scss | 2 +- src/styles/type-helper.scss | 99 +++++++++++++-------- src/styles/type.scss | 4 +- src/styles/vertical.scss | 21 ++--- src/styles/welcome.scss | 4 +- 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 { lines={10} scale={0.3} color="#FFF" + // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly 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 { lines={10} scale={0.3} color="#FFF" + // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly 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 { color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color; return ( + // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly' { width={4} scale={0.45} // color={theme.buttonLoaderColor[buttonType!]} + // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly 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 { width={4} scale={0.75} color={color || classes.color} + // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly parentClassName={classes.loader} /> 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; -- cgit v1.2.3-54-g00ecf