Revert "feat: enable light mode (#255)" (#443)

This reverts commit 600f623.

Author: DDonochVA

apps/blog/src/assets/icons/arrow-down.svg

@@ -1,9 +1,9 @@
 <ng-container *transloco="let t; read: 'aboutUsPage'">
-  <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
+  <h2 class="py-4 text-[40px] font-bold">
     {{ t('title') }}
   </h2>
 
-  <al-card class="bg-transparent">
+  <al-card>
     <section
       alCardContent
       aria-labelledby="angular-love"
@@ -35,7 +35,7 @@ <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     <al-newsletter alCardContent />
   </al-card>
 
-  <h2 class="text-al-primary-foreground mb-8 mt-10 text-[40px] font-bold">
+  <h2 class="mb-8 mt-10 text-[40px] font-bold">
     {{ t('authorsTitle') }}
   </h2>
 </ng-container>

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html

@@ -38,6 +38,7 @@ import { CategoryListItem, injectCategories } from './categories.const';
     NgClass,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,
+    CardComponent,
     RepeatDirective,
     RouterLink,
     ButtonComponent,

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts

@@ -1,17 +1,16 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+    class="h-full rounded-lg bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
+    [style.background-image]="
+      'url(' +
+      (article().featuredImageUrl || 'assets/article-placeholder.webp') +
+      ')'
+    "
     [attr.aria-labelledby]="article().slug"
   >
-    <img
-      alt="Post featured image"
-      class="absolute h-auto w-full bg-contain opacity-20"
-      [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
-      [priority]="imagePriority()"
-      width="1215"
-      height="750"
-    />
-    <div class="relative flex h-full flex-col justify-between text-[#fff]">
+    <div
+      class="bg-al-background relative flex h-full flex-col justify-between opacity-85"
+    >
       <div
         class="hover:bg-al-bottom-radial-gradient absolute h-full w-full"
       ></div>

libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html

@@ -1,4 +1,3 @@
-import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
@@ -10,17 +9,9 @@ import { AvatarComponent } from '@angular-love/blog/shared/ui-avatar';
 @Component({
   selector: 'al-article-compact-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    AvatarComponent,
-    RouterLink,
-    AlLocalizePipe,
-    FastSvgComponent,
-    NgOptimizedImage,
-  ],
+  imports: [AvatarComponent, RouterLink, AlLocalizePipe, FastSvgComponent],
   templateUrl: './article-compact-card.component.html',
 })
 export class ArticleCompactCardComponent {
   readonly article = input.required<ArticleCard>();
-  readonly imagePriority = input<number | null>(null);
 }

libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts

@@ -7,7 +7,7 @@ import { CardComponent } from '@angular-love/blog/shared/ui-card';
   selector: 'al-article-hero-card-skeleton',
   imports: [NgxSkeletonLoaderModule, CardComponent],
   template: `
-    <al-card class="bg-transparent">
+    <al-card>
       <div alCardContent class="p-2">
         <div class="flex flex-row items-center">
           <!-- avatar -->

libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts

@@ -1,6 +1,6 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="light:border group relative flex h-full w-full flex-row rounded-lg shadow-none"
+    class="group relative flex h-full w-full flex-row rounded-lg shadow-none max-h-52"
     [attr.aria-labelledby]="article().slug"
   >
     <img

libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html

@@ -1,6 +1,6 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent"
+    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border border-transparent shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"
     [attr.aria-labelledby]="article().slug"
   >
     <div
@@ -18,12 +18,8 @@
     <div class="rounded-b-lg">
       <div class="flex items-center justify-between px-4 pt-4">
         <div class="flex items-center gap-2">
-          <al-avatar
-            [imageSrc]="article().author.avatarUrl"
-            [priority]="imagePriority()"
-            size="32"
-          />
-          <span class="text-al-primary-foreground text-sm/[14px] font-medium">
+          <al-avatar [imageSrc]="article().author.avatarUrl" size="32" />
+          <span class="text-sm/[14px] font-medium">
             {{ article().author.name }}
           </span>
         </div>
@@ -38,14 +34,10 @@
         </div>
       </div>
       <div class="flex flex-col gap-3 px-4 pb-4 pt-3">
-        <h3
-          class="*:text-al-primary-foreground text-2xl font-bold *:not-italic"
-          [id]="article().slug"
-          style="word-break: break-word"
-        >
+        <h3 class="text-2xl font-bold" [id]="article().slug">
           {{ article().title }}
         </h3>
-        <p class="*:text-al-pink line-clamp-2 *:font-medium *:not-italic">
+        <p class="line-clamp-2">
           {{ article().excerpt }}
         </p>
       </div>

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html

@@ -12,9 +12,6 @@
     />
   }
   @case ('compact') {
-    <al-article-compact-card
-      [article]="article()"
-      [imagePriority]="imagePriority()"
-    />
+    <al-article-compact-card [article]="article()" />
   }
 }

libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html

@@ -1,7 +1,7 @@
 <div class="my-5 flex flex-row items-center justify-between gap-6">
   <h2
     data-testId="article-list-title"
-    class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
+    class="line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
   >
     {{ title() }}
   </h2>