From 9a5934cbb9bd8435c81fb86354a192ee25a74aa9 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 3 Dec 2024 23:06:19 +0200
Subject: [PATCH] refactor: redesign of the feature

---
 .../Settings/URLsManager/AddItem/AddItem.less | 20 +++++++++----------
 .../Settings/URLsManager/Item/Item.less       | 14 ++++++-------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/routes/Settings/URLsManager/AddItem/AddItem.less b/src/routes/Settings/URLsManager/AddItem/AddItem.less
index b31ce9ac8..07df6736f 100644
--- a/src/routes/Settings/URLsManager/AddItem/AddItem.less
+++ b/src/routes/Settings/URLsManager/AddItem/AddItem.less
@@ -4,25 +4,24 @@
 
 .add-item {
     display: flex;
-    padding: 0.5rem 1.5rem;
+    padding: 0.4rem 1.5rem;
     gap: 1rem;
-    border-radius: var(--border-radius);
+    border-radius: 1.5rem;
     transition: 0.3s all ease-in-out;
-    background-color: transparent;
+    background-color: var(--overlay-color);
     border: 2px solid transparent;
     justify-content: space-between;
     position: relative;
 
     .input {
-        background-color: var(--overlay-color);
-        border-radius: var(--border-radius);
+        border-radius: 1.5rem;
         color: var(--primary-foreground-color);
         padding: 0.5rem 0.75rem;
-        border: 1px solid transparent;
+        border: 2px solid var(--overlay-color);
         width: 70%;
 
         &:focus {
-            border: 1px solid var(--primary-foreground-color);
+            border: 2px solid var(--primary-foreground-color);
         }
     }
 
@@ -39,7 +38,7 @@
             justify-content: center;
             background-color: transparent;
             transition: 0.3s all ease-in-out;
-            border-radius: var(--border-radius);
+            border-radius: 1.5rem;
             width: 3rem;
             opacity: 0.6;
 
@@ -77,13 +76,12 @@
     }
 
     &:hover {
-        border: 2px solid transparent;
-        background-color: var(--overlay-color);
+        border: 2px solid var(--overlay-color);
     }
 }
 
 @media only screen and (max-width: @minimum) {
     .add-item {
-        padding: 0.5rem;
+        padding: 0.4rem;
     }
 }
\ No newline at end of file
diff --git a/src/routes/Settings/URLsManager/Item/Item.less b/src/routes/Settings/URLsManager/Item/Item.less
index 81c6d6c17..2e625f0ed 100644
--- a/src/routes/Settings/URLsManager/Item/Item.less
+++ b/src/routes/Settings/URLsManager/Item/Item.less
@@ -4,10 +4,10 @@
 
 .item {
     display: flex;
-    padding: 1rem 1.5rem;
-    border-radius: var(--border-radius);
+    padding: 0.7rem 1.5rem;
+    border-radius: 2rem;
     transition: 0.3s all ease-in-out;
-    background-color: transparent;
+    background-color: var(--overlay-color);
     border: 2px solid transparent;
     justify-content: space-between;
     position: relative;
@@ -76,7 +76,7 @@
             justify-content: center;
             background-color: transparent;
             transition: 0.3s all ease-in-out;
-            border-radius: var(--border-radius);
+            border-radius: 1.5rem;
             transform: translateY(-50%);
             width: 3rem;
 
@@ -85,7 +85,7 @@
                 height: 1.5rem;
                 opacity: 0;
                 transition: 0.3s all ease-in-out;
-                color: var(--primary-foreground-color);
+                color: var(--color-trakt);
             }
 
             &:hover, &:focus {
@@ -100,7 +100,7 @@
     }
 
     &:hover {
-        background-color: var(--overlay-color);
+        border: 2px solid var(--overlay-color);
     
         .actions {
             .delete {
@@ -114,7 +114,7 @@
 
 @media only screen and (max-width: @minimum) {
     .item {
-        padding: 1rem 0.5rem;
+        padding: 0.7rem 0.5rem;
 
         .actions {
             margin-right: 4rem;