From fe1f46630d71cb6ff4c5f4e9de3b8bd64f86ec45 Mon Sep 17 00:00:00 2001
From: Viren070 <viren070@protonmail.com>
Date: Thu, 26 Dec 2024 21:28:49 +0000
Subject: [PATCH] feat(frontend): make background colors of components more
 consistent

---
 packages/frontend/src/components/AddonsList.module.css   | 2 +-
 packages/frontend/src/components/ServiceInput.module.css | 4 ++--
 .../frontend/src/components/SortableCardList.module.css  | 9 +++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/AddonsList.module.css b/packages/frontend/src/components/AddonsList.module.css
index 583fe189..77087195 100644
--- a/packages/frontend/src/components/AddonsList.module.css
+++ b/packages/frontend/src/components/AddonsList.module.css
@@ -46,7 +46,7 @@
 }
 
 .card {
-  background-color: #2a2a2a; /* Slightly lighter black */
+  background-color: #1a1a1a; /* Slightly lighter black */
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   padding: 10px;
diff --git a/packages/frontend/src/components/ServiceInput.module.css b/packages/frontend/src/components/ServiceInput.module.css
index 5582c43d..ebec5a0f 100644
--- a/packages/frontend/src/components/ServiceInput.module.css
+++ b/packages/frontend/src/components/ServiceInput.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: #2a2a2a; /* Slightly lighter black */
+  background-color: #1a1a1a; /* Slightly lighter black */
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   padding: 10px;
@@ -23,7 +23,7 @@
 }
 
 .card.disabled {
-  background-color: #222222; /* Greyed out */
+  background-color: #131313; /* Greyed out */
   box-shadow: none;
   scale: 0.98;
   opacity: 0.5;
diff --git a/packages/frontend/src/components/SortableCardList.module.css b/packages/frontend/src/components/SortableCardList.module.css
index c4764bc3..2a843f6e 100644
--- a/packages/frontend/src/components/SortableCardList.module.css
+++ b/packages/frontend/src/components/SortableCardList.module.css
@@ -6,9 +6,9 @@
 }
 
 .card {
-  background-color: #1f2123; /* Slightly lighter black */
+  background-color: #1a1a1a; 
   border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 8px rgb(0, 0, 0);
   padding: 10px;
   display: flex;
   justify-content: space-between;
@@ -23,10 +23,10 @@
 }
 
 .card.disabled {
-  background-color: #222222; /* Greyed out */
+  background-color: #131313;
   box-shadow: none;
   scale: 0.98;
-  opacity: 0.5;
+  opacity: 0.4;
 }
 
 .actions button {
@@ -59,6 +59,7 @@
   align-items: center;
   border-width: 0;
   transition: transform 0.2s;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .arrowButton:hover {