From 73173a603e88d67b91c138cba7c1200644e0e3f3 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Thu, 23 Jun 2022 20:54:27 +0430
Subject: [PATCH] UI improvements.

---
 src/componets/CollectionSelection.js | 14 ++++++++++++++
 src/componets/TagSelection.js        | 17 +++++++++++++++++
 src/styles/App.css                   |  4 ++++
 3 files changed, 35 insertions(+)

diff --git a/src/componets/CollectionSelection.js b/src/componets/CollectionSelection.js
index d5b999e..a20999a 100644
--- a/src/componets/CollectionSelection.js
+++ b/src/componets/CollectionSelection.js
@@ -17,6 +17,14 @@ export default function CollectionSelection({
       color: "#a9a9a9",
     }),
 
+    option: (provided) => ({
+      ...provided,
+      ':before': {
+        content: '""',
+        marginRight: 8,
+      },
+    }),
+
     menu: (provided) => ({
       ...provided,
       border: "solid",
@@ -33,10 +41,15 @@ export default function CollectionSelection({
     input: (provided) => ({
       ...provided,
       color: lightMode ? "rgb(64, 64, 64)" : "white",
+      
     }),
 
     singleValue: (provided) => ({
       ...provided,
+      ':before': {
+        content: '""',
+        marginRight: 8,
+      },
       color: lightMode ? "rgb(64, 64, 64)" : "white",
     }),
 
@@ -59,6 +72,7 @@ export default function CollectionSelection({
 
   return (
     <CreatableSelect
+      className="select"
       defaultValue={defaultCollection}
       styles={customStyles}
       onChange={setCollection}
diff --git a/src/componets/TagSelection.js b/src/componets/TagSelection.js
index 30f44b1..5515638 100644
--- a/src/componets/TagSelection.js
+++ b/src/componets/TagSelection.js
@@ -12,6 +12,14 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
       color: "#a9a9a9",
     }),
 
+    option: (provided) => ({
+      ...provided,
+      ':before': {
+        content: '"#"',
+        marginRight: 8,
+      },
+    }),
+
     multiValueRemove: (provided) => ({
       ...provided,
       color: "gray",
@@ -35,6 +43,14 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
       color: lightMode ? "rgb(64, 64, 64)" : "white",
     }),
 
+    multiValueLabel: (provided) => ({
+      ...provided,
+      ':before': {
+        content: '"#"',
+        marginRight: 4,
+      },
+    }),
+
     control: (provided, state) => ({
       ...provided,
       background: lightMode ? "lightyellow" : "#273949",
@@ -55,6 +71,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
 
   return (
     <CreatableSelect
+      className="select"
       defaultValue={defaultTags}
       styles={customStyles}
       isMulti
diff --git a/src/styles/App.css b/src/styles/App.css
index fc270a5..7a8c882 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -90,3 +90,7 @@ input:focus {
   margin-left: 10px;
   font-size: 1.2em;
 }
+
+.select {
+  font-family: "Font Awesome 5 Free"
+}
\ No newline at end of file