Better titlebar control icons

src-web/components/SettingsDropdown.tsx

@@ -109,7 +109,7 @@ export function SettingsDropdown() {
         },
       ]}
     >
-      <IconButton size="sm" title="Request Options" icon="gear" className="pointer-events-auto" />
+      <IconButton size="sm" title="Main Menu" icon="hamburger" className="pointer-events-auto" />
     </Dropdown>
   );
 }

src-web/components/Workspace.tsx

@@ -177,8 +177,8 @@ function HeaderSize({ className, ...props }: HeaderSizeProps) {
     <div
       className={classNames(
         className,
-        'h-md pt-[1px] flex items-center w-full pr-3 border-b',
-        platform?.osType === 'Darwin' ? 'pl-20' : 'pl-1'
+        'h-md pt-[1px] flex items-center w-full border-b',
+        platform?.osType === 'Darwin' ? 'pl-20 pr-3' : 'pl-1',
       )}
       {...props}
     />

src-web/components/WorkspaceHeader.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import { Icon } from './core/Icon';
 import { HStack } from './core/Stacks';
 import { EnvironmentActionsDropdown } from './EnvironmentActionsDropdown';
@@ -17,6 +17,7 @@ interface Props {
 
 export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Props) {
   const osInfo = useOsInfo();
+  const [maximized, setMaximized] = useState<boolean>(false);
   return (
     <HStack
       space={2}
@@ -39,15 +40,45 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <SettingsDropdown />
       </div>
       {osInfo?.osType !== 'Darwin' && (
-        <HStack className="ml-3" space={1} alignItems="center">
-          <Button size="sm" onClick={() => appWindow.minimize()}>
-            -
+        <HStack className="ml-4" space={1} alignItems="center">
+          <Button className="!text-gray-600 rounded-none" onClick={() => appWindow.minimize()}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+              <path fill="currentColor" d="M14 8v1H3V8z" />
+            </svg>
           </Button>
-          <Button size="sm" onClick={() => appWindow.toggleMaximize()}>
-            o
+          <Button
+            className="!text-gray-600 rounded-none"
+            onClick={async () => {
+              await appWindow.toggleMaximize();
+              setMaximized(await appWindow.isMaximized());
+            }}
+          >
+            {maximized ? (
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                <path fill="currentColor" d="M3 3v10h10V3zm9 9H4V4h8z" />
+              </svg>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                <g fill="currentColor">
+                  <path d="M3 5v9h9V5zm8 8H4V6h7z" />
+                  <path fillRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5z" clipRule="evenodd" />
+                </g>
+              </svg>
+            )}
           </Button>
-          <Button size="sm" onClick={() => appWindow.close()}>
-            x
+          <Button
+            color="custom"
+            className="text-gray-600 rounded-none hocus:bg-red-200 hocus:text-gray-800"
+            onClick={() => appWindow.close()}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+              <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="m7.116 8l-4.558 4.558l.884.884L8 8.884l4.558 4.558l.884-.884L8.884 8l4.558-4.558l-.884-.884L8 7.116L3.442 2.558l-.884.884z"
+                clipRule="evenodd"
+              />
+            </svg>
           </Button>
         </HStack>
       )}

src-web/components/core/Icon.tsx

@@ -6,6 +6,9 @@ import { ReactComponent as LeftPanelHiddenIcon } from '../../assets/icons/LeftPa
 import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftPanelVisibleIcon.svg';
 
 const icons = {
+  square: I.SquareIcon,
+  minus: I.MinusIcon,
+  hamburger: I.HamburgerMenuIcon,
   archive: I.ArchiveIcon,
   chat: I.ChatBubbleIcon,
   check: I.CheckIcon,

src-web/main.css

@@ -10,7 +10,7 @@
   }
 
   #root {
-    @apply bg-gray-50 text-gray-900 overflow-hidden rounded-lg;
+    @apply bg-gray-50 text-gray-900 overflow-hidden;
   }
 
   /* Setup default transitions for elements */