terminal font-size updates (margins, paddings, etc.) (#315)

* reorganize line styles, split lines.less into lines.less and line.less

* switch everyone to use termFontSize getter (easier to find usages)

* better font-family font-size update logic

* update line styles, clean up more

* replace icons, fix line heights

* make paddings/margins more consistent

* fix more margins, make command completions use termfontfamily

* updates for cmdinput margins, font sizes, etc.

* fix more font sizes and margins (mostly command input)

* add comment

src/app/app.less

@@ -2,6 +2,12 @@
 
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
+
+    // these variables are overridden by user settings
+    --termfontfamily: "JetBrains Mono", monospace;
+    --termfontsize: 12px;
+    --termlineheight: 15px;
+    --termpad: 7px; // padding value (scaled to termfontsize)
 }
 
 html,

src/app/bookmarks/bookmarks.tsx

@@ -160,7 +160,7 @@ class Bookmark extends React.Component<BookmarkProps, {}> {
                 <div className="bookmark-id-div">{bm.bookmarkid.substr(0, 8)}</div>
                 <div className="bookmark-content">
                     <If condition={hasDesc}>
-                        <Markdown text={markdown} />
+                        <Markdown text={markdown} extraClassName="bottom-margin" />
                     </If>
                     <CmdStrCode
                         cmdstr={bm.cmdstr}

src/app/clientsettings/clientsettings.tsx

@@ -27,7 +27,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     @boundMethod
     handleChangeFontSize(fontSize: string): void {
         const newFontSize = Number(fontSize);
-        if (GlobalModel.termFontSize.get() == newFontSize) {
+        if (GlobalModel.getTermFontSize() == newFontSize) {
             return;
         }
         const prtn = GlobalCommandRunner.setTermFontSize(newFontSize, false);
@@ -144,7 +144,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         const maxTokensStr = String(
             openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
         );
-        const curFontSize = GlobalModel.termFontSize.get();
+        const curFontSize = GlobalModel.getTermFontSize();
         const curFontFamily = GlobalModel.getTermFontFamily();
 
         return (

src/app/common/elements/markdown.less

@@ -2,11 +2,14 @@
 
 .markdown {
     color: @term-white;
-    margin-bottom: 10px;
     font-family: @markdown-font;
     font-size: 14px;
     overflow-wrap: break-word;
 
+    &.bottom-margin {
+        margin-bottom: 10px;
+    }
+
     code {
         background-color: @markdown-highlight;
         color: @term-white;

src/app/common/modals/alert.tsx

@@ -41,7 +41,7 @@ class AlertModal extends React.Component<{}, {}> {
                 <Modal.Header onClose={this.closeModal} title={title} />
                 <div className="wave-modal-body">
                     <If condition={message?.markdown}>
-                        <Markdown text={message?.message ?? ""} />
+                        <Markdown text={message?.message ?? ""} extraClassName="bottom-margin" />
                     </If>
                     <If condition={!message?.markdown}>{message?.message}</If>
                     <If condition={message.confirmflag}>

src/app/common/modals/userinput.tsx

@@ -59,7 +59,7 @@ export const UserInputModal = (userInputRequest: UserInputRequest) => {
             <div className="wave-modal-body">
                 <div className="userinput-query">
                     <If condition={userInputRequest.markdown}>
-                        <Markdown text={userInputRequest.querytext} />
+                        <Markdown text={userInputRequest.querytext} extraClassName="bottom-margin" />
                     </If>
                     <If condition={!userInputRequest.markdown}>{userInputRequest.querytext}</If>
                 </div>

src/app/common/modals/viewremoteconndetail.tsx

@@ -291,7 +291,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
 
         let model = this.model;
         let isTermFocused = this.model.remoteTermWrapFocus.get();
-        let termFontSize = GlobalModel.termFontSize.get();
+        let termFontSize = GlobalModel.getTermFontSize();
         let termWidth = textmeasure.termWidthFromCols(appconst.RemotePtyCols, termFontSize);
         let remoteAliasText = util.isBlank(remote.remotealias) ? "(none)" : remote.remotealias;
         let selectedRemoteStatus = this.getSelectedRemote().status;

src/app/common/prompt/prompt.less

@@ -2,6 +2,8 @@
 
 .term-prompt {
     font-weight: normal;
+    font-size: var(--termfontsize);
+    line-height: var(--termlineheight);
     font-family: var(--termfontfamily);
 
     .icon {
@@ -12,6 +14,10 @@
         fill: @wave-green;
     }
 
+    i {
+        margin-right: 0.25em; // em for relative sizing
+    }
+
     .term-prompt-branch {
         color: @term-white;
     }
@@ -21,9 +27,6 @@
     }
 
     .term-prompt-remote {
-        i {
-            margin-right: 0;
-        }
     }
 
     .term-prompt-remote {

src/app/common/prompt/prompt.tsx

@@ -8,7 +8,6 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
 import { GlobalModel } from "@/models";
 import cn from "classnames";
 import { isBlank } from "@/util/util";
-import { ReactComponent as FolderIcon } from "@/assets/icons/folder.svg";
 
 import "./prompt.less";
 
@@ -76,6 +75,7 @@ class Prompt extends React.Component<{ rptr: RemotePtrType; festate: Record<stri
         if (rptr == null || isBlank(rptr.remoteid)) {
             return <span className={cn("term-prompt", "color-green")}>&nbsp;</span>;
         }
+        let termFontSize = GlobalModel.getTermFontSize();
         let remote = GlobalModel.getRemote(this.props.rptr.remoteid);
         let remoteStr = getRemoteStr(rptr);
         let festate = this.props.festate ?? {};
@@ -96,7 +96,7 @@ class Prompt extends React.Component<{ rptr: RemotePtrType; festate: Record<stri
         }
         let cwdElem = (
             <span title="current directory" className="term-prompt-cwd">
-                <FolderIcon className="icon" />
+                <i className="fa-sharp fa-solid fa-folder" style={{ marginRight: Math.ceil(termFontSize / 4) }} />
                 {cwd}
             </span>
         );