From dad87af43c80ca4b47b049527b2de8a74a0dc407 Mon Sep 17 00:00:00 2001 From: Kateryna Voronina <51786805+katamatata@users.noreply.github.com> Date: Thu, 11 Jul 2024 13:29:38 +0200 Subject: [PATCH] feat: consolidate styles in global.scss in shared-atomic-design-components library (#931) * Consolidate styles in global.scss in shared-atomic-design-components library to share across our apps; remove duplicated style files * Remove unnessesary comments and code --- .../src/components/organisms/Navbar.scss | 2 +- apps/redi-connect/src/main.scss | 1 + apps/redi-connect/src/main.tsx | 2 +- apps/redi-connect/src/styles/_forms.scss | 69 ------- apps/redi-connect/src/styles/_global.scss | 18 -- apps/redi-connect/src/styles/main.scss | 176 ------------------ .../src/components/organisms/Navbar.scss | 2 +- .../src/components/templates/LoggedIn.scss | 3 +- apps/redi-talent-pool/src/main.scss | 2 +- .../JobseekerProfileForJobseekerEyes.scss | 13 +- .../me/TpCompanyProfileOnboardingSteps.scss | 13 +- .../src/lib/styles/_forms.scss | 3 +- .../src/lib/styles/_global.scss | 18 -- .../lib/styles/{_main.scss => global.scss} | 26 ++- workspace.json | 3 +- 15 files changed, 41 insertions(+), 310 deletions(-) create mode 100644 apps/redi-connect/src/main.scss delete mode 100644 apps/redi-connect/src/styles/_forms.scss delete mode 100644 apps/redi-connect/src/styles/_global.scss delete mode 100644 apps/redi-connect/src/styles/main.scss delete mode 100644 libs/shared-atomic-design-components/src/lib/styles/_global.scss rename libs/shared-atomic-design-components/src/lib/styles/{_main.scss => global.scss} (89%) diff --git a/apps/redi-connect/src/components/organisms/Navbar.scss b/apps/redi-connect/src/components/organisms/Navbar.scss index b0f166be9..db6989c11 100644 --- a/apps/redi-connect/src/components/organisms/Navbar.scss +++ b/apps/redi-connect/src/components/organisms/Navbar.scss @@ -16,7 +16,7 @@ } } - // since the default a:hover behaviour is defined as underline (main.scss) we had + // since the default a:hover behaviour is defined as underline (global.scss) we had // to define this class for the logo and the !important explictly for safari browser &__logo:hover { text-decoration: none !important; diff --git a/apps/redi-connect/src/main.scss b/apps/redi-connect/src/main.scss new file mode 100644 index 000000000..72e480b1b --- /dev/null +++ b/apps/redi-connect/src/main.scss @@ -0,0 +1 @@ +@import 'global.scss'; diff --git a/apps/redi-connect/src/main.tsx b/apps/redi-connect/src/main.tsx index ecb6c9d95..fa903c840 100755 --- a/apps/redi-connect/src/main.tsx +++ b/apps/redi-connect/src/main.tsx @@ -4,8 +4,8 @@ import React from 'react' import ReactDOM from 'react-dom' import App from './App' // import i18n (needs to be bundled ;)) +import './main.scss' import './services/i18n/i18n' -import './styles/main.scss' // We used to call initSentry('con') here. Now we can only init Sentry // if user accepts it in the cookie banner. So we expose the function diff --git a/apps/redi-connect/src/styles/_forms.scss b/apps/redi-connect/src/styles/_forms.scss deleted file mode 100644 index 3c641af6b..000000000 --- a/apps/redi-connect/src/styles/_forms.scss +++ /dev/null @@ -1,69 +0,0 @@ -@import './_variables'; -.submit { - &-link { - font-size: $size-7; - - &--pre { - text-align: right; - } - - &--post { - text-align: center; - margin-top: 2rem; - } - } -} - -// test solution for the slide in errors -.help { - height: 0px; - margin: 0px; - overflow: hidden; - transition: $transition; - - &--show { - margin-top: 0.25rem; - height: 21px; - } -} - -.control { - &:after { - content: ''; - transition: ease-out opacity 0.1s; - opacity: 0; - } - - &.field-clean { - &:after { - position: absolute; - opacity: 1; - width: 0.5rem; - height: 1rem; - top: 50%; - margin-top: -0.6rem; - right: 1rem; - border: solid $green; - border-width: 0 2px 2px 0; - transform: rotate(45deg); - } - } - - &.textarea-clean { - &:after { - position: absolute; - opacity: 1; - width: 0.5rem; - height: 1rem; - bottom: 10px; - right: 14px; - border: solid $green; - border-width: 0 2px 2px 0; - transform: rotate(45deg); - } - } -} - -.submit-spacer { - margin-top: 3em; -} diff --git a/apps/redi-connect/src/styles/_global.scss b/apps/redi-connect/src/styles/_global.scss deleted file mode 100644 index 8e1cdbc18..000000000 --- a/apps/redi-connect/src/styles/_global.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '~bulma/sass/utilities/_all'; -@import './_variables.scss'; - -.block-separator { - .block-separator { - @include mobile() { - padding-bottom: 1.5rem; - margin-bottom: -0.5rem; - border-bottom: 1px solid $grey-light; - } - } - - &:not(:last-child) { - padding-bottom: 1.5rem; - margin-bottom: 1.5rem; - border-bottom: 1px solid $grey-light; - } -} diff --git a/apps/redi-connect/src/styles/main.scss b/apps/redi-connect/src/styles/main.scss deleted file mode 100644 index 2cff598d8..000000000 --- a/apps/redi-connect/src/styles/main.scss +++ /dev/null @@ -1,176 +0,0 @@ -// custom variable overwrites for bulma -@import '_variables.scss'; - -@import '_global.scss'; - -// bulma global dependencies -@import '~bulma/sass/utilities/_all'; -@import '~bulma/sass/base/_all.sass'; - -// styles for the components used from bulma -@import '~bulma/sass/grid/columns.sass'; -@import '~bulma/sass/form/_all.sass'; -@import '~bulma/sass/elements/title.sass'; -@import '~bulma/sass/elements/container.sass'; -@import '~bulma/sass/layout/section.sass'; -@import '~bulma/sass/elements/content.sass'; -@import '~bulma/sass/elements/tag.sass'; -@import '~bulma/sass/elements/box.sass'; -@import '~bulma/sass/components/modal.sass'; -@import '~bulma/sass/components/card.sass'; -@import '~bulma/sass/elements/image.sass'; -@import '~bulma/sass/elements/notification.sass'; -@import '~bulma-checkradio/src/sass/index.sass'; - -//custom modifiers -@import '_fonts.scss'; -@import '_forms.scss'; - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} - -%arrow { - border: 2px solid $redi-orange-dark; - border-right: 0; - border-top: 0; - content: ' '; - display: block; - height: 0.625em; - margin-top: -0.4375em; - pointer-events: none; - position: absolute; - top: 50%; - transform: rotate(-45deg); - transform-origin: center; - width: 0.625em; -} - -input, -textarea, -select { - &::placeholder { - font-style: italic; - color: $grey !important; - } -} - -a { - font-weight: 800; -} - -a:hover { - text-decoration: underline; -} - -.field:not(:last-child) { - margin-bottom: 1em; -} - -.is-uppercase { - letter-spacing: 2px; -} - -.section { - @include tablet { - padding: $section-padding-medium; - } - - &--separator { - border-top: 1px solid $grey-light; - } - - &.section--bottom-large-spaceing { - padding-bottom: 4rem; - - @include tablet { - padding-bottom: 10rem; - - .container { - margin-bottom: -10rem; - padding-bottom: 10rem; - } - } - } -} - -// fix word wrapping in the content... maybe a bulma bug? -.content { - word-break: break-word; -} - -.title, -.subtitle { - + .content { - margin-top: -0.5rem; - } -} - -// TODO: should be transfered to a layout template -// will be done the next time this view is reused -.section.color-half-desktop { - background-color: $white; - - @include tablet() { - background: linear-gradient(90deg, $redi-blue-light 50%, $white 50%); - } -} - -.section.color-half-tablet { - background-color: $white; - - @include desktop() { - background: linear-gradient(90deg, $redi-blue-light 50%, $white 50%); - } -} - -.column--main-content { - min-height: 40rem; - position: relative; -} - -.color-side-menu { - margin: -0.75rem auto; - padding: 0.75rem 0; - - @include desktop() { - margin: -3.25rem auto; - padding: 3.25rem 0; - background: linear-gradient(90deg, $redi-blue-light 15.8%, $white 15.8%); - } -} - -.default-background { - background: white; - z-index: -2; -} - -.tag.is-large { - height: 2.5rem; -} - -.oneandhalf-bs { - margin-bottom: 1rem; - - @include tablet() { - margin-bottom: 1.5rem !important; - } -} - -.double-bs { - margin-bottom: 1rem; - - @include tablet() { - margin-bottom: 2rem !important; - } -} - -.account-not-active { - display: flex; - align-items: center; - - &__icon { - flex-shrink: 0; - } -} diff --git a/apps/redi-talent-pool/src/components/organisms/Navbar.scss b/apps/redi-talent-pool/src/components/organisms/Navbar.scss index 80b5a92c6..09796b255 100644 --- a/apps/redi-talent-pool/src/components/organisms/Navbar.scss +++ b/apps/redi-talent-pool/src/components/organisms/Navbar.scss @@ -23,7 +23,7 @@ } } - // since the default a:hover behaviour is defined as underline (main.scss) we had + // since the default a:hover behaviour is defined as underline (global.scss) we had // to define this class for the logo and the !important explictly for safari browser &__logo:hover { text-decoration: none !important; diff --git a/apps/redi-talent-pool/src/components/templates/LoggedIn.scss b/apps/redi-talent-pool/src/components/templates/LoggedIn.scss index 90aecb943..f76090b47 100644 --- a/apps/redi-talent-pool/src/components/templates/LoggedIn.scss +++ b/apps/redi-talent-pool/src/components/templates/LoggedIn.scss @@ -1,7 +1,8 @@ +@import '_variables'; @import '~bulma/sass/utilities/_all'; .tp-side-menu { - background-color: #eff6f8; + background-color: $redi-blue-light; min-width: 84px; diff --git a/apps/redi-talent-pool/src/main.scss b/apps/redi-talent-pool/src/main.scss index 62ef5f3a5..72e480b1b 100644 --- a/apps/redi-talent-pool/src/main.scss +++ b/apps/redi-talent-pool/src/main.scss @@ -1 +1 @@ -@import '_main.scss'; +@import 'global.scss'; diff --git a/apps/redi-talent-pool/src/pages/app/jobseeker-profile/JobseekerProfileForJobseekerEyes.scss b/apps/redi-talent-pool/src/pages/app/jobseeker-profile/JobseekerProfileForJobseekerEyes.scss index ef7b615a1..6426479cf 100644 --- a/apps/redi-talent-pool/src/pages/app/jobseeker-profile/JobseekerProfileForJobseekerEyes.scss +++ b/apps/redi-talent-pool/src/pages/app/jobseeker-profile/JobseekerProfileForJobseekerEyes.scss @@ -1,8 +1,5 @@ -@import '_variables.scss'; -@import 'global.scss'; - -$tp-light-blue: #58adc4; -$tp-blue: #eff6f8; +@import '_variables'; +@import '~bulma/sass/utilities/_all'; .onboarding-steps { display: flex; @@ -17,7 +14,7 @@ $tp-blue: #eff6f8; margin-bottom: 2.5rem; } - border: 1px solid #d8d8d8; + border: 1px solid $grey-light; &--header { display: flex; @@ -45,9 +42,9 @@ $tp-blue: #eff6f8; } } &--item.current-step { - background-color: $tp-blue; + background-color: $redi-blue-light; } &--item.completed-step { - color: $tp-light-blue; + color: $redi-blue-dark; } } diff --git a/apps/redi-talent-pool/src/pages/app/me/TpCompanyProfileOnboardingSteps.scss b/apps/redi-talent-pool/src/pages/app/me/TpCompanyProfileOnboardingSteps.scss index 1f0d3bb6a..71bc6879c 100644 --- a/apps/redi-talent-pool/src/pages/app/me/TpCompanyProfileOnboardingSteps.scss +++ b/apps/redi-talent-pool/src/pages/app/me/TpCompanyProfileOnboardingSteps.scss @@ -1,8 +1,5 @@ -@import '_variables.scss'; -@import 'global.scss'; - -$tp-light-blue: #58adc4; -$tp-blue: #eff6f8; +@import '_variables'; +@import '~bulma/sass/utilities/_all'; .company-onboarding-steps { display: flex; @@ -17,7 +14,7 @@ $tp-blue: #eff6f8; margin-bottom: 2.5rem; } - border: 1px solid #d8d8d8; + border: 1px solid $grey-light; &--header { display: flex; @@ -45,9 +42,9 @@ $tp-blue: #eff6f8; } } &--item.current-step { - background-color: $tp-blue; + background-color: $redi-blue-light; } &--item.completed-step { - color: $tp-light-blue; + color: $redi-blue-dark; } } diff --git a/libs/shared-atomic-design-components/src/lib/styles/_forms.scss b/libs/shared-atomic-design-components/src/lib/styles/_forms.scss index 3c641af6b..10f909251 100644 --- a/libs/shared-atomic-design-components/src/lib/styles/_forms.scss +++ b/libs/shared-atomic-design-components/src/lib/styles/_forms.scss @@ -1,4 +1,5 @@ -@import './_variables'; +@import '_variables'; + .submit { &-link { font-size: $size-7; diff --git a/libs/shared-atomic-design-components/src/lib/styles/_global.scss b/libs/shared-atomic-design-components/src/lib/styles/_global.scss deleted file mode 100644 index 8e1cdbc18..000000000 --- a/libs/shared-atomic-design-components/src/lib/styles/_global.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '~bulma/sass/utilities/_all'; -@import './_variables.scss'; - -.block-separator { - .block-separator { - @include mobile() { - padding-bottom: 1.5rem; - margin-bottom: -0.5rem; - border-bottom: 1px solid $grey-light; - } - } - - &:not(:last-child) { - padding-bottom: 1.5rem; - margin-bottom: 1.5rem; - border-bottom: 1px solid $grey-light; - } -} diff --git a/libs/shared-atomic-design-components/src/lib/styles/_main.scss b/libs/shared-atomic-design-components/src/lib/styles/global.scss similarity index 89% rename from libs/shared-atomic-design-components/src/lib/styles/_main.scss rename to libs/shared-atomic-design-components/src/lib/styles/global.scss index d0f73e24b..6c3ffc595 100644 --- a/libs/shared-atomic-design-components/src/lib/styles/_main.scss +++ b/libs/shared-atomic-design-components/src/lib/styles/global.scss @@ -1,7 +1,5 @@ // custom variable overwrites for bulma -@import '_variables.scss'; - -@import '_global.scss'; +@import '_variables'; // bulma global dependencies @import '~bulma/sass/utilities/_all'; @@ -22,9 +20,9 @@ @import '~bulma/sass/elements/notification.sass'; @import '~bulma-checkradio/src/sass/index.sass'; -//custom modifiers -@import '_fonts.scss'; -@import '_forms.scss'; +// custom modifiers +@import '_fonts'; +@import '_forms'; code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', @@ -179,3 +177,19 @@ a:hover { flex-shrink: 0; } } + +.block-separator { + .block-separator { + @include mobile() { + padding-bottom: 1.5rem; + margin-bottom: -0.5rem; + border-bottom: 1px solid $grey-light; + } + } + + &:not(:last-child) { + padding-bottom: 1.5rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid $grey-light; + } +} diff --git a/workspace.json b/workspace.json index 6ae0cfe86..9b59a8dfd 100644 --- a/workspace.json +++ b/workspace.json @@ -253,7 +253,8 @@ "styles": [], "stylePreprocessorOptions": { "includePaths": [ - "libs/shared-atomic-design-components/src/lib/styles" + "libs/shared-atomic-design-components/src/lib/styles", + "libs/shared-atomic-design-components/src/assets/fonts" ] }, "extractCss": true,