💄 Make user selection dialog more acceptable in dark and normal mode (#…

…50)
linagora · Mar 12, 2024 · b75b404 · b75b404
1 parent 3b3bb08
commit b75b404
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/tdrive/frontend/src/app/components/ui/elements.scss b/tdrive/frontend/src/app/components/ui/elements.scss
@@ -2,7 +2,6 @@
   padding-top: 1px;
   display: inline-block;
   box-sizing: border-box;
-  color: #000;
   height: 18px;
   line-height: 16px;
   font-size: 12px;

diff --git a/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx b/tdrive/frontend/src/app/views/client/body/drive/components/select-users.tsx
@@ -48,23 +48,23 @@ export default (props: {
         )}
       />
       {isFocus && query?.trim() && (
-        <div className="absolute w-full top-0 -translate-y-full	 bg-white rounded-md shadow-md p-2">
+        <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>
             {result.length === 0 && (
               <div className="text-center pt-8">
                 <Info>{Languages.t('components.user_picker.modal_no_result')}</Info>
               </div>
             )}
-            {_.reverse(result.slice(0, 5)).map(user => {
+            {_.reverse(result.slice(0, 5)).map((user, i) => {
               return (
-                <div key={user.id} className="new-direct-channel-proposed-user">
-                  <div className="user-name">
-                    <User data={user} />{' '}
-                    <span className="email overflow-hidden text-ellipsis whitespace-nowrap">
-                      ({user.email})
-                    </span>
+                <div key={user.id} className={"rounded m-1 p-3 new-direct-channel-proposed-user flex flex-row items-center justify-center align-baseline" + (i > 0 ? ' border-t' : '')}>
+                  <div className="grow">
+                    <div className='font-bold'>
+                    <User data={user} />
+                    </div>
+                    <div className='ml-3 text-sm text-slate-500'>{user.email}</div>
                   </div>
-                  <div>
+                  <div className='shrink-0 ml-2'>
                     <Button
                       onClick={() => {
                         setUsers([user]);
@@ -75,9 +75,10 @@ export default (props: {
                       {Languages.t('general.add')}
                     </Button>
                   </div>
-                </div>
+                  </div>
               );
             })}
+            <div className='-mb-px' />
           </div>
         </div>
       )}