feat: consolidate styles in global.scss in shared-atomic-design-compo…

…nents 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

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;

apps/redi-connect/src/main.scss

@@ -0,0 +1 @@
+@import 'global.scss';

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

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;

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;
 

apps/redi-talent-pool/src/main.scss

@@ -1 +1 @@
-@import '_main.scss';
+@import 'global.scss';

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;
   }
 }

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;
   }
 }

libs/shared-atomic-design-components/src/lib/styles/_forms.scss

@@ -1,4 +1,5 @@
-@import './_variables';
+@import '_variables';
+
 .submit {
   &-link {
     font-size: $size-7;