feat: light mode improvements

Author: marcin-hoa

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss

@@ -53,6 +53,7 @@
   code:not(pre code) {
     padding: 0.2em 0.4em;
     background: #2e2f3b;
+    color: white;
     border-radius: 4px;
     font-size: 0.85rem;
     font-weight: 600;

libs/blog/authors/ui-author-card/src/lib/author-card.component.html

@@ -14,7 +14,7 @@ import {
     class: 'block @container',
   },
   template: `
-    <al-card alGradientCard>
+    <al-card>
       <div alCardContent>
         <div
           class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"

libs/blog/authors/ui-author-card/src/lib/author-card.component.ts

@@ -27,13 +27,13 @@ <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
             class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
           >
             <a
-              class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
+              al-button
+              class="h-[46px] w-full"
+              [size]="'small'"
               href="https://form.typeform.com/to/Zzf1Girt?typeform-source=angular.love"
               target="_blank"
             >
-              <p class="text-sm font-bold text-white">
-                {{ t('becomeAuthorCard.buttonText') }}
-              </p>
+              {{ t('becomeAuthorCard.buttonText') }}
             </a>
           </div>
         </al-become-author-advertisement>
@@ -58,12 +58,12 @@ <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
             class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
           >
             <a
-              class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
+              al-button
+              class="h-[46px] w-full"
+              [size]="'small'"
               [routerLink]="'/writing-rules' | alLocalize"
             >
-              <p class="text-center text-sm font-bold text-white">
-                {{ t('articleWritingRules.buttonText') }}
-              </p>
+              {{ t('articleWritingRules.buttonText') }}
             </a>
           </div>
         </al-become-author-advertisement>

libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts

@@ -3,6 +3,7 @@ import { RouterLink } from '@angular/router';
 import { TranslocoDirective } from '@jsverse/transloco';
 
 import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
+import { ButtonComponent } from '@angular-love/blog/shared/ui-button';
 import {
   CardComponent,
   GradientCardDirective,
@@ -23,6 +24,7 @@ import { BecomeAuthorImprovementsComponent } from '../components/become-author-i
     TranslocoDirective,
     RouterLink,
     AlLocalizePipe,
+    ButtonComponent,
   ],
   templateUrl: './become-author-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html

@@ -15,7 +15,7 @@ import { Lang } from '@angular-love/contracts/articles';
   template: `
     <div class="flex h-full items-center text-sm">
       <label
-        class="relative block text-gray-400 focus-within:text-gray-600"
+        class="text-al-primary-foreground relative block focus-within:text-gray-600"
         for="language"
       >
         <span class="sr-only">Select language</span>

libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts

@@ -17,11 +17,11 @@ export type AlButtonVariant =
 export type AlButtonSize = 'small' | 'medium' | 'large';
 
 const buttonVariants = cva(
-  `rounded-lg flex cursor-pointer items-center gap-2 no-underline disabled:cursor-[initial] disabled:opacity-50`,
+  `rounded-lg flex cursor-pointer items-center gap-2 justify-center no-underline disabled:cursor-[initial] disabled:opacity-50`,
   {
     variants: {
       variant: <Record<AlButtonVariant, string>>{
-        Primary: 'bg-al-primary/90',
+        Primary: 'bg-al-primary/90 text-white font-bold uppercase',
         Secondary: 'bg-al-background border',
         Outline: 'border border-al-primary/90 bg-white text-al-primary',
         Ghost: 'bg-transparent',

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

@@ -27,7 +27,7 @@
     :root {
       --primary: 213 1 89;
       --foreground: 20 21 27;
-      --primary-foreground: 106 121 139;
+      --primary-foreground: 0 0 0;
       --muted: 25 25 25;
       --border: 200 200 200;
       --card: 255 255 255;
@@ -91,6 +91,6 @@ html {
 
 @layer components {
   .al-link {
-    @apply text-blue-400 hover:underline;
+    @apply text-blue-600 hover:underline;
   }
 }