fix display of the controls in macos/safari #5

agmmnn · Jul 30, 2023 · cd59f8f · cd59f8f
1 parent 8e3b81a
commit cd59f8f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/src/tauri-controls/components/icons.tsx b/src/tauri-controls/components/icons.tsx
@@ -69,9 +69,9 @@ export const Icons = {
   ),
   closeMac: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
     <svg
-      width="8"
-      height="8"
-      viewBox="0 0 16 18"
+      width="6"
+      height="6"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
@@ -85,6 +85,7 @@ export const Icons = {
   minMac: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
     <svg
       width="8"
+      height="8"
       viewBox="0 0 17 6"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -102,8 +103,9 @@ export const Icons = {
   ),
   fullMac: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
     <svg
-      width="8"
-      viewBox="0 0 16 16"
+      width="6"
+      height="6"
+      viewBox="0 0 15 15"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
@@ -121,6 +123,7 @@ export const Icons = {
   plusMac: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
     <svg
       width="8"
+      height="8"
       viewBox="0 0 17 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/tauri-controls/controls/linux/gnome.tsx b/src/tauri-controls/controls/linux/gnome.tsx
@@ -32,18 +32,18 @@ export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
 
   return (
     <div
-      className={cn("ml-auto h-auto items-center gap-4 px-2", className)}
+      className={cn("ml-auto h-auto items-center px-2", className)}
       {...props}
     >
       <Button
         onClick={minimizeWindow}
-        className="m-0 aspect-square h-[24px] cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
+        className="m-0 mr-4 aspect-square h-[24px] w-[24px] cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
       >
         <Icons.minimizeWin className="w-[9px]" />
       </Button>
       <Button
         onClick={maximizeWindow}
-        className="m-0 aspect-square h-[24px] cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
+        className="m-0 mr-4 aspect-square h-[24px] w-[24px] cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
       >
         {!isWindowMaximized ? (
           <Icons.maximizeWin className="h-2 w-2" />
@@ -53,7 +53,7 @@ export function Gnome({ className, ...props }: HTMLProps<HTMLDivElement>) {
       </Button>
       <Button
         onClick={closeWindow}
-        className="m-0 aspect-square h-[24px] cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
+        className="m-0 aspect-square h-[24px] w-[24px] cursor-default rounded-full bg-[#dadada] p-0 text-[#3d3d3d] hover:bg-[#d1d1d1] active:bg-[#bfbfbf] dark:bg-[#373737] dark:text-white dark:hover:bg-[#424242] dark:active:bg-[#565656]"
       >
         <Icons.closeWin className="h-2 w-2" />
       </Button>

diff --git a/src/tauri-controls/controls/macos.tsx b/src/tauri-controls/controls/macos.tsx
@@ -10,7 +10,7 @@ export function MacOS({ className, ...props }: HTMLProps<HTMLDivElement>) {
   const [isHovering, setIsHovering] = useState(false)
 
   const last = isAltKeyPressed ? <Icons.plusMac /> : <Icons.fullMac />
-  const key = "Meta"
+  const key = "Alt"
 
   if (process.env.NODE_ENV === "production")
     document.addEventListener("contextmenu", (event) => event.preventDefault())
@@ -69,28 +69,28 @@ export function MacOS({ className, ...props }: HTMLProps<HTMLDivElement>) {
 
   return (
     <div
-      className={cn("gap-2 px-4", className)}
+      className={cn("px-2", className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       {...props}
     >
       <Button
         onClick={closeWindow}
-        className="m-0 aspect-square h-3 cursor-default content-center items-center justify-center self-center rounded-full border border-black/[.12] bg-[#ff544d] p-0 text-center text-[#800d01] hover:bg-[#ff544d] active:bg-[#bf403a] active:text-[#590600] dark:border-none"
+        className="mr-2 aspect-square h-3 w-3 cursor-default content-center items-center justify-center self-center rounded-full border border-black/[.12] bg-[#ff544d] text-center text-black/50 hover:bg-[#ff544d] active:bg-[#bf403a] active:text-[#590600] dark:border-none"
       >
         {isHovering && <Icons.closeMac />}
       </Button>
       <Button
         onClick={minimizeWindow}
-        className="m-0 aspect-square h-3 cursor-default content-center items-center justify-center self-center rounded-full  border border-black/[.12]  bg-[#ffbd2e] p-0 text-center text-[#995700] hover:bg-[#ffbd2e] active:bg-[#bf9122] active:text-[#592800] dark:border-none"
+        className="mr-2 aspect-square h-3 w-3 cursor-default content-center items-center justify-center self-center rounded-full border border-black/[.12]  bg-[#ffbd2e] text-center text-black/50 hover:bg-[#ffbd2e] active:bg-[#bf9122] active:text-[#592800] dark:border-none"
       >
         {isHovering && <Icons.minMac />}
       </Button>
       <Button
         // onKeyDown={handleAltKeyDown}
         // onKeyUp={handleAltKeyUp}
         onClick={isAltKeyPressed ? maximizeWindow : fullscreenWindow}
-        className="m-0 aspect-square h-3 cursor-default content-center items-center justify-center self-center rounded-full border border-black/[.12] bg-[#28c93f] p-0 text-center text-[#006500] hover:bg-[#28c93f] active:bg-[#1e9930] active:text-[#003000] dark:border-none"
+        className="aspect-square h-3 w-3 cursor-default content-center items-center justify-center self-center rounded-full border border-black/[.12] bg-[#28c93f] text-center text-black/50 hover:bg-[#28c93f] active:bg-[#1e9930] active:text-[#003000] dark:border-none"
       >
         {isHovering && last}
       </Button>

diff --git a/src/tauri-controls/window-titlebar.tsx b/src/tauri-controls/window-titlebar.tsx
@@ -29,7 +29,10 @@ export function WindowTitlebar({
 
   return (
     <div
-      className={cn("flex select-none flex-row overflow-clip", className)}
+      className={cn(
+        "bg-background flex select-none flex-row overflow-hidden",
+        className
+      )}
       data-tauri-drag-region
       {...props}
     >