Fix add-workspace so that only the plus button shows pointer (#258)

src/app/sidebar/sidebar.less

@@ -127,9 +127,7 @@
                     0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
             }
             .index {
-                font-size: 0.8em;
-                text-align: center;
-                width: 2em;
+                font-size: 10px;
             }
             .hotkey {
                 float: left !important;
@@ -192,13 +190,18 @@
         &:not(:hover) .status-indicator {
             .positional-icon-visible;
         }
-        .add_workspace {
-            float: right;
-            padding: 2px;
-            margin-right: 6px;
-            transition: transform 0.3s ease-in-out;
-            svg {
-                fill: @base-color;
+
+        &.workspaces {
+            cursor: default;
+            .add-workspace {
+                cursor: pointer;
+                .positional-icon-visible;
+                float: right;
+                padding: 2px;
+                margin-right: 6px;
+                .fa-plus {
+                    font-size: 13px;
+                }
             }
         }
 

src/app/sidebar/sidebar.tsx

@@ -14,7 +14,6 @@ import { compareLoose } from "semver";
 import { ReactComponent as LeftChevronIcon } from "../assets/icons/chevron_left.svg";
 import { ReactComponent as AppsIcon } from "../assets/icons/apps.svg";
 import { ReactComponent as WorkspacesIcon } from "../assets/icons/workspaces.svg";
-import { ReactComponent as AddIcon } from "../assets/icons/add.svg";
 import { ReactComponent as SettingsIcon } from "../assets/icons/settings.svg";
 
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -251,16 +250,17 @@ class MainSideBar extends React.Component<{}, {}> {
                     </div>
                     <div className="separator" />
                     <SideBarItem
+                        className="workspaces"
                         frontIcon={<WorkspacesIcon className="icon" />}
                         contents="Workspaces"
                         endIcons={[
-                            <div
-                                key="add_workspace"
-                                className="add_workspace hoverEffect"
+                            <CenteredIcon
+                                key="add-workspace"
+                                className="add-workspace hoverEffect"
                                 onClick={this.handleNewSession}
                             >
-                                <AddIcon />
-                            </div>,
+                                <i className="fa-sharp fa-solid fa-plus"></i>
+                            </CenteredIcon>,
                         ]}
                     />
                     <div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>