feat: refactored GradientCardDirective & CardComponent

Author: DamianBrzezinskiHoA

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

@@ -3,7 +3,7 @@ <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     {{ t('title') }}
   </h2>
 
-  <al-card>
+  <al-card class="bg-transparent">
     <section
       alCardContent
       aria-labelledby="angular-love"
@@ -31,7 +31,7 @@ <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     </section>
   </al-card>
 
-  <al-card alGradientCard class="mt-6 block md:mt-8 lg:hidden">
+  <al-card alDarkGradientCard class="mt-6 block md:mt-8 lg:hidden">
     <al-newsletter alCardContent />
   </al-card>
 

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

@@ -12,7 +12,7 @@ import { AuthorCardComponent } from '@angular-love/blog/authors/ui-author-card';
 import { NewsletterComponent } from '@angular-love/blog/newsletter';
 import {
   CardComponent,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 import { InfiniteScrollTriggerDirective } from '@angular-love/blog/shared/ui-pagination';
 import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-media-icons';
@@ -24,7 +24,7 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
     CardComponent,
     NewsletterComponent,
     SocialMediaIconsComponent,
-    GradientCardDirective,
+    DarkGradientCardDirective,
     AuthorCardComponent,
     InfiniteScrollTriggerDirective,
     TranslocoPipe,

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html

@@ -36,7 +36,7 @@ <h2 id="article-title" class="flex text-[40px] font-bold">
           />
         </div>
       </al-card>
-      <al-card alGradientCard #view>
+      <al-card alDarkGradientCard #view>
         <al-newsletter alCardContent />
       </al-card>
 

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts

@@ -22,7 +22,7 @@ import {
   CardContentDirective,
   CardSkeletonComponent,
   DarkCardDirective,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 import { UiDifficultyComponent } from '@angular-love/blog/shared/ui-difficulty';
 import { Article } from '@angular-love/contracts/articles';
@@ -36,7 +36,7 @@ import { ArticleShareIconsComponent } from '../article-share-icons/article-share
   imports: [
     DatePipe,
     ArticleContentComponent,
-    GradientCardDirective,
+    DarkGradientCardDirective,
     NewsletterComponent,
     CardContentDirective,
     AuthorCardComponent,

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

@@ -22,7 +22,7 @@
     <al-article-regular-card-skeleton *alRepeat="4" />
   }
   <al-card
-    alGradientCard
+    alDarkGradientCard
     class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
   >
     <al-newsletter alCardContent />

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

@@ -11,7 +11,7 @@ import { UiArticleListTitleComponent } from '@angular-love/blog/articles/ui-arti
 import { NewsletterComponent } from '@angular-love/blog/newsletter';
 import {
   CardComponent,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 import { RepeatDirective } from '@angular-love/utils';
 
@@ -25,7 +25,7 @@ import { RepeatDirective } from '@angular-love/utils';
     UiArticleCardComponent,
     NewsletterComponent,
     CardComponent,
-    GradientCardDirective,
+    DarkGradientCardDirective,
     NgClass,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,

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

@@ -8,7 +8,7 @@ import { CardComponent } from '@angular-love/blog/shared/ui-card';
   standalone: true,
   imports: [NgxSkeletonLoaderModule, CardComponent],
   template: `
-    <al-card>
+    <al-card class="bg-transparent">
       <div alCardContent class="p-2">
         <div class="flex flex-row items-center">
           <!-- avatar -->
@@ -18,7 +18,7 @@ import { CardComponent } from '@angular-love/blog/shared/ui-card';
             [theme]="{
               height: '32px',
               width: '32px',
-              margin: '0'
+              margin: '0',
             }"
           />
           <!-- name -->

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

@@ -3,24 +3,24 @@ import { Component } from '@angular/core';
 import {
   CardComponent,
   CardContentDirective,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 
 @Component({
   selector: 'al-author-card-template',
   standalone: true,
-  imports: [CardComponent, CardContentDirective, GradientCardDirective],
+  imports: [CardComponent, CardContentDirective, DarkGradientCardDirective],
   host: {
     class: 'block @container',
   },
   template: `
-    <al-card alGradientCard>
+    <al-card alDarkGradientCard>
       <div alCardContent>
         <div
           class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"
         >
           <div
-            class="@3xl:border @3xl:!bg-al-radial-gradient @3xl:bg-al-background @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
+            class="@3xl:border dark:@3xl:!bg-al-radial-gradient dark:@3xl:bg-al-background light:bg-[#f2f2f2] @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
           >
             <div
               class="@3xl:max-w-[360px] flex w-full flex-col items-center gap-4"

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

@@ -10,7 +10,7 @@ <h2 class="lg:pt-15 py-4 text-4xl font-bold md:pb-6 md:text-[40px]/[56px]">
       <al-become-author-benefits [benefits]="t('benefits.items')" />
     </div>
     <div class="lg:col-span-3">
-      <al-card alGradientCard>
+      <al-card alDarkGradientCard>
         <al-become-author-advertisement alCardContent />
       </al-card>
     </div>

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

@@ -3,7 +3,7 @@ import { TranslocoDirective } from '@jsverse/transloco';
 
 import {
   CardComponent,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 
 import { BecomeAuthorAdvertisementComponent } from '../components/become-author-advertisement/become-author-advertisement.component';
@@ -16,7 +16,7 @@ import { BecomeAuthorImprovementsComponent } from '../components/become-author-i
   imports: [
     BecomeAuthorBenefitsComponent,
     BecomeAuthorImprovementsComponent,
-    GradientCardDirective,
+    DarkGradientCardDirective,
     CardComponent,
     BecomeAuthorAdvertisementComponent,
     TranslocoDirective,

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

@@ -1,4 +1,4 @@
-<al-card alGradientCard>
+<al-card alDarkGradientCard>
   <section alCardContent aria-labelledby="author-ad-title" class="@container">
     <div
       *transloco="let t; read: 'becomeAuthorPage.becomeAuthorCard'"

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

@@ -3,15 +3,15 @@ import { TranslocoDirective } from '@jsverse/transloco';
 
 import {
   CardComponent,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 
 @Component({
   selector: 'al-become-author-advertisement',
   standalone: true,
   templateUrl: './become-author-advertisement.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [GradientCardDirective, CardComponent, TranslocoDirective],
+  imports: [DarkGradientCardDirective, CardComponent, TranslocoDirective],
   host: {
     'data-testid': 'become-author-advertisement',
   },

libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.html

@@ -1,4 +1,4 @@
-<al-card alGradientCard>
+<al-card alDarkGradientCard>
   <section alCardContent aria-labelledby="newsletter-title" aria-live="polite">
     <ng-container *transloco="let t; read: 'newsletter'">
       <form data-testid="newsletter-form" [formGroup]="form">

libs/blog/newsletter/feature-newsletter/src/lib/feature-newsletter/newsletter.component.ts

@@ -18,15 +18,15 @@ import { AlLocalizeService } from '@angular-love/blog/i18n/util';
 import { ButtonComponent } from '@angular-love/blog/shared/ui-button';
 import {
   CardComponent,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 import { NewsletterStore } from '@angular-love/data-access';
 
 @Component({
   selector: 'al-newsletter',
   standalone: true,
   imports: [
-    GradientCardDirective,
+    DarkGradientCardDirective,
     CardComponent,
     ReactiveFormsModule,
     TranslocoDirective,

libs/blog/search/feature-search-results-page/src/lib/search-results-page/search-results-page.component.html

@@ -34,6 +34,6 @@
   }
 }
 
-<al-card alGradientCard class="hidden lg:block">
+<al-card alDarkGradientCard class="hidden lg:block">
   <al-newsletter alCardContent />
 </al-card>

libs/blog/search/feature-search-results-page/src/lib/search-results-page/search-results-page.component.ts

@@ -5,7 +5,7 @@ import { NewsletterComponent } from '@angular-love/blog/newsletter';
 import { SearchListStore } from '@angular-love/blog/search/data-access';
 import {
   CardComponent,
-  GradientCardDirective,
+  DarkGradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 import {
   PaginationComponent,
@@ -25,7 +25,7 @@ import { SearchResultsPagePresenter } from './search-results-page.presenter';
     UiArticleCardComponent,
     NewsletterComponent,
     CardComponent,
-    GradientCardDirective,
+    DarkGradientCardDirective,
     PaginationComponent,
     QueryPaginationDirective,
   ],

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

@@ -64,12 +64,12 @@ export class CardLinkableDirective {
 
 @Directive({
   standalone: true,
-  selector: 'al-card[alGradientCard]',
+  selector: 'al-card[alDarkGradientCard]',
 })
-export class GradientCardDirective {
+export class DarkGradientCardDirective {
   @HostBinding('class')
   get hostClasses() {
-    return 'border !bg-al-radial-gradient bg-al-card dark:bg-al-background';
+    return 'dark:!bg-al-radial-gradient dark:bg-al-background';
   }
 }
 
@@ -98,5 +98,5 @@ export class CardComponent {
   ref: ElementRef<HTMLElement> = inject(ElementRef);
 
   @HostBinding('class')
-  hostClasses = 'block rounded-lg border shadow-sm overflow-hidden';
+  hostClasses = 'block rounded-lg border bg-al-card shadow-sm overflow-hidden';
 }

libs/blog/shared/ui-card/src/lib/card.stories.ts

@@ -58,7 +58,7 @@ const content =
 export const regular: Story = {
   render: () => ({
     template: wrapper(`
-      <al-card>
+      <al-card class="bg-transparent">
         <div alCardHeader>Header</div>
         <div alCardContent>${content}</div>
         <div alCardFooter>Footer</div>