💄 Applied sharing dialog changes from figme (#50)

https://www.figma.com/proto/CWz4DatnJ7Qhl3JycJhbFY/TDrive---MUI3?type=design&node-id=1355-9893&t=7v0ocJCf6knnPDan-0&scaling=min-zoom&page-id=1189%3A23493&starting-point-node-id=1347%3A8530

tdrive/frontend/public/locales/en.json

@@ -196,16 +196,19 @@
     "components.locked_features.locked_only_office_popup.text": "Whoops!! Seems like you want to edit the file from Tdrive. You might want to consider upgrading your plan if you want to collaborate around office files. Explore our pricing options and select the best option for your team collaboration needs.",
     "components.locked_features.locked_drive_popup.title": "You have just reached the drive limit",
     "components.locked_features.locked_drive_popup.subtitle": "In the free version, you can store only 6GB.",
-    "components.public-link-acess.public_link_acess": "Public link acess",
-    "components.public-link-acess.info_acess_true": "Anyone with this link will have access to this item.",
-    "components.public-link-acess.info_acess_false": "This item is not available by public link.",
+    "components.public-link-acess.public-link-placeholder": "https://tdrive.com/your-simple-link",
+    "components.public-link-acess.public_link_access": "Share via link",
     "components.public-link-acess.info_acess_expired": "Expired",
-    "components.public-link-copied-info" : "Public link copied to clipboard",
-    "components.public-link-copy" : "Copy public link to clip board",
+    "components.public-link-copied-info" : "Copied",
+    "components.public-link-get" : "Create link",
+    "components.public-link-copy" : "Copy link",
+    "components.public-link-access-level-create" : "Anyone with the link will have access to",
+    "components.public-link-access-level-update" : "Anyone with the link has access to",
+    "components.public-link-access-level-delete" : "Delete link",
     "components.public-link-security": "Public link security",
-    "components.public-link-security_password": "Password", 
-    "components.public-link-security_password_copied": "Password copied to clipboard", 
-    "components.public-link-security_expired": "Expiration", 
+    "components.public-link-security_password": "Password",
+    "components.public-link-security_password_copied": "Password copied to clipboard",
+    "components.public-link-security_expired": "Expiration",
     "components.internal-access_access_manage":"General access management",
     "components.internal-access_inherit_parent":"Inherit parent folder",
     "components.internal-access_inherit_parent_perm":"Choose to inherit or not the parent folder permissions.",
@@ -303,7 +306,8 @@
     "components.item_context_menu.download": "Download",
     "components.item_context_menu.rename": "Rename",
     "components.item_context_menu.manage_access": "Manage access",
-    "components.item_context_menu.manage_access_to": "Manage access to",
+    "components.item_context_menu.manage_access_to": "Share",
+    "components.item_context_menu.manage_access_advanced_to": "Manage access to",
     "components.item_context_menu.share": "Share",
     "components.item_context_menu.copy_link": "Copy link",
     "components.item_context_menu.copy_link.success": "Link copied to clipboard",
@@ -341,5 +345,5 @@
     "scenes.app.shared_with_me.edit": "Edit",
     "ONLYOFFICE Word Document": "Create a Document",
     "ONLYOFFICE Excel Document": "Create a Spreadsheet",
-    "ONLYOFFICE PowerPoint Document": "Create a Presentation" 
+    "ONLYOFFICE PowerPoint Document": "Create a Presentation"
 }

tdrive/frontend/public/locales/es.json

@@ -123,15 +123,13 @@
     "components.locked_features.locked_only_office_popup.text": "¡Ups! Parece que desea editar el archivo de Tdrive. Es posible que desee considerar la posibilidad de actualizar su plan si desea colaborar en torno a los archivos de Office. Explore nuestras opciones de precios y seleccione la mejor opción para las necesidades de colaboración de su equipo.",
     "components.locked_features.locked_drive_popup.title": "No puedes subir mas archivos",
     "components.locked_features.locked_drive_popup.subtitle": "En la versión gratuita, puede almacenar solo 6 GB.",
-    "components.public-link-acess.public_link_acess": "Accesibilidad del enlace público",
-    "components.public-link-acess.info_acess_true": "Cualquier persona con a este enlace tiene acceso al archivo.",
-    "components.public-link-acess.info_acess_false": "Este archivo no está disponible por enlace público.",
+    "components.public-link-acess.public_link_access": "Accesibilidad del enlace público",
     "components.public-link-acess.info_acess_expired": "Expirado",
     "components.public-link-copied-info" : "Enlace público copiado en el portapapeles",
     "components.public-link-copy" : "Copiar enlace en el portapapeles",
     "components.public-link-security": "Seguridad del enlace público",
-    "components.public-link-security_password": "Contraseña", 
-    "components.public-link-security_password_copied": "Contraseña copiada en el portapapeles", 
+    "components.public-link-security_password": "Contraseña",
+    "components.public-link-security_password_copied": "Contraseña copiada en el portapapeles",
     "components.public-link-security_expired": "Expiración",
     "scenes.app.popup.adduser.adresses_message": "Por favor, separe las direcciones con una coma o un espacio. Recuerda que Tdrive puede limitar el número de invitaciones en función de tu suscripción.",
     "scenes.app.channelsbar.currentuser.logout": "Cerrar sesión",

tdrive/frontend/public/locales/fr.json

@@ -173,12 +173,11 @@
     "components.locked_features.locked_only_office_popup.text": "Oups !! Vous souhaitez modifier le fichier à partir de Twake Drive. Vous voudrez peut-être envisager de mettre à niveau votre plan si vous souhaitez collaborer autour de fichiers bureautiques. Explorez nos options de tarification et sélectionnez la meilleure option pour les besoins de collaboration de votre équipe.",
     "components.locked_features.locked_drive_popup.title": "Vous venez d'atteindre la limite d'importation",
     "components.locked_features.locked_drive_popup.subtitle": "Dans la version gratuite, vous ne pouvez pas stocker plus de 6 Go.",
-    "components.public-link-acess.public_link_acess": "Lien d'accès public",
-    "components.public-link-acess.info_acess_true": "N'importe qui ayant ce lien aura accès à ce fichier",
-    "components.public-link-acess.info_acess_false": "Ce fichier n'est pas accessible via un lien public",
+    "components.public-link-acess.public_link_access": "Partager avec un lien",
     "components.public-link-acess.info_acess_expired": "Expiré",
-    "components.public-link-copied-info": "Le lien public a été copié dans le presse-papiers",
-    "components.public-link-copy": "Copier le lien public dans le presse-papiers",
+    "components.public-link-get" : "Créer un lien",
+    "components.public-link-copied-info": "Copié",
+    "components.public-link-copy": "Copier le lien",
     "components.public-link-security": "Sécurité du lien public",
     "components.public-link-security_password": "Mot de passe",
     "components.public-link-security_password_copied": "Mot de passe copié dans le presse-papiers",
@@ -296,7 +295,8 @@
     "components.item_context_menu.download": "Télécharger",
     "components.item_context_menu.rename": "Renommer",
     "components.item_context_menu.manage_access": "Gérer l'accès",
-    "components.item_context_menu.manage_access_to": "Gérer l'accès à",
+    "components.item_context_menu.manage_access_to": "Partage de",
+    "components.item_context_menu.manage_access_advanced_to": "Gérer l'accès de",
     "components.item_context_menu.share": "Partager",
     "components.item_context_menu.copy_link": "Copier le lien",
     "components.item_context_menu.copy_link.success": "Lien copié dans le presse-papiers",

tdrive/frontend/public/locales/ru.json

@@ -173,16 +173,15 @@
     "components.locked_features.locked_guests_popup.learn_more_button": "Узнать больше",
     "components.locked_features.locked_guests_popup.or": "Или",
     "scenes.client.main_view.main_header.search_input": "Поиск",
-    "components.public-link-acess.public_link_acess": "Public link acess",
-    "components.public-link-acess.info_acess_true": "Anyone with this link will have access to this item.",
-    "components.public-link-acess.info_acess_false": "This item is not available by public link.",
+    "components.public-link-acess.public_link_access": "Поделитесь ссылкой",
     "components.public-link-acess.info_acess_expired": "Expired",
-    "components.public-link-copied-info" : "Public link copied to clipboard",
-    "components.public-link-copy" : "Copy public link to clip board",
+    "components.public-link-copied-info" : "Ссылка скопирована",
+    "components.public-link-get" : "Создать ссылку",
+    "components.public-link-copy" : "Копировать ссылку",
     "components.public-link-security": "Public link security",
-    "components.public-link-security_password": "Password", 
-    "components.public-link-security_password_copied": "Password copied to clipboard", 
-    "components.public-link-security_expired": "Expiration", 
+    "components.public-link-security_password": "Password",
+    "components.public-link-security_password_copied": "Password copied to clipboard",
+    "components.public-link-security_expired": "Expiration",
     "components.internal-access_access_manage":"General access management",
     "components.internal-access_inherit_parent":"Inherit parent folder",
     "components.internal-access_inherit_parent_perm":"Choose to inherit or not the parent folder permissions.",

tdrive/frontend/public/locales/vn.json

@@ -67,7 +67,7 @@
     "scenes.apps.account.account.main_email": "Email chính",
     "scenes.apps.account.account.email_add": "Thêm e-mail mới",
     "scenes.apps.account.account.email_add_modal.invalid_code": "Mã này không hợp lệ",
-    "scenes.apps.account.account.password": "Mật khẩu",    
+    "scenes.apps.account.account.password": "Mật khẩu",
     "scenes.apps.account.account.password_modal.old_password": "Mật khẩu hiện tại",
     "scenes.apps.account.account.password_modal.password": "Mật khẩu mới",
     "scenes.apps.account.account.password_modal.bad_old_password": "Mật khẩu cũ không chính xác.",
@@ -189,12 +189,11 @@
     "components.locked_features.locked_only_office_popup.text": "Ồ, không! Có vẻ như bạn muốn chỉnh sửa tệp từ Tdrive. Bạn nên cân nhắc nâng cấp gói đăng ký nếu muốn cộng tác xung quanh các tệp văn phòng. Hãy khám phá các tùy chọn giá của chúng tôi và chọn tùy chọn phù hợp nhất với nhu cầu cộng tác nhóm của bạn.",
     "components.locked_features.locked_drive_popup.title": "Bạn vừa đạt đến giới hạn ổ đĩa",
     "components.locked_features.locked_drive_popup.subtitle": "Trong phiên bản miễn phí, bạn chỉ có thể lưu trữ 6GB.",
-    "components.public-link-acess.public_link_acess": "Quyền truy cập liên kết công khai",
-    "components.public-link-acess.info_acess_true": "Bất kỳ ai có liên kết này đều có thể truy cập vào mục này.",
-    "components.public-link-acess.info_acess_false": "Mục này không khả dụng theo liên kết công khai.",
+    "components.public-link-acess.public_link_access": "Chia sẻ bằng một liên kết",
     "components.public-link-acess.info_acess_expired": "Hết hạn",
-    "components.public-link-copied-info": "Liên kết công khai đã được sao chép vào khay nhớ tạm",
-    "components.public-link-copy": "Sao chép liên kết công khai vào khay nhớ tạm",
+    "components.public-link-copied-info": "Đã sao chép liên kết",
+    "components.public-link-get" : "Tạo đường link",
+    "components.public-link-copy": "Sao chép đường dẫn",
     "components.public-link-security": "Bảo mật liên kết công khai",
     "components.public-link-security_password": "Mật khẩu",
     "components.public-link-security_password_copied": "Mật khẩu đã được sao chép vào khay nhớ tạm",
@@ -270,7 +269,7 @@
     "components.side_menu.buttons.empty_trash": "Làm trống thùng rác",
     "components.header_path.shared_trash": "Thùng rác được chia sẻ",
     "components.header_path.my_trash": "Thùng rác của tôi",
-    "components.header_path.shared_with_me": "Chia sẻ với tôi",  
+    "components.header_path.shared_with_me": "Chia sẻ với tôi",
     "scenes.app.drive.nothing": "Không có gì ở đây.",
     "scenes.app.drive.drag_and_drop": "Kéo và thả tệp để tải lên hoặc nhấp vào nút 'Thêm tài liệu'.",
     "scenes.app.drive.add_doc": "Thêm tài liệu hoặc thư mục",

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

@@ -3,7 +3,7 @@ import React from 'react';
 import _ from 'lodash';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  theme?: 'primary' | 'secondary' | 'danger' | 'default' | 'outline' | 'dark' | 'white';
+  theme?: 'primary' | 'secondary' | 'danger' | 'default' | 'outline' | 'dark' | 'white' | 'green';
   size?: 'md' | 'lg' | 'sm';
   icon?: (props: any) => JSX.Element;
   iconSize?: 'md' | 'lg';
@@ -40,6 +40,10 @@ export const Button = (props: ButtonProps) => {
     className =
       'text-zinc-300 border-0 bg-zinc-900 hover:bg-zinc-800 hover:text-white active:bg-zinc-900';
 
+  if (props.theme === 'green')
+    className =
+      'text-zinc-300 border-0 bg-green-700';
+
   if (disabled) className += ' opacity-50 pointer-events-none';
 
   if (props.size === 'lg') className = className + ' text-lg h-10';

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

@@ -1,8 +1,9 @@
 import { CheckOutlineIcon } from '../icons-agnostic';
-import { BaseSmall } from '../text';
+import { Base, BaseSmall } from '../text';
 
 export const Checkbox = (props: {
   label?: string;
+  labelNormalSize?: boolean;
   onChange?: (status: boolean) => void;
   value?: boolean;
   className?: string;
@@ -43,9 +44,14 @@ export const Checkbox = (props: {
         }}
       >
         {renderSwitch()}
-        <BaseSmall className={'ml-2 ' + (props.disabled ? 'opacity-50' : 'cursor-pointer')}>
-          {props.label}
-        </BaseSmall>
+        {props.labelNormalSize
+          ? <Base className={'ml-2 ' + (props.disabled ? 'opacity-50' : 'cursor-pointer')}>
+              {props.label}
+            </Base>
+          : <BaseSmall className={'ml-2 ' + (props.disabled ? 'opacity-50' : 'cursor-pointer')}>
+              {props.label}
+            </BaseSmall>
+          }
       </div>
     );
   } else {

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

@@ -1,8 +1,8 @@
 import _ from 'lodash';
-import { defaultInputClassName, errorInputClassName } from './input-text';
+import { defaultInputClassName, errorInputClassName, ThemeName } from './input-text';
 
 interface InputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-  theme?: 'plain' | 'outline';
+  theme?: ThemeName;
   hasError?: boolean;
   size?: 'md' | 'lg' | 'sm';
   className?: string;

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

@@ -7,7 +7,7 @@ interface InputProps
     React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     'size'
   > {
-  theme?: 'plain' | 'outline';
+  theme?: ThemeName;
   label?: string;
   size?: 'sm' | 'md' | 'lg';
   feedback?: string;
@@ -19,21 +19,28 @@ interface InputProps
   inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
 }
 
+export type ThemeName = 'plain' | 'outline' | 'blue' | 'rose';
+
 const baseInputClassName =
-  'tw-input block w-full rounded-md focus:ring-1 focus:ring-blue-500 z-0 focus:z-10 dark:text-white text-black text-base ';
+  'tw-input block w-full rounded-md focus:ring-1 focus:ring-blue-500 z-0 focus:z-10 text-base ';
+const baseTextClassName = ' dark:text-white text-black ';
 
-export const defaultInputClassName = (theme: 'plain' | 'outline' = 'plain') => {
+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',
+    '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,
+  };
   return (
     baseInputClassName +
-    (theme === 'plain'
-      ? 'bg-zinc-100 border-zinc-100 dark:bg-zinc-800 dark:border-zinc-800'
-      : 'bg-zinc-50 border-zinc-300 dark:bg-zinc-800 dark:border-zinc-700')
+    (themeClasses[theme] || themeClasses.outline)
   );
 };
 
-export const errorInputClassName = (theme: 'plain' | 'outline' = 'plain') => {
+export const errorInputClassName = (theme: ThemeName = 'plain') => {
   return (
-    baseInputClassName +
+    baseInputClassName + baseTextClassName +
     (theme === 'plain'
       ? 'bg-rose-200 border-rose-200 dark:bg-rose-800 dark:border-rose-800'
       : 'bg-rose-50 border-rose-300 dark:bg-rose-900 dark:border-rose-800')

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

@@ -17,6 +17,7 @@ export const Modal = (props: {
   onClose?: () => void;
   children?: React.ReactNode;
   closable?: boolean;
+  closeIcon?: ReactNode,
   className?: string;
   style?: React.CSSProperties;
   positioned?: boolean;
@@ -130,7 +131,7 @@ export const Modal = (props: {
                       className="hover:opacity-75 focus:outline-none "
                       onClick={() => props.onClose && props.onClose()}
                     >
-                      <DismissIcon />
+                      {props.closeIcon ? props.closeIcon : <DismissIcon />}
                     </button>
                   </div>
                 )}

tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx

@@ -90,10 +90,10 @@ export default (props: {
         )}
       />
       {isFocus && query?.trim() && (
-        <div className="absolute w-full top-0 -translate-y-full bg-white dark:bg-zinc-800 dark:text-white rounded-md border shadow-md p-2">
+        <div className="absolute w-full end-1 z-10 bg-white dark:bg-zinc-800 dark:text-white rounded-md border shadow-md p-2">
           <div>
             {result.length === 0 && (
-              <div className="text-center pt-8">
+              <div className="text-center">
                 <Info>{Languages.t('components.user_picker.modal_no_result')}</Info>
               </div>
             )}

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

@@ -8,30 +8,34 @@ export const AccessLevel = ({
   onChange,
   canRemove,
   hiddenLevels,
+  labelOverrides,
   className,
 }: {
   disabled?: boolean;
   level: DriveFileAccessLevel | null;
   onChange: (level: DriveFileAccessLevel & 'remove') => void;
   canRemove?: boolean;
   className?: string;
+  labelOverrides?: { [key: string]: string };
   hiddenLevels?: string[];
 }) => {
+  const createOption = (level: DriveFileAccessLevel, tKey: string) =>
+    !hiddenLevels?.includes(level) && <option value={level}>{(labelOverrides || {})[level] || Languages.t(tKey)}</option>;
   return (
     <Select
       disabled={disabled}
       className={
         className +
-        ' w-auto ' +
-        (level === 'none' ? '!text-rose-500 !bg-rose-100 dark-bg-rose-800' : '')
+        ' w-auto'
       }
+      theme={level === 'none' ? 'rose' : 'outline'}
       value={level || 'none'}
       onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}
     >
-      {!hiddenLevels?.includes('manage') && <option value={'manage'}>{Languages.t('common.access-level_full_acess')}</option>}
-      {!hiddenLevels?.includes('write') && <option value={'write'}>{Languages.t('common.access-level_write')}</option>}
-      {!hiddenLevels?.includes('read') && <option value={'read'}>{Languages.t('common.access-level_read')}</option>}
-      {!hiddenLevels?.includes('none') && <option value={'none'}>{Languages.t('common.access-level_no_access')}</option>}
+      {createOption('manage', 'common.access-level_full_acess')}
+      {createOption('write', 'common.access-level_write')}
+      {createOption('read', 'common.access-level_read')}
+      {createOption('none', 'common.access-level_no_access')}
       {canRemove && <option value={'remove'}>Remove</option>}
     </Select>
   );