Share page design

4 files changed, 128 insertions, 12 deletions

diff --git a/assets/src/components/share/Info.svelte b/assets/src/components/share/Info.svelte
new file mode 100644
index 0000000..2d648ce
--- /dev/null
+++ b/assets/src/components/share/Info.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import {
+        ConnectionState,
+        getOwnToken,
+        getStateStore,
+    } from "../../network/channel/connection";
+    import data from "../../stores/data";
+    import Selector from "./Selector.svelte";
+
+    let connection = getStateStore();
+</script>
+
+<div class="info">
+    {#if !$data.locked}
+        <h1>What do you want to share?</h1>
+        <Selector />
+    {:else}
+        <h1>
+            You are <br />
+            sharing <b>a text.</b>
+        </h1>
+        {#if $connection === ConnectionState.CONNECTED}
+            <p>
+                Your share is available under: <br />
+                rook.rnrd.eu/<span>{getOwnToken()}</span>
+            </p>
+            <!-- TODO: Display actual data. -->
+            <div class="data">••••••••••••••••••••••••••••••</div>
+        {:else}
+            <p>Connecting to signaling server...</p>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    h1 {
+        font-size: 35px;
+        color: white;
+        font-weight: 400;
+    }
+
+    p {
+        color: #626262;
+        font-size: 16px;
+        margin-bottom: 30px;
+    }
+
+    span {
+        color: white;
+    }
+
+    .info {
+        width: 315px;
+    }
+
+    .data {
+        font-size: 14px;
+        width: 100%;
+        background-color: white;
+        color: black;
+        padding: 10px 20px;
+        box-sizing: border-box;
+    }
+</style>
diff --git a/assets/src/components/share/Request.svelte b/assets/src/components/share/Request.svelte
index 17e8443..e34f633 100644
--- a/assets/src/components/share/Request.svelte
+++ b/assets/src/components/share/Request.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { offer } from "../../network/transfer/share";
+    import CheckIcon from "../icons/CheckIcon.svelte";
+    import CloseIcon from "../icons/CloseIcon.svelte";
 
     export let token: string;
 
@@ -10,22 +12,63 @@
     function decline() {}
 </script>
 
-<div class="container">
-    <span>{token}</span>
+<!-- TODO: Replace placeholder values and show IP instead of token. -->
+<ul class="request">
     <div class="buttons">
-        <button on:click={accept}>Accept</button>
-        <button on:click={decline}>X</button>
+        <div class="round-button" on:click={accept}>
+            <CheckIcon color="white" />
+        </div>
+        <div class="plain-button" on:click={decline}>
+            <CloseIcon color="black" />
+        </div>
     </div>
-</div>
+    <li>Requested at 14:38</li>
+    <li class="ip">{token}</li>
+    <li>Trusowo, Russia</li>
+    <li>Firefox 89</li>
+</ul>
 
 <style>
-    .container {
+    .request {
+        background-color: white;
+        color: #626262;
+        padding: 17px 20px;
+        font-size: 12px;
+        line-height: 1.5rem;
+        position: relative;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+
+    .ip {
+        line-height: 1.75rem;
+        font-size: 16px;
+        color: black;
+    }
+
+    .buttons {
+        position: absolute;
+        right: 20px;
         display: flex;
         justify-content: space-between;
+        width: 50px;
         align-items: center;
     }
 
-    .buttons {
+    .round-button {
+        width: 24px;
+        height: 24px;
+        border-radius: 100%;
+        background-color: black;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .plain-button {
         display: flex;
+        align-items: center;
     }
 </style>
diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte
index 98596c6..f9ef237 100644
--- a/assets/src/components/share/Requests.svelte
+++ b/assets/src/components/share/Requests.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+    import requests from "../../stores/requests";
+    import Request from "./Request.svelte";
+</script>
+
+<!-- <script lang="ts">
     import { getOwnToken, start } from "../../network/channel/connection";
     import { startShare } from "../../network/channel/share";
 
@@ -13,9 +18,9 @@
 {#await startPromise}
     <h3>Fetching token...</h3>
 {:then}
-    <h3>Your token is <b>{getOwnToken()}</b>.</h3>
+    <h3>Your token is <b>{getOwnToken()}</b>.</h3> -->
 
-    {#each $requests as request}
-        <Request token={request} />
-    {/each}
-{/await}
+{#each $requests as request}
+    <Request token={request} />
+{/each}
+<!-- {/await} -->
diff --git a/assets/src/components/share/DataPicker.svelte b/assets/src/components/share/Selector.svelte
index 6e8dbd4..e4c7c07 100644
--- a/assets/src/components/share/DataPicker.svelte
+++ b/assets/src/components/share/Selector.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+    import { start } from "../../network/channel/connection";
+    import { startShare } from "../../network/channel/share";
+
     import data from "../../stores/data";
 
     let value = "";
 
     const submit = () => {
         data.set(value);
+        start().then(startShare);
     };
 
     // TODO: Accept data other than text.