Refactor Calculator to use styled components

Author: devklick

src/programs/Calculator/Calculator.scss

@@ -1,6 +1,13 @@
 import { useEffect, useState } from "react";
 
-import "./Calculator.scss";
+import {
+  StyledButton,
+  StyledButtonContent,
+  StyledButtons,
+  StyledCalc,
+  StyledInputOutput,
+  StyledInputOutputContents,
+} from "./styles";
 
 interface CalculatorProps {}
 
@@ -55,24 +62,22 @@ function Calculator({}: CalculatorProps) {
     }
 
     return (
-      <div className="calculator__button normal" onClick={handleClick}>
-        <span className="calculator_button-contents">{displayChar}</span>
-      </div>
+      <StyledButton onClick={handleClick}>
+        <StyledButtonContent>{displayChar}</StyledButtonContent>
+      </StyledButton>
     );
   }
 
   return (
-    <div className="calculator">
-      <div className="calculator__input">
-        <div className="calculator__input-contents">{input}</div>
-      </div>
-      <div className="calculator__output">
-        <div className="calculator__output-contents">{output}</div>
-      </div>
-      <div className="calculator__buttons">
+    <StyledCalc>
+      <StyledInputOutput direction="input">
+        <StyledInputOutputContents>{input}</StyledInputOutputContents>
+      </StyledInputOutput>
+      <StyledInputOutput direction="output">
+        <StyledInputOutputContents>{output}</StyledInputOutputContents>
+      </StyledInputOutput>
+      <StyledButtons>
         <Button mathematicalChar={"AC"} action="clear" />
-        {/* <Button mathematicalChar={8} action="append-to-end" />
-        <Button mathematicalChar={'%'} action="append-to-end" /> */}
         <div />
         <div />
         <Button mathematicalChar="/" displayChar="÷" action="append-to-end" />
@@ -93,8 +98,8 @@ function Calculator({}: CalculatorProps) {
         <Button mathematicalChar="." action="append-to-end" />
         <Button mathematicalChar="←" action="remove-from-end" />
         <Button mathematicalChar="=" action="evaluate" />
-      </div>
-    </div>
+      </StyledButtons>
+    </StyledCalc>
   );
 }
 

src/programs/Calculator/Calculator.tsx

@@ -1,6 +1,5 @@
 import Calculator from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
-import "./CalculatorLauncher.scss";
 
 interface CalculatorLauncherProps {}
 

src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.scss

@@ -0,0 +1,74 @@
+import styled from "@emotion/styled";
+
+export const StyledCalc = styled.div`
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr 1fr 3fr;
+  grid-template-areas:
+    "input"
+    "output"
+    "buttons";
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  padding: 10px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  gap: 10px;
+`;
+
+export const StyledInputOutput = styled.div<{
+  direction: "input" | "output";
+}>`
+  box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+  grid-area: ${(props) => props.direction};
+`;
+
+export const StyledInputOutputContents = styled.div`
+  text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
+`;
+
+export const StyledButtons = styled.div`
+  min-height: 0;
+  grid-area: buttons;
+  width: 100%;
+  height: 100%;
+  justify-self: center;
+  display: grid;
+  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-width: 1px;
+
+  &: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``;