From 91cfe6121f2d45e291c87f5396ec419e69eef649 Mon Sep 17 00:00:00 2001
From: maxichrome <maxichrome@users.noreply.github.com>
Date: Mon, 23 May 2022 06:06:59 -0500
Subject: [PATCH] fix button size

---
 .../src/components/os/TrafficLights.tsx       | 82 +++++++++++--------
 1 file changed, 47 insertions(+), 35 deletions(-)

diff --git a/packages/interface/src/components/os/TrafficLights.tsx b/packages/interface/src/components/os/TrafficLights.tsx
index e5664953c..3aef492a6 100644
--- a/packages/interface/src/components/os/TrafficLights.tsx
+++ b/packages/interface/src/components/os/TrafficLights.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useFocusState } from '../../hooks/useFocusState';
 import { DefaultProps } from '../primitive/types';
 
-import { ReactComponent as Close } from '../../assets/svg/macos_close.svg';
-import { ReactComponent as Minimize } from '../../assets/svg/macos_minimize.svg';
-import { ReactComponent as Fullscreen } from '../../assets/svg/macos_fullscreen.svg';
+import closeIconPath from '../../assets/svg/macos_close.svg';
+import minimizeIconPath from '../../assets/svg/macos_minimize.svg';
+import fullscreenIconPath from '../../assets/svg/macos_fullscreen.svg';
 
 export interface TrafficLightsProps extends DefaultProps {
   onClose?: () => void;
@@ -20,46 +20,58 @@ export const TrafficLights: React.FC<TrafficLightsProps> = (props) => {
       data-tauri-drag-region
       className={clsx('flex flex-row space-x-2 px-2 group', props.className)}
     >
-      <Light mode="close" action={props.onClose} focused={focused} />
-      <Light mode="minimize" action={props.onMinimize} focused={focused} />
-      <Light mode="fullscreen" action={props.onFullscreen} focused={focused} />
+      <TrafficLight type="close" onClick={props.onClose} colorful={focused} />
+      <TrafficLight type="minimize" onClick={props.onMinimize} colorful={focused} />
+      <TrafficLight type="fullscreen" onClick={props.onFullscreen} colorful={focused} />
     </div>
   );
 };
 
-interface LightProps {
-  mode: 'close' | 'minimize' | 'fullscreen';
-  focused: boolean;
-  action?: () => void;
+interface TrafficLightProps {
+  type: 'close' | 'minimize' | 'fullscreen';
+  colorful: boolean;
+  onClick?: () => void;
 }
 
-const Light: React.FC<LightProps> = (props) => {
+const TrafficLight: React.FC<TrafficLightProps> = (props) => {
+  const { onClick = () => undefined, colorful = false, type } = props;
+  const iconPath = React.useRef<string>(closeIconPath);
+
+  useEffect(() => {
+    switch (type) {
+      case 'close':
+        iconPath.current = closeIconPath;
+        break;
+      case 'minimize':
+        iconPath.current = minimizeIconPath;
+        break;
+      case 'fullscreen':
+        iconPath.current = fullscreenIconPath;
+        break;
+    }
+  }, [type]);
+
   return (
     <div
-      onClick={props.action}
-      className={clsx('w-[13px] h-[13px] rounded-full bg-gray-500', {
-        '!bg-red-400 active:!bg-red-300': props.mode == 'close' && props.focused,
-        '!bg-green-400 active:!bg-green-300': props.mode == 'fullscreen' && props.focused,
-        '!bg-yellow-400 active:!bg-yellow-300': props.mode == 'minimize' && props.focused
-      })}
-    >
-      {(() => {
-        if (!props.focused) return <></>;
-        switch (props.mode) {
-          case 'close':
-            return (
-              <Close className=" w-[13px] -mt-[1px] h-[15px] opacity-0 group-hover:opacity-100" />
-            );
-          case 'minimize':
-            return (
-              <Minimize className="ml-[2px] w-[9px] -mt-[1px] h-[15px] opacity-0 group-hover:opacity-100" />
-            );
-          case 'fullscreen':
-            return (
-              <Fullscreen className="ml-[1px] w-[11px] -mt-[1px] h-[15px]  opacity-0 group-hover:opacity-100" />
-            );
+      onClick={onClick}
+      className={clsx(
+        'rounded-full box-content w-[12px] h-[12px] border-[0.5px] border-transparent bg-[#CDCED0] dark:bg-[#2B2C2F] flex justify-center items-center',
+        {
+          'border-red-900 !bg-[#EC6A5E] active:hover:!bg-red-700 dark:active:hover:!bg-red-400':
+            type === 'close' && colorful,
+          'border-yellow-900 !bg-[#F4BE4F] active:hover:!bg-yellow-600 dark:active:hover:!bg-yellow-200':
+            type === 'minimize' && colorful,
+          'border-green-900 !bg-[#61C253] active:hover:!bg-green-700 dark:active:hover:!bg-green-300':
+            type === 'fullscreen' && colorful
         }
-      })()}
+      )}
+    >
+      {colorful && (
+        <img
+          src={iconPath.current}
+          className="opacity-0 group-hover:opacity-100 group-active:opacity-100 pointer-events-none"
+        />
+      )}
     </div>
   );
 };