fix login flow, improve light/dark theme

src/img/spacesocial-logo-dark.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
+        <g>
+            <clipPath id="_clip1">
+                <path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
+            </clipPath>
+            <g clip-path="url(#_clip1)">
+                <g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
+                    <g id="spinner">
+                        <path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z" style="fill:#e2dfe3;"/>
+                    </g>
+                </g>
+                <g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
+                    <g id="star-shine" serif:id="star shine">
+                        <rect x="383" y="377" width="11" height="11" style="fill:#e2dfe3;"/>
+                    </g>
+                </g>
+                <g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
+                    <path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z" style="fill:#e2dfe3;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g transform="matrix(2.67689,0,0,2.67689,-0.655394,55.5404)">
+        <text x="0px" y="0px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;fill:#e2dfe3;">space social</text>
+    </g>
+</svg>

src/img/spacesocial-logo-light.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
+        <g>
+            <clipPath id="_clip1">
+                <path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
+            </clipPath>
+            <g clip-path="url(#_clip1)">
+                <g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
+                    <g id="spinner">
+                        <path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z" style="fill:#322e1f;"/>
+                    </g>
+                </g>
+                <g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
+                    <g id="star-shine" serif:id="star shine">
+                        <rect x="383" y="377" width="11" height="11" style="fill:#322e1f;"/>
+                    </g>
+                </g>
+                <g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
+                    <path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z" style="fill:#322e1f;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g transform="matrix(2.67689,0,0,2.67689,-0.655394,55.5404)">
+        <text x="0px" y="0px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;fill:#322e1f;">space social</text>
+    </g>
+</svg>

src/img/spacesocial-logo.svg

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 226 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.0592476,0,0,0.0592476,19.3835,-44.4646)">
-        <clipPath id="_clip1">
-            <path d="M3471.16,750.487L3471.16,2249.51L-327.161,2249.51L-327.161,750.487L3471.16,750.487ZM2317.49,1260.74L1795.39,1260.74L1795.39,1763.02L2317.49,1763.02L2317.49,1260.74Z"/>
-        </clipPath>
-        <g clip-path="url(#_clip1)">
-            <g transform="matrix(3.12421,0,0,3.12421,13.4825,-77.5092)">
-                <g id="spinner">
-                    <path d="M380,380C476.218,283.782 659.849,234.849 710,285C760.151,335.151 756.844,478.156 634,601C511.156,723.844 358.099,784.099 291,717C249.901,675.901 257.955,619 257.955,619C260.181,637.245 251.818,720.443 352.404,720.443C452.989,720.443 530.426,645.937 610.046,566.318C689.665,486.699 778.651,275.064 635.273,275.064C491.896,275.064 380,380 380,380Z"/>
-                </g>
-            </g>
-            <g transform="matrix(44.394,0.545455,-44.394,0.545455,899.136,728.049)">
-                <g id="star-shine" serif:id="star shine">
-                    <rect x="383" y="377" width="11" height="11"/>
-                </g>
-            </g>
-            <g id="star" transform="matrix(1.45161,0,0,1.45161,531.871,522.581)">
-                <path d="M436.5,384L449.059,417.941L483,430.5L449.059,443.059L436.5,477L423.941,443.059L390,430.5L423.941,417.941L436.5,384Z"/>
-            </g>
-        </g>
-    </g>
-    <g transform="matrix(2.67689,0,0,2.67689,-1226.58,-333.741)">
-        <g transform="matrix(13.6363,0,0,13.6363,542.101,145.423)">
-        </g>
-        <text x="457.966px" y="145.423px" style="font-family:'Inter-BoldItalic', 'Inter';font-weight:700;font-style:italic;font-size:13.636px;">space social</text>
-    </g>
-</svg>

src/lib/app.css

@@ -20,6 +20,15 @@
         --accent: #CDA1EC;
         --text: #E2DFE3;
     }
+    .light-only {
+        display: none
+    }
+}
+
+@media screen and (prefers-color-scheme: light) {
+    .dark-only {
+        display: none
+    }
 }
 
 @supports (font-variation-settings: normal) {

src/lib/ui/Navigation.svelte

@@ -1,5 +1,6 @@
 <script>
-    import Logo from '$lib/../img/spacesocial-logo.svg';
+    import LogoLight from '$lib/../img/spacesocial-logo-light.svg';
+    import LogoDark from '$lib/../img/spacesocial-logo-dark.svg';
     import Button from './Button.svelte';
     import Feed from './Feed.svelte';
     import { Client } from '$lib/client/client.js';
@@ -37,11 +38,16 @@
 </script>
 
 <div id="navigation">
-    <header id="instance-header"> <!-- style={`background-image: url(${banner_url})`}> -->
+    {#if client.instance && client.instance.icon_url && client.instance.banner_url}
-        <!-- <img src={icon_url} class="instance-icon" height="92px" aria-hidden="true"> -->
+        <header class="instance-header" style="background-image: url({client.instance.banner_url})">
-        <div class="instance-icon instance-icon-mask" style={`mask-image: url(${Logo})`} height="92px" aria-hidden="true">
+            <img src={client.instance.icon_url} class="instance-icon" height="92px" aria-hidden="true">
-        <!-- <img src={Logo} class="instance-icon" height="92px" aria-hidden="true"> -->
+        </header>
-    </header>
+    {:else}
+        <header class="instance-header">
+            <img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
+            <img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
+        </header>
+    {/if}
 
     <div id="nav-items">
         <Button label="Timeline" on:click={() => goTimeline()} active>🖼️ Timeline</Button>
@@ -104,7 +110,7 @@
         background-color: var(--bg-800);
     }
 
-    #instance-header {
+    .instance-header {
         width: 100%;
         height: 172px;
         display: flex;
@@ -118,18 +124,14 @@
     }
 
     .instance-icon {
-        height: 92px;
+        height: 50%;
         border-radius: 8px;
     }
 
-    .instance-icon-mask {
+    .app-icon {
-        width: 80%;
+        max-width: 80%;
+        max-height: 80%;
         margin: auto;
-        background-color: var(--text);
-        mask-repeat: no-repeat;
-        -webkit-mask-repeat: no-repeat;
-        mask-origin: border-box;
-        -webkit-mask-origin: border-box;
     }
 
     #nav-items {

src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script>
     import '$lib/app.css';
+    import LogoLight from '$lib/../img/spacesocial-logo-light.svg';
+    import LogoDark from '$lib/../img/spacesocial-logo-dark.svg';
     import Navigation from '$lib/ui/Navigation.svelte';
     import Widgets from '$lib/ui/Widgets.svelte';
     import Feed from '$lib/ui/Feed.svelte';
@@ -8,8 +10,8 @@
     import { get } from 'svelte/store';
 
     let client = get(Client.get());
-    let ready = client.app;
+    let ready = !!client;
-    let logged_in = ready && client.app.token;
+    let logged_in = client.app && client.app.token;
     let instance_url_error = false;
     let logging_in = false;
 
@@ -33,10 +35,18 @@
     }
 
     function log_in(event) {
-        logging_in = true;
         event.preventDefault();
+        instance_url_error = false;
+
+        logging_in = true;
         const host = event.target.host.value;
 
+        if (!host || host === "") {
+            instance_url_error = "Please enter an instance domain.";
+            logging_in = false;
+            return;
+        }
+
         client.init(host).then(res => {
             logging_in = false;
             if (!res) return;
@@ -70,30 +80,29 @@
 
                 <Feed />
             {:else}
-                <div>
+                <form on:submit={log_in} id="login-form">
-                    <form on:submit={log_in} id="login">
+                    <img class="app-icon light-only" src={LogoLight} width="320px" aria-label="Space Social"/>
-                        <h1>Space Social</h1>
+                    <img class="app-icon dark-only" src={LogoDark} width="320px" aria-label="Space Social"/>
-                        <p>Welcome, fediverse user!</p>
+                    <p>Welcome, fediverse user!</p>
-                        <p>Please enter your instance domain to log in.</p>
+                    <p>Please enter your instance domain to log in.</p>
-                        <div class="input-wrapper">
+                    <div class="input-wrapper">
-                            <input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
+                        <input type="text" id="host" aria-label="instance domain" class={logging_in ? "throb" : ""}>
-                            {#if instance_url_error}
+                        {#if instance_url_error}
-                                <p class="error">{instance_url_error}</p>
+                            <p class="error">{instance_url_error}</p>
-                            {/if}
+                        {/if}
-                        </div>
+                    </div>
+                    <br>
+                    <button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
+                    <p><small>
+                        Please note this is
+                        <strong><em>extremely experimental software</em></strong>;
+                        things are likely to break!
                         <br>
-                        <button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
+                        If that's all cool with you, welcome aboard!
-                        <p><small>
+                    </small></p>
-                            Please note this is
-                            <strong><em>extremely experimental software</em></strong>;
-                            things are likely to break!
-                            <br>
-                            If that's all cool with you, welcome aboard!
-                        </small></p>
 
-                        <p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
+                    <p class="form-footer">made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
-                    </form>
+                </form>
-                </div>
             {/if}
         {:else}
             <div class="loading throb">
@@ -109,9 +118,12 @@
 </div>
 
 <style>
-    form#login {
+    form#login-form {
-        margin: 25vh 0 32px 0;
+        height: 100vh;
-        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
 
     a {
@@ -165,7 +177,7 @@
     }
 
     button#login {
-        margin: -8px auto 0 auto;
+        margin: 8px auto;
         padding: 12px 24px;
         display: flex;
         flex-direction: row;
@@ -215,7 +227,7 @@
 
     .loading {
         width: 100%;
-        height: 80vh;
+        height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -240,4 +252,9 @@
         flex-direction: row;
         gap: 8px;
     }
+
+    .app-icon {
+        width: 320px;
+        margin: 8px;
+    }
 </style>