UI improvements.

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}

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

src/styles/App.css

@@ -90,3 +90,7 @@ input:focus {
   margin-left: 10px;
   font-size: 1.2em;
 }
+
+.select {
+  font-family: "Font Awesome 5 Free"
+}