Merge pull request #521 from fairDataSociety/feat/ui-improvements

feat: various ui improvements
fairDataSociety · Sep 25, 2023 · 1c03e65 · 1c03e65
2 parents c7a0624 + 1274c90
commit 1c03e65
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 18 deletions.
diff --git a/src/components/Buttons/MainSideBarItem/MainSideBarItem.tsx b/src/components/Buttons/MainSideBarItem/MainSideBarItem.tsx
@@ -58,7 +58,7 @@ const MainSideBarItem: FC<MainSideBarItemProps> = ({
           isActive
             ? 'border-r-0 border-b-4 sm:border-r-4 sm:border-b-0 border-color-accents-purple-heavy'
             : ''
-        }  w-24 sm:w-full py-1 md:py-4 flex-shrink-0 shadow cursor-pointer hover:bg-color-shade-dark-4-day dark:hover:bg-color-shade-dark-2-night ${className}`}
+        }  w-24 md:w-full py-1 md:py-4 flex-shrink-0 shadow cursor-pointer hover:bg-color-shade-dark-4-day dark:hover:bg-color-shade-dark-2-night ${className}`}
         onClick={() => {
           if (router.pathname === DRIVE_PATH && link === DRIVE_PATH) {
             setTimeout(() => driveSideBarToggle(), 100);

diff --git a/src/components/Dropdowns/PodDropdown/PodDropdownMenu.tsx b/src/components/Dropdowns/PodDropdown/PodDropdownMenu.tsx
@@ -36,12 +36,12 @@ const PodDropdownMenu = () => {
 
   return (
     <DropdownTransition>
-      <Menu.Items className="absolute top-12 w-48 p-5 bg-color-shade-dark-1-day dark:bg-color-shade-dark-3-night text-left rounded-md shadow z-30">
+      <Menu.Items className="absolute top-12 w-48 p-5 max-h-96 overflow-y-auto bg-color-shade-dark-1-day dark:bg-color-shade-dark-3-night text-left rounded-md shadow z-30">
         <div className="mb-3 pb-3 border-b-2 border-color-shade-light-1-day dark:border-color-shade-light-1-night">
           <h4 className="mb-1 font-semibold text-color-shade-white-day dark:text-color-shade-white-night text-base">
             {activePod || intl.get('SELECT_A_POD')}
           </h4>
-          {directoryName !== 'root' && (
+          {activePod && directoryName !== 'root' && (
             <Menu.Item
               as="span"
               className="block w-auto py-2 font-normal text-color-shade-white-day dark:text-color-shade-white-night text-base cursor-pointer"

diff --git a/src/components/Invite/Invite.tsx b/src/components/Invite/Invite.tsx
@@ -199,7 +199,11 @@ const Invite: FC<InviteProps> = () => {
 
           {step === STEP_FINISH && (
             <div className="w-full step-finish">
-              <Confetti numberOfPieces={1000} recycle={false} />
+              <Confetti
+                numberOfPieces={1000}
+                recycle={false}
+                width={window.innerWidth}
+              />
               <h1 className="mb-4 font-semibold text-3xl text-color-accents-purple-heavy dark:text-color-accents-soft-lavender leading-10">
                 {intl.get('HURRAH')}
               </h1>

diff --git a/src/components/Invites/Invites.tsx b/src/components/Invites/Invites.tsx
@@ -139,10 +139,8 @@ const Invites: FC<AllInvitesProps> = ({
     setCurrentPage((oldPage) => Math.max(oldPage - 1, 0));
   };
 
-  const getActionClasses = (invite: Invite) =>
-    `flex-item cursor-pointer text-color-accents-purple-black dark:brighten dark:text-color-shade-white-night ${
-      hoverInviteId === invite.id ? '' : 'hidden'
-    }`;
+  const getActionClasses = () =>
+    'flex-item cursor-pointer text-color-accents-purple-black dark:brighten dark:text-color-shade-white-night';
 
   const isPreviousButtonDisabled = currentPage === 0;
   const isNextButtonDisabled =
@@ -274,14 +272,14 @@ const Invites: FC<AllInvitesProps> = ({
                         {invite.name || invite.id}
                       </p>
                       <img
-                        className={getActionClasses(invite)}
+                        className={getActionClasses()}
                         width={15}
                         src={EditImage.src}
                         alt="Edit the name"
                         onClick={() => setInviteAction(invite, InviteMode.Edit)}
                       />
                       <img
-                        className={getActionClasses(invite)}
+                        className={getActionClasses()}
                         width={15}
                         src={DeleteImage.src}
                         alt="Delete the invite"

diff --git a/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx b/src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx
@@ -31,7 +31,7 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
           <Button
             onClick={() => setMobileNavigationOpen(true)}
             variant="tertiary"
-            className="cursor-pointer block sm:hidden"
+            className="cursor-pointer block md:hidden"
             icon={
               theme === 'light' ? (
                 <NavigationMenuLight className="inline-block" />
@@ -44,10 +44,6 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
         </div>
 
         <div className="flex justify-between items-center">
-          <div className="hidden sm:block mr-16">
-            <SearchBar />
-          </div>
-
           <div className="flex flex-nowrap space-x-5">
             <UserDropdownToggle
               address={wallet?.address || 'Blossom'}

diff --git a/src/components/NavigationBars/MainNavigationBar/UserDropdown/UserDropdown.tsx b/src/components/NavigationBars/MainNavigationBar/UserDropdown/UserDropdown.tsx
@@ -60,7 +60,7 @@ const UserDropdown: FC<UserDropdownProps> = ({
             onClick={(e) => e.stopPropagation()}
           >
             <div className="pb-5 mr-5 mb-5 flex content-center items-center border-b-2 border-color-shade-light-1-day dark:border-color-shade-light-1-night dark:text-color-shade-white-night">
-              <div title={user || address}>
+              <div className="pr-2" title={user || address}>
                 {user || shortenString(address, 24, 9)}
               </div>
               <div className="ml-auto">

diff --git a/src/components/NavigationBars/MainSideBar/MainSideBar.tsx b/src/components/NavigationBars/MainSideBar/MainSideBar.tsx
@@ -30,7 +30,7 @@ const MainSideBar: FC<MainSideBarProps> = ({
       bg-color-shade-dark-3-day dark:bg-color-shade-dark-3-night`}
     >
       <NavigationItems
-        className="hidden sm:block"
+        className="hidden md:block"
         driveSideBarToggle={driveSideBarToggle}
         onOptionClick={onOptionClick}
       />

diff --git a/src/components/NavigationBars/MobileNavigationDrawer/MobileNavigationDrawer.tsx b/src/components/NavigationBars/MobileNavigationDrawer/MobileNavigationDrawer.tsx
@@ -11,7 +11,7 @@ const MobileNavigationDrawer = ({
   onClose,
 }: MobileNavigationDrawerProps) => {
   return (
-    <Drawer className="w-44" open={open} onClose={onClose}>
+    <Drawer className="w-44 block md:hidden" open={open} onClose={onClose}>
       <div className="flex flex-col">
         <NavigationItems
           className="flex h-20"