Refactor calculator buttons

Author: devklick

src/programs/Calculator/Calculator.tsx

@@ -7,15 +7,14 @@ import {
 } from "react";
 
 import {
-  StyledButton,
-  StyledButtonContent,
   StyledButtons,
   StyledCalc,
   StyledInputOutput,
   StyledInputOutputContents,
 } from "./styles";
 import { BorderedAppContentHandles } from "../../components/BorderedApp/BorderedApp";
 import useSystemSettings from "../../stores/systemSettingsStore";
+import CommonButton from "../../components/Button";
 
 export type CalculatorHandles = BorderedAppContentHandles<HTMLDivElement>;
 
@@ -29,7 +28,13 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
     const elementRef = useRef<HTMLDivElement>(null);
     const [input, setInput] = useState<string>("");
     const [output, setOutput] = useState<string>("");
-    const [scrollbarColor] = useSystemSettings((s) => [s.iconColor]);
+    const [scrollbarColor, buttonColor, fontColor, primaryButtonColor] =
+      useSystemSettings((s) => [
+        s.iconColor,
+        s.secondaryColor,
+        s.fontColor,
+        s.primaryColor,
+      ]);
     const appendToInput = (value: string) =>
       setInput((current) => current + value);
     const removeFromEnd = (count: number = 1) =>
@@ -117,9 +122,18 @@ const Calculator = forwardRef<CalculatorHandles, CalculatorProps>(
       }
 
       return (
-        <StyledButton onClick={handleClick}>
-          <StyledButtonContent>{displayChar}</StyledButtonContent>
-        </StyledButton>
+        <CommonButton
+          onClick={handleClick}
+          width={"100%"}
+          height={"100%"}
+          borderRadius={12}
+          backgroundColor={
+            displayChar === "=" ? primaryButtonColor : buttonColor
+          }
+          color={fontColor}
+        >
+          {displayChar}
+        </CommonButton>
       );
     }
 

src/programs/Calculator/styles.ts

@@ -50,34 +50,8 @@ export const StyledButtons = styled.div`
   height: 100%;
   justify-self: center;
   display: grid;
+  gap: 4px;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
   box-sizing: border-box;
 `;
-
-export const StyledButton = styled.button`
-  text-align: center;
-  cursor: default;
-  border-radius: 20px;
-  justify-self: center;
-  width: 80%;
-  height: 80%;
-  box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: inherit;
-  color: inherit;
-  border: none;
-
-  &:hover {
-    backdrop-filter: brightness(150%);
-    transition: ease-in 0.2s;
-  }
-  &:active {
-    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
-  }
-`;
-
-export const StyledButtonContent = styled.span``;