🔖 Release Version 1.0.4-hf3

tdrive/frontend/src/app/atoms/avatar/index.tsx

@@ -47,7 +47,7 @@ export default function Avatar(props: AvatarProps) {
 
   className +=
     ' border border-gray flex items-center justify-center bg-center bg-cover ' +
-    (props.nogradient ? ' bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white ' : '');
+    (props.nogradient ? ' bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-white ' : '');
 
   const spl_title = avatarTitle.split(' ');
 

tdrive/frontend/src/app/atoms/badge/index.tsx

@@ -18,10 +18,10 @@ export const Badge = (props: BadgeProps) => {
   if (props.theme === 'danger') className = 'text-white bg-rose-500 border-transparent ';
 
   if (props.theme === 'default')
-    className = 'text-black dark:text-white bg-white dark:bg-zinc-800 border-gray-300';
+    className = 'text-black dark:text-white bg-white dark:bg-zinc-900 border-gray-300';
 
   if (props.theme === 'outline')
-    className = 'text-blue-500 bg-white dark:bg-zinc-800 border-blue-500';
+    className = 'text-blue-500 bg-white dark:bg-zinc-900 border-blue-500';
 
   if (props.size === 'lg') className = className + ' text-lg h-11';
   else if (props.size === 'sm') className = className + ' text-sm h-7 px-3';

tdrive/frontend/src/app/atoms/button/button.tsx

@@ -28,7 +28,7 @@ export const Button = (props: ButtonProps) => {
 
   if (props.theme === 'default')
     className =
-      'text-black dark:text-white bg-white dark:bg-zinc-800 dark:hover:bg-zinc-700 dark:active:bg-zinc-900 hover:bg-zinc-50 active:bg-zinc-200 border-zinc-300';
+      'text-black dark:text-white bg-white dark:bg-zinc-900 dark:hover:bg-zinc-700 dark:active:bg-zinc-900 hover:bg-zinc-50 active:bg-zinc-200 border-zinc-300';
 
   if (props.theme === 'white')
     className =
@@ -36,7 +36,7 @@ export const Button = (props: ButtonProps) => {
 
   if (props.theme === 'outline')
     className =
-      'text-blue-500 bg-white dark:bg-zinc-800 dark:hover:bg-zinc-700 dark:active:bg-zinc-900 hover:bg-zinc-50 active:bg-zinc-200 border-blue-500';
+      'text-blue-500 bg-white dark:bg-zinc-900 dark:hover:bg-zinc-700 dark:active:bg-zinc-900 hover:bg-zinc-50 active:bg-zinc-200 border-blue-500';
 
   if (props.theme === 'dark')
     className =

tdrive/frontend/src/app/atoms/input/input-text.tsx

@@ -27,10 +27,10 @@ const baseTextClassName = ' dark:text-white text-black ';
 
 export const defaultInputClassName = (theme: ThemeName = 'plain') => {
   const themeClasses = {
-    'plain': 'bg-zinc-100 border-zinc-100 dark:bg-zinc-800 dark:border-zinc-800' + baseTextClassName,
-    'blue': 'bg-zinc-100 border-zinc-100 dark:bg-zinc-800 dark:border-zinc-800 text-blue-700 dark:text-blue-500',
+    'plain': 'bg-zinc-100 border-zinc-100 dark:bg-zinc-900 dark:border-zinc-800' + baseTextClassName,
+    'blue': 'bg-zinc-100 border-zinc-100 dark:bg-zinc-900 dark:border-zinc-800 text-blue-700 dark:text-blue-500',
     'rose': 'text-rose-500 bg-rose-100 dark:text-rose-300 dark:bg-rose-900 border-rose-500',
-    'outline': 'bg-zinc-50 border-zinc-300 dark:bg-zinc-800 dark:border-zinc-700' + baseTextClassName,
+    'outline': 'bg-zinc-50 border-zinc-300 dark:bg-zinc-900 dark:border-zinc-700' + baseTextClassName,
   };
   return (
     baseInputClassName +

tdrive/frontend/src/app/components/auto-complete/auto-complete.tsx

@@ -367,7 +367,7 @@ export default class AutoComplete extends Component<Props, State> {
           {!this.props.hideResult && this.state.currentList.length > 0 ? (
             <div
               className={
-                'menu-list as_frame bg-white text-black dark:bg-zinc-800 dark:text-white rounded-lg inline ' +
+                'menu-list as_frame bg-white text-black dark:bg-zinc-900 dark:text-white rounded-lg inline ' +
                 (this.state.focused && this.state.currentList.length ? 'fade_in ' : '') +
                 this.state.resultPosition
               }

tdrive/frontend/src/app/components/menus/menu-component.jsx

@@ -57,7 +57,7 @@ export default class MenuComponent extends React.Component {
       <div
         ref={node => (this.original_menu = node)}
         className={
-          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-800 dark:text-white rounded-lg ' : '') + this.props.animationClass
+          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass
         }
       >
         {(this.props.menu || [])
@@ -81,7 +81,12 @@ export default class MenuComponent extends React.Component {
                     this.hoverMenu(item.ref, item);
                   }}
                 >
-                  {item.text}
+                  {item.icon && (
+                    <div className="icon">
+                      {typeof item.icon === 'string' ? <Icon type={item.icon} /> : item.icon}
+                    </div>
+                  )}
+                  <div className="text">{item.text}</div>
                 </div>
               );
             } else if (item.type == 'react-element') {

tdrive/frontend/src/app/components/menus/menu.scss

@@ -45,13 +45,17 @@
     font-size: 12px;
     font-weight: 500;
     margin: 8px 16px;
-    color: var(--grey-dark);
+    display: flex;
+
+    .icon {
+      color: var(--grey-dark);
+    }
   }
 
   .menu-custom {
     font-size: 12px;
     font-weight: 500;
-    margin: 8px 8px;
+    margin: 0.875rem 0.625rem;
     padding: 0 8px;
 
     .menu-cancel-margin,

tdrive/frontend/src/app/components/menus/menus-body-layer.jsx

@@ -188,8 +188,8 @@ export default class MenusBodyLayer extends React.Component {
                     zIndex: 1050,
                     position: 'absolute',
                     transform: item.positionType === 'bottom' ? '' : 'translateY(-50%)',
-                    left: item.position.x,
-                    top: item.position.y,
+                    left: item.position.x - 140,
+                    top: item.position.y + 2,
                     marginTop: item.position.marginTop,
                     marginLeft: item.position.marginLeft,
                   }}

tdrive/frontend/src/app/environment/version.ts

@@ -1,5 +1,5 @@
 export default {
-  version: /* @VERSION */ '1.0.4-hf2',
-  version_detail: /* @VERSION_DETAIL */ '1.0.4-hf2',
+  version: /* @VERSION */ '1.0.4-hf3',
+  version_detail: /* @VERSION_DETAIL */ '1.0.4-hf3',
   version_name: /* @VERSION_NAME */ 'Ghost-Dog',
 };

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} />{' '}