diff options
Diffstat (limited to 'assets/src/components/share')
| -rw-r--r-- | assets/src/components/share/DataSelector.svelte | 25 |
1 files changed, 17 insertions, 8 deletions
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> |