more fixes

src/app/app.less

@@ -102,7 +102,7 @@ svg.icon {
     }
     &.disabled {
         color: fade(@disabled-color, 60%);
-        background: @disabled-background;
+        background: @button-disabled-background;
         cursor: initial;
         &:hover {
             box-shadow: none;

src/app/assets/icons/line/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M447.9 142.5l-23.2 22L181 395.3l-22 20.8-22-20.8L23.2 287.6 0 265.6l44-46.5 23.2 22L159 328 380.7 118l23.2-22 44 46.5z"/></svg>

src/app/assets/icons/line/comment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 49.6 21.3 95.1 56.9 130.8L16 480l150.4-45.1c27.9 8.5 58.1 13.1 89.6 13.1z"/></svg>

src/app/assets/icons/line/fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M45.3 317.3L0 272l45.3-45.3 76.1-76.1-80-80L18.7 48 64 2.7 86.6 25.4l80 80 60.1-60.1L272 0l45.3 45.3L466.7 194.7 512 240l-45.3 45.3L285.3 466.7 240 512l-45.3-45.3L45.3 317.3zM166.6 195.9L90.5 272l16 16h267l48-48L272 90.5l-60.1 60.1 18.7 18.7L253.3 192 208 237.3l-22.6-22.6-18.7-18.7z"/></svg>

src/app/assets/icons/line/gear.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M200 0H312l17.2 78.4c15.8 6.5 30.6 15.1 44 25.4l76.5-24.4 56 97-59.4 54.1c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l59.4 54.1-56 97-76.5-24.4c-13.4 10.3-28.2 18.9-44 25.4L312 512H200l-17.2-78.4c-15.8-6.5-30.6-15.1-44-25.4L62.3 432.5l-56-97 59.4-54.1C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L6.3 176.5l56-97 76.5 24.4c13.4-10.3 28.2-18.9 44-25.4L200 0zm56 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>

src/app/assets/icons/line/question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448 32H0V480H448V32zM136 184c0-30.9 25.1-56 56-56h56.9c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L248 264.4V288H200V264 250.5 236.6l12.1-6.9 44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H192c-4.4 0-8 3.6-8 8l0 6.5-48 0V184zm64 136h48v48H200V320z"/></svg>

src/app/assets/icons/line/rotate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8L44.8 181.4C55.6 150.7 73.2 122 97.6 97.6c87.5-87.5 229.3-87.5 316.8 0l0 0L472 40l24 24V224H336l-24-24 57.1-57.1 0 0c-62.5-62.5-163.8-62.5-226.3 0zm0 226.3c62.5 62.5 163.8 62.5 226.3 0c17.5-17.5 30.1-38 37.8-59.8l60.4 21.3c-10.8 30.6-28.4 59.3-52.9 83.7c-87.5 87.5-229.3 87.5-316.7 0l0 0L40 472 16 448V288H176l24 24-57.1 57.1z"/></svg>

src/app/assets/icons/line/triangle-exclamation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 32L0 480H512L256 32zm24 160v24V328v24H232V328 216 192h48zM232 384h48v48H232V384z"/></svg>

src/app/assets/icons/line/xmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M326.6 166.6L349.3 144 304 98.7l-22.6 22.6L192 210.7l-89.4-89.4L80 98.7 34.7 144l22.6 22.6L146.7 256 57.4 345.4 34.7 368 80 413.3l22.6-22.6L192 301.3l89.4 89.4L304 413.3 349.3 368l-22.6-22.6L237.3 256l89.4-89.4z"/></svg>

src/app/assets/icons/minus.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="mdil-minus-circle" viewBox="0 0 24 24"><path d="M7,12H16V13H7V12M11.5,3A9.5,9.5 0 0,1 21,12.5A9.5,9.5 0 0,1 11.5,22A9.5,9.5 0 0,1 2,12.5A9.5,9.5 0 0,1 11.5,3M11.5,4A8.5,8.5 0 0,0 3,12.5A8.5,8.5 0 0,0 11.5,21A8.5,8.5 0 0,0 20,12.5A8.5,8.5 0 0,0 11.5,4Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H160v48h24H328h24V232H328 184z"/></svg>

src/app/assets/icons/plus.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="mdil-plus-circle" viewBox="0 0 24 24"><path d="M7,12H11V8H12V12H16V13H12V17H11V13H7V12M11.5,3A9.5,9.5 0 0,1 21,12.5A9.5,9.5 0 0,1 11.5,22A9.5,9.5 0 0,1 2,12.5A9.5,9.5 0 0,1 11.5,3M11.5,4A8.5,8.5 0 0,0 3,12.5A8.5,8.5 0 0,0 11.5,21A8.5,8.5 0 0,0 20,12.5A8.5,8.5 0 0,0 11.5,4Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 368h48V344 280h64 24V232H344 280V168 144H232v24 64H168 144v48h24 64v64 24z"/></svg>

src/app/line/linecomps.tsx

@@ -36,6 +36,15 @@ import { PluginModel } from "../../plugins/plugins";
 import { Prompt } from "../common/prompt/prompt";
 import * as lineutil from "./lineutil";
 
+import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
+import { ReactComponent as CommentIcon } from "../assets/icons/line/comment.svg";
+import { ReactComponent as QuestionIcon } from "../assets/icons/line/question.svg";
+import { ReactComponent as RotateIcon } from "../assets/icons/line/rotate.svg";
+import { ReactComponent as WarningIcon } from "../assets/icons/line/triangle-exclamation.svg";
+import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
+import { ReactComponent as FillIcon } from "../assets/icons/line/fill.svg";
+import { ReactComponent as GearIcon } from "../assets/icons/line/gear.svg";
+
 import "./lines.less";
 
 dayjs.extend(localizedFormat);
@@ -51,35 +60,37 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
         let rtnstate = cmd != null ? cmd.getRtnState() : false;
         let exitcode = cmd != null ? cmd.getExitCode() : 0;
         let isComment = line.linetype == "text";
-        let icon: string = null;
+        let icon = null;
         let iconTitle = null;
-        let iconColor = null;
         if (isComment) {
-            icon = "fa-comment";
+            icon = <CommentIcon />;
             iconTitle = "comment";
         } else if (status == "done") {
-            icon = exitcode === 0 ? "fa-check" : "fa-xmark";
+            if (exitcode === 0) {
-            iconTitle = exitcode === 0 ? "success" : "fail";
+                icon = <CheckIcon className="success" />;
-            iconColor = exitcode === 0 ? "color-green" : "color-red";
+                iconTitle = "success";
-        } else if (status == "hangup" || status == "error") {
-            icon = "fa-triangle-exclamation";
-            iconTitle = status;
-            iconColor = "color-yellow";
-        } else if (status == "running" || "detached") {
-            icon = "fa-rotate fa-spin";
-            iconTitle = "running";
-            iconColor = "color-green";
             } else {
-            icon = "fa-square-question";
+                icon = <XmarkIcon className="fail" />;
+                iconTitle = "fail";
+            }
+        } else if (status == "hangup" || status == "error") {
+            icon = <WarningIcon className="warning" />;
+            iconTitle = status;
+        } else if (status == "running" || "detached") {
+            icon = <RotateIcon className="warning spin" />;
+            iconTitle = "running";
+        } else {
+            icon = <QuestionIcon />;
             iconTitle = "unknown";
         }
         return (
             <div
                 onContextMenu={this.props.onRightClick}
+                title={iconTitle}
                 className={cn("simple-line-status", "status-" + status, rtnstate ? "has-rtnstate" : null)}
             >
                 <span className="linenum">{lineNumStr}</span>
-                <i title={iconTitle} className={cn("fa-sharp fa-solid", icon, iconColor)} />
+                <div className="avatar">{icon}</div>
             </div>
         );
     }
@@ -437,15 +448,15 @@ class LineCmd extends React.Component<
                 <div>&nbsp;</div>
                 <If condition={!isBlank(renderer) && renderer != "terminal"}>
                     <div className="renderer">
-                        <i className="fa-sharp fa-solid fa-fill" />
+                        <FillIcon />
                         {renderer}&nbsp;
                     </div>
                 </If>
                 <div className="termopts">
                     ({termOpts.rows}x{termOpts.cols})
                 </div>
-                <div className="settings" onClick={this.handleLineSettings}>
+                <div className="settings hoverEffect" onClick={this.handleLineSettings}>
-                    <i className="fa-sharp fa-solid fa-gear" />
+                    <GearIcon />
                 </div>
             </div>
         );
@@ -641,7 +652,7 @@ class LineCmd extends React.Component<
                         )}
                         onClick={this.clickMinimise}
                     >
-                        {this.isMinimised.get() ? <PlusIcon className="icon" /> : <MinusIcon className="icon" />}
+                        {this.isMinimised.get() ? <PlusIcon className="icon plus" /> : <MinusIcon className="icon" />}
                     </div>
                 </div>
                 <If condition={!this.isMinimised.get()}>

src/app/line/lines.less

@@ -18,7 +18,6 @@
 }
 
 .line .renderer-loading {
-    color: @term-white;
     padding-top: 5px;
 }
 
@@ -27,9 +26,13 @@
     scroll-margin-bottom: 20px;
     position: relative;
 
-    .avatar {
+    .plus {
-        cursor: pointer;
+        opacity: 0.5;
-        height: 36px;
+    }
+    &:hover {
+        .plus {
+            opacity: 1;
+        }
     }
 
     .line-header {
@@ -67,25 +70,18 @@
         .line-icon.active {
             visibility: visible;
             display: block;
-
-            i.fa-star,
-            i.fa-thumb-tack {
-                color: @term-bright-yellow;
-            }
-
-            i.fa-bookmark {
-                color: @term-bright-blue;
-            }
         }
 
         &:hover .line-icon {
             visibility: visible;
             display: block;
+            opacity: 1;
         }
     }
 
     .meta.meta-line1 {
         margin-left: 2px;
+        color: rgba(@base-color, 0.6) !important;
     }
 
     &.has-rtnstate .terminal-wrapper {
@@ -179,18 +175,10 @@
 
         .ts {
             display: flex;
-            color: #aaa;
         }
     }
 
     .simple-line-status {
-        color: #aaa;
-
-        i {
-            padding-left: 6px;
-            padding-right: 6px;
-        }
-
         .linenum {
             cursor: pointer;
         }
@@ -201,16 +189,38 @@
             }
         }
 
-        .color-red {
+        .avatar {
-            color: @term-red;
+            display: inline-block;
+            width: 1em;
+            height: 1em;
+            margin: 0 0.5em;
+            vertical-align: text-top;
+            fill: @base-color;
         }
 
-        .color-green {
+        .success {
-            color: @term-bright-green;
+            fill: @prompt-green;
         }
 
-        .color-yellow {
+        .fail {
-            color: @term-bright-yellow;
+            fill: @error-red;
+        }
+
+        .warning {
+            fill: @warning-yellow;
+        }
+
+        @keyframes infiniteRotate {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .spin {
+            animation: infiniteRotate 2s linear infinite;
         }
     }
 
@@ -337,38 +347,39 @@
         .termopts,
         .renderer {
             display: flex;
-            color: #aaa;
             margin-top: 5px;
         }
 
         .renderer {
-            color: #aaa;
             margin-left: 3px;
             margin-top: 5px;
-
+            svg {
-            i {
+                width: 1em;
-                display: inline-block;
+                margin-right: 0.5em;
-
+                fill: rgba(@base-color, 0.6);
-                margin-right: 2px;
-                margin-top: 2px;
             }
         }
 
         .settings {
             display: none;
-            color: #aaa;
+            margin-left: 0.5em;
-
+            margin-top: 0.65em;
-            margin-left: 5px;
-            margin-top: 5px;
             cursor: pointer;
+            width: 1em;
+            height: 1em;
+            border-radius: 50%;
+            line-height: 1em;
+            svg {
+                fill: rgba(@base-color, 0.6);
+                &:hover {
+                    fill: @base-color;
+                }
+            }
         }
 
         .termopts {
-            color: #aaa;
             margin-top: 5px;
-
             display: none;
-
             .resize-button {
                 cursor: pointer;
                 padding-left: 3px;
@@ -464,15 +475,16 @@
     .line-sep {
         display: flex;
         align-items: center;
-        color: #aaa;
+        margin-top: 1em;
+        color: rgba(@base-color, 0.5);
     }
 
     .line-sep::before,
     .line-sep::after {
         content: "";
-        height: 2px;
+        height: 1px;
-        background-color: @term-white;
         flex-grow: 1;
+        background-color: rgba(@base-color, 0.5);
     }
 
     .line-sep::before {

src/app/sidebar/sidebar.less

@@ -3,43 +3,38 @@
 .main-sidebar {
     padding: 0;
     width: 20rem;
-    min-width: 20rem;
     display: flex;
     flex-direction: column;
     position: relative;
-    transition: width 0.2s ease;
 
     &.collapsed {
-        width: 4em;
+        width: 6em;
         .arrow-container {
             transform: rotate(180deg);
         }
         .contents {
             opacity: 0;
             visibility: hidden;
-            transition: opacity 0.1s ease-in-out, visibility 0.1s step-start;
         }
         overflow: hidden;
     }
 
     .arrow-container {
         position: absolute;
-        top: 8px;
+        top: 2em;
-        right: 18px;
+        right: 2em;
-        width: 20px;
+        width: 1.5em;
-        height: 20px;
+        height: 1.5em;
         border-radius: 50%;
-        padding: 2px;
         transition: transform 0.3s ease-in-out;
-
         svg {
-            width: 16px;
+            width: 1.5em;
-            height: 16px;
+            height: 1.5em;
         }
     }
 
     .top {
-        margin-top: 32px;
+        margin-top: 4em;
     }
 
     .separator {

src/app/workspace/cmdinput/cmdInput.less

@@ -124,15 +124,15 @@
         .cmd-exec {
             position: absolute;
             right: 0;
-            bottom: -6px;
             .icon {
-                margin: 0 8px 0 6px;
+                vertical-align: bottom;
-                vertical-align: middle;
+                margin-right: 1em;
-                width: 32px;
+                width: 2.5em;
-                height: 32px;
+                height: 2.5em;
                 cursor: pointer;
-                padding: 4px;
                 border-radius: 50%;
+                fill: @prompt-green;
+                padding: 0.25em;
             }
             .icon.disabled {
                 fill: @disabled-background;
@@ -140,9 +140,12 @@
             }
             .cmd-btn {
                 display: inline-block;
-                margin-right: 2em;
+                margin-right: 1em;
+                padding: 0.2em 0.7rem;
                 opacity: 0.5;
                 cursor: pointer;
+                border-radius: 4px;
+                vertical-align: super;
                 &:hover {
                     opacity: 1;
                 }

src/app/workspace/cmdinput/cmdinput.tsx

@@ -158,12 +158,12 @@ class CmdInput extends React.Component<{}, {}> {
                             {inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")})
                         </div>**/}
                         {!focusVal && (
-                            <div onClick={this.clickFocusInputHint} className="cmd-btn">
+                            <div onClick={this.clickFocusInputHint} className="cmd-btn hoverEffect">
                                 focus input ({renderCmdText("I")})
                             </div>
                         )}
                         {focusVal && (
-                            <div onMouseDown={this.clickHistoryHint} className="cmd-btn">
+                            <div onMouseDown={this.clickHistoryHint} className="cmd-btn hoverEffect">
                                 {historyShow ? "close history (esc)" : "show history (ctrl-r)"}
                             </div>
                         )}

src/app/workspace/screen/tabs.less

@@ -146,9 +146,10 @@
         display: none;
     }
 
-    .screen-tab.new-screen {
+    .new-screen {
         width: 3em;
         min-width: 3em;
+        margin-left: 1em;
         cursor: pointer;
 
         .icon {

src/app/workspace/screen/tabs.tsx

@@ -11,7 +11,6 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel, GlobalCommandRunner, Session, ScreenLines, Screen } from "../../../model/model";
 import { renderCmdText } from "../../common/common";
 import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
-import { ReactComponent as SparkleIcon } from "../../assets/icons/tab/sparkle.svg";
 import { ReactComponent as ActionsIcon } from "../../assets/icons/tab/actions.svg";
 import { ReactComponent as AddIcon } from "../../assets/icons/add.svg";
 
@@ -177,7 +176,7 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
                     <For each="screen" index="index" of={showingScreens}>
                         {this.renderTab(screen, activeScreenId, index)}
                     </For>
-                    <div key="new-screen" className="screen-tab new-screen" onClick={this.handleNewScreen}>
+                    <div key="new-screen" className="new-screen" onClick={this.handleNewScreen}>
                         <AddIcon className="icon hoverEffect" />
                     </div>
                 </div>

src/app/workspace/workspace.less

@@ -8,9 +8,13 @@
     &.is-hidden {
         display: none;
     }
-    max-width: calc(100% - 21em);
+    max-width: calc(100% - 20.5em);
     background: @background-session;
     border: 1px solid @base-border;
     border-radius: 8px;
     margin-bottom: 1em;
+    transition: width 0.2s ease;
+}
+.collapsed + .session-view {
+    max-width: calc(100% - 6.7em);
 }

src/index.less

@@ -11,8 +11,10 @@
 @scrollbar-background: rgba(21, 23, 21, 1);
 @scrollbar-thumb: rgb(134, 134, 134);
 @button-background: rgb(38, 38, 38);
+@button-disabled-background: rgb(30, 29, 29);
 @success-green: rgb(38, 97, 26);
 @error-red: #cc0000;
+@warning-yellow: #ffa500;
 
 @term-black: #000000;
 @term-red: #cc0000;

src/plugins/code/code.less

@@ -68,13 +68,14 @@
     }
     .readonly {
         position: absolute;
-        top: calc(1.5rem + 3px);
+        top: 0;
-        right: 10rem;
+        right: 12rem;
         border-radius: 5px;
-        background-color: @term-bright-red;
+        background-color: @button-background;
-        color: @term-white;
+        color: @prompt-green;
         z-index: 1;
-        padding: 0 6px 2px;
+        padding: 0 0.8em;
+        font-size: 0.8em;
     }
 
     /** customising react-split-it **/