fix: changed styles for difficulty component

Author: DamianBrzezinskiHoA

libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html

@@ -3,7 +3,7 @@
     class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
   >
     <al-footer-logo class="self-center" [currentYear]="currentYear" />
-    <al-navigation />
+    <al-navigation [whiteFont]="true" />
     <div
       class="social-media-container flex items-center justify-self-end md:max-lg:justify-self-center"
     >

libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.html

@@ -21,7 +21,8 @@
         >
           <a
             [attr.data-testid]="item.dataTestId"
-            class="text-al-foreground p-2 font-medium md:p-6"
+            class="p-2 font-medium md:p-6"
+            [ngClass]="whiteFont() ? 'text-white' : 'text-al-foreground'"
             [routerLinkActive]="'text-al-pink'"
             [routerLink]="item.link | alLocalize"
             (click)="navigated.emit()"
@@ -33,7 +34,8 @@
         <li>
           <a
             [attr.data-testid]="item.dataTestId"
-            class="text-al-foreground p-2 font-medium md:p-6"
+            class="p-2 font-medium md:p-6"
+            [ngClass]="whiteFont() ? 'text-white' : 'text-al-foreground'"
             [href]="item.link"
             target="_blank"
           >

libs/blog/layouts/ui-navigation/src/lib/navigation/navigation.component.ts

@@ -33,6 +33,7 @@ export type NavItem = {
 })
 export class NavigationComponent {
   readonly layout = input<'vertical' | 'horizontal'>('horizontal');
+  readonly whiteFont = input<boolean>(false);
 
   readonly navItems: NavItem[] = [
     {

libs/blog/shared/ui-difficulty/src/lib/ui-difficulty.component.ts

@@ -27,7 +27,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
         class="flex items-center self-stretch rounded-l-md pl-1 text-center align-middle xl:pl-2"
         [ngClass]="{
           'dark:bg-al-background bg-transparent': isColorBackground(),
-          'bg-al-border': !isColorBackground(),
+          'bg-al-grey': !isColorBackground(),
         }"
       >
         <span
@@ -79,7 +79,7 @@ export type UiDifficulty = 'beginner' | 'intermediate' | 'advanced';
         class="flex items-center self-stretch rounded-r-md pr-1 text-center align-middle"
         [ngClass]="{
           'dark:bg-al-background bg-transparent': isColorBackground(),
-          'bg-al-border': !isColorBackground(),
+          'bg-al-grey': !isColorBackground(),
         }"
       ></div>
     </div>

libs/shared/assets/src/lib/styles/main.scss

@@ -13,6 +13,7 @@
     --border: 46 47 59;
     --card: 25 26 34;
     --background: 16 15 21;
+    --grey: 46 47 59;
   }
 
   @media (prefers-color-scheme: light) {
@@ -24,6 +25,7 @@
       --border: 200 200 200;
       --card: 255 255 255;
       --background: 255 255 255;
+      --grey: 241 241 241;
     }
   }
 }

tailwind.preset.js

@@ -19,6 +19,7 @@ module.exports = {
         'al-pink': 'rgba(var(--primary) / <alpha-value>)',
         'al-primary': 'rgba(var(--primary) / <alpha-value>)',
         'al-muted': 'rgba(var(--muted) / <alpha-value>)',
+        'al-grey': 'rgba(var(--grey) / <alpha-value>)',
       },
       backgroundImage: {
         'al-radial-gradient':
@@ -31,7 +32,7 @@ module.exports = {
       boxShadow: {
         'al-primary': '0 0 0 1px rgba(var(--primary) / <alpha-value>)',
         'al-full-background': '0px 0px 0px 999px rgba(var(--background) / 1)',
-        'al-full-border': '0px 0px 0px 999px rgba(var(--border) / 1)',
+        'al-full-border': '0px 0px 0px 999px rgba(var(--grey) / 1)',
       },
     },
   },