Switch to feather icons (#175)

Switch to feather icons

web/components/command_palette.tsx

@@ -1,6 +1,6 @@
 import { isMacLike } from "../../common/util.ts";
 import { FilterList } from "./filter.tsx";
-import { faPersonRunning } from "../deps.ts";
+import { TerminalIcon } from "../deps.ts";
 import { AppCommand } from "../hooks/command.ts";
 import { FilterOption } from "../../common/types.ts";
 
@@ -30,7 +30,7 @@ export function CommandPalette({
       placeholder="Command"
       options={options}
       allowNew={false}
-      icon={faPersonRunning}
+      icon={TerminalIcon}
       helpText="Start typing the command name to filter results, press <code>Return</code> to run."
       onSelect={(opt) => {
         if (opt) {

web/components/filter.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "../deps.ts";
-import { FontAwesomeIcon } from "../deps.ts";
-import type { IconDefinition } from "../deps.ts";
 import { FilterOption } from "../../common/types.ts";
 import fuzzysort from "https://esm.sh/fuzzysort@2.0.1";
+import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.3/src/index";
+import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types";
 
 function magicSorter(a: FilterOption, b: FilterOption): number {
   if (a.orderId && b.orderId) {
@@ -59,7 +59,7 @@ export function FilterList({
   allowNew = false,
   helpText = "",
   completePrefix,
-  icon,
+  icon: Icon,
   newHint,
 }: {
   placeholder: string;
@@ -71,7 +71,7 @@ export function FilterList({
   completePrefix?: string;
   helpText: string;
   newHint?: string;
-  icon?: IconDefinition;
+  icon?: FunctionalComponent<FeatherProps>;
 }) {
   const searchBoxRef = useRef<HTMLInputElement>(null);
   const [text, setText] = useState("");
@@ -210,7 +210,7 @@ export function FilterList({
                 }}
               >
                 <span className="sb-icon">
-                  {icon && <FontAwesomeIcon icon={icon} />}
+                  {Icon && <Icon width={16} height={16} />}
                 </span>
                 <span
                   className="sb-name"

web/components/top_bar.tsx

@@ -1,15 +1,8 @@
-// import { Fragment, h } from "../deps.ts";
-
-import { FontAwesomeIcon, useRef } from "../deps.ts";
-
-import {
-  ComponentChildren,
-  IconDefinition,
-  useEffect,
-  useState,
-} from "../deps.ts";
+import { useRef } from "../deps.ts";
+import { ComponentChildren } from "../deps.ts";
 import { Notification } from "../types.ts";
-import { isMacLike } from "../../common/util.ts";
+import { FunctionalComponent } from "https://esm.sh/v99/preact@10.11.1/src/index";
+import { FeatherProps } from "https://esm.sh/v99/preact-feather@4.2.1/dist/types";
 
 function prettyName(s: string | undefined): string {
   if (!s) {
@@ -19,7 +12,7 @@ function prettyName(s: string | undefined): string {
 }
 
 export type ActionButton = {
-  icon: IconDefinition;
+  icon: FunctionalComponent<FeatherProps>;
   description: string;
   callback: () => void;
 };
@@ -45,7 +38,6 @@ export function TopBar({
 }) {
   // const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
   const inputRef = useRef<HTMLInputElement>(null);
-  // const isMac = isMacLike();
 
   return (
     <div id="sb-top">
@@ -103,7 +95,7 @@ export function TopBar({
                 }}
                 title={actionButton.description}
               >
-                <FontAwesomeIcon icon={actionButton.icon} />
+                <actionButton.icon size={18} />
               </button>
             ))}
           </div>

web/deps.ts

@@ -13,9 +13,13 @@ export {
   useState,
 } from "https://esm.sh/preact@10.11.1/hooks";
 
-export { FontAwesomeIcon } from "https://esm.sh/@aduh95/preact-fontawesome@0.1.5?external=@fortawesome/fontawesome-common-types";
-export { faPersonRunning } from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0";
-export type { IconDefinition } from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0";
+export {
+  Book as BookIcon,
+  Home as HomeIcon,
+  Moon as MoonIcon,
+  Sun as SunIcon,
+  Terminal as TerminalIcon,
+} from "https://esm.sh/preact-feather@4.2.1";
 
 // Y collab
 export * as Y from "yjs";

web/editor.tsx

@@ -1,20 +1,16 @@
 // Third party web dependencies
 import {
+  BookIcon,
+  HomeIcon,
+  MoonIcon,
   preactRender,
+  SunIcon,
+  TerminalIcon,
   useEffect,
   useReducer,
   yUndoManagerKeymap,
 } from "./deps.ts";
 
-// Iconography
-import {
-  faFolderTree,
-  faHome,
-  faMoon,
-  faRunning,
-  faSun,
-} from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0";
-
 // Third-party dependencies
 import {
   autocompletion,
@@ -123,7 +119,7 @@ export class Editor {
   openPages = new Map<string, PageState>();
   editorView?: EditorView;
   viewState: AppViewState;
-  viewDispatch: React.Dispatch<Action>;
+  viewDispatch: Function;
   space: Space;
   pageNavigator: PathPageNavigator;
   eventHook: EventHook;
@@ -395,7 +391,7 @@ export class Editor {
         options,
         placeHolder,
         helpText,
-        onSelect: (option) => {
+        onSelect: (option: any) => {
           this.viewDispatch({ type: "hide-filterbox" });
           this.focus();
           resolve(option);
@@ -856,28 +852,28 @@ export class Editor {
           }}
           actionButtons={[
             {
-              icon: faHome,
+              icon: HomeIcon,
               description: `Go home (Alt-h)`,
               callback: () => {
                 editor.navigate("");
               },
             },
             {
-              icon: faFolderTree,
+              icon: BookIcon,
               description: `Open page (${isMacLike() ? "Cmd-k" : "Ctrl-k"})`,
               callback: () => {
                 dispatch({ type: "start-navigate" });
               },
             },
             {
-              icon: faRunning,
+              icon: TerminalIcon,
               description: `Run command (${isMacLike() ? "Cmd-/" : "Ctrl-/"})`,
               callback: () => {
                 dispatch({ type: "show-palette" });
               },
             },
             {
-              icon: localStorage.theme === "dark" ? faSun : faMoon,
+              icon: localStorage.theme === "dark" ? SunIcon : MoonIcon,
               description: "Toggle dark mode",
               callback: () => {
                 if (localStorage.theme === "dark") {

web/styles/filter_box.scss

@@ -44,9 +44,8 @@
 
     .sb-icon {
       padding: 0 8px 0 5px;
-    }
-    .sb-name {
-      padding-top: -3px;
+      position: relative;
+      top: 3px;
     }
   }
 

web/styles/theme.scss

@@ -50,12 +50,16 @@
 }
 
 .sb-actions button {
-  border: 1px solid #7897d0;
-  border-radius: 3px;
+  border: 0;
   margin: 3px;
-  font-size: 15px;
   padding: 5px;
-  background-color: #e6e6e6;
+  background-color: transparent;
+  color: #292929;
+  cursor: pointer;
+}
+
+.sb-actions button:hover {
+  color: #0772be;
 }
 
 /* Filter boxes */
@@ -74,6 +78,7 @@
   color: #000;
 }
 
+
 .sb-filter-box .sb-header input::placeholder {
   color: rgb(199, 199, 199);
   font-weight: normal;
@@ -404,6 +409,14 @@ html[data-theme="dark"] {
     color: rgb(200, 200, 200);
   }
 
+  .sb-actions button {
+    color: #adadad;
+  }
+
+  .sb-actions button:hover {
+    color: #37a1ed;
+  }
+  
   .sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4 {
     color: #d1d1d1;
   }

website/CHANGELOG.md

@@ -7,6 +7,7 @@ release.
 
 * Replaced the `--password` flag with `--user` taking a basic auth combination of username and password, e.g. `--user pete:1234`. Authentication now uses standard basic auth. This should fix attachments not working with password-protected setups.
 * Added support for ~~strikethrough~~ syntax.
+* New button icons, from [feather](https://feathericons.com/)
 
 ---
 

website/Silver Bullet.md

@@ -31,8 +31,8 @@ On this site, everything is editable just none of it persists (the back-end is r
 
 Don’t just sit there, try it!
 
-* Click on the page picker (folder tree) icon at the top right, or hit `Cmd-k` (Mac) or `Ctrl-k` (Linux and Windows) to open the **page switcher**. Type the name of a non-existent page to create it (although it won’t save in this environment).
-* Click on the run button (top right) or hit `Cmd-/` (Mac) or `Ctrl-/` (Linux and Windows) to open the **command palette** (note that not all commands will work in this mode).
+* Click on the page picker (book icon) icon at the top right, or hit `Cmd-k` (Mac) or `Ctrl-k` (Linux and Windows) to open the **page switcher**. Type the name of a non-existent page to create it (although it won’t save in this environment).
+* Click on the terminal button (top right) or hit `Cmd-/` (Mac) or `Ctrl-/` (Linux and Windows) to open the **command palette** (note that not all commands will work in this mode).
 * Select some text and hit `Alt-m` to ==highlight== it, or `Cmd-b` (Mac) or `Ctrl-b` (Windows/Linux) to make it **bold**, or `Cmd-i` (Mac) or `Ctrl-i` (Windows/Linux) to make it _italic_.
 * Click a link somewhere on this page to navigate there.
 * Start typing `[[` somewhere to insert a page link (with completion).