Refactor FileBrowser to use styled components

Author: devklick

src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.scss

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

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

src/programs/FileBrowser/DirectoryOrFile/index.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;
+  }
+`;

src/programs/FileBrowser/DirectoryOrFile/styles.ts

@@ -4,7 +4,14 @@ import useLocalFSWithHistory from "../../hooks/useLocalFSWithHistory";
 import AppSideBar from "../../components/AppSideBar";
 import MainContent from "./MainContent";
 
-import "./FileBrowser.scss";
+import {
+  StyledBottomBar,
+  StyledFileBrowser,
+  StyledTopBar,
+  StyledTopBarButton,
+  StyledTopBarButtons,
+  StyledTopBarPath,
+} from "./styles";
 
 const defaultPath = "/home/user";
 
@@ -27,28 +34,17 @@ function TopBar({
   navBack,
 }: TopBarProps) {
   return (
-    <div className="file-browser__top-bar">
-      <div className="file-browser__top-bar__button-nav">
-        <div
-          className="file-browser__top-bar__button-nav__left"
-          onClick={navBack}
-        >
-          ←
-        </div>
-        <div
-          className="file-browser__top-bar__button-nav__right"
-          onClick={navForward}
-        >
-          →
-        </div>
-      </div>
-      <input
-        className="file-browser__top-bar__path-nav"
+    <StyledTopBar>
+      <StyledTopBarButtons>
+        <StyledTopBarButton onClick={navBack}>←</StyledTopBarButton>
+        <StyledTopBarButton onClick={navForward}>→</StyledTopBarButton>
+      </StyledTopBarButtons>
+      <StyledTopBarPath
         value={pathSearch}
         onChange={onPathInputChange}
         onKeyDown={onPathInputSubmit}
       />
-    </div>
+    </StyledTopBar>
   );
 }
 
@@ -75,7 +71,7 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
   }
 
   return (
-    <div className="file-browser" ref={appRef}>
+    <StyledFileBrowser ref={appRef}>
       <TopBar
         pathSearch={pathSearch}
         onPathInputChange={onPathInputChange}
@@ -97,8 +93,8 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
         openFSObject={fs.navToObject}
         appRef={appRef}
       />
-      <div className="file-browser__bottom-bar"></div>
-    </div>
+      <StyledBottomBar />
+    </StyledFileBrowser>
   );
 }
 

src/programs/FileBrowser/FileBrowser.scss

@@ -1,6 +1,5 @@
 import FileBrowser from "..";
 import Launcher from "../../../components/BottomBar/Launcher";
-import "./FileBrowserLauncher.scss";
 
 interface FileBrowserLauncherProps {}
 

src/programs/FileBrowser/FileBrowser.tsx

@@ -4,17 +4,17 @@ import useLocalFS, {
   FSObject,
   FSObjectType,
 } from "../../../stores/localFS";
-import "./MainContent.scss";
 import { getMainContentContextItems } from "../contextMenus";
 import AppPopup from "../../../components/AppPopup";
 import ContextMenu from "../../../components/ContextMenu/ContextMenu";
-import DirectoryOrFile from "../DirectoryOrFile/DirectoryOrFile";
+import DirectoryOrFile from "../DirectoryOrFile";
 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 useBindKeyToAction from "../../../hooks/useBindKeyToAction";
+import { StyledMainContent } from "./styles";
 
 interface MainContentProps {
   currentDirectory: FSDirectory;
@@ -40,10 +40,7 @@ function MainContent({
   }
 
   return (
-    <div
-      className="file-browser__main-content"
-      onContextMenu={handleRightClick}
-    >
+    <StyledMainContent onContextMenu={handleRightClick}>
       {contextMenuOpen && (
         <ContextMenu
           position={clickPosition.current}
@@ -70,7 +67,7 @@ function MainContent({
           currentDirectory={currentDirectory}
         />
       ))}
-    </div>
+    </StyledMainContent>
   );
 }