From c5b12903cd118cff934436ba6249b5a7799ff67e Mon Sep 17 00:00:00 2001
From: Max <walzen665@web.de>
Date: Wed, 21 Feb 2024 22:06:12 +0100
Subject: [PATCH] Added btn animations

---
 frontend/src/app/credits/credits.component.html   | 12 ++++++------
 frontend/src/app/download/download.component.html |  8 ++++----
 frontend/src/app/home/home.component.html         |  4 ++--
 frontend/src/app/upload/upload.component.html     |  8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/credits/credits.component.html b/frontend/src/app/credits/credits.component.html
index d8e8077..b65b6b4 100644
--- a/frontend/src/app/credits/credits.component.html
+++ b/frontend/src/app/credits/credits.component.html
@@ -1,27 +1,27 @@
 <div class="flex flex-col items-center justify-center min-h-fit p-4 lg:p-28">
   <div class="flex items-center justify-center mb-3">
-    <a href="/" class="flex items-center justify-center">
+    <a href="/" class="flex items-center justify-center hover:scale-150 transition-transform duration-100">
       <img src="./assets/cloud-solid.svg" class="mr-3 w-24 animate-bounce ease-out" alt="SharePulse Logo" />
       <span class="self-center text-4xl font-semibold whitespace-nowrap">SharePulse</span>
     </a>
   </div>
-  <h2 class="text-2xl font-semibold text-gray-800 mb-10 text-center">
+  <h2 class="text-2xl font-semibold text-gray-800 mb-10 text-center hover:scale-150 transition-transform duration-100">
     Upload a file. Share the URL/link. Download the file. Simple as that.
   </h2>
   <div class="space-y-4 text-xl mb-20">
-    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
+    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4 hover:scale-125 transition-transform duration-100">
       <h3 class="font-semibold text-gray-800 sm:col-span-2 md:text-right">Developer:</h3>
       <p class="text-gray-800 sm:col-span-2 sm:text-left">Walzen665</p>
     </div>
-    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
+    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4 hover:scale-125 transition-transform duration-100">
       <h3 class="font-semibold text-gray-800 sm:col-span-2 md:text-right">Version:</h3>
       <p class="text-gray-800 sm:col-span-2 sm:text-left">1.0.0</p>
     </div>
-    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
+    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4 hover:scale-125 transition-transform duration-100">
       <h3 class="font-semibold text-gray-800 sm:col-span-2 md:text-right">API-Status:</h3>
       <p class="sm:col-span-2 sm:text-left text-green-600">online</p>
     </div>
-    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4">
+    <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-4 hover:scale-125 transition-transform duration-100">
       <h3 class=" font-semibold text-gray-800 sm:col-span-2 md:text-right">Libraries:</h3>
       <p class="text-gray-800 sm:col-span-2 sm:text-left">
         <a href="https://fontawesome.com/" class="text-indigo-600 hover:text-indigo-800">Fontawesome</a>,
diff --git a/frontend/src/app/download/download.component.html b/frontend/src/app/download/download.component.html
index 35aec59..faa48bb 100644
--- a/frontend/src/app/download/download.component.html
+++ b/frontend/src/app/download/download.component.html
@@ -23,12 +23,12 @@
         </div>
       </div>
 
-      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4 mt-3" (click)="requestDownload()">
+      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4 mt-3 hover:scale-105 transition-transform duration-100" (click)="requestDownload()">
         Download
       </button>
       <button
         (click)="download_not_possible.showModal()"
-        class="btn btn-secondary btn-outline w-full max-w-md flex justify-center items-center mb-4">
+        class="btn btn-secondary btn-outline w-full max-w-md flex justify-center items-center mb-4 hover:scale-105 transition-transform duration-100">
         Reset
       </button>
       <p class="text-gray-600 text-center w-2/3">Files are available for a limited time. Ensure the code or link is correct and the file is still downloadable.</p>
@@ -52,10 +52,10 @@
       <p class="text-xl font-bold text-center text-gray-800 mb-6">Download complete!</p>
       <p class="text-gray-600 text-center w-2/3 mb-3">File <strong>{{ fileName }}</strong> has been downloaded and saved to your drive.</p>
       <p class="text-gray-600 text-center w-2/3 mb-6">The download took {{ downloadDuration }} seconds.</p>
-      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" >
+      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4 hover:scale-105 transition-transform duration-100" >
         Save to disk (again)
       </button>
-      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" routerLink="/home">
+      <button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4 hover:scale-105 transition-transform duration-100" routerLink="/home">
         Back to home
       </button>
     </div>
diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 18af64f..d177332 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -8,7 +8,7 @@
       <h2 class="text-2xl font-bold text-gray-700 mb-4">Download File</h2>
       <p class="text-gray-600 mb-4">Access and download shared files quickly.</p>
       <div class="divider mb-10">QUICK LINK</div>
-      <button routerLink="/download" class="btn btn-primary w-full max-w-xs">Download</button>
+      <button routerLink="/download" class="btn btn-primary w-full max-w-xs hover:scale-105 transition-transform duration-100">Download</button>
     </div>
 
     <!-- Uploading Section -->
@@ -17,7 +17,7 @@
       <h2 class="text-2xl font-bold text-gray-700 mb-4 text-center">Upload File</h2>
       <p class="text-gray-600 mb-4 text-center ">Easily share your files with anyone by uploading them here.</p>
       <div class="divider mb-10">QUICK LINK</div>
-      <button routerLink="/upload" class="btn btn-primary w-full max-w-xs">Upload</button>
+      <button routerLink="/upload" class="btn btn-primary w-full max-w-xs hover:scale-105 transition-transform duration-100">Upload</button>
     </div>
   </div>
   <div class="bg-white shadow-lg rounded-lg p-6 mt-10 animate-in fade-in slide-in-from-bottom duration-500">
diff --git a/frontend/src/app/upload/upload.component.html b/frontend/src/app/upload/upload.component.html
index 482a7d7..33a953f 100644
--- a/frontend/src/app/upload/upload.component.html
+++ b/frontend/src/app/upload/upload.component.html
@@ -44,7 +44,7 @@
         </div>
       </div>
       <!-- Upload Button -->
-      <button class="btn btn-primary w-full max-w-xs" (click)="startUpload()">Upload File</button>
+      <button class="btn btn-primary w-full max-w-xs hover:scale-105 transition-transform duration-100" (click)="startUpload()">Upload File</button>
       <p class="text-gray-600 text-center mt-6">Drag and drop files, or click to select the files you want to share.</p>
     </div>
     <!-- Upload Progress -->
@@ -99,12 +99,12 @@
       <p class="text-sm text-gray-500 mt-1">Your file is now securely stored on our servers.</p>
 
       <div class="mt-4 flex flex-col w-full items-center">
-        <button class="btn btn-success w-full max-w-xs text-white" (click)="copyUrlToClipboard(this.fileUrls?.downloadUrl)">
+        <button class="btn btn-success w-full max-w-xs text-white hover:scale-105 transition-transform duration-100" (click)="copyUrlToClipboard(this.fileUrls?.downloadUrl)">
           <div *ngIf="!urlCopied">Copy Download URL</div>
           <div *ngIf="urlCopied"><img width="20" src="./assets/check-solid.svg" alt="kk"></div>
         </button>
-        <button class="btn btn-primary mt-2 w-full max-w-xs" routerLink="/home">Home</button>
-        <button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs" disabled>Delete this file</button>
+        <button class="btn btn-primary mt-2 w-full max-w-xs hover:scale-105 transition-transform duration-100" routerLink="/home">Home</button>
+        <button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs hover:scale-105 transition-transform duration-100" disabled>Delete this file</button>
       </div>
     </div>