diff options
| -rw-r--r-- | assets/src/components/icons/ShareIcon.svelte | 16 | ||||
| -rw-r--r-- | assets/src/components/share/DataSelector.svelte | 25 |
2 files changed, 33 insertions, 8 deletions
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> |