♻️💄 front: Use UserBlock from grouped rows in the access rights modal (and a bit of dark mode borders) (#50)

tdrive/frontend/src/app/components/ui/user.jsx

@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import './elements.scss';
-import UserService from '@features/users/services/current-user-service';
-
-export default class User extends React.Component {
-  render() {
-    return (
-      <div className={'user_bloc ' + (this.props.mini ? 'mini ' : '')}>
-        <div
-          className="userimage"
-          style={{ backgroundImage: "url('" + UserService.getThumbnail(this.props.data) + "')" }}
-        />
-        {!this.props.mini && UserService.getFullName(this.props.data)}
-      </div>
-    );
-  }
-}

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import UserBlock from '@molecules/grouped-rows/user';
 import { Input } from '@atoms/input/input-text';
 import { useSearchUsers } from '@features/users/hooks/use-search-user-list';
-import User from '@components/ui/user';
 import { Button } from '@atoms/button/button';
 import { UserType } from '@features/users/types/user';
 import { InputDecorationIcon } from '@atoms/input/input-decoration-icon';
@@ -99,16 +99,13 @@ export default (props: {
             )}
             {shownResults.map((user, i) => {
               return (
-                <div key={user.id} className={
+                <UserBlock
-                  "rounded m-1 p-3 new-direct-channel-proposed-user flex flex-row items-center justify-center align-baseline"
+                  key={user.id}
-                  + (i === selectedKeyIndex ? ' ring' : (i > 0 && i !== (selectedKeyIndex + 1) ? ' border-t' : ''))}>
+                  user={user}
-                  <div className="grow">
+                  className={
-                    <div className='font-bold'>
+                    "rounded m-1 p-3 new-direct-channel-proposed-user flex flex-row items-center justify-center align-baseline"
-                    <User data={user} />
+                    + (i === selectedKeyIndex ? ' ring' : (i > 0 && i !== (selectedKeyIndex + 1) ? ' border-t' : ''))}
-                    </div>
+                  suffix={
-                    <div className='ml-3 text-sm text-slate-500'>{user.email}</div>
-                  </div>
-                  <div className='shrink-0 ml-2'>
                     <Button
                       onClick={() => {
                         setUsers([user]);
@@ -119,8 +116,8 @@ export default (props: {
                     >
                       {Languages.t('components.user_picker.modal.result_add.' + props.level)}
                     </Button>
-                  </div>
+                  }
-                  </div>
+                  />
               );
             })}
             {result.length > maxUserResultsShown &&

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

@@ -1,5 +1,6 @@
 import Avatar from '@atoms/avatar';
 import { Base, Info } from '@atoms/text';
+import UserBlock from '@molecules/grouped-rows/user';
 import { useDriveItem } from '@features/drive/hooks/use-drive-item';
 import { DriveFileAccessLevel } from '@features/drive/types';
 import { useCurrentUser } from '@features/users/hooks/use-current-user';
@@ -19,7 +20,7 @@ export const InternalAccessManager = ({ id, disabled }: { id: string; disabled:
   return (
     <>
       <Base className="block mt-4 mb-1">{Languages.t('components.internal-access_specific_rules')}</Base>
-      <div className="rounded-md border mt-2">
+      <div className="rounded-md border mt-2 dark:border-zinc-700">
         <UserAccessSelector id={id} disabled={disabled} />
 
         {userEntities
@@ -84,48 +85,37 @@ const UserAccessLevel = ({
   const { item, loading, update } = useDriveItem(id);
   const user = useUser(userId);
   const { user: currentUser } = useCurrentUser();
-  const level =
+  const level = item?.access_info.entities.filter(a => a.type === 'user' && a.id === userId)?.[0]?.level || 'none';
-    item?.access_info.entities.filter(a => a.type === 'user' && a.id === userId)?.[0]?.level ||
-    'none';
-
   return (
-    <div className="p-4 border-t flex flex-row items-center justify-center">
+    <UserBlock
-      <div className="shrink-0">
+      className="p-4 border-t dark:border-zinc-700"
-        <Avatar
+      user={user}
-          avatar={user?.thumbnail || ''}
+      isSelf={!!currentUser?.id && user?.id === currentUser?.id}
-          title={!user ? '-' : currentUserService.getFullName(user)}
+      suffix={
-          size="sm"
-        />
-      </div>
-      <div className="grow ml-2">
-        <Base>{!!user && currentUserService.getFullName(user)}</Base>{' '}
-        {user?.id === currentUser?.id && <Info>{Languages.t('components.internal-access_specific_rules_you')}</Info>}
-      </div>
-      <div className="shrink-0 ml-2">
         <AccessLevel
           disabled={loading || disabled || user?.id === currentUser?.id}
           level={level}
-          canRemove
+          canRemove={true}
-          onChange={level => {
+          onChange={
-            update({
+            level =>
-              access_info: {
+              update({
-                entities:
+                access_info: {
-                  level === 'remove'
+                  entities:
-                    ? item?.access_info?.entities.filter(
+                    level === 'remove'
-                        e => e.type !== 'user' || e.id !== userId,
+                      ? item?.access_info?.entities.filter(
-                      ) || []
+                          e => e.type !== 'user' || e.id !== userId,
-                    : item?.access_info?.entities.map(e => {
+                        ) || []
-                        if (e.type === 'user' && e.id === userId) {
+                      : item?.access_info?.entities.map(e => {
-                          return { ...e, level };
+                          if (e.type === 'user' && e.id === userId)
-                        }
+                            return { ...e, level };
-                        return e;
+                          return e;
-                      }) || [],
+                        }) || [],
-                public: item?.access_info.public,
+                  public: item?.access_info.public,
-              },
+                },
-            });
+              })
-          }}
+            }
-        />
+          />
-      </div>
+      }
-    </div>
+    />
   );
 };

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

@@ -35,7 +35,7 @@ export const PublicLinkManager = ({ id, disabled }: { id: string; disabled?: boo
       <Subtitle className="block mt-2 mb-1">
         {Languages.t('components.public-link-acess.public_link_access')}
       </Subtitle>
-      <div className="rounded-md border">
+      <div className="rounded-md border dark:border-zinc-700">
         <div className="p-4 flex flex-row items-center justify-center">
           <div className="grow relative">
             <Input