From 0ed2f385810400c922a8494f8144f9d96e1716b3 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 27 Nov 2022 23:13:42 +0200
Subject: [PATCH] replace wall of text with digestible information

---
 .../src/components/overlays/UserInfo.svelte   | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/overlays/UserInfo.svelte b/frontend/src/components/overlays/UserInfo.svelte
index 8d3726c..a3a9de0 100644
--- a/frontend/src/components/overlays/UserInfo.svelte
+++ b/frontend/src/components/overlays/UserInfo.svelte
@@ -9,6 +9,16 @@
     .user-info-modal {
         max-width: 560px;
     }
+
+    .user-info-row {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: var(--space-sm);
+    }
+
+    .user-info-row .material-icons-outlined {
+        margin-right: var(--space-xs);
+    }
 </style>
 
 <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
@@ -19,16 +29,28 @@
 
         <div>
             {#if presenceEntry.bridgesTo}
-                <p>This user may send messages and other metadata to <b>{presenceEntry.bridgesTo}</b>, which may have its own Terms of Service and Privacy Policy.</p>
+                <div class="user-info-row">
+                    <span class="material-icons-outlined">cloud_sync</span>
+                    <span>This application may send messages and metadata to <b>{presenceEntry.bridgesTo}</b></span>
+                </div>
             {/if}
             {#if presenceEntry.privacy}
-                <p>This user has their own Privacy Policy, available at: <b>{ presenceEntry.privacy }</b>. This user may process the data it has access to on this server under different terms than the server. Please consult their Privacy Policy.</p>
+                <div class="user-info-row">
+                    <span class="material-icons-outlined">policy</span>
+                    <span>Data accessible by this application is processed in accordance with their Privacy Policy: <b>{ presenceEntry.privacy }</b></span>
+                </div>
             {/if}
             {#if presenceEntry.terms}
-                <p>This user has their own Terms of Service, available at: <b>{ presenceEntry.terms }</b>. Failure to comply with these Terms of Service may result in termination of the services provided to you by this user.</p>
+                <div class="user-info-row">
+                    <span class="material-icons-outlined">gavel</span>
+                    <span>The Terms of Service of this application can be found at: <b>{ presenceEntry.terms }</b></span>
+                </div>
             {/if}
             {#if presenceEntry.bridgesTo || presenceEntry.privacy || presenceEntry.terms}
-                <p>You may be able to ask the user to opt out of the above.</p>
+                <div class="user-info-row">
+                    <span class="material-icons-outlined">shield</span>
+                    <span>You may be able to opt out of the above</span>
+                </div>
             {/if}
         </div>