Skip to content

Commit e3b9192

Browse files
devklickdevklick
authored
Merge pull request #6 from devklick/dev
Refactor to Styled Components
2 parents f12bbcb + 16de3ea commit e3b9192

33 files changed

Lines changed: 351 additions & 374 deletions

‎src/programs/Calculator/Calculator.scss‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎src/programs/Calculator/Calculator.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { useEffect, useState } from "react";
22

3-
import "./Calculator.scss";
3+
import {
4+
StyledButton,
5+
StyledButtonContent,
6+
StyledButtons,
7+
StyledCalc,
8+
StyledInputOutput,
9+
StyledInputOutputContents,
10+
} from "./styles";
411

512
interface CalculatorProps {}
613

@@ -55,24 +62,22 @@ function Calculator({}: CalculatorProps) {
5562
}
5663

5764
return (
58-
<div className="calculator__button normal" onClick={handleClick}>
59-
<span className="calculator_button-contents">{displayChar}</span>
60-
</div>
65+
<StyledButton onClick={handleClick}>
66+
<StyledButtonContent>{displayChar}</StyledButtonContent>
67+
</StyledButton>
6168
);
6269
}
6370

6471
return (
65-
<div className="calculator">
66-
<div className="calculator__input">
67-
<div className="calculator__input-contents">{input}</div>
68-
</div>
69-
<div className="calculator__output">
70-
<div className="calculator__output-contents">{output}</div>
71-
</div>
72-
<div className="calculator__buttons">
72+
<StyledCalc>
73+
<StyledInputOutput direction="input">
74+
<StyledInputOutputContents>{input}</StyledInputOutputContents>
75+
</StyledInputOutput>
76+
<StyledInputOutput direction="output">
77+
<StyledInputOutputContents>{output}</StyledInputOutputContents>
78+
</StyledInputOutput>
79+
<StyledButtons>
7380
<Button mathematicalChar={"AC"} action="clear" />
74-
{/* <Button mathematicalChar={8} action="append-to-end" />
75-
<Button mathematicalChar={'%'} action="append-to-end" /> */}
7681
<div />
7782
<div />
7883
<Button mathematicalChar="/" displayChar="÷" action="append-to-end" />
@@ -93,8 +98,8 @@ function Calculator({}: CalculatorProps) {
9398
<Button mathematicalChar="." action="append-to-end" />
9499
<Button mathematicalChar="←" action="remove-from-end" />
95100
<Button mathematicalChar="=" action="evaluate" />
96-
</div>
97-
</div>
101+
</StyledButtons>
102+
</StyledCalc>
98103
);
99104
}
100105

‎src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.scss‎

Whitespace-only changes.

‎src/programs/Calculator/CalculatorLauncher/CalculatorLauncher.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Calculator from "..";
22
import Launcher from "../../../components/BottomBar/Launcher";
3-
import "./CalculatorLauncher.scss";
43

54
interface CalculatorLauncherProps {}
65

‎src/programs/Calculator/styles.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import styled from "@emotion/styled";
2+
3+
export const StyledCalc = styled.div`
4+
width: 100%;
5+
height: 100%;
6+
display: grid;
7+
grid-template-rows: 1fr 1fr 3fr;
8+
grid-template-areas:
9+
"input"
10+
"output"
11+
"buttons";
12+
box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
13+
padding: 10px;
14+
border-radius: 10px;
15+
box-sizing: border-box;
16+
gap: 10px;
17+
`;
18+
19+
export const StyledInputOutput = styled.div<{
20+
direction: "input" | "output";
21+
}>`
22+
box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.5) inset;
23+
width: 100%;
24+
height: 100%;
25+
display: flex;
26+
justify-content: flex-end;
27+
align-items: center;
28+
padding: 20px;
29+
box-sizing: border-box;
30+
grid-area: ${(props) => props.direction};
31+
`;
32+
33+
export const StyledInputOutputContents = styled.div`
34+
text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
35+
`;
36+
37+
export const StyledButtons = styled.div`
38+
min-height: 0;
39+
grid-area: buttons;
40+
width: 100%;
41+
height: 100%;
42+
justify-self: center;
43+
display: grid;
44+
grid-template-columns: 1fr 1fr 1fr 1fr;
45+
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
46+
box-sizing: border-box;
47+
`;
48+
49+
export const StyledButton = styled.button`
50+
text-align: center;
51+
cursor: default;
52+
border-radius: 20px;
53+
justify-self: center;
54+
width: 80%;
55+
height: 80%;
56+
box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
57+
box-sizing: border-box;
58+
display: flex;
59+
justify-content: center;
60+
align-items: center;
61+
background-color: inherit;
62+
color: inherit;
63+
border-width: 1px;
64+
65+
&:hover {
66+
backdrop-filter: brightness(150%);
67+
transition: ease-in 0.2s;
68+
}
69+
&:active {
70+
box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
71+
}
72+
`;
73+
74+
export const StyledButtonContent = styled.span``;

‎src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.scss‎

Whitespace-only changes.

‎src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ import useLocalFS, {
44
FSObject,
55
isFSDirectory,
66
} from "../../../stores/localFS";
7-
import "./DirectoryOrFile.scss";
87
import ContextMenu from "../../../components/ContextMenu/ContextMenu";
98
import { ContextMenuAction, getFSObjectContextMenu } from "../contextMenus";
10-
import { ReactComponent as FolderIcon } from "../../../assets/icons/folder-icon.svg";
9+
1110
import useBindKeyToAction from "../../../hooks/useBindKeyToAction";
1211
import AppPopup from "../../../components/AppPopup";
1312
import HeaderBar from "../../../components/HeaderBar";
1413
import Box from "../../../components/Box";
1514
import InputField from "../../../components/InputField";
1615
import Row from "../../../components/Row";
1716
import Button from "../../../components/Button";
17+
import { StyledFolderIcon, StyledItem, StyledItemName } from "./styles";
1818

1919
interface DirectoryOrFileProps {
2020
fsObject: FSObject;
@@ -47,8 +47,8 @@ function DirectoryOrFile({
4747
}
4848

4949
return (
50-
<div
51-
className={`file-browser__main-content__item ${selected ? "active" : ""}`}
50+
<StyledItem
51+
selected={selected}
5252
onDoubleClick={() => openFSObject(fsObject)}
5353
onClick={() => setSelected(fsObject.path)}
5454
key={fsObject.path}
@@ -81,13 +81,9 @@ function DirectoryOrFile({
8181
fsObject={fsObject}
8282
/>
8383
)}
84-
{isFSDirectory(fsObject) ? (
85-
<FolderIcon className="file-browser__main-content__item-icon" />
86-
) : null}
87-
<span className="file-browser__main-content__item-name">
88-
{fsObject.name}
89-
</span>
90-
</div>
84+
{isFSDirectory(fsObject) ? <StyledFolderIcon /> : null}
85+
<StyledItemName>{fsObject.name}</StyledItemName>
86+
</StyledItem>
9187
);
9288
}
9389

‎src/programs/FileBrowser/DirectoryOrFile/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import DirectoryOrFile from "./DirectoryOrFile";
2+
3+
export default DirectoryOrFile;

‎src/programs/FileBrowser/DirectoryOrFile/styles.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import styled from "@emotion/styled";
2+
import { ReactComponent as FolderIcon } from "../../../assets/icons/folder-icon.svg";
3+
4+
export const StyledItem = styled.div<{ selected: boolean }>`
5+
width: 100%;
6+
padding: 10px;
7+
overflow-wrap: break-word;
8+
word-break: normal;
9+
box-sizing: border-box;
10+
aspect-ratio: 1/1;
11+
height: auto;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
gap: 10px;
17+
border-radius: 10px;
18+
`;
19+
20+
export const StyledItemName = styled.span``;
21+
22+
export const StyledFolderIcon = styled(FolderIcon)`
23+
height: 80%;
24+
width: 80%;
25+
path {
26+
fill: white;
27+
}
28+
`;

‎src/programs/FileBrowser/FileBrowser.scss‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

0 commit comments

Comments
 (0)