From 5dbf3e1b0a9ce9b39c42afd1af0e65c295c667af Mon Sep 17 00:00:00 2001
From: Rodrigo Nader <rodrigosilvanader@gmail.com>
Date: Wed, 14 Jun 2023 21:49:38 -0300
Subject: [PATCH] Initiate repository & update frontend CSS

The code changes update the frontend index.css and cardComponent/index.tsx files. 'bg-colors', 'gradients', and CSS variables have been modified, including the addittion of copilot generated gradients for optimization. The 'utils.ts' file has also been updated.
---
 .../src/components/cardComponent/index.tsx    |  4 +-
 src/frontend/src/index.css                    | 82 +++++++++----------
 src/frontend/src/utils.ts                     | 19 +++++
 3 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 89f3eea13..82a0fb88f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -32,8 +32,8 @@ export const CardComponent = ({
           <div className="flex gap-4 items-center">
             <span
               className={
-                "rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
-                gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
+                "rounded-full w-7 h-7 flex items-center justify-center text-2xl " +
+                gradients[parseInt(flow.id.slice(0, 6), 30) % gradients.length]
               }
             ></span>
             <span className="flex-1 truncate-doubleline">{flow.name}</span>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 0ee2e3d38..4d0274bf7 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -4,67 +4,67 @@
 
 @layer base {
 	:root {
-	  --background: 0 0% 100%;
-	  --foreground: 222.2 47.4% 11.2%;
+	  --background: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-	  --muted: 210 40% 96.1%;
-	  --muted-foreground: 215.4 16.3% 46.9%;
+	  --muted: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --muted-foreground: 215.4 16.3% 46.9%; /* hsl(215 16% 46%) */
 
-	  --popover: 0 0% 100%;
-	  --popover-foreground: 222.2 47.4% 11.2%;
+	  --popover: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-	  --card: 0 0% 100%;
-	  --card-foreground: 222.2 47.4% 11.2%;
+	  --card: 0 0% 100%; /* hsl(0 0% 100%) */
+	  --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-	  --border: 214.3 31.8% 91.4%;
-	  --input: 214.3 31.8% 91.4%;
+	  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+	  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
 
-	  --primary: 222.2 47.4% 11.2%;
-	  --primary-foreground: 210 40% 98%;
+	  --primary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-	  --secondary: 210 40% 96.1%;
-	  --secondary-foreground: 222.2 47.4% 11.2%;
+	  --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-	  --accent: 210 40% 96.1%;
-	  --accent-foreground: 222.2 47.4% 11.2%;
+	  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
+	  --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
 
-	  --destructive: 0 100% 50%;
-	  --destructive-foreground: 210 40% 98%;
+	  --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-	  --ring: 215 20.2% 65.1%;
+	  --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
 	  --radius: 0.5rem;
 	}
 
 	.dark {
-	  --background: 224 71% 4%;
-	  --foreground: 213 31% 91%;
+	  --background: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --foreground: 213 31% 91%; /* hsl(213 31% 91%) */
 
-	  --muted: 223 47% 11%;
-	  --muted-foreground: 215.4 16.3% 56.9%;
+	  --muted: 223 47% 11%; /* hsl(223 47% 11%) */
+	  --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
 
-	  --popover: 224 71% 4%;
-	  --popover-foreground: 215 20.2% 65.1%;
+	  --popover: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
 
-	  --card: 224 71% 4%;
-	  --card-foreground: 213 31% 91%;
+	  --card: 224 71% 4%; /* hsl(224 71% 4%) */
+	  --card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
 
-	  --border: 216 34% 17%;
-	  --input: 216 34% 17%;
+	  --border: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --input: 216 34% 17%; /* hsl(216 34% 17%) */
 
-	  --primary: 210 40% 98%;
-	  --primary-foreground: 222.2 47.4% 1.2%;
+	  --primary: 210 40% 98%; /* hsl(210 40% 98%) */
+	  --primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
 
-	  --secondary: 222.2 47.4% 11.2%;
-	  --secondary-foreground: 210 40% 98%;
+	  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+	  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-	  --accent: 216 34% 17%;
-	  --accent-foreground: 210 40% 98%;
+	  --accent: 216 34% 17%; /* hsl(216 34% 17%) */
+	  --accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-	  --destructive: 0 63% 31%;
-	  --destructive-foreground: 210 40% 98%;
+	  --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
+	  --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
 
-	  --ring: 216 34% 17%;
+	  --ring: 216 34% 17%; /* hsl(216 34% 17%) */
 
 	  --radius: 0.5rem;
 	}
@@ -79,13 +79,13 @@
   --popover-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --card: 0 0% 100%; /* hsl(0 0% 100%) */
   --card-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --border: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
-  --input: 214.3 31.8% 91.4%; /* hsl(214 32% 91%) */
+  --border: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
+  --input: 214.3 21.8% 91.4%; /* hsl(214 32% 91%) */
   --primary: 222.2 47.4% 18%; /* hsl(222 47% 18%) */
   --primary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --secondary: 210 40% 96.1%; /* hsl(210 40% 96%) */
   --secondary-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-  --accent: 210 40% 96.1%; /* hsl(210 40% 96%) */
+  --accent: 210 30% 96.1%; /* hsl(210 30% 96%) */
   --accent-foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --destructive: 0 100% 50%; /* hsl(0 100% 50%) */
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index a95da9e34..8e0d016be 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -212,6 +212,25 @@ export const gradients = [
   "bg-gradient-to-br from-green-500 to-green-700",
   "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
   "bg-gradient-to-br from-sky-400 to-blue-500",
+
+  // copilot generated:
+  // "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
+  // "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
+  // "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700",
+  // "bg-gradient-to-br from-green-200 via-green-400 to-purple-700",
+  // "bg-gradient-to-br from-blue-100 via-blue-300 to-blue-500",
+  // "bg-gradient-to-br from-purple-400 to-yellow-400",
+  // "bg-gradient-to-br from-red-800 via-yellow-600 to-yellow-500",
+  // "bg-gradient-to-br from-blue-300 via-green-200 to-yellow-300",
+  // "bg-gradient-to-br from-blue-700 via-blue-800 to-gray-900",
+  // "bg-gradient-to-br from-green-300 to-purple-400",
+  // "bg-gradient-to-br from-yellow-200 via-pink-200 to-pink-400",
+  // "bg-gradient-to-br from-green-500 to-green-700",
+  // "bg-gradient-to-br from-rose-400 via-fuchsia-500 to-indigo-500",
+  // "bg-gradient-to-br from-sky-400 to-blue-500",
+  // "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
+  // "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",
+  // "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-700",
 ];
 
 export const bgColors = {