From 28099afe1a8cac0bc46d3f878f0ee5edcc42abae Mon Sep 17 00:00:00 2001
From: Sashikumar Yadav <yshashi30@gmail.com>
Date: Thu, 13 Jun 2024 22:17:32 +0800
Subject: [PATCH] feat(home-module): initial UI redesign (#30)

* feat(home-module): initial UI redesign

* chore: updated icon with primeng class
---
 pdf/src/app/app.component.ts                  |  14 ++-
 pdf/src/app/pages/(home).page.ts              |  81 ++++++------
 pdf/src/app/pages/pdf-to-images.page.ts       |  74 ++++++-----
 .../components/footer/footer.component.ts     |  23 ++--
 .../components/header/header.component.ts     | 119 +++++++++++++-----
 .../newsletter/newsletter.component.ts        |   4 +-
 pdf/src/styles.scss                           |  38 +++++-
 7 files changed, 241 insertions(+), 112 deletions(-)

diff --git a/pdf/src/app/app.component.ts b/pdf/src/app/app.component.ts
index 6211895..56e2fd5 100644
--- a/pdf/src/app/app.component.ts
+++ b/pdf/src/app/app.component.ts
@@ -8,12 +8,14 @@ import { NewsletterComponent } from './shared/components/newsletter/newsletter.c
   selector: 'pdf-root',
   standalone: true,
   template: `
-    <pdf-header />
-    <main class="m-8">
-      <router-outlet></router-outlet>
-    </main>
-    <pdf-newsletter class="block max-w-96 mx-auto mt-20" />
-    <pdf-footer />
+    <div class="flex flex-col min-h-screen">
+      <pdf-header />
+      <main class="m-8 container flex-1">
+        <router-outlet></router-outlet>
+      </main>
+      <pdf-newsletter class="block w-96 mx-auto mt-20" />
+      <pdf-footer />
+    </div>
   `,
   imports: [
     RouterOutlet,
diff --git a/pdf/src/app/pages/(home).page.ts b/pdf/src/app/pages/(home).page.ts
index b79db89..4c601b0 100644
--- a/pdf/src/app/pages/(home).page.ts
+++ b/pdf/src/app/pages/(home).page.ts
@@ -25,43 +25,54 @@ export const routeMeta: RouteMeta = {
   template: `
     <p-toast />
 
-    <h1 class="text-xl py-4">Resize your PDF file</h1>
-
-    <pdf-shout-out [type]="TaskType.RESIZE" />
-
-    <p-fileUpload
-      mode="advanced"
-      chooseLabel="Choose a PDF file"
-      accept="application/pdf"
-      name="myfile"
-      maxFileSize="10000000"
-      fileLimit="1"
-      uploadLabel="Upload & Resize"
-      (uploadHandler)="onUpload($event)"
-      [customUpload]="true"
-    />
-
-    @if(loading()) {
-    <p>Your file is uploaded and processing. Please wait for a moment ;)</p>
-    } @if(errorMessage()) {
-    <p class="text-red-500">{{ errorMessage() }}</p>
-    } @if(downloadUrl$ | async; as downloadUrl) {
-
-    <!-- Compare file size -->
-    @if(this.newFileSize() > this.currentFileSize()) {
-    <p>
-      Congratulations! Your file is reduced by
-      {{ this.newFileSize() - this.currentFileSize() }} bytes!
-    </p>
-    }
+    <div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md">
+      <h1 class="text-2xl font-semibold mb-4">Resize your PDF file</h1>
+
+      <pdf-shout-out [type]="TaskType.RESIZE" />
+
+      <p-fileUpload
+        mode="advanced"
+        chooseLabel="Choose a PDF file"
+        accept="application/pdf"
+        name="myfile"
+        maxFileSize="10000000"
+        fileLimit="1"
+        uploadLabel="Upload & Resize"
+        (uploadHandler)="onUpload($event)"
+        [customUpload]="true"
+        class="mb-4"
+      />
+
+      @if(loading()) {
+      <div class="flex items-center mb-4">
+        <p>Your file is uploaded and processing. Please wait for a moment ;)</p>
+      </div>
+      } @if(errorMessage()) {
+      <p class="text-red-500 mb-4">{{ errorMessage() }}</p>
+      } @if(downloadUrl$ | async; as downloadUrl) {
+
+      <!-- Compare file size -->
+      @if(this.newFileSize() < this.currentFileSize()) {
+      <p class="mb-4">
+        Congratulations! Your file is reduced by
+        {{ this.currentFileSize() - this.newFileSize() }} bytes!
+      </p>
+      }
 
-    <a class="block my-4 underline" [href]="downloadUrl" target="_blank"
-      >Download PDF</a
-    >
-    <lib-buy-me-a-coffee />
-    }
+      <a
+        [href]="downloadUrl"
+        target="_blank"
+        class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mb-4"
+      >
+        <i class="pi pi-download pr-2"></i>
+        Download PDF
+      </a>
+
+      <lib-buy-me-a-coffee />
+      }
 
-    <pdf-disclaimer class="block mt-8" />
+      <pdf-disclaimer class="mt-8" />
+    </div>
   `,
   imports: [
     CommonModule,
diff --git a/pdf/src/app/pages/pdf-to-images.page.ts b/pdf/src/app/pages/pdf-to-images.page.ts
index 42a249a..d3a4746 100644
--- a/pdf/src/app/pages/pdf-to-images.page.ts
+++ b/pdf/src/app/pages/pdf-to-images.page.ts
@@ -34,35 +34,53 @@ export const routeMeta: RouteMeta = {
   template: `
     <p-toast />
 
-    <h1 class="text-xl py-4">Convert your PDF file to Images</h1>
-
-    <pdf-shout-out [type]="TaskType.IMAGE_CONVERSION" />
-
-    <p-fileUpload
-      mode="advanced"
-      chooseLabel="Choose a PDF file"
-      accept="application/pdf"
-      name="myfile"
-      maxFileSize="10000000"
-      fileLimit="1"
-      uploadLabel="Upload & Convert"
-      (uploadHandler)="onUpload($event)"
-      [customUpload]="true"
-    />
-
-    @if(loading()) {
-    <p>Your file is uploaded and processing. Please wait for a moment ;)</p>
-    } @if(errorMessage()) {
-    <p class="text-red-500">{{ errorMessage() }}</p>
-    } @if(downloadUrl$ | async; as downloadUrl) {
-
-    <a class="block my-4 underline" [href]="downloadUrl" target="_blank"
-      >Download Images</a
-    >
-    <lib-buy-me-a-coffee />
-    }
+    <div class="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md">
+      <h1 class="text-2xl font-semibold mb-4">
+        Convert your PDF file to Images
+      </h1>
+
+      <pdf-shout-out [type]="TaskType.IMAGE_CONVERSION" />
+
+      <p-fileUpload
+        mode="advanced"
+        chooseLabel="Choose a PDF file"
+        accept="application/pdf"
+        name="myfile"
+        maxFileSize="10000000"
+        fileLimit="1"
+        uploadLabel="Upload & Convert"
+        (uploadHandler)="onUpload($event)"
+        [customUpload]="true"
+        class="mb-4"
+      />
+
+      @if(loading()) {
+      <div class="flex items-center mb-4">
+        <div class="mr-2">
+          <i class="fa fa-spinner fa-spin text-blue-500"></i>
+        </div>
+        <span
+          >Your file is uploaded and processing. Please wait for a moment.</span
+        >
+      </div>
+      } @if(errorMessage()) {
+      <p class="text-red-500 mb-4">{{ errorMessage() }}</p>
+      } @if(downloadUrl$ | async; as downloadUrl) {
+
+      <a
+        [href]="downloadUrl"
+        target="_blank"
+        class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mb-4"
+      >
+        <i class="pi pi-download pr-2"></i>
+        Download Images
+      </a>
+
+      <lib-buy-me-a-coffee />
+      }
 
-    <pdf-disclaimer class="block mt-8" />
+      <pdf-disclaimer class="mt-8" />
+    </div>
   `,
 })
 export default class PdfToImagesComponent extends PdfHandlerBase {
diff --git a/pdf/src/app/shared/components/footer/footer.component.ts b/pdf/src/app/shared/components/footer/footer.component.ts
index 6cfa5f2..a809641 100644
--- a/pdf/src/app/shared/components/footer/footer.component.ts
+++ b/pdf/src/app/shared/components/footer/footer.component.ts
@@ -1,20 +1,29 @@
 import { CommonModule } from '@angular/common'
 import { Component } from '@angular/core'
+import { RouterLink } from '@angular/router'
 
 @Component({
   selector: 'pdf-footer',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink],
   template: `
-    <footer class="p-8 bg-gray-100">
-      <div class="flex justify-between items-center mx-16">
-        <p>PDFun © 2024</p>
+    <footer class="bg-gray-800 py-4">
+      <div class="container mx-auto flex justify-between items-center">
+        <div class="flex items-center">
+          <a routerLink="/" class="flex items-center mr-6 no-underline">
+            <img src="/assets/pdfun.png" alt="PDFun logo" class="h-8 mr-2" />
+            <span class="text-white font-semibold text-lg">PDFun</span>
+          </a>
+          <p class="text-gray-400">&copy; 2024</p>
+        </div>
         <a
           href="https://github.com/dalenguyen/pdfun"
-          class="underline"
+          class="text-gray-400 hover:text-white transition-colors duration-300"
           target="_blank"
-          ><i class="pi pi-github" style="font-size: 1.5rem"></i
-        ></a>
+          aria-label="GitHub"
+        >
+          <i class="pi pi-github" style="font-size: 1.5rem"></i>
+        </a>
       </div>
     </footer>
   `,
diff --git a/pdf/src/app/shared/components/header/header.component.ts b/pdf/src/app/shared/components/header/header.component.ts
index f639c73..48a6e7f 100644
--- a/pdf/src/app/shared/components/header/header.component.ts
+++ b/pdf/src/app/shared/components/header/header.component.ts
@@ -1,47 +1,97 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { RouterLinkWithHref } from '@angular/router'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  signal,
+} from '@angular/core'
+import { RouterLinkActive, RouterLinkWithHref } from '@angular/router'
 import { AuthService } from '@pdfun/angular/services'
 import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
 
 @Component({
   selector: 'pdf-header',
   standalone: true,
-  imports: [CommonModule, LoginComponent, ProfileComponent, RouterLinkWithHref],
+  imports: [
+    CommonModule,
+    LoginComponent,
+    ProfileComponent,
+    RouterLinkWithHref,
+    RouterLinkActive,
+  ],
   template: `
     <!-- REPLACE With PrimeNG Menubar -->
-    <header class="m-8 flex justify-between items-center flex-wrap">
-      <a class="flex items-center" routerLink="/">
-        <img src="/assets/pdfun.png" alt="PDFun logo" class="w-10" />
-      </a>
+    <header class="bg-gray-800 py-4 px-6">
+      <div
+        class="container mx-auto flex items-center justify-between flex-wrap"
+      >
+        <div class="flex items-center">
+          <a
+            class="md:hidden text-gray-400 hover:text-white focus:outline-none  mr-2"
+            (click)="toggleMobileMenu()"
+          >
+            <i class="pi pi-bars pi-lg"></i>
+          </a>
+          <a routerLink="/" class="flex items-center mr-6">
+            <img src="/assets/pdfun.png" alt="PDFun logo" class="h-8 mr-2" />
+            <span class="text-white font-semibold text-lg">PDFun</span>
+          </a>
+          <nav class="hidden md:block">
+            <div class="flex gap-4">
+              <a
+                routerLink="/"
+                routerLinkActive="text-gray-200"
+                [routerLinkActiveOptions]="{ exact: true }"
+                class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
+              >
+                Resize PDF
+              </a>
 
-      <div class="flex gap-2">
-        <ul class="flex gap-2 list-none">
-          <li>
-            <a
-              class="no-underline text-black hover:text-blue-800 hover:underline"
-              routerLink="/"
-              >Resize PDF</a
-            >
-          </li>
-          <li>
-            <a
-              class="no-underline text-black hover:text-blue-800 hover:underline"
-              routerLink="/pdf-to-images"
-              >PDF to Images</a
-            >
-          </li>
-        </ul>
-
-        @defer (on timer(200ms)) {
-        <div class="flex items-center gap-4">
-          @if(authService.isLoggedIn()) {
-          <lib-profile />
-          } @else {
-          <lib-login />
+              <a
+                routerLink="/pdf-to-images"
+                routerLinkActive="text-gray-200"
+                class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
+              >
+                PDF to Images
+              </a>
+            </div>
+          </nav>
+        </div>
+        <div class="flex items-center">
+          @defer (on timer(200ms)) {
+          <div class="flex items-center gap-4">
+            @if(authService.isLoggedIn()) {
+            <lib-profile />
+            } @else {
+            <lib-login />
+            }
+          </div>
           }
         </div>
-        }
+      </div>
+      <div
+        class="md:hidden bg-gray-700 p-4 mt-4"
+        [ngClass]="{ hidden: !showMobileMenu() }"
+      >
+        <div class="flex flex-col gap-4">
+          <a
+            routerLink="/"
+            routerLinkActive="text-gray-100"
+            [routerLinkActiveOptions]="{ exact: true }"
+            class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
+            (click)="toggleMobileMenu()"
+          >
+            Resize PDF
+          </a>
+
+          <a
+            routerLink="/pdf-to-images"
+            routerLinkActive="text-gray-100"
+            class="text-gray-400 no-underline hover:text-white transition-colors duration-300"
+            (click)="toggleMobileMenu()"
+            >PDF to Images
+          </a>
+        </div>
       </div>
     </header>
   `,
@@ -49,4 +99,9 @@ import { LoginComponent, ProfileComponent } from '@pdfun/ui/auth'
 })
 export class HeaderComponent {
   authService = inject(AuthService)
+  showMobileMenu = signal(false)
+
+  toggleMobileMenu() {
+    this.showMobileMenu.update((value) => !value)
+  }
 }
diff --git a/pdf/src/app/shared/components/newsletter/newsletter.component.ts b/pdf/src/app/shared/components/newsletter/newsletter.component.ts
index 5f6cda0..0880bd4 100644
--- a/pdf/src/app/shared/components/newsletter/newsletter.component.ts
+++ b/pdf/src/app/shared/components/newsletter/newsletter.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   standalone: true,
   imports: [CommonModule],
   template: `
-    <div id="mc_embed_shell max-w-52 margin-auto">
+    <div id="mc_embed_shell">
       <link
         href="//cdn-images.mailchimp.com/embedcode/classic-061523.css"
         rel="stylesheet"
@@ -98,4 +98,4 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NewsletterComponent { }
+export class NewsletterComponent {}
diff --git a/pdf/src/styles.scss b/pdf/src/styles.scss
index 779aae9..b6519ed 100644
--- a/pdf/src/styles.scss
+++ b/pdf/src/styles.scss
@@ -18,9 +18,43 @@
 
 html,
 body {
+  margin: 0;
+  padding: 0;
   display: block;
   height: 100%;
-  max-width: 786px;
-  margin: 0 auto;
   font-family: var(--font-family);
 }
+// Tailwind CSS for container was override by primeng and p-container was not working
+// New to check that issue and later can remove this
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}