Merge pull request #997 from internxt/fix/share-password-layout

Fix/share password layout

package.json

@@ -173,4 +173,4 @@
       "prettier --write"
     ]
   }
-}
+}

src/app/drive/components/ShareDialog/ShareDialog.tsx

@@ -550,39 +550,44 @@ const ShareDialog = (props: ShareDialogProps): JSX.Element => {
                   ))}
                 </>
               ) : (
-                invitedUsers.map((user, index) => (
-                  <User
-                    user={user}
-                    key={user.email}
-                    listPosition={index}
-                    translate={translate}
-                    openUserOptions={openUserOptions}
-                    selectedUserListIndex={selectedUserListIndex}
-                    userOptionsY={userOptionsY}
-                    onRemoveUser={onRemoveUser}
-                    userOptionsEmail={userOptionsEmail}
-                    onChangeRole={handleUserRoleChange}
-                    disableUserOptionsPanel={currentUserFolderRole !== 'owner' && user.email !== props.user.email}
-                    disableRoleChange={currentUserFolderRole !== 'owner'}
-                  />
-                ))
+                invitedUsers
+                  .sort((a, b) => {
+                    if (a.email === props.user.email && b.email !== props.user.email) return -1;
+                    return 0;
+                  })
+                  .map((user, index) => (
+                    <User
+                      user={user}
+                      key={user.email}
+                      listPosition={index}
+                      translate={translate}
+                      openUserOptions={openUserOptions}
+                      selectedUserListIndex={selectedUserListIndex}
+                      userOptionsY={userOptionsY}
+                      onRemoveUser={onRemoveUser}
+                      userOptionsEmail={userOptionsEmail}
+                      onChangeRole={handleUserRoleChange}
+                      disableUserOptionsPanel={currentUserFolderRole !== 'owner' && user.email !== props.user.email}
+                      disableRoleChange={currentUserFolderRole !== 'owner'}
+                    />
+                  ))
               )}
             </div>
           </div>
 
           <div className="h-px w-full bg-gray-5" />
 
           {accessMode === 'public' && !isLoading && isUserOwner && (
-            <div className="flex items-end justify-between align-middle">
+            <div className="flex items-center justify-between">
               <div className="flex flex-col space-y-2.5">
                 <div className="flex items-center">
                   <BaseCheckbox checked={isPasswordProtected} onClick={onPasswordCheckboxChange} />
                   <p className="ml-2 select-none text-base font-medium">
                     {translate('modals.shareModal.protectSharingModal.protect')}
                   </p>
                   <Question
-                    size={14}
-                    className="ml-2 flex items-center justify-center font-medium"
+                    size={20}
+                    className="ml-2 flex items-center justify-center font-medium text-gray-50"
                     data-tooltip-id="uploadFolder-tooltip"
                     data-tooltip-place="top"
                   />

src/app/share/components/SharePasswordInputDialog/SharePasswordInputDialog.tsx

@@ -53,7 +53,6 @@ export const SharePasswordInputDialog = ({
           {translate('modals.shareModal.protectSharingModal.buttons.cancel')}
         </Button>
         <Button variant="primary" onClick={handleConfirm} loading={isLoading} disabled={!password}>
-          {isLoading && <Spinner className="h-4 w-4" />}
           {translate('modals.shareModal.protectSharingModal.buttons.save')}
         </Button>
       </div>

src/app/shared/components/forms/BaseCheckbox/BaseCheckbox.tsx

@@ -1,4 +1,5 @@
-import { Check, Minus } from '@phosphor-icons/react';
+import { ReactComponent as Check } from './Check.svg';
+import { ReactComponent as Minus } from './Minus.svg';
 import React from 'react';
 
 interface BaseCheckboxProps {
@@ -34,7 +35,7 @@ const BaseCheckbox = ({
           indeterminate || checked ? 'border-primary bg-primary' : 'border-gray-30 hover:border-gray-40'
         }`}
       >
-        {indeterminate ? <Minus size={16} weight="bold" /> : checked && <Check size={16} weight="bold" />}
+        {indeterminate ? <Minus className="absolute -inset-px" /> : checked && <Check className="absolute -inset-px" />}
       </div>
       <input
         id={id}

src/index.scss

@@ -8,7 +8,6 @@
 
 :root,
 #root {
-  color-scheme: light dark;
   background: rgb(var(--color-surface));
   font-family: 'Instrument Sans', sans-serif;
   height: 100%;
@@ -24,6 +23,8 @@
 
 @media (prefers-color-scheme: light) {
   :root {
+    color-scheme: light;
+
     --color-primary: 0 102 255;
     --color-primary-dark: 0 88 219;
     --color-red: 255 13 0;
@@ -55,6 +56,8 @@
   }
 
   :root.dark {
+    color-scheme: dark;
+
     --color-primary: 20 114 255;
     --color-primary-dark: 0 96 240;
     --color-red: 255 61 51;
@@ -88,6 +91,8 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
+    color-scheme: dark;
+
     --color-primary: 20 114 255;
     --color-primary-dark: 0 96 240;
     --color-red: 255 61 51;
@@ -119,6 +124,8 @@
   }
 
   :root:not(.dark) {
+    color-scheme: light;
+
     --color-primary: 0 102 255;
     --color-primary-dark: 0 88 219;
     --color-red: 255 13 0;