💄 front: cosmetic changes (#50)

tdrive/frontend/public/locales/en.json

@@ -51,7 +51,6 @@
     "scenes.app.workspaces.create_company.group_data.group_main_activity.administration": "Administration",
     "scenes.app.workspaces.create_company.group_data.group_main_activity.other": "Other",
     "components.drive_dropzone.uploading": "Uploading...",
-    "components.user_picker.modal_results_count_none": "No results found",
     "components.user_picker.modal.result_add.none": "No rights",
     "components.user_picker.modal.result_add.read": "Grant read",
     "components.user_picker.modal.result_add.write": "Grant write",

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

@@ -10,7 +10,7 @@ export type ConfirmModalProps = {
   title: string;
   text: string;
   theme?: ModalContentTheme;
-  icon: React.ComponentType;
+  icon?: React.ComponentType;
   skipCancelOnClose?: boolean;
   buttonOkTheme?: ButtonTheme;
   buttonOkLabel: string;
@@ -40,17 +40,17 @@ export const ConfirmModal = (props: ConfirmModalProps) => {
           <>
             <Button
               className="ml-2"
-              theme='default'
-              onClick={dialogCloseHandler(false)}
-              >
-              {Languages.t(props.buttonCancelLabel || "general.cancel")}
-            </Button>
-            <Button
               theme={props.buttonOkTheme || "danger"}
               onClick={dialogCloseHandler(true)}
               >
               {Languages.t(props.buttonOkLabel)}
             </Button>
+            <Button
+              theme='default'
+              onClick={dialogCloseHandler(false)}
+              >
+              {Languages.t(props.buttonCancelLabel || "general.cancel")}
+            </Button>
           </>
         }
       />

tdrive/frontend/src/app/molecules/grouped-rows/user/index.tsx

@@ -14,6 +14,7 @@ interface UserBlockProps {
   subtitle_suffix?: JSX.Element | string | false;
   user?: UserType;
   isSelf?: boolean;
+  onClick?: () => void;
 }
 
 export default function UserBlock(props: UserBlockProps) {
@@ -22,7 +23,7 @@ export default function UserBlock(props: UserBlockProps) {
     suffix={props.suffix}
     title_suffix={props.title_suffix}
     subtitle_suffix={props.subtitle_suffix}
-
+    onClick={props.onClick}
     avatar={
       <Avatar
         avatar={props.user?.thumbnail || ''}

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

@@ -25,6 +25,7 @@ export const AccessLevelDropdown = ({
   labelOverrides,
   className,
   size,
+  noRedBobMode,
 }: {
   disabled?: boolean;
   level: DriveFileAccessLevel | null;
@@ -33,6 +34,7 @@ export const AccessLevelDropdown = ({
   labelOverrides?: { [key: string]: string };
   hiddenLevels?: DriveFileAccessLevelOrRemove[] | string[];
   size?: SelectSize,
+  noRedBobMode?: boolean,
 }) => {
   const createOption = (level: DriveFileAccessLevelOrRemove) =>
     !hiddenLevels?.includes(level) && <option value={level}>{(labelOverrides || {})[level] || translateAccessLevel(level)}</option>;
@@ -41,7 +43,7 @@ export const AccessLevelDropdown = ({
       disabled={disabled}
       size={size}
       className={className + ' w-auto'}
-      theme={level === 'none' ? 'rose' : 'outline'}
+      theme={(!noRedBobMode && level === 'none') ? 'rose' : 'outline'}
       value={level || 'none'}
       onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}
     >

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/copy-link-button.tsx

@@ -25,7 +25,7 @@ export const CopyLinkButton = (props: {
       }}
       disabled={!haveTextToCopy}
       theme={didJustCompleteACopy ? "green" : "primary"}
-      className="justify-center"
+      className="justify-center w-64"
       >
       { didJustCompleteACopy
         ? <CheckCircleIcon className="w-5 mr-2" />

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/index.tsx

@@ -11,7 +11,7 @@ import A from '@atoms/link';
 import { Subtitle } from '@atoms/text';
 import { LockClosedIcon, EyeIcon, PencilIcon, ScaleIcon, EyeOffIcon } from '@heroicons/react/outline';
 import { Modal, ModalContent } from '@atoms/modal';
-import { PublicLinkAccessOptions } from '../public-link/public-link-access-options';
+import { PublicLinkAccessOptions } from './public-link-access-options';
 import BaseBlock from '@molecules/grouped-rows/base';
 import { AccessLevelDropdown, translateAccessLevel } from '../../components/access-level-dropdown';
 import { CopyLinkButton } from './copy-link-button';
@@ -93,7 +93,7 @@ const SwitchToAdvancedSettingsRow = (props: {
     title={Languages.t('components.public-link-security')}
     suffix={
       <A
-        className={"pr-4 inline-block" + (props.disabled ? ' !text-zinc-500' : '')}
+        className={"pr-4 inline-block " + (props.disabled ? '!text-zinc-500' : '!text-zinc-800')}
         disabled={props.disabled}
         noColor={props.disabled}
         onClick={() => {
@@ -114,8 +114,7 @@ const PublicLinkModalContent = (props: {
 }) => {
   const { id } = props;
   const { item, access, loading, update, refresh } = useDriveItem(id);
-  const { item: parentItem } = useDriveItem(item?.parent_id || '');
-  const { company, refresh: refreshCompany } = useCurrentCompany();
+  const { refresh: refreshCompany } = useCurrentCompany();
   useEffect(() => {
     refresh(id);
     refreshCompany();

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/password-editor-row.tsx

@@ -80,7 +80,7 @@ export const PasswordEditorRow = (props: {
           <label htmlFor={chkPasswordId}>{Languages.t('components.public-link-security_password')}</label>
           {!!props.password?.length && !isEditingPassword &&
             <a
-              className={disabled ? Styles.Disabled.Yes : ""}
+              className={disabled ? Styles.Disabled.Yes : "!text-zinc-800"}
               onClick={() => {
                 if (!disabled) {
                   setCurrentEditedPassword(props.password!);
@@ -140,9 +140,7 @@ export const PasswordEditorRow = (props: {
       open={isConfirmingPasswordRemoval}
       title={Languages.t("components.public-link-security_password_removal_title")}
       text={Languages.t("components.public-link-security_password_removal_body")}
-      theme="danger"
-      icon={ShieldExclamationIcon}
-      buttonOkTheme='danger'
+      buttonOkTheme='primary'
       buttonOkLabel='components.public-link-security_password_removal_confirm'
 
       onClose={() => setIsConfirmingPasswordRemoval(false)}

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

@@ -25,25 +25,25 @@ export const AccessModalAtom = atom<AccessModalType>({
 
 export const AccessModal = () => {
   const [state, setState] = useRecoilState(AccessModalAtom);
-
+  const closeModal = () => setState({ ...state, open: false });
   return (
     <Modal
       open={state.open}
       className='!overflow-visible'
-      onClose={() => setState({ ...state, open: false })}
+      onClose={closeModal}
       >
-      {!!state.id && <AccessModalContent id={state.id} />}
+      {!!state.id && <AccessModalContent id={state.id} onCloseModal={closeModal} />}
     </Modal>
   );
 };
 
 const AccessModalContent = (props: {
   id: string,
+  onCloseModal: () => void,
 }) => {
   const { id } = props;
   const { item, access, loading, update, refresh } = useDriveItem(id);
-  const { item: parentItem } = useDriveItem(item?.parent_id || '');
-  const { company, refresh: refreshCompany } = useCurrentCompany();
+  const { refresh: refreshCompany } = useCurrentCompany();
   useEffect(() => {
     refresh(id);
     refreshCompany();
@@ -60,7 +60,7 @@ const AccessModalContent = (props: {
       >
       <div className={loading ? 'opacity-50' : ''}>
         {FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_SEARCH_USERS) && (
-          <InternalAccessManager id={id} disabled={access !== 'manage'} />
+          <InternalAccessManager id={id} disabled={access !== 'manage'} onCloseModal={props.onCloseModal} />
         )}
       </div>
     </ModalContent>

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

@@ -17,7 +17,15 @@ import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
 import { AccessLevelDropdown } from '../../components/access-level-dropdown';
 import UserBlock from '@molecules/grouped-rows/user';
 
-export const InternalAccessManager = ({ id, disabled }: { id: string; disabled: boolean }) => {
+export const InternalAccessManager = ({
+  id,
+  disabled,
+  onCloseModal,
+}: {
+  id: string;
+  disabled: boolean;
+  onCloseModal: () => void,
+}) => {
   const { item, loading, update } = useDriveItem(id);
   const [level, setLevel] = useState<DriveFileAccessLevel>('manage');
   const usersWithAccess = item && getAllUserAccesses(item);
@@ -113,6 +121,7 @@ export const InternalAccessManager = ({ id, disabled }: { id: string; disabled:
           <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"
+              noRedBobMode={true}
               disabled={loading || disabled}
               hiddenLevels={['remove']}
               level={level}
@@ -122,16 +131,16 @@ export const InternalAccessManager = ({ id, disabled }: { id: string; disabled:
         </div>
         {showResults &&
           <>
-            <div className="flex flex-row border-t !border-x-0 dark:border-zinc-700 h-1" />
+            <div className="flex flex-row border-t !border-x-0 dark:border-zinc-700" />
             <div className="relative w-full h-0">  {/* Necessary so the relative results don't take height */}
-              <div className={(showResults ? "rounded-md " : "rounded-md ") + "absolute z-10 w-full shadow-md border bg-white dark:bg-zinc-900 mt-2 dark:border-zinc-700"}>
+              <div className={"rounded-md absolute z-10 w-full shadow-md border bg-white dark:bg-zinc-900 mt-1 dark:border-zinc-700"}>
                 { shownResults && shownResults.map((user, index) =>
                   <UserAccessLevel
                     key={user.id}
                     id={id}
                     userId={user.id!}
                     disabled={disabled}
-                    className={'!border-x-0' + (index === selectedKeyIndex ? ' ring' : (index > 0 && index !== ((selectedKeyIndex ?? 0) + 1) ? ' border-t' : ''))}
+                    className={'hover:bg-zinc-300 dark:hover:bg-zinc-700 cursor-pointer !border-x-0' + (index === selectedKeyIndex ? ' ring' : (index > 0 && index !== ((selectedKeyIndex ?? 0) + 1) ? ' border-t' : ''))}
                     isSearchResultAdd={level}
                     onAddSearchResult={(userId) => {
                       item && update(changeUserAccess(item, userId, level));
@@ -139,7 +148,7 @@ export const InternalAccessManager = ({ id, disabled }: { id: string; disabled:
                     />
                 )}
                 {!loading && resultFooterText && <>
-                  <div className={(result.length == 0 ? 'rounded-md' : 'rounded-b-md') + ' grow text-center italic dark:text-zinc-400 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 italic text-red-700 dark:text-red-500 font-bold py-2 dark:border-zinc-700 border-t bg-zinc-100 dark:bg-zinc-800'}>
                     {resultFooterText}
                   </div>
                 </>}
@@ -166,6 +175,16 @@ export const InternalAccessManager = ({ id, disabled }: { id: string; disabled:
           <div className="mt-2 flex flex-row items-center justify-center border-none h-1">&nbsp;</div>
         }
       </div>
+      <div className="flex flex-row place-content-end">
+        <Button
+          disabled={loading || disabled}
+          size="sm"
+          className='text-center'
+          onClick={onCloseModal}
+          >
+          {Languages.t('components.public-link-security_field_confirm_edit')}
+        </Button>
+      </div>
     </>
   );
 };
@@ -186,11 +205,11 @@ const UserAccessLevel = (props: {
       className={"p-4 border-x dark:border-zinc-700" + ' ' + (props.className ?? '')}
       user={user}
       isSelf={!!currentUser?.id && user?.id === currentUser?.id}
+      onClick={() => props.isSearchResultAdd && user && props.onAddSearchResult!(props.userId)}
       suffix={
         props.isSearchResultAdd
         ? <Button
             disabled={loading || props.disabled || user?.id === currentUser?.id}
-            onClick={() => user && props.onAddSearchResult!(props.userId)}
             size="sm"
             >
             {Languages.t('components.user_picker.modal.result_add.' + props.isSearchResultAdd)}
@@ -198,6 +217,7 @@ const UserAccessLevel = (props: {
 
         : <AccessLevelDropdown
             disabled={loading || props.disabled || user?.id === currentUser?.id}
+            noRedBobMode={true}
             level={(item && getUserAccessLevel(item, props.userId)) || "none"}
             onChange={level => item && update(changeUserAccess(item, props.userId, level === 'remove' ? false : level))}
             />