Prettify the settings page

Radiokot · Nov 26, 2023 · bec9beb · bec9beb
1 parent 910fed7
commit bec9beb
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 37 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -11,6 +11,9 @@
         --background-color: #f7f9fb;
         --text-color: #141821;
         --link-color: #0055dc;
+        --secondary-text-color: #6b7280;
+        --primary-button-color: #003882;
+        --primary-button-hover-color: #0055dc;
 
         background-color: var(--background-color);
         color: var(--text-color);
@@ -38,11 +41,57 @@
         max-width: 1024px;
     }
 
+    :global(.button) {
+        display: block;
+        background: none;
+        border: 1px solid;
+        border-radius: 4px;
+        padding-left: 2.25em;
+        padding-right: 2.25em;
+        text-align: center;
+        font-size: 12pt;
+        line-height: 24pt;
+        transition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    :global(.button-secondary) {
+        color: var(--secondary-text-color);
+        border-color: var(--secondary-text-color) !important;
+    }
+
+    :global(.button-secondary:hover) {
+        background: var(--secondary-text-color);
+        color: #ffffff;
+    }
+
+    :global(.button-primary) {
+        color: #ffffff;
+        border-color: var(--primary-button-color) !important;
+        background: var(--primary-button-color);
+    }
+
+    :global(.button-primary:hover) {
+        border-color: var(--primary-button-hover-color) !important;
+        background: var(--primary-button-hover-color);
+    }
+
+    :global(.button:disabled, .button-secondary:disabled) {
+        opacity: 0.4;
+        background: none;
+    }
+
+    :global(.button-primary:disabled) {
+        border-color: var(--primary-button-color) !important;
+        background: var(--primary-button-color);
+    }
+
     @media (prefers-color-scheme: dark) {
         :root {
             --background-color: #262626;
             --text-color: #fcfcfc;
             --link-color: #337ef6;
+            --secondary-text-color: #878d9b;
+            --primary-button-color: #264773;
         }
     }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -75,7 +75,6 @@
         --status-warning-color: #f6b900;
         --card-background-color: #ffffff;
         --card-shadow-color: rgba(209, 213, 223, 0.5);
-        --secondary-text-color: #6b7280;
     }
 
     header .logo {
@@ -128,33 +127,10 @@
         margin-bottom: 0.5em;
     }
 
-    .button {
-        display: block;
-        border: 1px solid;
-        border-radius: 4px;
-        padding-top: 0.25em;
-        padding-bottom: 0.25em;
-        padding-left: 2.25em;
-        padding-right: 2.25em;
-        text-align: center;
-    }
-
-    .button-secondary {
-        color: var(--secondary-text-color);
-        border-color: var(--secondary-text-color) !important;
-        transition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-
-    .button-secondary:hover {
-        background: var(--secondary-text-color);
-        color: #ffffff;
-    }
-
     @media (prefers-color-scheme: dark) {
         :root {
             --card-shadow-color: rgba(16, 16, 17, 0.5);
             --card-background-color: #2e2e2e;
-            --secondary-text-color: #878d9b;
         }
     }
 

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -103,24 +103,54 @@
     <title>Settings | Cloudflare Tunnel client</title>
 </svelte:head>
 
-<h1>Settings</h1>
+<header class="row justify-content-between align-items-center my-3">
+    <h3 class="d-block col-auto">Settings</h3>
+    <div class="col-auto">
+        <a class="button button-secondary" href="/">Back</a>
+    </div>
+</header>
+
 {#await loadTunnelSettings()}
     <p>Loading...</p>
 {:then}
-    <p><label for="tokenInput">Connector token</label></p>
-    <textarea
-        id="tokenInput"
-        name="tokenInput"
-        rows="4"
-        cols="50"
-        placeholder="Paste the token or the complete connection command"
-        bind:value={tokenInput}
-    />
-    <br />
-    <br />
-    <button disabled={!isSaveEnabled} on:click={onSaveClicked}>
+    <div class="row">
+        <p class="d-block col-12">
+            <label for="tokenInput">Connector token</label>
+        </p>
+
+        <div class="col-12 col-sm-9 col-md-7">
+            <textarea
+                id="tokenInput"
+                name="tokenInput"
+                rows="5"
+                placeholder="Paste the token or the complete connection command"
+                bind:value={tokenInput}
+            />
+        </div>
+    </div>
+    <button class="button button-primary mt-3 col-12 col-sm-auto" disabled={!isSaveEnabled} on:click={onSaveClicked}>
         Save & Restart
     </button>
 {:catch}
     <b>Failed to load</b>
 {/await}
+
+<style>
+    header h3 {
+        font-size: 2rem;
+        margin: 0px;
+    }
+
+    #tokenInput {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        width: 100%;
+    }
+
+    @media (max-width: 30em) {
+        header h3 {
+            font-size: 1.5rem;
+        }
+    }
+</style>