oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css cleanup and fixes

Browse Source
This commit is contained in:
subnub
2024-07-30 10:41:41 -04:00
parent c04a7cb142
commit 1757bed5af
12 changed files with 128 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dataform/index.tsx
+1 -1
View File
@@ -59,7 +59,7 @@ const DataForm = memo(() => {
return (
<div
className={classNames(
"w-full p-[17px_15px] desktopMode:p-[17px_40px] overflow-y-scroll",
"w-full px-2.5 desktopMode:px-10 py-6 overflow-y-scroll",
{
"opacity-50": isDraggingFile,
}
src/components/Files/index.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ const Files = memo(() => {
{!listView ? (
<div
className={classNames(
"grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
"grid grid-cols-[repeat(auto-fit,minmax(47%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
files?.pages[0]?.length === 1
? "justify-normal"
: "justify-center xs:justify-normal"
src/components/Folders/index.tsx
+1 -1
View File
@@ -115,7 +115,7 @@ const Folders = memo(() => {
<div
className={classNames(
"grid grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
"grid grid-cols-[repeat(auto-fit,minmax(47%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
folders?.length === 1
? "justify-normal"
: "justify-center xs:justify-normal"
src/components/LeftSection/index.tsx
+50 -83
View File
@@ -1,17 +1,15 @@
import React, { useCallback, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { createFolderAPI } from "../../api/foldersAPI";
import { useFoldersClient } from "../../hooks/folders";
import { showCreateFolderPopup } from "../../popups/folder";
import { useCallback, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useClickOutOfBounds, useUtils } from "../../hooks/utils";
import AddNewDropdown from "../AddNewDropdown";
import HomeListIcon from "../../icons/HomeListIcon";
import TrashIcon from "../../icons/TrashIcon";
import classNames from "classnames";
import PhotoIcon from "../../icons/PhotoIcon";
import { useAppDispatch, useAppSelector } from "../../hooks/store";
import { closeDrawer } from "../../reducers/leftSection";
import SettingsIcon from "../../icons/SettingsIcon";
import ChevronSolid from "../../icons/ChevronSolid";
import HomeIconOutline from "../../icons/HomeIconOutline";
const LeftSection = () => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -55,7 +53,6 @@ const LeftSection = () => {
const closeDrawerEvent = useCallback(
(e: any) => {
console.log("close", e?.target.id);
if (
!e ||
!leftSectionOpen ||
@@ -77,7 +74,7 @@ const LeftSection = () => {
<div
ref={wrapperRef}
className={classNames(
"p-6 fixed desktopMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 mt-[9px] animate-movement",
"p-6 fixed desktopMode:relative border-r w-[270px] min-w-[270px] bg-white h-full z-20 desktopMode:z-0 animate-movement mt-1.5",
{
"-left-[270px] desktopMode:left-0": !leftSectionOpen,
"left-0": leftSectionOpen,
@@ -86,92 +83,62 @@ const LeftSection = () => {
>
<div className="flex flex-col h-full">
<div>
<div className="relative mb-[30px]">
<div className="relative mb-7">
<a
onClick={openDropdown}
className="flex items-center justify-center bg-[#3c85ee] hover:bg-[#326bcc] no-underline rounded-[5px]"
className="flex items-center justify-center bg-primary hover:bg-primary-hover no-underline rounded-md px-2 py-2.5"
>
<p className="m-0 w-full text-center text-white text-[16px] font-medium">
<p className="m-0 w-full text-center text-white font-medium text-sm">
ADD NEW
</p>
<span className="min-w-[50px] min-h-[45px] rounded-tr-[5px] rounded-br-[5px] flex items-center justify-center">
<img src="/assets/dropselect.svg" alt="dropselect" />
</span>
<ChevronSolid className="text-white mr-1" />
</a>
{/* TODO: Remove this props */}
{isDropdownOpen && <AddNewDropdown closeDropdown={closeDropdown} />}
</div>
<div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md">
<ul onClick={goHome} className="m-0 list-none p-0 cursor-pointer">
<li>
<a
className={classNames(
"flex items-center text-[#3c85ee] font-medium no-underline animate",
isHome ? "text-[#3c85ee]" : "text-[#637381]"
)}
>
<span>
<HomeListIcon />
</span>
<p className="ml-3">Home</p>
</a>
</li>
</ul>
</div>
</div>
<div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] mt-1 mb-1 rounded-md">
<ul onClick={goMedia} className="m-0 list-none p-0 cursor-pointer ">
<li>
<a
className={classNames(
"flex items-center text-[#3c85ee] font-medium no-underline animate",
isMedia ? "text-[#3c85ee]" : "text-[#637381]"
)}
>
<span>
<PhotoIcon className="w-[20px] h-[20px] -ml-[2px]" />
</span>
<p className="ml-3">Media</p>
</a>
</li>
</ul>
<div
className={classNames(
"pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center w-full",
isHome ? "text-primary bg-white-hover" : "text-gray-primary"
)}
onClick={goHome}
>
<HomeIconOutline className="w-6 h-6" />
<p className="ml-3">Home</p>
</div>
<div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md block desktopMode:hidden mb-1">
<ul
onClick={goSettings}
className="m-0 list-none p-0 cursor-pointer "
>
<li>
<a
className={classNames(
"flex items-center text-[#3c85ee] font-medium no-underline animate",
isSettings ? "text-[#3c85ee]" : "text-[#637381]"
)}
>
<span>
<SettingsIcon className="w-[22px] h-[22px] -ml-[2px]" />
</span>
<p className="ml-2">Settings</p>
</a>
</li>
</ul>
<div
className={classNames(
"pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center mt-1 w-full",
isMedia ? "text-primary bg-white-hover" : "text-gray-primary"
)}
onClick={goMedia}
>
<PhotoIcon className="w-6 h-6" />
<p className="ml-3">Media</p>
</div>
<div className="pl-2 mr-[20px] py-2 hover:bg-[#f6f5fd] rounded-md">
<ul onClick={goTrash} className="m-0 list-none p-0 cursor-pointer ">
<li>
<a
className={classNames(
"flex items-center text-[#3c85ee] font-medium no-underline animate",
isTrash ? "text-red-500" : "text-[#637381]"
)}
>
<span>
<TrashIcon />
</span>
<p className="ml-3">Trash</p>
</a>
</li>
</ul>
<div
className={classNames(
"pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center desktopMode:hidden mt-1 w-full",
isSettings ? "text-primary bg-white-hover" : "text-gray-primary"
)}
onClick={goSettings}
>
<SettingsIcon className="w-6 h-6" />
<p className="ml-3">Settings</p>
</div>
<div
className={classNames(
"pl-2 mr-5 py-2 hover:bg-white-hover rounded-md cursor-pointer animate flex flex-row items-center mt-1 w-full",
isTrash ? "text-red-500 bg-white-hover" : "text-gray-primary"
)}
onClick={goTrash}
>
<TrashIcon className="w-6 h-6" />
<p className="ml-3">Trash</p>
</div>
</div>
</div>
src/components/QuickAccess/index.tsx
+10 -15
View File
@@ -5,6 +5,7 @@ import { useQuickFiles } from "../../hooks/files";
import classNames from "classnames";
import { useParams } from "react-router-dom";
import { useUtils } from "../../hooks/utils";
import ChevronOutline from "../../icons/ChevronOutline";
const QuickAccess = memo(() => {
const { data: quickfilesList } = useQuickFiles(false);
@@ -20,26 +21,20 @@ const QuickAccess = memo(() => {
<h2 className=" text-[#212b36] text-[22px] font-medium">
Quick Access
</h2>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="35"
height="35"
<ChevronOutline
onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}
className={classNames("cursor-pointer animate-movement", {
"rotate-180": quickAccessExpanded,
})}
>
<path
d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
fill="#3c85ee"
/>
</svg>
className={classNames(
"cursor-pointer animate-movement text-primary",
{
"rotate-180": quickAccessExpanded,
}
)}
/>
</div>
<div
className={classNames(
"grid animate-movement grid-cols-[repeat(auto-fit,minmax(40%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
"grid animate-movement grid-cols-[repeat(auto-fit,minmax(47%,45%))] xs:grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-[16px]",
quickfilesList?.length === 1
? "justify-normal"
: "justify-center xs:justify-normal",
src/components/RightSection/index.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const RightSection = memo(() => {
return (
<div
className={classNames(
"!hidden desktopMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-[25px] bg-white right-0 justify-center relative",
"!hidden desktopMode:!flex min-w-[260px] max-w-[260px] border-l border-[#e8eef2] p-6 bg-white right-0 justify-center relative mt-1.5",
selectedItem.id === "" ? "flex justify-center items-center" : ""
)}
>
src/hooks/contextMenu.ts
-1
View File
@@ -1,7 +1,6 @@
import { MouseEventHandler, useRef, useState } from "react";
export const useContextMenu = () => {
// 215 X 240
const [contextData, setContextData] = useState({
selected: false,
X: 0,
src/icons/ChevronOutline.tsx
+20
View File
@@ -0,0 +1,20 @@
type ChevronOutlineType = React.SVGAttributes<SVGSVGElement>;
const ChevronOutline: React.FC<ChevronOutlineType> = (props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="35"
height="35"
{...props}
>
<path
d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
fill="currentColor"
/>
</svg>
);
};
export default ChevronOutline;
src/icons/ChevronSolid.tsx
+22
View File
@@ -0,0 +1,22 @@
type ChevronSolidType = React.SVGAttributes<SVGSVGElement>;
const ChevronSolid: React.FC<ChevronSolidType> = (props) => {
return (
<svg
width="9"
height="6"
viewBox="0 0 9 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
id="Path Copy"
d="M8.45786 0.805578C8.5044 0.748826 8.5131 0.671721 8.48042 0.606718C8.44783 0.541807 8.3794 0.500367 8.30419 0.5L0.69571 0.5C0.620596 0.500367 0.552172 0.541716 0.519584 0.606627C0.486901 0.67163 0.495598 0.748735 0.542138 0.805395L4.34638 5.42858C4.38346 5.47369 4.44003 5.5 4.49995 5.5C4.55987 5.5 4.61645 5.47369 4.65352 5.42858L8.45786 0.805578Z"
fill="currentColor"
/>
</svg>
);
};
export default ChevronSolid;
src/icons/HomeIconOutline.tsx
+15
View File
@@ -0,0 +1,15 @@
type HomeIconOutlineType = React.SVGAttributes<SVGSVGElement>;
const HomeIconOutline: React.FC<HomeIconOutlineType> = (props) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<title>home-variant-outline</title>
<path
d="M9,13H15V19H18V10L12,5.5L6,10V19H9V13M4,21V9L12,3L20,9V21H4Z"
fill="currentColor"
/>
</svg>
);
};
export default HomeIconOutline;
src/icons/TrashIcon.tsx
+6 -32
View File
@@ -4,38 +4,12 @@ type TrashIconType = React.SVGAttributes<SVGSVGElement>;
const TrashIcon: React.FC<TrashIconType> = (props) => {
return (
<svg
width="17"
height="18"
viewBox="0 0 17 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="trash">
<path
id="Shape"
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.0694 2.57072H11.5707V1.92803C11.5707 0.863209 10.7075 0 9.64265 0H7.07192C6.0071 0 5.14389 0.863209 5.14389 1.92803V2.57072H0.645132C0.290178 2.57072 0.00244141 2.85846 0.00244141 3.21341C0.00244141 3.56837 0.290215 3.85607 0.645132 3.85607H1.34371L2.57317 17.4108C2.60348 17.7427 2.88255 17.9963 3.21586 17.995H13.4987C13.832 17.9964 14.1111 17.7427 14.1414 17.4108L15.3708 3.85607H16.0694C16.4244 3.85607 16.7121 3.56833 16.7121 3.21338C16.7121 2.85842 16.4244 2.57072 16.0694 2.57072ZM6.42923 1.92803C6.42923 1.57308 6.71697 1.28534 7.07192 1.28534H9.64265C9.9976 1.28534 10.2853 1.57308 10.2853 1.92803V2.57072H6.42927V1.92803H6.42923ZM3.80263 16.7096H12.9119L14.0803 3.85607H5.78658H2.63745L3.80263 16.7096Z"
fill="currentColor"
/>
<path
id="Path"
d="M6.42938 14.7385C6.4293 14.7376 6.42926 14.7367 6.42919 14.7358L5.7865 5.73834C5.76131 5.38339 5.45312 5.1161 5.09821 5.14129C4.74325 5.16649 4.47596 5.47467 4.50116 5.82959L5.14385 14.8271C5.16783 15.1641 5.44868 15.425 5.78654 15.4241H5.83282C6.1869 15.3995 6.45401 15.0925 6.42938 14.7385Z"
fill="currentColor"
/>
<path
id="Path_2"
d="M8.35729 5.1416C8.00234 5.1416 7.7146 5.42934 7.7146 5.78429V14.7818C7.7146 15.1367 8.00234 15.4245 8.35729 15.4245C8.71224 15.4245 8.99998 15.1367 8.99998 14.7818V5.78429C8.99998 5.42934 8.71224 5.1416 8.35729 5.1416Z"
fill="currentColor"
/>
<path
id="Path_3"
d="M11.6164 5.14129C11.2615 5.1161 10.9533 5.38339 10.9281 5.73834L10.2854 14.7358C10.2594 15.0898 10.5253 15.3979 10.8793 15.4239C10.8804 15.424 10.8814 15.424 10.8825 15.4241H10.9281C11.266 15.425 11.5468 15.1641 11.5708 14.8271L12.2135 5.82959C12.2387 5.47467 11.9714 5.16652 11.6164 5.14129Z"
fill="currentColor"
/>
</g>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<title>trash-can-outline</title>
<path
d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"
fill="currentColor"
/>
</svg>
);
};
tailwind.config.js
+1
View File
@@ -9,6 +9,7 @@ module.exports = {
extend: {
colors: {
primary: "#3c85ee",
"primary-hover": "#326bcc",
"white-hover": "#f6f5fd",
"gray-primary": "#637381",
},