Merge pull request #6 from devklick/dev

Refactor to Styled Components

src/programs/Calculator/Calculator.tsx

@@ -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/CalculatorLauncher/CalculatorLauncher.tsx

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

src/programs/Calculator/styles.ts

@@ -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``;

src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx

@@ -4,17 +4,17 @@ import useLocalFS, {
   FSObject,
   isFSDirectory,
 } from "../../../stores/localFS";
-import "./DirectoryOrFile.scss";
 import ContextMenu from "../../../components/ContextMenu/ContextMenu";
 import { ContextMenuAction, getFSObjectContextMenu } from "../contextMenus";
-import { ReactComponent as FolderIcon } from "../../../assets/icons/folder-icon.svg";
+
 import useBindKeyToAction from "../../../hooks/useBindKeyToAction";
 import AppPopup from "../../../components/AppPopup";
 import HeaderBar from "../../../components/HeaderBar";
 import Box from "../../../components/Box";
 import InputField from "../../../components/InputField";
 import Row from "../../../components/Row";
 import Button from "../../../components/Button";
+import { StyledFolderIcon, StyledItem, StyledItemName } from "./styles";
 
 interface DirectoryOrFileProps {
   fsObject: FSObject;
@@ -47,8 +47,8 @@ function DirectoryOrFile({
   }
 
   return (
-    <div
-      className={`file-browser__main-content__item ${selected ? "active" : ""}`}
+    <StyledItem
+      selected={selected}
       onDoubleClick={() => openFSObject(fsObject)}
       onClick={() => setSelected(fsObject.path)}
       key={fsObject.path}
@@ -81,13 +81,9 @@ function DirectoryOrFile({
           fsObject={fsObject}
         />
       )}
-      {isFSDirectory(fsObject) ? (
-        <FolderIcon className="file-browser__main-content__item-icon" />
-      ) : null}
-      <span className="file-browser__main-content__item-name">
-        {fsObject.name}
-      </span>
-    </div>
+      {isFSDirectory(fsObject) ? <StyledFolderIcon /> : null}
+      <StyledItemName>{fsObject.name}</StyledItemName>
+    </StyledItem>
   );
 }
 

src/programs/FileBrowser/DirectoryOrFile/index.ts

@@ -0,0 +1,3 @@
+import DirectoryOrFile from "./DirectoryOrFile";
+
+export default DirectoryOrFile;

src/programs/FileBrowser/DirectoryOrFile/styles.ts

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+import { ReactComponent as FolderIcon } from "../../../assets/icons/folder-icon.svg";
+
+export const StyledItem = styled.div<{ selected: boolean }>`
+  width: 100%;
+  padding: 10px;
+  overflow-wrap: break-word;
+  word-break: normal;
+  box-sizing: border-box;
+  aspect-ratio: 1/1;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  border-radius: 10px;
+`;
+
+export const StyledItemName = styled.span``;
+
+export const StyledFolderIcon = styled(FolderIcon)`
+  height: 80%;
+  width: 80%;
+  path {
+    fill: white;
+  }
+`;