fix(styles): split styles for better maintainability

Saifullah-dev · Sep 8, 2024 · e139460 · e139460
1 parent 32cbd2c
commit e139460
Show file tree

Hide file tree

Showing 20 changed files with 545 additions and 577 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/react-file-manager-logo.png" type="image/icon type" />
+    <link rel="icon" href="./public/react-file-manager-logo.png" type="image/icon type" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React File Manager</title>
   </head>

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import FileManager from "./File Manager/FileManager";
-import { createFolderAPI } from "./Mock APIs/createFolderAPI";
-import { renameAPI } from "./Mock APIs/renameAPI";
-import { deleteAPI } from "./Mock APIs/deleteAPI";
-import { copyItemAPI, moveItemAPI } from "./Mock APIs/fileTransferAPI";
-import { getAllFilesAPI } from "./Mock APIs/getAllFilesAPI";
+import { createFolderAPI } from "./api/createFolderAPI";
+import { renameAPI } from "./api/renameAPI";
+import { deleteAPI } from "./api/deleteAPI";
+import { copyItemAPI, moveItemAPI } from "./api/fileTransferAPI";
+import { getAllFilesAPI } from "./api/getAllFilesAPI";
 import "./App.scss";
 
 function App() {

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -11,6 +11,6 @@ body {
 
   .file-manager-container {
     height: 70%;
-    width: 65%;
+    width: 67%;
   }
 }
diff --git a/frontend/src/File Manager/Bread Crumb/BreadCrumb.jsx b/frontend/src/File Manager/Bread Crumb/BreadCrumb.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { MdHome, MdOutlineNavigateNext } from "react-icons/md";
+import "./BreadCrumb.scss";
 
 const BreadCrumb = ({ currentPath, setCurrentPath }) => {
   const [folders, setFolders] = useState([]);
@@ -21,11 +22,7 @@ const BreadCrumb = ({ currentPath, setCurrentPath }) => {
   return (
     <div className="breadcrumb">
       {folders.map((folder, index) => (
-        <span
-          key={index}
-          className="folder-name"
-          onClick={() => switchPath(index)}
-        >
+        <span key={index} className="folder-name" onClick={() => switchPath(index)}>
           {index === 0 ? (
             <>
               <MdHome /> Home

diff --git a/frontend/src/File Manager/Bread Crumb/BreadCrumb.scss b/frontend/src/File Manager/Bread Crumb/BreadCrumb.scss
@@ -0,0 +1,18 @@
+@import "../../styles/variables";
+
+.breadcrumb {
+  height: calc(5.8% - 21px);
+  display: flex;
+  gap: 0.5rem;
+  border-bottom: 1px solid #dddddd;
+  padding: 10px 15px;
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    height: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $primary-color !important;
+  }
+}
diff --git a/frontend/src/File Manager/FileManager.jsx b/frontend/src/File Manager/FileManager.jsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-import "./FileManager.scss";
 import Toolbar from "./Toolbar/Toolbar";
 import NavigationPane from "./Navigation Pane/NavigationPane";
 import BreadCrumb from "./Bread Crumb/BreadCrumb";
@@ -8,6 +7,7 @@ import { useTriggerAction } from "../hooks/useTriggerAction";
 import Actions from "./Actions/Actions";
 import Loader from "../components/Loader/Loader";
 import PropTypes from "prop-types";
+import "./FileManager.scss";
 
 const FileManager = ({
   files,