css cleanup and fixes

2024-07-30 10:41:41 -04:00
parent c04a7cb142
commit 1757bed5af
12 changed files with 128 additions and 135 deletions
@@ -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,
        }
@@ -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"
@@ -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"
@@ -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>
@@ -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",
@@ -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" : ""
      )}
    >
@@ -1,7 +1,6 @@
 import { MouseEventHandler, useRef, useState } from "react";

 export const useContextMenu = () => {
-  // 215 X 240
  const [contextData, setContextData] = useState({
    selected: false,
    X: 0,
@@ -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;
@@ -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;
@@ -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;
@@ -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>
  );
 };