Apply dark theme and move some hard-coded colors into global variables

ui/edit/index.html

@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://fonts.googleapis.com/css?family=Raleway:400,300" rel="stylesheet" type="text/css">
   <link rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=content_copy,task_alt" />
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=content_copy,delete,task_alt" />
   <style>
     .material-symbols-outlined {
       font-variation-settings:
@@ -25,4 +25,4 @@
   <script type="module" src="/src/edit.main.tsx"></script>
 </body>
 
-</html>
+</html>

ui/src/EditPage/Drawer/Drawer.module.scss

@@ -10,13 +10,15 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border: 1px solid var(--stroke-primary);
+  background-color: var(--background-muted);
 
   &.visible {
     transform: scaleY(1);
   }
 
   &.fuck {
-    background-color: #fee;
-    color: var(--text-muted);
+    background-color: var(--background-error);
+    color: var(--text-error);
+    font-weight: bold;
   }
 }

ui/src/EditPage/Link/Copy.module.scss

@@ -3,7 +3,7 @@
 
   > .icon {
     color: var(--text-super-muted);
-    text-shadow: 1px 1px 0 #fff;
+    text-shadow: 1px 1px 0 var(--shadow);
     cursor: pointer;
 
     &:hover {

ui/src/EditPage/Link/Link.module.scss

@@ -5,7 +5,8 @@
     flex-grow: 1;
 
     > a {
-      color: #09f;
+      font-size: 19px;
+      color: var(--text-linkable);
       text-decoration: none;
       flex-grow: 1;
     }

ui/src/EditPage/UrlInput/UrlInput.module.scss

@@ -10,18 +10,19 @@
   font-weight: 300;
   width: 600px;
   padding: 25px;
-  color: #999;
+  color: var(--text-primary);
   border-radius: 4px;
   border: 1px solid var(--stroke-primary);
   outline: none;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  background-color: var(--url-input-background);
 
   &:focus {
     border: 1px solid var(--stroke-emphasis);
   }
 
   &::placeholder {
-    color: #ddd;
+    color: var(--text-super-muted);
   }
 }
 
@@ -31,21 +32,25 @@
   right: 0;
   bottom: 0;
   width: 64px;
-  background-image: url("./close.svg");
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: 48px 48px;
   cursor: pointer;
-  transition: opacity 200ms cubic-bezier(0.77, 0, 0.175, 1);
   opacity: 0;
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+
+  > span {
+    font-size: 38px;
+  }
 
   &.visible {
-    opacity: 0.3;
+    opacity: 0.6;
     pointer-events: inherit;
   }
 
   &:hover {
-    opacity: 0.6;
+    opacity: 1;
+    color: #b71111;
   }
 }

ui/src/EditPage/UrlInput/UrlInput.tsx

@@ -41,7 +41,9 @@ export const UrlInput = () => {
   return (
     <CenterForm onSubmit={formDidSubmit}>
       <div className={css.bar}>
-        <div className={clearButtonClass} onClick={clearButtonDidClick}></div>
+        <div className={clearButtonClass} onClick={clearButtonDidClick}>
+            <span className="material-symbols-outlined">delete</span>
+        </div>
         <input
           id="url"
           className={css.url}

ui/src/LinksPage/LinksView/Controls/Controls.module.scss

@@ -1,5 +1,5 @@
 .controls {
-  color: var(--text-muted);
+  color: var(--text-super-muted);
   text-decoration: none;
 
   &:hover {

ui/src/LinksPage/LinksView/Link/LinkRow.module.scss

@@ -1,8 +1,9 @@
 .linkrow {
   display: flex;
   flex-direction: column;
-  padding: 16px;
+  padding: 16px 24px;
   border-bottom: 1px solid var(--stroke-primary);
+  background-color: var(--background-muted);
 
   > .upper {
     display: flex;

ui/src/LinksPage/LinksView/ShortLink/ShortLink.module.scss

@@ -1,6 +1,5 @@
 .shortlink {
-  background-color: rgba(91, 98, 98, 0.06);
-  padding: 4px 8px;
+  padding: 4px 0;
   border-radius: 3px;
 
   > a {

ui/src/global.scss

@@ -1,14 +1,19 @@
 :root {
-  --background: #fff;
+  --background: #0d1117;
+  --background-muted: #151b23;
+  --background-error: #410000;
+  --url-input-background: #010409;
+  --shadow: #000;
 
-  --text-primary: #333;
-  --text-linkable: #09f;
+  --text-primary: #ccc;
+  --text-linkable: #58a6ff;
   --text-muted: #999;
-  --text-super-muted: #ccc;
-  --text-muted-emphasis: #666;
+  --text-super-muted: #666;
+  --text-muted-emphasis: #999;
+  --text-error: #f67f7f;
 
   --stroke-primary: #cfd3d3;
-  --stroke-emphasis: #09f;
+  --stroke-emphasis: #58a6ff;
 
   --edit-text-base-size: 42px;