started testing S3, most things for it are now working. Also fixed media list issue, added more migration scrips for old versions of mydrive

src/components/Folders/Folders.tsx

@@ -67,7 +67,7 @@ const Folders = memo(() => {
 
   return (
     <div className="mt-8">
-      <div className="flex flex-row mb-[20px] justify-between text-[#212b36] items-center">
+      <div className="flex flex-row mb-5 justify-between items-center">
         <h2
           className={classNames(
             "m-0 text-xl font-medium",

src/components/Header/Header.tsx

@@ -2,9 +2,11 @@ import { useNavigate } from "react-router-dom";
 import SearchBar from "../SearchBar/SearchBar";
 import MenuIcon from "../../icons/MenuIcon";
 import { useAppDispatch, useAppSelector } from "../../hooks/store";
-import { useCallback, useMemo } from "react";
-import { toggleDrawer } from "../../reducers/leftSection";
+import { useCallback } from "react";
+import { closeDrawer, toggleDrawer } from "../../reducers/leftSection";
 import { useUtils } from "../../hooks/utils";
+import ChevronOutline from "../../icons/ChevronOutline";
+import SettingsIconSolid from "../../icons/SettingsIconSolid";
 
 const Header = () => {
   const drawerOpen = useAppSelector((state) => state.leftSection.drawOpen);
@@ -19,25 +21,43 @@ const Header = () => {
     },
     [toggleDrawer]
   );
+
+  const closeDrawerClick = useCallback(
+    (e: any) => {
+      e.stopPropagation();
+      dispatch(closeDrawer());
+    },
+    [closeDrawer]
+  );
+
   return (
     <header id="header">
-      <div className="px-6 flex justify-between min-h-[68px] items-center py-[15px]">
+      <div className="px-6 flex justify-between min-h-16 items-center py-3.5">
         <div className="items-center w-[260px] hidden desktopMode:flex">
           <a
             className="inline-flex items-center justify-center cursor-pointer"
             onClick={() => navigate("/")}
           >
-            <img className="w-[35px]" src="/images/icon.png" alt="logo" />
+            <img className="w-9" src="/images/icon.png" alt="logo" />
           </a>
         </div>
         {!isSettings && (
           <div className="items-center flex desktopMode:hidden mr-4">
             <a className="inline-flex items-center justify-center cursor-pointer">
-              <MenuIcon
-                id="menu-icon"
-                onClick={toggleDrawerClick}
-                className="text-[#3c85ee] w-[35px]"
-              />
+              {!drawerOpen && (
+                <MenuIcon
+                  id="menu-icon"
+                  onClick={toggleDrawerClick}
+                  className="text-primary w-9"
+                />
+              )}
+              {drawerOpen && (
+                <ChevronOutline
+                  id="menu-icon"
+                  onClick={closeDrawerClick}
+                  className="text-primary w-9 rotate-90"
+                />
+              )}
             </a>
           </div>
         )}
@@ -49,7 +69,7 @@ const Header = () => {
                 onClick={() => navigate("/settings")}
                 className="cursor-pointer"
               >
-                <img src="/assets/settings.svg" alt="settings" />
+                <SettingsIconSolid className="w-7 h-7 text-gray-primary" />
               </a>
             </div>
           </div>

src/components/HocComponent/index.jsx

@@ -1,11 +0,0 @@
-import { useLocation, useNavigate } from "react-router-dom";
-
-const withNavigate = (Component) => {
-  return (props) => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    return <Component {...props} navigate={navigate} location={location} />;
-  };
-};
-
-export default withNavigate;

src/components/HomepageSpinner/HomepageSpinner.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import {connect} from "react-redux";
-
-class HomepageSpinnerContainer extends React.Component {
-
-    constructor(props) {
-        super(props)
-    }
-
-    render() {
-        return (
-            <div className="homepage__spinner__wrapper" style={this.props.loading ? {} : {display:"none"}}>
-                <div className="spinner spinner__no-margin">
-    
-                </div>
-            </div>
-        )
-    }
-}
-
-const connectPropToStore = (state) => ({
-    loading: state.main.loading
-})
-
-export default connect(connectPropToStore)(HomepageSpinnerContainer);

src/components/QuickAccess/QuickAccess.tsx

@@ -17,7 +17,7 @@ const QuickAccess = memo(() => {
       className="overflow-hidden"
       style={isHome ? { display: "block" } : { display: "none" }}
     >
-      <div className="flex flex-row items-center justify-between mb-4">
+      <div className="flex flex-row items-center justify-between mb-5">
         <h2 className=" text-[#212b36] text-xl font-medium">Quick Access</h2>
         <ChevronOutline
           onClick={() => setQuickAccessExpanded(!quickAccessExpanded)}