From d0f956f9f0a8935d091c8b27577f773fdc101bf9 Mon Sep 17 00:00:00 2001
From: Mel <einebeere@gmail.com>
Date: Sat, 19 Feb 2022 22:17:12 +0100
Subject: Pretttier Share button

---
 assets/src/components/icons/ShareIcon.svelte    | 16 ++++++++++++++++
 assets/src/components/share/DataSelector.svelte | 25 +++++++++++++++++--------
 2 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 assets/src/components/icons/ShareIcon.svelte

(limited to 'assets/src')

diff --git a/assets/src/components/icons/ShareIcon.svelte b/assets/src/components/icons/ShareIcon.svelte
new file mode 100644
index 0000000..118f7f5
--- /dev/null
+++ b/assets/src/components/icons/ShareIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+        d="M11 2.05v2.012A8.001 8.001 0 0 0 12 20a8.001 8.001 0 0 0 7.938-7h2.013c-.502 5.053-4.766 9-9.951 9-5.523 0-10-4.477-10-10 0-5.185 3.947-9.449 9-9.95zm9 3.364l-8 8L10.586 12l8-8H14V2h8v8h-2V5.414z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/share/DataSelector.svelte b/assets/src/components/share/DataSelector.svelte
index 965d0a1..22a83ba 100644
--- a/assets/src/components/share/DataSelector.svelte
+++ b/assets/src/components/share/DataSelector.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { ChoosingData, getShareState } from "../../state/share";
+    import ShareIcon from "../icons/ShareIcon.svelte";
 
     let value = "";
 
@@ -14,15 +15,13 @@
 <form on:submit|preventDefault={submit}>
     <!-- TODO: Prettier input field -->
     <input type="text" bind:value />
-    <input class="set-data-button" type="submit" value="Share" />
+    <button class="start-sharing-button" type="submit">
+        <ShareIcon color="black" />
+        Start Sharing
+    </button>
 </form>
 
 <style>
-    form {
-        display: flex;
-        flex-wrap: nowrap;
-    }
-
     input {
         border: none;
         font-size: 14px;
@@ -32,7 +31,17 @@
         box-sizing: border-box;
     }
 
-    .set-data-button {
-        margin-left: 0.5rem;
+    .start-sharing-button {
+        border: none;
+        font-size: 14px;
+        background-color: white;
+        color: black;
+        padding: 10px 14px;
+
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        margin-top: 20px;
     }
 </style>
-- 
cgit 1.4.1