Share page design

1 files changed, 50 insertions, 7 deletions

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>