Merge pull request #19 from Jurfest/feature/small-details

feature/small-details
Jurfest · Jul 2, 2024 · ae7c9c6 · ae7c9c6
2 parents a3f8f35 + 2082138
commit ae7c9c6
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -64,10 +64,30 @@ Lighthouse, integrated with Chrome DevTools, audits web pages by providing insig
 
 [PageSpeed Insights](https://pagespeed.web.dev/) analyzes web page content, offering suggestions for performance improvements on both mobile and desktop devices.
 
-<div style="display: flex; justify-content: space-between; align-items: center;">
-  <img src="./libs/shared/ui-design-system/src/assets/images/lighthouse-prod.png" alt="Lighthouse Metrics" style="width: 48%; height: 250px;">
-  <img src="./libs/shared/ui-design-system/src/assets/images/page-speed-insights.png" alt="PageSpeed Insights" style="width: 48%; height: 250px;">
-</div>
+<table>
+  <tr>
+    <td>
+      <img src="./libs/shared/ui-design-system/src/assets/images/lighthouse-prod.png" alt="Lighthouse Metrics" width="100%">
+    </td>
+    <td>
+      <img src="./libs/shared/ui-design-system/src/assets/images/page-speed-insights.png" alt="PageSpeed Insights" width="100%">
+    </td>
+  </tr>
+</table>
+
+<!-- Should work for README.html -->
+<!-- <div style="display: flex; justify-content: space-between; align-items: center; flex-direction: row;">
+  <img
+    src="./libs/shared/ui-design-system/src/assets/images/lighthouse-prod.png"
+    alt="Lighthouse Metrics"
+    style="width: 48%; aspect-ratio: 16 / 9;"
+  />
+  <img
+    src="./libs/shared/ui-design-system/src/assets/images/page-speed-insights.png"
+    alt="PageSpeed Insights"
+    style="width: 48%; aspect-ratio: 16 / 9;"
+  />
+</div> -->
 
 ## License
 

diff --git a/apps/toon-galaxy/src/app/app.component.ts b/apps/toon-galaxy/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NavbarComponent } from '@toon-galaxy/shared/ui-design-system';
 import { CharacterFacade } from '@toon-galaxy/toon-galaxy/domain';
@@ -10,6 +10,7 @@ import { CharacterFacade } from '@toon-galaxy/toon-galaxy/domain';
   selector: 'toon-galaxy-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   private characterFacade = inject(CharacterFacade);

diff --git a/libs/shared/ui-design-system/src/lib/components/atoms/logo/logo.component.ts b/libs/shared/ui-design-system/src/lib/components/atoms/logo/logo.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'design-system-logo',
   standalone: true,
   imports: [NgOptimizedImage],
   templateUrl: './logo.component.html',
   styleUrl: './logo.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LogoComponent {}
diff --git a/libs/shared/ui-design-system/src/lib/components/molecules/card/card.component.ts b/libs/shared/ui-design-system/src/lib/components/molecules/card/card.component.ts
@@ -1,5 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, input, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
 
 import { Card } from '../../../models/card';
 import { IconHighlightComponent } from '../icon-highlight/icon-highlight.component';
@@ -10,6 +15,7 @@ import { IconHighlightComponent } from '../icon-highlight/icon-highlight.compone
   imports: [CommonModule, IconHighlightComponent],
   templateUrl: './card.component.html',
   styleUrl: './card.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardComponent {
   card = input.required<Card>();

diff --git a/...ared/ui-design-system/src/lib/components/molecules/empty-result/empty-result.component.ts b/...ared/ui-design-system/src/lib/components/molecules/empty-result/empty-result.component.ts
@@ -1,12 +1,13 @@
-import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'design-system-empty-result',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './empty-result.component.html',
   styleUrl: './empty-result.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EmptyResultComponent {
   headingContent = input<string>('Nada foi encontrado');

diff --git a/.../ui-design-system/src/lib/components/molecules/icon-highlight/icon-highlight.component.ts b/.../ui-design-system/src/lib/components/molecules/icon-highlight/icon-highlight.component.ts
@@ -6,7 +6,12 @@ import {
   trigger,
 } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { Component, input, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
 
 import { IconComponent } from '../../atoms/icon/icon.component';
 
@@ -16,6 +21,7 @@ import { IconComponent } from '../../atoms/icon/icon.component';
   imports: [CommonModule, IconComponent],
   templateUrl: './icon-highlight.component.html',
   styleUrl: './icon-highlight.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('toggleHeartBackground', [
       state(

diff --git a/libs/shared/ui-design-system/src/lib/components/organisms/card-list/card-list.component.ts b/libs/shared/ui-design-system/src/lib/components/organisms/card-list/card-list.component.ts
@@ -1,4 +1,9 @@
-import { Component, input, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
 
 import { Card } from '../../../models/card';
 import { CardComponent } from '../../molecules/card/card.component';
@@ -9,6 +14,7 @@ import { CardComponent } from '../../molecules/card/card.component';
   imports: [CardComponent],
   templateUrl: './card-list.component.html',
   styleUrl: './card-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardListComponent {
   cardList = input.required<Card[]>();

diff --git a/libs/toon-galaxy/feature-character/src/lib/containers/character/character.component.ts b/libs/toon-galaxy/feature-character/src/lib/containers/character/character.component.ts
@@ -1,5 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -42,6 +47,7 @@ import {
   selector: 'toon-galaxy-character',
   templateUrl: './character.component.html',
   styleUrls: ['./character.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CharacterComponent implements OnInit {
   private router = inject(Router);