From 1843f58d96af1b62969acfe9c7877208a578f211 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 16 Mar 2023 17:01:21 +0100
Subject: [PATCH] feat: use fediverse icon on login page

---
 frontend/src/routes/auth/login/+page.svelte   | 10 ++++--
 frontend/src/routes/auth/login/fediverse.svg  | 32 +++++++++++++++++++
 .../login/mastodon/[instance]/+page.svelte    |  4 +--
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/routes/auth/login/fediverse.svg

diff --git a/frontend/src/routes/auth/login/+page.svelte b/frontend/src/routes/auth/login/+page.svelte
index 3c45684..1300a79 100644
--- a/frontend/src/routes/auth/login/+page.svelte
+++ b/frontend/src/routes/auth/login/+page.svelte
@@ -17,6 +17,7 @@
     ModalFooter,
   } from "sveltestrap";
   import type { PageData } from "./$types";
+  import fediverse from "./fediverse.svg";
 
   export let data: PageData;
 
@@ -57,10 +58,10 @@
 <div class="container">
   <h1>Log in or sign up</h1>
   <div class="row">
-    <div class="col-md-4">
+    <div class="col-md-4 mb-1">
       <ListGroup>
         <ListGroupItem tag="button" on:click={toggleModal}>
-          <Icon name="mastodon" /> Log in with Fediverse
+          <img height="16px" src={fediverse} alt="Fediverse logo" aria-hidden /> Log in with the Fediverse
         </ListGroupItem>
         <ListGroupItem tag="a" href={data.discord}>
           <Icon name="discord" /> Log in with Discord
@@ -68,6 +69,9 @@
       </ListGroup>
       <Modal header="Pick an instance" isOpen={modalOpen} toggle={toggleModal}>
         <ModalBody>
+          <p>
+            <strong>Note:</strong> Misskey (and derivatives) are not supported yet, sorry.
+          </p>
           <Input placeholder="Instance (e.g. mastodon.social)" bind:value={instance} />
           {#if error}
             <div class="mt-2">
@@ -77,7 +81,7 @@
         </ModalBody>
         <ModalFooter>
           <Button color="primary" disabled={fediDisabled || instance === ""} on:click={fediLogin}
-            >Fediverse login</Button
+            >Log in</Button
           >
         </ModalFooter>
       </Modal>
diff --git a/frontend/src/routes/auth/login/fediverse.svg b/frontend/src/routes/auth/login/fediverse.svg
new file mode 100644
index 0000000..17ad17b
--- /dev/null
+++ b/frontend/src/routes/auth/login/fediverse.svg
@@ -0,0 +1,32 @@
+<svg width="173.23mm" height="173.28mm" version="1.1" viewBox="0 0 173.23 173.28" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-8.5263 -40.668)" display="none">
+  <circle cx="91.581" cy="130.76" r="87.76" fill="currentColor" fill-opacity=".99597" stroke="currentColor" stroke-width="11"/>
+  <path transform="matrix(.75494 0 0 .75475 13.252 29.556)" d="m153.37 219.98-115.51-12.141-24.149-113.61 100.59-58.074 86.315 77.718z" display="inline" fill="currentColor" stroke="currentColor" stroke-width="9.8895"/>
+ </g>
+ <g transform="translate(-15.205 -8.1725)" display="none" fill="none" stroke-width="11">
+  <path transform="translate(6.679 -32.496)" d="m165.18 119.35-126.54 64.133" display="inline" stroke="currentColor"/>
+  <path transform="translate(6.679 -32.496)" d="m25.097 96.875 100.12 100.5" display="inline" stroke="currentColor"/>
+  <path transform="translate(6.679 -32.496)" d="m38.637 183.49 64.669-126.25" display="inline" stroke="currentColor"/>
+  <path transform="translate(6.679 -32.496)" d="m125.21 197.38-21.908-140.14" display="inline" stroke="currentColor"/>
+  <path transform="translate(6.679 -32.496)" d="m25.097 106.16 140.08 22.479" display="inline" stroke="currentColor"/>
+ </g>
+ <g transform="translate(-8.5263 -40.668)" shape-rendering="auto">
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m181.13 275.14a68.892 68.892 0 0 1-29.465 29.328l161.76 162.39 38.998-19.764zm213.36 214.19-38.998 19.764 81.963 82.283a68.892 68.892 0 0 1 29.471-29.332z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m581.65 339.39-91.576 46.41 6.752 43.189 103.62-52.514a68.892 68.892 0 0 1-18.791-37.086zm-144.74 73.352-216.53 109.73a68.892 68.892 0 0 1 18.795 37.09l204.48-103.63z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m367.28 142.44-104.48 203.97 30.848 30.967 110.62-215.96a68.892 68.892 0 0 1-36.99-18.98zm-131.65 257.02-52.922 103.31a68.892 68.892 0 0 1 36.986 18.979l46.781-91.328z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m150.77 304.92a68.892 68.892 0 0 1-34.416 7.1953 68.892 68.892 0 0 1-6.6504-0.69531l30.902 197.66a68.892 68.892 0 0 1 34.416-7.1953 68.892 68.892 0 0 1 6.6465 0.69531z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m239.34 560.54a68.892 68.892 0 0 1 0.7207 13.877 68.892 68.892 0 0 1-7.2676 27.18l197.63 31.713a68.892 68.892 0 0 1-0.72266-13.879 68.892 68.892 0 0 1 7.2695-27.178z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m601.13 377.2-91.219 178.08a68.892 68.892 0 0 1 36.994 18.982l91.217-178.08a68.892 68.892 0 0 1-36.992-18.984z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m476.72 125.33a68.892 68.892 0 0 1-29.471 29.332l141.27 141.81a68.892 68.892 0 0 1 29.469-29.332z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m347.79 104.63-178.58 90.498a68.892 68.892 0 0 1 18.793 37.086l178.57-90.502a68.892 68.892 0 0 1-18.791-37.082z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m446.93 154.83a68.892 68.892 0 0 1-34.982 7.4824 68.892 68.892 0 0 1-6.0293-0.63281l15.818 101.29 43.162 6.9258zm-16 167.03 37.4 239.48a68.892 68.892 0 0 1 33.914-6.9434 68.892 68.892 0 0 1 7.207 0.79101l-35.357-226.41z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:currentColor;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+  <path transform="matrix(.26458 0 0 .26458 -6.679 32.496)" d="m188.13 232.97a68.892 68.892 0 0 1 0.75781 14.096 68.892 68.892 0 0 1-7.1602 26.982l101.37 16.281 19.924-38.908zm173.74 27.9-19.926 38.912 239.51 38.467a68.892 68.892 0 0 1-0.69531-13.719 68.892 68.892 0 0 1 7.3496-27.324z" color="currentColor" color-rendering="auto" dominant-baseline="auto" image-rendering="auto" solid-color="currentColor" style="font-feature-settings:normal;font-variant-alternates:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-variant-position:normal;isolation:auto;mix-blend-mode:normal;shape-padding:0;text-decoration-color:#000000;text-decoration-line:none;text-decoration-style:solid;text-indent:0;text-orientation:mixed;text-transform:none;white-space:normal"/>
+ </g>
+ <g transform="translate(-8.5263 -40.668)" fill-opacity=".99597">
+  <circle transform="rotate(3.1178)" cx="106.27" cy="51.536" r="16.571"/>
+  <circle transform="rotate(3.1178)" cx="171.43" cy="110.19" r="16.571"/>
+  <circle transform="rotate(3.1178)" cx="135.76" cy="190.28" r="16.571"/>
+  <circle transform="rotate(3.1178)" cx="48.559" cy="181.11" r="16.571"/>
+  <circle transform="rotate(3.1178)" cx="30.329" cy="95.367" r="16.571"/>
+ </g>
+</svg>
diff --git a/frontend/src/routes/auth/login/mastodon/[instance]/+page.svelte b/frontend/src/routes/auth/login/mastodon/[instance]/+page.svelte
index a232900..ff89268 100644
--- a/frontend/src/routes/auth/login/mastodon/[instance]/+page.svelte
+++ b/frontend/src/routes/auth/login/mastodon/[instance]/+page.svelte
@@ -70,10 +70,10 @@
 </script>
 
 <svelte:head>
-  <title>Log in with Mastodon - pronouns.cc</title>
+  <title>Log in with the Fediverse - pronouns.cc</title>
 </svelte:head>
 
-<h1>Log in with Mastodon</h1>
+<h1>Log in with the Fediverse</h1>
 
 {#if data.error}
   <ErrorAlert error={data.error} />