From 9d8ca2a653661560f471d717d188e92a79edb250 Mon Sep 17 00:00:00 2001
From: Melonai <einebeere@gmail.com>
Date: Sun, 27 Jun 2021 00:05:52 +0200
Subject: Request page design

---
 assets/public/css/app.css                   | 31 +++++++++++++++++
 assets/src/components/RequestPage.svelte    | 31 ++++++++++++++---
 assets/src/components/SharePage.svelte      | 32 +++---------------
 assets/src/components/share/Info.svelte     | 52 ++++++++++-------------------
 assets/src/components/share/Requests.svelte | 20 +----------
 5 files changed, 81 insertions(+), 85 deletions(-)

diff --git a/assets/public/css/app.css b/assets/public/css/app.css
index 86f45a0..85d95ac 100644
--- a/assets/public/css/app.css
+++ b/assets/public/css/app.css
@@ -14,3 +14,34 @@ body {
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
 }
+
+main {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    width: 66%;
+    margin: auto;
+}
+
+h1 {
+    font-size: 35px;
+    font-weight: 400;
+}
+
+.left-segment {
+    width: 315px;
+}
+
+.right-segment {
+    width: 315px;
+    height: 100%;
+    padding-top: 225px;
+    box-sizing: border-box;
+}
+
+p {
+    color: #626262;
+    font-size: 16px;
+    margin-bottom: 30px;
+}
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
-- 
cgit 1.4.1