From 8240b3e80e4fb99c45bdfe653cef7a65ac5415ae Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Sun, 26 Jun 2022 16:57:55 +0430
Subject: [PATCH] UI improvements.

---
 src/componets/List.js |  2 +-
 src/styles/List.css   | 23 +++++++++++++++--------
 src/styles/index.css  | 10 ++++++++++
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/componets/List.js b/src/componets/List.js
index f19f370..9f4e62d 100644
--- a/src/componets/List.js
+++ b/src/componets/List.js
@@ -67,7 +67,7 @@ const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode
                   <img alt="" src={favicon} />
                   <div className="list-entity-content">
                     <div className="row-name">
-                      <span className="num">{i + 1}.</span>
+                      <span className="num">{i + 1}</span>
                       {e.name}
                       <a
                         className="link"
diff --git a/src/styles/List.css b/src/styles/List.css
index 7d2cd37..ac6b499 100644
--- a/src/styles/List.css
+++ b/src/styles/List.css
@@ -1,6 +1,7 @@
 @media (min-width: 650px) {
   .list-entity-content {
     margin-left: 70px;
+    padding: 20px;
   }
 
   .tags {
@@ -36,6 +37,13 @@
 @media (max-width: 650px) {
   .list-entity-content {
     margin-top: 50px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .link {
+    display: block;
+    margin-left: 10px;
   }
 
   .tags {
@@ -97,7 +105,6 @@
 
 .list-entity-content {
   z-index: 0;
-  padding: 20px;
   justify-content: space-between;
   display: flex;
   flex-direction: column;
@@ -155,13 +162,10 @@
 
 .tags a {
   padding: 10px;
-  background-color:rgb(49, 114, 204);
-  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
-      rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
-      rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  border-radius: 10px;
   text-shadow: none;
   margin: 5px;
-  color: #ffffff;
+  color: inherit;
 }
 
 .tags a::before {
@@ -171,6 +175,9 @@
 
 .num {
   font-size: 1rem;
+  margin-right: 10px;
+  opacity: 80%;
+  display: inline;
 }
 
 .delete {
@@ -234,8 +241,8 @@
 }
 
 .list-collection-label a {
-  color: rgb(166, 166, 166);
-  text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+  opacity: 80%;
+  color: inherit;
 }
 
 .return-btn {
diff --git a/src/styles/index.css b/src/styles/index.css
index ba98e3b..6232d07 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -27,6 +27,11 @@ body {
   background-color: #1f2c38;
 }
 
+.tags a {
+  background: #273949;
+  box-shadow: 6px 6px 11px #21303e, -6px -6px 11px #2d4254;
+}
+
 .send-btn,
 .apply-btn {
   background-color: #273949;
@@ -97,6 +102,11 @@ body {
   background-color: lightyellow;
 }
 
+.light .tags a {
+  background: #ffffe0b2;
+  box-shadow: 6px 6px 11px #d9d9be, -6px -6px 11px #ffffff;
+}
+
 .light .btn {
   background-color: lightyellow;
   color: gray;