Make default workspace icon the Wave logo (#1470)

I made our logo a custom icon in Font Awesome so we can add it to our workspace switcher as the default icon
wavetermdev · Dec 10, 2024 · c2312f1 · c2312f1
1 parent 8957e04
commit c2312f1
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 12 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -58,6 +58,7 @@ const config: StorybookConfig = {
         <link rel="stylesheet" href="./fontawesome/css/solid.min.css" />
         <link rel="stylesheet" href="./fontawesome/css/sharp-solid.min.css" />
         <link rel="stylesheet" href="./fontawesome/css/sharp-regular.min.css" />
+        <link rel="stylesheet" href="./fontawesome/css/custom-icons.min.css" />
         <style>
         #storybook-docs {
             [id^="anchor--"],

diff --git a/assets/wave-logo_icon-black.svg b/assets/wave-logo_icon-black.svg
diff --git a/frontend/app/tab/workspaceswitcher.tsx b/frontend/app/tab/workspaceswitcher.tsx
@@ -43,7 +43,7 @@ const colors = [
 ];
 
 const icons = [
-    "circle",
+    "custom@wave-logo-solid",
     "triangle",
     "star",
     "heart",
@@ -93,7 +93,7 @@ const IconSelector = memo(({ icons, selectedIcon, onSelect, className }: IconSel
     return (
         <div className={clsx("icon-selector", className)}>
             {icons.map((icon) => {
-                const iconClass = makeIconClass(icon, false);
+                const iconClass = makeIconClass(icon, true);
                 return (
                     <i
                         key={icon}

diff --git a/frontend/util/util.ts b/frontend/util/util.ts
@@ -103,6 +103,11 @@ function makeIconClass(icon: string, fw: boolean, opts?: { spin?: boolean; defau
         icon = icon.replace(/^brands@/, "");
         return clsx(`fa fa-brands fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
     }
+    if (icon.match(/^custom@[a-z0-9-]+$/)) {
+        // strip off the "custom@" prefix if it exists
+        icon = icon.replace(/^custom@/, "");
+        return clsx(`fa fa-kit fa-${icon}`, fw ? "fa-fw" : null, opts?.spin ? "fa-spin" : null);
+    }
     if (opts?.defaultIcon != null) {
         return makeIconClass(opts.defaultIcon, fw, { spin: opts?.spin });
     }

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/fontawesome/css/solid.min.css" />
     <link rel="stylesheet" href="/fontawesome/css/sharp-solid.min.css" />
     <link rel="stylesheet" href="/fontawesome/css/sharp-regular.min.css" />
+    <link rel="stylesheet" href="/fontawesome/css/custom-icons.min.css" />
     <script type="module" src="frontend/wave.ts"></script>
   </head>
   <body class="init">

diff --git a/pkg/wcore/wcore.go b/pkg/wcore/wcore.go
@@ -54,7 +54,7 @@ func EnsureInitialData() error {
 		return nil
 	}
 	log.Println("client has no windows, creating starter workspace")
-	starterWs, err := CreateWorkspace(ctx, "Starter workspace", "circle", "#58C142", true)
+	starterWs, err := CreateWorkspace(ctx, "Starter workspace", "custom@wave-logo-solid", "#58C142", true)
 	if err != nil {
 		return fmt.Errorf("error creating starter workspace: %w", err)
 	}

diff --git a/public/fontawesome/css/custom-icons.min.css b/public/fontawesome/css/custom-icons.min.css
diff --git a/public/fontawesome/css/fontawesome.min.css b/public/fontawesome/css/fontawesome.min.css
diff --git a/public/fontawesome/webfonts/custom-icons.woff2 b/public/fontawesome/webfonts/custom-icons.woff2