Request page design

1 files changed, 17 insertions, 35 deletions

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%;