Request page design

4 files changed, 50 insertions, 85 deletions

diff --git a/assets/src/components/RequestPage.svelte b/assets/src/components/RequestPage.svelte
index d73d9c0..eb6b559 100644
--- a/assets/src/components/RequestPage.svelte
+++ b/assets/src/components/RequestPage.svelte
@@ -2,17 +2,40 @@
     import { start } from "../network/channel/connection";
     import { startRequest } from "../network/channel/request";
 
-    // TODO: Switch to store-based state updates.
+    import Header from "./Header.svelte";
 
     start().then(startRequest);
 </script>
 
+<Header color="white" />
+
 <main>
-    <h1>Requesting</h1>
+    <div class="left-segment">
+        <h1>Waiting for a response...</h1>
+        <p>
+            The share’s content will become available to you once the sharer
+            decides to accept your request.
+        </p>
+    </div>
+    <div class="right-segment" />
 </main>
 
+<svelte:head>
+    <style>
+        html,
+        body {
+            background-color: white;
+            color: black;
+        }
+    </style>
+</svelte:head>
+
 <style>
-    h1 {
-        font-size: 4em;
+    .left-segment {
+        flex-shrink: 0;
+    }
+
+    .right-segment {
+        flex-shrink: 1;
     }
 </style>
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
index b172f8c..9be9466 100644
--- a/assets/src/components/SharePage.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -8,8 +8,10 @@
 <Header color="black" />
 
 <main>
-    <Info />
-    <div class="request-list">
+    <div class="left-segment">
+        <Info />
+    </div>
+    <div class="right-segment">
         {#if $data.locked}
             <h1>Requests</h1>
             <Requests />
@@ -22,31 +24,7 @@
         html,
         body {
             background-color: black;
+            color: white;
         }
     </style>
 </svelte:head>
-
-<style>
-    main {
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        height: 100%;
-        width: 66%;
-        margin: auto;
-        flex-wrap: wrap;
-    }
-
-    h1 {
-        font-size: 35px;
-        color: white;
-        font-weight: 400;
-    }
-
-    .request-list {
-        width: 315px;
-        height: 100%;
-        padding-top: 225px;
-        box-sizing: border-box;
-    }
-</style>
diff --git a/assets/src/components/share/Info.svelte b/assets/src/components/share/Info.svelte
index 2d648ce..79ef404 100644
--- a/assets/src/components/share/Info.svelte
+++ b/assets/src/components/share/Info.svelte
@@ -10,49 +10,31 @@
     let connection = getStateStore();
 </script>
 
-<div class="info">
-    {#if !$data.locked}
-        <h1>What do you want to share?</h1>
-        <Selector />
+{#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}
-        <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}
+        <p>Connecting to signaling server...</p>
     {/if}
-</div>
+{/if}
 
 <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%;
diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte
index f9ef237..54eab57 100644
--- a/assets/src/components/share/Requests.svelte
+++ b/assets/src/components/share/Requests.svelte
@@ -3,24 +3,6 @@
     import Request from "./Request.svelte";
 </script>
 
-<!-- <script lang="ts">
-    import { getOwnToken, start } from "../../network/channel/connection";
-    import { startShare } from "../../network/channel/share";
-
-    import requests from "../../stores/requests";
-    import Request from "./Request.svelte";
-
-    const startPromise = start().then(startShare);
-
-    // TODO: Switch to store-based state updates.
-</script>
-
-{#await startPromise}
-    <h3>Fetching token...</h3>
-{:then}
-    <h3>Your token is <b>{getOwnToken()}</b>.</h3> -->
-
 {#each $requests as request}
     <Request token={request} />
-{/each}
-<!-- {/await} -->
+{/each}
\ No newline at end of file