💄 Update the navigation bar/app grid (#688)

💄 Update the navigation bar/app grid (#688)

tdrive/frontend/src/app/views/client/body/drive/components/access-level-dropdown.stories.tsx

@@ -59,7 +59,7 @@ export const EndOfInputBox = {
       <div className="shrink-0">
         <AccessLevelDropdown
           {...props}
-          className="rounded-l-none !p-0 leading-tight text-end !pr-8 border-none bg-zinc-100 dark:bg-zinc-800"
+          className="rounded-l-none !p-0 leading-tight text-end !pr-8 border-none bg-zinc-100 dark:bg-zinc-900"
           size="md"
           />
       </div>

tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx

@@ -175,7 +175,7 @@ const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () =
   return (
     <div
       onClick={props.onClick}
-      className="flex flex-row p-4 dark:bg-zinc-800 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
+      className="flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
     >
       <div className="flex items-center justify-center">{props.icon}</div>
       <div className="grow flex items-center ml-2">

tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-users-access.tsx

@@ -119,7 +119,7 @@ export const InternalUsersAccessManager = ({
           </div>
           <div className="shrink-0">
             <AccessLevelDropdown
-              className="rounded-l-none !p-0 leading-tight text-end !pr-8 !pl-2 border-none bg-zinc-100 dark:bg-zinc-800"
+              className="rounded-l-none !p-0 leading-tight text-end !pr-8 !pl-2 border-none bg-zinc-100 dark:bg-zinc-900"
               noRedWhenLevelNone={true}
               disabled={loading || disabled}
               hiddenLevels={['remove']}
@@ -146,7 +146,7 @@ export const InternalUsersAccessManager = ({
                     />
                 )}
                 {!loading && resultFooterText && <>
-                  <div className={(result.length == 0 ? 'rounded-md' : 'rounded-b-md') + ' grow text-center text-zinc-700 dark:text-white dark:opacity-75 py-2 dark:border-zinc-700 border-t bg-zinc-100 dark:bg-zinc-800'}>
+                  <div className={(result.length == 0 ? 'rounded-md' : 'rounded-b-md') + ' grow text-center text-zinc-700 dark:text-white dark:opacity-75 py-2 dark:border-zinc-700 border-t bg-zinc-100 dark:bg-zinc-900'}>
                     {resultFooterText}
                   </div>
                 </>}

tdrive/frontend/src/app/views/client/body/drive/modals/upload/index.tsx

@@ -99,7 +99,7 @@ const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () =
   return (
     <div
       onClick={props.onClick}
-      className="flex flex-row p-4 dark:bg-zinc-800 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
+      className="flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
     >
       <div className="flex items-center justify-center">{props.icon}</div>
       <div className="grow flex items-center ml-2">

tdrive/frontend/src/app/views/client/body/drive/shared.tsx

@@ -141,7 +141,7 @@ const AccessChecker = ({
     return (
       <div className="text-center">
         <div style={{ height: '20vh' }} />
-        <div className="inline-block text-left max-w-sm margin-auto bg-zinc-50 dark:bg-zinc-800 rounded-md p-4">
+        <div className="inline-block text-left max-w-sm margin-auto bg-zinc-50 dark:bg-zinc-900 rounded-md p-4">
           <Title>You don't have access to this document or folder.</Title>
           <br />
           <Base>The public link you are using may be invalid or expired.</Base>

tdrive/frontend/src/app/views/client/common/account.tsx

@@ -1,5 +1,4 @@
 import Avatar from '@atoms/avatar';
-import { Base, Info } from '@atoms/text';
 import Menu from '@components/menus/menu';
 import LoginService from '@features/auth/login-service';
 import { useCurrentUser } from '@features/users/hooks/use-current-user';
@@ -21,6 +20,18 @@ export default ({ sidebar }: { sidebar?: boolean }): JSX.Element => {
       className="flex flex-row items-center max-w-xs cursor-pointer"
       position="bottom"
       menu={[
+        // user name / email
+        {
+          type: 'text',
+          text: currentUserService.getFullName(user),
+        },
+        {
+          type: 'text',
+          text: user.email,
+          icon: 'envelope-info',
+          hide: !FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_DISPLAY_EMAIL),
+        },
+        { type: 'separator' },
         {
           type: 'menu',
           icon: 'user',
@@ -47,19 +58,6 @@ export default ({ sidebar }: { sidebar?: boolean }): JSX.Element => {
         avatar={user.thumbnail}
         title={currentUserService.getFullName(user)}
       />
-      <div
-        className={'sm:block ml-2 mr-2 flex flex-col overflow-hidden ' + (sidebar ? '' : 'hidden')}
-      >
-        <Base className="font-bold overflow-hidden text-ellipsis whitespace-nowrap w-full block -mb-1">
-          {currentUserService.getFullName(user)}
-        </Base>
-
-        { !FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_DISPLAY_EMAIL) && (
-          <Info className="font-semibold overflow-hidden text-ellipsis whitespace-nowrap w-full">
-            {user.email}
-          </Info>
-        )}
-      </div>
     </Menu>
   );
 };

tdrive/frontend/src/app/views/client/common/app-grid.tsx

@@ -27,10 +27,13 @@ export default ({ className }: { className?: string }): JSX.Element => {
                     target="_blank"
                     rel="noreferrer"
                     href={app.url}
-                    className="inline-block flex flex-col items-center justify-center cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded-md p-2 pb-1"
+                    className="inline-block flex flex-col items-center justify-center cursor-pointer hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md p-2 pb-1"
                   >
-                    <img src={app.logo} className="w-10 h-10 mb-1" />
-                    <Base>{app.name}</Base>
+                    <img src={app.logo} className="w-11 h-11 mb-1" />
+                    <Base style={{
+                      fontSize: '0.75rem',
+                      lineHeight: '1.4rem',
+                    }}>{app.name}</Base>
                   </a>
                 );
               })}

tdrive/frontend/src/app/views/client/common/disk-usage.tsx

@@ -35,7 +35,7 @@ const DiskUsage = () => {
   return (
     <>
       {FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA) && (
-        <div className="bg-zinc-500 dark:bg-zinc-800 bg-opacity-10 rounded-md p-4 w-auto max-w-md">
+        <div className="bg-zinc-500 dark:bg-zinc-900 bg-opacity-10 rounded-md p-4 w-auto max-w-md">
           <div className="w-full">
             <div className="overflow-hidden h-4 mb-4 text-xs flex rounded bg-emerald-200">
               {used > 90 && (
@@ -62,7 +62,7 @@ const DiskUsage = () => {
         </div>
       )}
       {!FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA) && (
-        <div className="bg-zinc-500 dark:bg-zinc-800 bg-opacity-10 rounded-md p-4 w-auto max-w-md">
+        <div className="bg-zinc-500 dark:bg-zinc-900 bg-opacity-10 rounded-md p-4 w-auto max-w-md">
           <div className="w-full">
             <Base>
               {formatBytesToInt(usedBytes)}

tdrive/frontend/src/app/views/client/header/index.tsx

@@ -7,7 +7,13 @@ import version from '../../../environment/version';
 
 export default ({ openSideMenu }: { openSideMenu: () => void }) => {
   return (
-    <div className="bg-white dark:bg-zinc-900 h-16 sm:h-20 p-4 sm:p-6 flex space-between items-center">
+    <div
+      className="bg-white dark:bg-zinc-900 h-16 sm:h-20 p-4 sm:p-6 flex space-between items-center"
+      style={{
+        paddingLeft: '1.875rem',
+        paddingRight: '1.875rem',
+      }}
+    >
       <div className="sm:block hidden shrink-0 w-2/6 max-w-xs" style={{ minWidth: 100 }}>
         <div className="sm:inline-grid">
           <img
@@ -21,7 +27,7 @@ export default ({ openSideMenu }: { openSideMenu: () => void }) => {
             alt="Tdrive"
           />
         </div>
-        <div className="sm:inline-grid">
+        <div className="sm:inline-grid pl-3">
           <Info className="font-bold overflow-hidden text-ellipsis whitespace-nowrap w-full block -mb-1">
             &nbsp;v{version.version}
           </Info>

tdrive/frontend/src/app/views/client/side-bar/index.tsx

@@ -37,7 +37,7 @@ export default () => {
   );
   const active = false;
   const { sharedWithMe, inTrash, path } = useDriveItem(parentId);
-  const activeClass = 'bg-zinc-50 dark:bg-zinc-800 !text-blue-500';
+  const activeClass = 'bg-zinc-50 dark:bg-zinc-900 !text-blue-500';
   let folderType = 'home';
   if ((path || [])[0]?.id === 'user_' + user?.id) folderType = 'personal';
   if (inTrash) folderType = 'trash';

tdrive/frontend/src/app/views/error/index.tsx

@@ -22,7 +22,7 @@ export default () => {
   }
 
   return (
-    <div className="full_page_error dark:bg-zinc-700 dark:text-white">
+    <div className="full_page_error dark:bg-zinc-800 dark:text-white">
       <div className="error_message skew_in_top_nobounce">
         <div className="title">
           <Emojione type="👨‍🚀" size={32} />{' '}