adjust button stylings

Author: interim17

src/components/ErrorLogs/index.tsx

@@ -16,7 +16,7 @@ const ErrorLogs = (props: ErrorLogsProps): JSX.Element => {
 
     return (
         <>
-            <Button color="primary" variant="filled" onClick={toggleLogs}>
+            <Button color="default" variant="filled" onClick={toggleLogs}>
                 Logs
             </Button>
             <Drawer

src/components/RecipeForm/index.tsx

@@ -50,7 +50,7 @@ const RecipeForm = ({ onStartPacking, availableHeight }: RecipeFormProps) => {
                     <Button
                         onClick={onStartPacking}
                         className="packing-button"
-                        color="primary"
+                        color="default"
                         variant="filled"
                         disabled={isPacking || isOriginalRecipe}
                         style={{ width: "100%", minHeight: 38 }}

src/components/StatusBar/index.tsx

@@ -7,7 +7,7 @@ import ErrorLogs from "../ErrorLogs";
 import { DownloadOutlined, ShareAltOutlined } from "@ant-design/icons";
 
 const statusBarButtonProps: Pick<ButtonProps, "color" | "variant" | "className"> = {
-    color: "primary",
+    color: "default",
     variant: "filled",
     className: "status-bar-button",
 };

src/index.css

@@ -26,10 +26,3 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}

src/style/theme.ts

@@ -2,7 +2,13 @@ import type { ThemeConfig } from "antd";
 import { theme } from "antd";
 
 const commonComponents = {
-    Button: { controlHeight: 40 },
+    Button: {
+        controlHeight: 40,
+        colorFillSecondary: '#b5cffe',
+        colorFillTertiary: '#e6f4ff',
+        colorBgContainerDisabled: '#dcdde5',
+        colorTextDisabled: '#989898',
+    },
     Slider: {
         trackBg: '#7AA4D7',
         trackHoverBg: '#5F92CE',
@@ -33,6 +39,15 @@ const lightComponents = {
 
 const darkComponents = {
     ...commonComponents,
+    Button: {
+        ...commonComponents.Button,
+        defaultColor: '#e6f4ff',
+        colorFillTertiary: '#1f3a5a',
+        colorFillSecondary: '#2a4a6e',
+        colorFill: '#365a82',
+        colorBgContainerDisabled: '#1a1a1a',
+        colorTextDisabled: '#595959',
+    },
     Tabs: {
         ...commonComponents.Tabs,
         colorPrimary: '#ffffff',