clean up modals and remove deprecated UserInfo overlay

frontend/src/components/PresenceSidebar.svelte

@@ -37,9 +37,6 @@
             {#each $presenceStore as entry (entry.user.id)}
                 <button class="sidebar-button">
                     <UserView size={28} user={entry.user}></UserView>
-                    {#if entry.bridgesTo || entry.privacy || entry.terms}
-                        <button class="user-badge" on:click={ () => overlayStore.push(OverlayType.UserInfo, { presenceEntry: entry }) }>SERVICE</button>
-                    {/if}
                 </button>
             {/each}
             {#if $smallViewport}

frontend/src/components/overlays/CreateAccount.svelte

@@ -60,7 +60,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action" on:click="{ loginInstead }" disabled="{ !buttonsEnabled }">Log in instead</button>
+        <button class="hyperlink-button padded" on:click="{ loginInstead }" disabled="{ !buttonsEnabled }">Log in instead</button>
         <button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !buttonsEnabled }">Create</button>
     </svelte:fragment>
 </Modal>

frontend/src/components/overlays/EditMessage.svelte

@@ -28,12 +28,6 @@
     };
 </script>
 
-<style>
-    .delete-button {
-        color: var(--red-2);
-    }
-</style>
-
 <Modal {close} enter={save}>
     <span class="h4" slot="header">Edit Message</span>
 
@@ -47,7 +41,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action delete-button" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
+        <button class="hyperlink-button padded button-danger" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
         <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
     </svelte:fragment>
 </Modal>

frontend/src/components/overlays/Login.svelte

@@ -61,7 +61,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
-        <button class="button modal-secondary-action" on:click="{ createAccountInstead }" disabled="{ !buttonsEnabled }">Create an account instead</button>
+        <button class="hyperlink-button padded" on:click="{ createAccountInstead }" disabled="{ !buttonsEnabled }">Create an account instead</button>
         <button class="button button-accent modal-primary-action" on:click="{ login }" disabled="{ !buttonsEnabled }">Log In</button>
     </svelte:fragment>
 </Modal>

frontend/src/components/overlays/OverlayProvider.svelte

@@ -9,7 +9,6 @@
     import EditMessage from "./EditMessage.svelte";
     import Settings from "./Settings.svelte";
     import Prompt from "./Prompt.svelte";
-    import UserInfo from "./UserInfo.svelte";
     import AddCommunity from "./AddCommunity.svelte";
     import EditCommunity from "./EditCommunity.svelte";
 
@@ -22,9 +21,8 @@
         5: EditMessage,
         6: Settings,
         7: Prompt,
-        8: UserInfo,
+        8: AddCommunity,
-        9: AddCommunity,
+        9: EditCommunity,
-        10: EditCommunity,
     };
 </script>
 

frontend/src/components/overlays/UserInfo.svelte

@@ -1,61 +0,0 @@
-<script>
-    import { maybeModalFade, maybeModalScale } from "../../animations";
-
-    export let presenceEntry;
-    export let close = () => {};
-</script>
-
-<style>
-    .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 }">
-    <div class="modal user-info-modal" transition:maybeModalScale on:click|stopPropagation>
-        <div class="modal-header">
-            <span class="h4">{ presenceEntry.user.username }</span>
-        </div>
-
-        <div class="modal-content">
-            {#if presenceEntry.bridgesTo}
-                <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}
-                <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}
-                <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}
-                <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>
-
-        <div class="modal-footer">
-            <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
-        </div>
-    </div>
-</div>

frontend/src/stores.js

@@ -401,9 +401,8 @@ export const OverlayType = {
     EditMessage: 5,
     Settings: 6,
     Prompt: 7,
-    UserInfo: 8,
+    AddCommunity: 8,
-    AddCommunity: 9,
+    EditCommunity: 9
-    EditCommunity: 10
 };
 class OverlayStore extends Store {
     constructor() {

frontend/src/styles/global.css

@@ -214,9 +214,12 @@ body {
 }
 
 .modal-footer {
+	display: flex;
+	align-items: center;
 	margin-top: auto;
 	padding: var(--space-norm);
-	background-color: var(--background-color-1);
+	padding-top: var(--space-xs);
+	background-color: transparent;
 	border-bottom-right-radius: var(--radius-lg);
 	border-bottom-left-radius: var(--radius-lg);
 }
@@ -232,22 +235,17 @@ body {
 }
 
 .modal.positioned .modal-footer {
-	background-color: transparent;
 	padding-top: var(--space-xxs);
 }
 
 .modal-primary-action {
-	float: right;
+	margin-left: auto;
 }
 
 .modal-secondary-action {
 	float: left;
 }
 
-.modal-backdrop-opaque .modal .modal-footer {
-	background-color: var(--background-color-3);
-}
-
 @media screen and (max-width: 768px) {
 	.modal {
 		width: 100%;
@@ -309,6 +307,12 @@ body {
 	font-size: var(--h6);
 }
 
+.hyperlink-button.padded {
+	padding: 0.85em;
+	padding-top: 0.65em;
+	padding-bottom: 0.65em;
+}
+
 .hyperlink-button:hover {
 	color: var(--foreground-color-0);
 }