Minor styling and text updates

src/lib/settings.ts

@@ -1,13 +1,13 @@
 import { persisted } from "svelte-persisted-store";
-import type themes from "./ui/themes.ts";
+import { type ThemeName, defaultTheme } from "./ui/themes";
 
 export type SettingsStore = {
   name: string;
-  theme: keyof typeof themes;
+  theme: ThemeName;
 };
 
 /** A persisted store for settings of the current user. */
 export const settings = persisted<SettingsStore>("sshx-settings-store", {
   name: "",
-  theme: "defaultDark",
+  theme: defaultTheme,
 });

src/lib/ui/Settings.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { settings } from "$lib/settings";
+  import { ChevronDownIcon } from "svelte-feather-icons";
   import OverlayMenu from "./OverlayMenu.svelte";
+  import themes, { defaultTheme, type ThemeName } from "./themes";
 
   export let open: boolean;
 
@@ -13,9 +15,12 @@
     nameValue = $settings.name;
   }
 
-  import themes from "./themes";
-  let themeOptions = Object.keys(themes);
-  let selectedTheme = $settings.theme || themeOptions[0];
+  let selectedTheme: ThemeName; // Bound to the settings input.
+  if (themes.hasOwnProperty($settings.theme)) {
+    selectedTheme = $settings.theme;
+  } else {
+    selectedTheme = defaultTheme;
+  }
 
   function handleThemeChange() {
     settings.update((curSettings) => ({
@@ -32,17 +37,17 @@
   {open}
   on:close
 >
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-4">
     <div class="item">
       <div class="flex-1">
         <p class="font-medium mb-2">Name</p>
         <p class="text-sm text-zinc-400">
-          How you appear to other users online.
+          Choose how you appear to other users.
         </p>
       </div>
       <div>
         <input
-          class="w-52 px-3 py-1.5 rounded-md bg-zinc-700 outline-none focus:ring-2 focus:ring-indigo-500"
+          class="input-common"
           placeholder="Your name"
           bind:value={nameValue}
           maxlength="50"
@@ -60,29 +65,30 @@
     <div class="item">
       <div class="flex-1">
         <p class="font-medium mb-2">Color palette</p>
-        <p class="text-sm text-zinc-400">Color scheme for text in terminals.</p>
+        <p class="text-sm text-zinc-400">Color theme for text in terminals.</p>
       </div>
-      <div>
+      <div class="relative">
+        <ChevronDownIcon
+          class="absolute top-[11px] right-2.5 w-4 h-4 text-zinc-400"
+        />
         <select
-          class="w-52 px-3 py-1.5 rounded-md bg-zinc-700 outline-none focus:ring-2 focus:ring-indigo-500"
+          class="input-common !pr-5"
           bind:value={selectedTheme}
           on:change={handleThemeChange}
         >
-          {#each themeOptions as themeName}
+          {#each Object.keys(themes) as themeName (themeName)}
             <option value={themeName}>{themeName}</option>
           {/each}
         </select>
       </div>
     </div>
-    <div class="item">
+    <!-- <div class="item">
       <div class="flex-1">
         <p class="font-medium mb-2">Cursor style</p>
-        <p class="text-sm text-zinc-400">
-          How live cursors should be displayed.
-        </p>
+        <p class="text-sm text-zinc-400">Style of live cursors.</p>
       </div>
       <div class="text-red-500">Coming soon</div>
-    </div>
+    </div> -->
   </div>
 
   <!-- svelte-ignore missing-declaration -->
@@ -95,6 +101,12 @@
 
 <style lang="postcss">
   .item {
-    @apply bg-zinc-800/25 rounded-lg p-4 flex gap-4 flex-col sm:flex-row;
+    @apply bg-zinc-800/25 rounded-lg p-4 flex gap-4 flex-col sm:flex-row items-start;
+  }
+
+  .input-common {
+    @apply w-52 px-3 py-2 text-sm rounded-md bg-transparent hover:bg-white/5;
+    @apply border border-zinc-700 outline-none focus:ring-2 focus:ring-indigo-500/50;
+    @apply appearance-none transition-colors;
   }
 </style>

src/lib/ui/XTerm.svelte

@@ -39,9 +39,10 @@
   import type { Terminal } from "sshx-xterm";
   import { Buffer } from "buffer";
 
-  import themes from "./themes";
+  import themes, { defaultTheme } from "./themes";
   import CircleButton from "./CircleButton.svelte";
   import CircleButtons from "./CircleButtons.svelte";
+  import { settings } from "$lib/settings";
   import { TypeAheadAddon } from "$lib/typeahead";
 
   /** Used to determine Cmd versus Ctrl keyboard shortcuts. */
@@ -66,14 +67,13 @@
   export let termEl: HTMLDivElement = null as any; // suppress "missing prop" warning
   let term: Terminal | null = null;
 
-  import { settings } from "$lib/settings";
-  import type { ITheme } from "xterm";
-
-  let theme: ITheme = themes.defaultDark;
+  $: theme = themes.hasOwnProperty($settings.theme)
+    ? themes[$settings.theme]
+    : themes[defaultTheme];
 
-  $: if ($settings.theme && term) {
-    theme = themes[$settings.theme];
-    term.options.theme = themes[$settings.theme];
+  $: if (term) {
+    // If the theme changes, update existing terminals' appearance.
+    term.options.theme = theme;
   }
 
   let loaded = false;

src/lib/ui/themes.ts

@@ -1,7 +1,7 @@
 import type { ITheme } from "sshx-xterm";
 
 /** VSCode default dark theme, from https://glitchbone.github.io/vscode-base16-term/. */
-export const defaultDark: ITheme = {
+const defaultDark: ITheme = {
   foreground: "#d8d8d8",
   background: "#181818",
 
@@ -27,7 +27,7 @@ export const defaultDark: ITheme = {
 };
 
 /** Hybrid theme from https://terminal.sexy/, using Alacritty export format. */
-export const hybrid: ITheme = {
+const hybrid: ITheme = {
   foreground: "#c5c8c6",
   background: "#1d1f21",
 
@@ -51,7 +51,7 @@ export const hybrid: ITheme = {
 };
 
 /** Below themes are converted from https://github.com/alacritty/alacritty-theme/. */
-export const rosePine: ITheme = {
+const rosePine: ITheme = {
   foreground: "#e0def4",
   background: "#191724",
 
@@ -76,28 +76,7 @@ export const rosePine: ITheme = {
   brightWhite: "#e0def4",
 };
 
-export const nord: ITheme = {
-  foreground: "#d8dee9",
-  background: "#2e3440",
-  black: "#3b4252",
-  red: "#bf616a",
-  green: "#a3be8c",
-  yellow: "#ebcb8b",
-  blue: "#81a1c1",
-  magenta: "#b48ead",
-  cyan: "#88c0d0",
-  white: "#e5e9f0",
-  brightBlack: "#4c566a",
-  brightRed: "#bf616a",
-  brightGreen: "#a3be8c",
-  brightYellow: "#ebcb8b",
-  brightBlue: "#81a1c1",
-  brightMagenta: "#b48ead",
-  brightCyan: "#8fbcbb",
-  brightWhite: "#eceff4",
-};
-
-export const ubuntu: ITheme = {
+const ubuntu: ITheme = {
   foreground: "#eeeeec",
   background: "#300a24",
   black: "#2e3436",
@@ -118,7 +97,7 @@ export const ubuntu: ITheme = {
   brightWhite: "#eeeeec",
 };
 
-export const dracula: ITheme = {
+const dracula: ITheme = {
   foreground: "#f8f8f2",
   background: "#282a36",
   black: "#000000",
@@ -139,7 +118,7 @@ export const dracula: ITheme = {
   brightWhite: "#ffffff",
 };
 
-export const githubDark: ITheme = {
+const githubDark: ITheme = {
   foreground: "#d1d5da",
   background: "#24292e",
   black: "#586069",
@@ -160,7 +139,7 @@ export const githubDark: ITheme = {
   brightWhite: "#fafbfc",
 };
 
-export const gruvboxDark: ITheme = {
+const gruvboxDark: ITheme = {
   foreground: "#ebdbb2",
   background: "#282828",
   black: "#282828",
@@ -181,7 +160,7 @@ export const gruvboxDark: ITheme = {
   brightWhite: "#ebdbb2",
 };
 
-export const solarizedDark: ITheme = {
+const solarizedDark: ITheme = {
   foreground: "#839496",
   background: "#002b36",
   black: "#073642",
@@ -202,7 +181,7 @@ export const solarizedDark: ITheme = {
   brightWhite: "#fdf6e3",
 };
 
-export const tokyoNight: ITheme = {
+const tokyoNight: ITheme = {
   foreground: "#a9b1d6",
   background: "#1a1b26",
   black: "#32344a",
@@ -224,16 +203,19 @@ export const tokyoNight: ITheme = {
 };
 
 const themes = {
-  defaultDark,
-  hybrid,
-  rosePine,
-  nord,
-  ubuntu,
-  dracula,
-  githubDark,
-  gruvboxDark,
-  solarizedDark,
-  tokyoNight,
+  "VS Code Dark": defaultDark,
+  Hybrid: hybrid,
+  "Rosé Pine": rosePine,
+  Ubuntu: ubuntu,
+  Dracula: dracula,
+  "GitHub Dark": githubDark,
+  "Gruvbox Dark": gruvboxDark,
+  "Solarized Dark": solarizedDark,
+  "Tokyo Night": tokyoNight,
 };
 
+export type ThemeName = keyof typeof themes;
+
+export const defaultTheme: ThemeName = "VS Code Dark";
+
 export default themes;