Titlebar revamp

@types/index.d.ts

@@ -150,6 +150,8 @@ declare namespace Electron {
     on(channel: "loadCreatorTheme", listener: (event: IpcRendererEvent, theme: Themes.Theme) => void): this;
     on(channel: "sync-themes-start", listener: (event: IpcRendererEvent) => void): this;
     on(channel: "sync-themes-end", listener: (event: IpcRendererEvent) => void): this;
+    on(channel: "did-maximized", listener: (event: IpcRendererEvent) => void): this;
+    on(channel: "did-restored", listener: (event: IpcRendererEvent) => void): this;
 
     send(channel: string, ...args: any[]): void;
     send(channel: "setTitle", data: { id: number; title: string }): this;
@@ -183,6 +185,8 @@ declare namespace Electron {
     send(channel: "saveCreatorTheme", theme: Themes.Theme): this;
     send(channel: "sync-themes"): this;
     send(channel: "set-clipboard-data", data: WebApi.SetClipboardData): this;
+    send(channel: "did-maximized"): this;
+    send(channed: "did-restored"): this;
 
     invoke(channel: "writeNewExtensionToDisk", data: WebApi.WriteNewExtensionToDiskArgs): Promise<number>;
     invoke(channel: "getAllLocalFileExtensionIds"): Promise<number[]>;

src/constants/_app.ts

@@ -245,7 +245,7 @@ export const DEFAULT_PALETTE: Themes.Palette = {
   "bg-tab": "#222222",
   "bg-tab-hover": "#2c2c2c",
   "bg-tab-active": "#2c2c2c",
-  "fg-tab": "#7A7A7A",
+  "fg-tab": "#ffffff",
   "fg-tab-hover": "#ffffff",
   "fg-tab-active": "#ffffff",
   "bg-header": "#222222",

src/main/window/WindowManager.ts

@@ -207,11 +207,13 @@ class WindowManager {
     E.ipcMain.on("window-minimize", () => {
       this.mainWindow.minimize();
     });
-    E.ipcMain.on("window-maximize", () => {
+    E.ipcMain.on("window-maximize", (event: E.IpcMainEvent) => {
       if (this.mainWindow.isMaximized()) {
         this.mainWindow.restore();
+        event.reply("did-restored");
       } else {
         this.mainWindow.maximize();
+        event.reply("did-maximized");
       }
     });
     E.ipcMain.on("closeTab", (event, id) => {

src/renderer/components/Tabs/index.tsx

@@ -139,7 +139,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
   };
 
   private mouseDownHandler = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    (e.target as HTMLDivElement).style.cursor = "grabbing";
+    (e.target as HTMLDivElement).style.cursor = "move";
 
     this.isMoving = true;
     this.pos.x = e.pageX;
@@ -149,7 +149,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
     window.addEventListener("mouseup", this.mouseUpHandler);
   };
   private mouseUpHandler = (e: MouseEvent) => {
-    (e.target as HTMLDivElement).style.cursor = "grab";
+    (e.target as HTMLDivElement).style.cursor = "default";
     this.isMoving = false;
 
     window.removeEventListener("mousemove", this.mouseMoveHandler);

src/renderer/components/Tabs/style.scss

@@ -15,12 +15,16 @@
   background-color: var(--bg-tab);
   color: var(--fg-tab);
   fill: var(--fg-tab);
-
+  
   &:hover {
     background-color: var(--bg-tab-hover);
     color: var(--fg-tab-hover);
     fill: var(--fg-tab-hover);
-    cursor: pointer;
+    cursor: default;
+  }
+
+  &:hover .tab__close{
+    opacity: 0.4;
   }
 
   &__text {
@@ -30,23 +34,61 @@
     text-overflow: clip;
     font-size: var(--fontControlSize);
     margin-right: 6px;
+    opacity: 0.4;
+  }
+
+  &:hover .tab__text {
+    opacity: 1;
   }
 
   &__close {
-    height: 16px;
+    height: 14px;
     color: var(--fg-tab);
     fill: var(--fg-tab);
+    opacity: 0;
+    display: inline-flex;
 
     &:hover {
       color: var(--fg-tab-hover);
       fill: var(--fg-tab-hover);
-      cursor: pointer;
+      cursor: default;
+      opacity: 1 !important;
     }
   }
 
   &_active {
     background-color: var(--bg-tab-active);
     color: var(--fg-tab-active);
     fill: var(--fg-tab-active);
+    opacity: 1;
+
+    .tab__text {
+      opacity: 1;
+    }
+
+    .tab__close {
+      opacity: 0.16;
+    }
+
+
+  }
+
+  &_main_active {
+    background-color: var(--bg-panel);
+
+    .icon {
+      color: var(--bg-panel);
+      filter: invert(1)
+    }
+
+    &:hover {    
+      cursor: default;
+      background-color: var(--bg-panel);
+
+      .icon {
+        color: var(--bg-panel);
+        filter: invert(1)
+      }
+    }
   }
 }

src/renderer/components/Tabs/tabs.tsx

@@ -24,8 +24,8 @@ const Tabs: React.FunctionComponent<Props> = props => {
           <Button className="tab__close button_clear" onClick={(e): void => props.close(e, t.id)}>
             <Icon
               color={`${props.tabs.current === t.id ? "var(--fg-tab-active)" : "var(--fg-tab)"}`}
-              type="Close"
-              size="16"
+              type="CloseTab"
+              size="14"
             />
           </Button>
         </div>

src/renderer/components/TopPanel/index.tsx

@@ -13,17 +13,33 @@ interface TopPanelProps {
   views?: Views;
 }
 
+interface TopPanelStates {
+  isMaximized: boolean;
+}
+
 @inject("tabs")
 @inject("settings")
 @inject("views")
 @observer
 class TopPanel extends React.Component<TopPanelProps, unknown> {
   props: TopPanelProps;
+  state: TopPanelStates;
 
   constructor(props: TopPanelProps) {
     super(props);
 
     this.props = props;
+    this.state = { isMaximized: false };
+  }
+
+  componentDidMount(): void {
+    E.ipcRenderer.on("did-maximized", () => {
+      this.setState({ isMaximized: true });
+    });
+
+    E.ipcRenderer.on("did-restored", () => {
+      this.setState({ isMaximized: false });
+    });
   }
 
   private onMainTab = (e: React.MouseEvent<HTMLDivElement> & Event): void => {
@@ -75,6 +91,7 @@ class TopPanel extends React.Component<TopPanelProps, unknown> {
         onMainTab={this.onMainTab}
         openMenu={this.onOpenMenu}
         newTab={this.newTab}
+        isMaximized={this.state.isMaximized}
       />
     );
   }

src/renderer/components/TopPanel/style.scss

@@ -14,4 +14,8 @@
       align-items: center;
     }
   }
+
+  &:hover .tab__close {    
+    opacity: 0.16;
+  }
 }

src/renderer/components/TopPanel/toppanel.tsx

@@ -7,6 +7,7 @@ interface TopPanelProps {
   current: number;
   scalePanel: number;
   visibleNewProjectBtn: boolean;
+  isMaximized: boolean;
 
   newTab(): void;
   onMainTab(e: React.MouseEvent<HTMLDivElement>): void;
@@ -21,12 +22,15 @@ const TopPanel: React.FunctionComponent<TopPanelProps> = props => {
   return (
     <div className="top-panel" style={{ zoom: props.scalePanel ? props.scalePanel : 1 }}>
       <div className="panelButtons">
-        <Button className={`button_clear button_title${!props.current ? " tab_active" : ""}`} onClick={props.onMainTab}>
-          <Icon color="var(--fg-tab)" type="Main" size="18" />
+        <Button
+          className={`button_clear button_title button_main${!props.current ? " tab_active tab_main_active" : ""}`}
+          onClick={props.onMainTab}
+        >
+          <Icon color="currentColor" type="Figma" size="17" />
         </Button>
         {props.visibleNewProjectBtn ? (
           <Button className="button_clear button_title" onClick={props.onNewProject}>
-            <Icon color="var(--fg-tab)" type="Plus" size="18" />
+            <Icon color="currentColor" type="Plus" size="15" />
           </Button>
         ) : (
           ""
@@ -35,16 +39,16 @@ const TopPanel: React.FunctionComponent<TopPanelProps> = props => {
       <Tabs />
       <div className="panelButtons">
         <Button className="button_clear button_title" onClick={props.openMenu}>
-          <Icon color="var(--fg-tab)" type="MenuCorner" size="18" />
+          <Icon color="currentColor" type="MenuCorner" size="14" />
         </Button>
         <Button className="button_clear button_control" onClick={props.miniw}>
-          <Icon color="var(--fg-header-control)" type="Minimize" size="18" />
+          <Icon color="var(--fg-header-control)" type="Minimize" size="16" />
         </Button>
         <Button className="button_clear button_control" onClick={props.maxiw}>
-          <Icon color="var(--fg-header-control)" type="Maximize" size="18" />
+          <Icon color="var(--fg-header-control)" type={props.isMaximized ? "Restore" : "Maximize"} size="16" />
         </Button>
         <Button className="button_clear button_control button_close" onClick={props.closew}>
-          <Icon color="var(--fg-header-control)" type="Close" size="18" />
+          <Icon color="var(--fg-header-control)" type="Close" size="16" />
         </Button>
       </div>
     </div>

src/renderer/components/style.scss

@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../../assets/fonts/Inter.ttf')
+}
+
 html,
 body,
 #app,

src/renderer/elements/Button/index.scss

@@ -72,12 +72,14 @@
   &_title {
     padding: 12px;
     color: var(--fg-header);
+    opacity: .4;
     background-color: var(--bg-header-control);
 
     &:hover {
-      background-color: var(--bg-header-control-hover);
-      color: var(--bg-header-hover);
-      cursor: pointer;
+      opacity: 1;
+      // background-color: var(--bg-header-control-hover);
+      // color: var(--bg-header-hover);
+      cursor: default;
     }
   }
   &_control {
@@ -88,14 +90,14 @@
     &:hover {
       background-color: var(--bg-header-control-hover);
       color: var(--bg-header-control-hover);
-      cursor: pointer;
+      cursor: default;
     }
   }
   &_close {
     color: var(--fg-header-control);
     &:hover {
       background: var(--bg-window-close);
-      cursor: pointer;
+      cursor: default;
     }
   }
 

src/renderer/elements/Icon/icons/Close.tsx

@@ -9,7 +9,13 @@ export const Close: React.FunctionComponent<IconProps> = props => {
 
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12 4L4.00007 12M4 4L11.9999 12" stroke={color} />
+      <g fill={color}>
+        <path
+          fillRule="evenodd"
+          clipRule="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.884L7.116 8z"
+        />
+      </g>
     </svg>
   );
 };

src/renderer/elements/Icon/icons/CloseTab.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { IconProps } from "..";
+import "../index.scss";
+
+export const CloseTab: React.FunctionComponent<IconProps> = props => {
+  const size = props.size ? props.size : "16";
+  const color = props.color ? props.color : "#2C2C2C";
+
+  return (
+    <svg className="svg" width={size} height={size} viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11 4.143L9.857 3 7 5.857 4.143 3 3 4.143 5.857 7 3 9.857 4.143 11 7 8.143 9.857 11 11 9.857 8.143 7 11 4.143z"
+        fillRule="nonzero"
+        fillOpacity="1"
+        fill={color}
+        stroke="none"
+      ></path>
+    </svg>
+  );
+};

src/renderer/elements/Icon/icons/Figma.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { IconProps } from "..";
+import "../index.scss";
+
+export const Figma: React.FunctionComponent<IconProps> = props => {
+  const size = props.size ? props.size : "16";
+
+  return (
+    <svg className="svg" width={size} height={size} viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.5 1.5h-2c-1.105 0-2 .895-2 2 0 1.105.895 2 2 2h2v-4zm-5 2c0 1.043.533 1.963 1.341 2.5C1.033 6.537.5 7.457.5 8.5c0 1.043.533 1.963 1.341 2.5C1.033 11.537.5 12.457.5 13.5c0 1.657 1.343 3 3 3 1.657 0 3-1.343 3-3V10.736c.53.475 1.232.764 2 .764 1.657 0 3-1.343 3-3 0-1.043-.533-1.963-1.341-2.5.808-.537 1.341-1.457 1.341-2.5 0-1.657-1.343-3-3-3h-5c-1.657 0-3 1.343-3 3zm1 5c0-1.105.895-2 2-2h2v4h-2c-1.105 0-2-.895-2-2zm0 5c0-1.105.895-2 2-2h2v2c0 1.105-.895 2-2 2-1.105 0-2-.895-2-2zm7-3c-1.105 0-2-.895-2-2 0-1.105.895-2 2-2 1.105 0 2 .895 2 2 0 1.105-.895 2-2 2zm0-5h-2v-4h2c1.105 0 2 .895 2 2 0 1.105-.895 2-2 2z"
+        fillRule="evenodd"
+        fillOpacity="1"
+        fill={props.color ? props.color : "#333333"}
+        stroke="none"
+      ></path>
+    </svg>
+  );
+};

src/renderer/elements/Icon/icons/Maximize.tsx

@@ -8,12 +8,10 @@ export const Maximize: React.FunctionComponent<IconProps> = props => {
   const color = props.color ? props.color : "#7a7a7a";
 
   return (
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect x="3.5" y="5.5" width="7" height="7" stroke={color} />
-      <line x1="5.5" y1="6" x2="5.5" y2="3" stroke={color} />
-      <line x1="6" y1="3.5" x2="13" y2="3.5" stroke={color} />
-      <line x1="12.5" y1="4" x2="12.5" y2="11" stroke={color} />
-      <line x1="12" y1="10.5" x2="10" y2="10.5" stroke={color} />
+    <svg viewBox="0 0 16 16" fill="none" height={size} width={size} xmlns="http://www.w3.org/2000/svg">
+      <g fill={color}>
+        <path d="M3 3v10h10V3H3zm9 9H4V4h8v8z" />
+      </g>
     </svg>
   );
 };

src/renderer/elements/Icon/icons/Minimize.tsx

@@ -8,7 +8,10 @@ export const Minimize: React.FunctionComponent<IconProps> = props => {
 
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M3 12.277H13" stroke={props.color ? props.color : "#7a7a7a"} />
+      <path d="M3 12.277H13" />
+      <g fill={props.color ? props.color : "#7a7a7a"}>
+        <path d="M14 8v1H3V8h11z" />
+      </g>
     </svg>
   );
 };