fix background colors, standardize tab icons -- use fontawesome, use fa-fw (fixed width) (#352)

public/index-dev.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
         <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
         <link rel="stylesheet" href="dist-dev/waveterm.css" />

public/index.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
         <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
         <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
         <link rel="stylesheet" href="dist/waveterm.css" />

src/app/app.less

@@ -17,12 +17,12 @@ body {
 
 body {
     &.is-dev .sidebar {
-        background-color: var(--app-bg-color-dev);
+        background-color: var(--sidebar-dev-bg-color);
     }
 }
 
 body .sidebar {
-    background-color: var(--app-bg-color);
+    background-color: var(--sidebar-bg-color);
 }
 
 textarea {
@@ -31,7 +31,6 @@ textarea {
     font-size: 12px;
     font-weight: 300;
     line-height: 1.5;
-    background: var(--app-bg-color);
     color: var(--app-text-color);
 }
 
@@ -800,13 +799,15 @@ a.a-block {
 
             .tab-color-name,
             .tab-icon-name {
+                display: inline-block;
                 margin-left: 1em;
+                min-width: 80px;
             }
 
             .tab-color-select,
             .tab-icon-select {
                 cursor: pointer;
-                margin: 5px;
+                margin: 3px;
                 &:hover {
                     outline: 2px solid white;
                 }

src/app/appconst.ts

@@ -33,6 +33,7 @@ export const InputChunkSize = 500;
 export const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"];
 export const TabColors = ["red", "orange", "yellow", "green", "mint", "cyan", "blue", "violet", "pink", "white"];
 export const TabIcons = [
+    "square",
     "sparkle",
     "fire",
     "ghost",

src/app/common/elements/index.tsx

@@ -18,3 +18,4 @@ export { Status } from "./status";
 export { TextField } from "./textfield";
 export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
+export { TabIcon } from "./tabicon";

src/app/common/elements/tabicon.tsx

@@ -0,0 +1,28 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import { isBlank } from "@/util/util";
+import cn from "classnames";
+
+class TabIcon extends React.Component<{ icon: string; color: string }> {
+    render() {
+        let { icon, color, className } = this.props;
+        let iconClass = "";
+        if (icon === "default" || icon === "square") {
+            iconClass = "fa-solid fa-square fa-fw";
+        } else {
+            iconClass = `fa-sharp fa-solid fa-${icon} fa-fw`;
+        }
+        if (isBlank(color) || color === "default") {
+            color = "green";
+        }
+        return (
+            <div className={cn("icon", "color-" + color)}>
+                <i className={iconClass} />
+            </div>
+        );
+    }
+}
+
+export { TabIcon };

src/app/common/modals/screensettings.tsx

@@ -10,7 +10,7 @@ import cn from "classnames";
 import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
 import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Dropdown, Tooltip } from "@/elements";
 import * as util from "@/util/util";
-import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg";
+import { TabIcon } from "@/common/elements/tabicon";
 import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import * as appconst from "@/app/appconst";
@@ -274,7 +274,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                         <div className="settings-input">
                             <div className="tab-colors">
                                 <div className="tab-color-cur">
-                                    <SquareIcon className={cn("tab-color-icon", "color-" + screen.getTabColor())} />
+                                    <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
                                     <span className="tab-color-name">{screen.getTabColor()}</span>
                                 </div>
                                 <div className="tab-color-sep">|</div>
@@ -284,7 +284,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                                         className="tab-color-select"
                                         onClick={() => this.selectTabColor(color)}
                                     >
-                                        <SquareIcon className={cn("tab-color-icon", "color-" + color)} />
+                                        <TabIcon icon="square" color={color} />
                                     </div>
                                 </For>
                             </div>
@@ -295,12 +295,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                         <div className="settings-input">
                             <div className="tab-icons">
                                 <div className="tab-icon-cur">
-                                    <If condition={screen.getTabIcon() == "default"}>
+                                    <TabIcon icon={screen.getTabIcon()} color="white" />
-                                        <SquareIcon className={cn("tab-color-icon", "color-white")} />
-                                    </If>
-                                    <If condition={screen.getTabIcon() != "default"}>
-                                        <i className={`fa-sharp fa-solid fa-${screen.getTabIcon()}`}></i>
-                                    </If>
                                     <span className="tab-icon-name">{screen.getTabIcon()}</span>
                                 </div>
                                 <div className="tab-icon-sep">|</div>
@@ -310,7 +305,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                                         className="tab-icon-select"
                                         onClick={() => this.selectTabIcon(icon)}
                                     >
-                                        <i className={`fa-sharp fa-solid fa-${icon}`}></i>
+                                        <TabIcon icon={icon} color="white" />
                                     </div>
                                 </For>
                             </div>

src/app/common/modals/tabswitcher.tsx

@@ -11,7 +11,7 @@ import { GlobalModel, GlobalCommandRunner } from "@/models";
 import { Modal, TextField, InputDecoration, Tooltip } from "@/elements";
 import * as util from "@/util/util";
 import { Screen } from "@/models";
-import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg";
+import { TabIcon } from "@/elements/tabicon";
 
 import "./tabswitcher.less";
 
@@ -278,15 +278,6 @@ class TabSwitcherModal extends React.Component<{}, {}> {
         return mainOptions.concat(additionalOptions);
     }
 
-    @boundMethod
-    renderIcon(option: SwitcherDataType): React.ReactNode {
-        const tabIcon = option.icon;
-        if (tabIcon === "default" || tabIcon === "square") {
-            return <SquareIcon className="left-icon" />;
-        }
-        return <i className={`fa-sharp fa-solid fa-${tabIcon}`}></i>;
-    }
-
     @boundMethod
     renderOption(option: SwitcherDataType, index: number): JSX.Element {
         if (!this.optionRefs[index]) {
@@ -302,7 +293,7 @@ class TabSwitcherModal extends React.Component<{}, {}> {
                 onClick={() => this.handleSelect(index)}
             >
                 <If condition={option.sessionIdx != -1}>
-                    <div className={cn("icon", "color-" + option.color)}>{this.renderIcon(option)}</div>
+                    <TabIcon icon={option.icon} color={option.color} />
                     <div className="tabname">
                         #{option.sessionName} / {option.screenName}
                     </div>

src/app/root.less

@@ -32,6 +32,7 @@
     --floating-logo-height: var(--screentabs-height);
 
     // global colors
+    --app-bg-color: black;
     --app-accent-color: rgb(88, 193, 66);
     --app-error-color: rgb(204, 0, 0);
     --app-warning-color: rgb(255, 165, 0);
@@ -40,8 +41,6 @@
     --app-text-primary-color: rgb(255, 255, 255);
     --app-text-secondary-color: rgb(195, 200, 194);
     --app-border-color: rgb(51, 51, 51);
-    --app-bg-color: rgba(21, 23, 21, 1);
-    --app-bg-color-dev: rgba(21, 23, 48, 1);
     --app-maincontent-bg-color: #333;
     --app-border-radius: 10px;
 
@@ -146,6 +145,7 @@
     --hotkey-text-color: rgb(195, 200, 194);
 
     // sidebar colors
+    --sidebar-bg-color: rgba(21, 23, 21, 1);
     --sidebar-dev-bg-color: rgb(21, 23, 48);
     --sidebar-settings-color: rgb(255, 255, 255);
     --sidebar-separator-color: var(--app-border-color);

src/app/workspace/screen/screenview.tsx

@@ -17,9 +17,9 @@ import { getRemoteStr } from "@/common/prompt/prompt";
 import { Line } from "@/app/line/linecomps";
 import { LinesView } from "@/app/line/linesview";
 import * as util from "@/util/util";
+import { TabIcon } from "@/elements/tabicon";
 import { ReactComponent as EllipseIcon } from "@/assets/icons/ellipse.svg";
 import { ReactComponent as Check12Icon } from "@/assets/icons/check12.svg";
-import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg";
 import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import * as appconst from "@/app/appconst";
@@ -428,9 +428,6 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
             <>
                 <div className="text-s1 unselectable">Select the icon</div>
                 <div className="control-iconlist tabicon-list">
-                    <div key="square" className="icondiv" title="square" onClick={() => this.selectTabIcon("square")}>
-                        <SquareIcon className="icon square-icon" />
-                    </div>
                     <For each="icon" of={appconst.TabIcons}>
                         <div
                             className="icondiv tabicon"
@@ -438,7 +435,7 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
                             title={icon || ""}
                             onClick={() => this.selectTabIcon(icon || "")}
                         >
-                            <i className={`fa-sharp fa-solid fa-${icon}`}></i>
+                            <TabIcon icon={icon} color="white" />
                         </div>
                     </For>
                 </div>

src/app/workspace/screen/tab.tsx

@@ -8,10 +8,10 @@ import { boundMethod } from "autobind-decorator";
 import cn from "classnames";
 import { GlobalModel, GlobalCommandRunner, Screen } from "@/models";
 import { ActionsIcon, StatusIndicator, CenteredIcon } from "@/common/icons/icons";
-import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg";
 import * as constants from "@/app/appconst";
 import { Reorder } from "framer-motion";
 import { MagicLayout } from "@/app/magiclayout";
+import { TabIcon } from "@/elements/tabicon";
 
 @mobxReact.observer
 class ScreenTab extends React.Component<
@@ -58,22 +58,6 @@ class ScreenTab extends React.Component<
         GlobalModel.modalsModel.pushModal(constants.SCREEN_SETTINGS);
     }
 
-    renderTabIcon = (screen: Screen): React.ReactNode => {
-        const tabIcon = screen.getTabIcon();
-        if (tabIcon === "default" || tabIcon === "square") {
-            return (
-                <div className="icon svg-icon">
-                    <SquareIcon className="svg-icon-inner" />
-                </div>
-            );
-        }
-        return (
-            <div className="icon fa-icon">
-                <i className={`fa-sharp fa-solid fa-${tabIcon}`}></i>
-            </div>
-        );
-    };
-
     render() {
         let { screen, activeScreenId, index, onSwitchScreen } = this.props;
         let archived = screen.archived.get() ? (
@@ -105,7 +89,9 @@ class ScreenTab extends React.Component<
                 onContextMenu={(event) => this.openScreenSettings(event, screen)}
                 onDragEnd={this.handleDragEnd}
             >
-                <CenteredIcon className="front-icon">{this.renderTabIcon(screen)}</CenteredIcon>
+                <CenteredIcon className="front-icon">
+                    <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
+                </CenteredIcon>
                 <div className="tab-name truncate">
                     {archived}
                     {webShared}