From 3eb07b40d2d55c34d95024dd9814c67c305c55af Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 13 Sep 2024 12:42:03 +0200
Subject: [PATCH 1/5] feat: redirect the user to teams subSection

---
 .../Sections/Workspace/Members/MembersSection.tsx        | 4 ++--
 .../Sections/Workspace/Members/components/UserCard.tsx   | 9 +++++++--
 .../Sections/Workspace/Overview/OverviewSection.tsx      | 3 +--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/newSettings/Sections/Workspace/Members/MembersSection.tsx b/src/app/newSettings/Sections/Workspace/Members/MembersSection.tsx
index 31fc21685..e2c1eab6d 100644
--- a/src/app/newSettings/Sections/Workspace/Members/MembersSection.tsx
+++ b/src/app/newSettings/Sections/Workspace/Members/MembersSection.tsx
@@ -163,7 +163,7 @@ const MembersSection = ({ onClosePreferences }: { onClosePreferences: () => void
                 })}
               </div>
               {/* CENTER COLUMN */}
-              <div className="flex grow flex-col">
+              <div className="flex w-full max-w-[256px] grow flex-col">
                 <div className="flex h-12 items-center border-b border-t border-gray-10 bg-gray-5 py-2">
                   <span
                     className={
@@ -180,7 +180,7 @@ const MembersSection = ({ onClosePreferences }: { onClosePreferences: () => void
                   return (
                     <button
                       key={id}
-                      className={`justify-betweendw flex h-14 items-center border-gray-10 px-5 py-2 text-base font-normal text-gray-60 dark:bg-gray-1 ${
+                      className={`flex h-14 items-center justify-between border-gray-10 px-5 py-2 text-base font-normal text-gray-60 dark:bg-gray-1 ${
                         members && i === members.length - 1 ? 'border-b' : ' border-b'
                       } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : 'bg-surface'}`}
                       onMouseEnter={() => setHoverItemIndex(id)}
diff --git a/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx b/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
index c7d67679e..7485b7cf6 100644
--- a/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
+++ b/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
@@ -21,14 +21,19 @@ const UserCard = ({ name, lastname, role, email, avatarsrc, styleOptions }: User
   const { translate } = useTranslationContext();
   const rolePosition = styleOptions?.rolePosition ?? 'row';
   return (
-    <div className="flex flex-row space-x-2">
+    <div className="flex w-full max-w-[256px] flex-row space-x-2">
       <Avatar src={avatarsrc} fullName={`${name} ${lastname}`} diameter={styleOptions?.avatarDiameter ?? 36} />
       <div className="flex flex-col">
         {rolePosition === 'column' && (
           <RoleBadge role={role} roleText={translate(`preferences.workspace.members.role.${role}`)} size={'small'} />
         )}
         <div className="flex flex-row justify-between space-x-2">
-          <span className={styleOptions?.nameStyle ?? 'break-all text-base font-medium leading-5 text-gray-100'}>
+          <span
+            className={
+              styleOptions?.nameStyle ??
+              'max-w-[120px] truncate break-all text-base font-medium leading-5 text-gray-100'
+            }
+          >
             {name} {lastname}
           </span>
           {rolePosition === 'row' && (
diff --git a/src/app/newSettings/Sections/Workspace/Overview/OverviewSection.tsx b/src/app/newSettings/Sections/Workspace/Overview/OverviewSection.tsx
index 28dcc47be..96c739fbc 100644
--- a/src/app/newSettings/Sections/Workspace/Overview/OverviewSection.tsx
+++ b/src/app/newSettings/Sections/Workspace/Overview/OverviewSection.tsx
@@ -189,8 +189,7 @@ const OverviewSection = ({ onClosePreferences, changeSection }: OverviewSectionP
         isOwner={isOwner}
         subscriptionData={subscriptionData}
         onMembersCardClick={() => changeSection({ section: 'workspace', subsection: 'members' })}
-        // TODO: ADD NAVIGATION WHEN TEAMS HAS BEEN IMPLEMENTED
-        onTeamsCardClick={() => undefined}
+        onTeamsCardClick={() => changeSection({ section: 'workspace', subsection: 'teams' })}
         onBillingCardClick={() => changeSection({ section: 'workspace', subsection: 'billing' })}
       />
       <EditWorkspaceDetailsModal

From 964b61f6e78166b714354607c51f2160b19edd5d Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 13 Sep 2024 13:19:03 +0200
Subject: [PATCH 2/5] fix: user card in members

---
 .../Workspace/Members/components/UserCard.tsx | 38 +++++++++++--------
 .../containers/MemberDetailsContainer.tsx     |  1 +
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx b/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
index 7485b7cf6..481b401dd 100644
--- a/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
+++ b/src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
@@ -11,6 +11,7 @@ interface UserProps {
   avatarsrc: string | null;
   styleOptions?: {
     avatarDiameter?: number;
+    containerClassName?: string;
     nameStyle: string;
     emailStyle: string;
     rolePosition: 'row' | 'column';
@@ -21,28 +22,33 @@ const UserCard = ({ name, lastname, role, email, avatarsrc, styleOptions }: User
   const { translate } = useTranslationContext();
   const rolePosition = styleOptions?.rolePosition ?? 'row';
   return (
-    <div className="flex w-full max-w-[256px] flex-row space-x-2">
+    <div className={`flex w-full flex-row items-center gap-2 ${styleOptions?.containerClassName}`}>
       <Avatar src={avatarsrc} fullName={`${name} ${lastname}`} diameter={styleOptions?.avatarDiameter ?? 36} />
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-2">
         {rolePosition === 'column' && (
           <RoleBadge role={role} roleText={translate(`preferences.workspace.members.role.${role}`)} size={'small'} />
         )}
-        <div className="flex flex-row justify-between space-x-2">
-          <span
-            className={
-              styleOptions?.nameStyle ??
-              'max-w-[120px] truncate break-all text-base font-medium leading-5 text-gray-100'
-            }
-          >
-            {name} {lastname}
+        <div className="flex flex-col gap-0">
+          <div className="flex flex-row justify-between space-x-2">
+            <span
+              className={
+                styleOptions?.nameStyle ?? 'max-w-[120px] truncate break-all text-base font-medium text-gray-100'
+              }
+            >
+              {name} {lastname}
+            </span>
+            {rolePosition === 'row' && (
+              <RoleBadge
+                role={role}
+                roleText={translate(`preferences.workspace.members.role.${role}`)}
+                size={'small'}
+              />
+            )}
+          </div>
+          <span className={styleOptions?.emailStyle ?? 'break-all text-left text-sm font-normal text-gray-50'}>
+            {email}
           </span>
-          {rolePosition === 'row' && (
-            <RoleBadge role={role} roleText={translate(`preferences.workspace.members.role.${role}`)} size={'small'} />
-          )}
         </div>
-        <span className={styleOptions?.emailStyle ?? 'break-all text-left text-sm font-normal leading-4 text-gray-50'}>
-          {email}
-        </span>
       </div>
     </div>
   );
diff --git a/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx b/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
index 9ac30ddcc..0ff470da4 100644
--- a/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
+++ b/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
@@ -146,6 +146,7 @@ const MemberDetailsContainer = ({ member, getWorkspacesMembers, isOwner, deselec
           avatarsrc={null}
           styleOptions={{
             avatarDiameter: 80,
+            containerClassName: '!gap-4',
             nameStyle: 'text-2xl font-medium text-gray-100',
             emailStyle: 'text-base font-normal text-gray-60',
             rolePosition: 'column',

From 9362fd7dc2a7983a3f0ad43f0d5978b2d51a964a Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 13 Sep 2024 15:17:49 +0200
Subject: [PATCH 3/5] fix: invoices card style

---
 .../components/Invoices/InvoicesList.tsx      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/newSettings/components/Invoices/InvoicesList.tsx b/src/app/newSettings/components/Invoices/InvoicesList.tsx
index c4402ebf3..50276b379 100644
--- a/src/app/newSettings/components/Invoices/InvoicesList.tsx
+++ b/src/app/newSettings/components/Invoices/InvoicesList.tsx
@@ -40,7 +40,7 @@ const InvoicesList = ({ invoices, state }: { invoices: Invoice[]; state: 'loadin
         setHoverItemIndex={setHoverItemIndex}
         hoverItemIndex={hoverItemIndex}
       />
-      <InvoiceAmmountColumn
+      <InvoiceAmountColumn
         invoices={invoices}
         isLastInvoice={isLastInvoice}
         translate={translate}
@@ -63,14 +63,14 @@ const headerTextClass = 'text-base font-medium text-gray-100';
 const InvoiceDateColumn = ({ invoices, isLastInvoice, translate, setHoverItemIndex, hoverItemIndex }: ColumnProps) => (
   <div className="-ml-5 -mt-5 flex grow flex-col">
     <h1
-      className={`flex flex-row justify-between rounded-tl-xl border-b border-gray-10 bg-gray-5 px-5 py-2 ${headerTextClass}`}
+      className={`flex h-12 flex-row items-center justify-between rounded-tl-xl border-b border-gray-10 bg-gray-1 px-5 dark:bg-gray-5 ${headerTextClass}`}
     >
       {translate('views.account.tabs.billing.invoices.billingDate')}
     </h1>
     {invoices.map(({ created, id }, i) => (
       <div
         key={id}
-        className={`flex flex-row justify-between border-gray-10 px-5 py-2 text-base  font-medium text-gray-100 dark:bg-gray-1 ${
+        className={`flex h-12 flex-row items-center justify-between border-gray-10 px-5 text-base font-medium text-gray-100 ${
           isLastInvoice(i) ? 'rounded-bl-xl' : ' border-b'
         }
             ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : 'bg-surface'}`}
@@ -91,15 +91,15 @@ const InvoiceStorageColumn = ({
   hoverItemIndex,
 }: ColumnProps) => (
   <div className="-mt-5 flex grow flex-col">
-    <div className="border-b border-gray-10 bg-gray-5 py-2">
-      <h1 className={`flex justify-between border-l border-r border-gray-10 bg-gray-5 pl-5 pr-1 ${headerTextClass}`}>
-        {translate('views.account.tabs.billing.invoices.storage')}
-      </h1>
-    </div>
+    <h1
+      className={`flex h-12 items-center justify-between border-b border-l border-r border-gray-10 bg-gray-1 pl-5 pr-1 dark:bg-gray-5 ${headerTextClass}`}
+    >
+      {translate('views.account.tabs.billing.invoices.storage')}
+    </h1>
     {invoices.map(({ bytesInPlan, id }, i) => (
       <div
         key={id}
-        className={`flex justify-between border-gray-10 px-5 py-2 text-base font-normal text-gray-60 dark:bg-gray-1 ${
+        className={`flex h-12 items-center justify-between border-gray-10 px-5 text-base font-normal text-gray-60 ${
           isLastInvoice(i) ? '' : ' border-b'
         } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : 'bg-surface'}`}
         onMouseEnter={() => setHoverItemIndex(id)}
@@ -111,7 +111,7 @@ const InvoiceStorageColumn = ({
   </div>
 );
 
-const InvoiceAmmountColumn = ({
+const InvoiceAmountColumn = ({
   invoices,
   isLastInvoice,
   translate,
@@ -120,22 +120,22 @@ const InvoiceAmmountColumn = ({
 }: ColumnProps) => (
   <div className="-mr-5 -mt-5 flex flex-col rounded-tr-xl">
     <h1
-      className={`flex w-56 flex-row justify-between rounded-tr-xl border-b border-gray-10 bg-gray-5 p-2 pl-5 ${headerTextClass}`}
+      className={`flex h-12 w-56 flex-row items-center justify-between rounded-tr-xl border-b border-gray-10 bg-gray-1 p-2 pl-5 dark:bg-gray-5 ${headerTextClass}`}
     >
       {translate('views.account.tabs.billing.invoices.plan')}
     </h1>
     {invoices.map(({ pdf, id, total, currency }, i) => (
       <div
         key={id}
-        className={`flex w-56 flex-row items-center justify-between border-gray-10 py-2 pl-5 text-base font-normal text-gray-60 ${
+        className={`flex h-12 w-56 flex-row items-center justify-between border-gray-10 pl-5 text-base font-normal text-gray-60 ${
           isLastInvoice(i) ? 'rounded-br-xl' : 'border-b'
-        } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : ''}`}
+        } ${hoverItemIndex === id ? 'bg-gray-1 dark:bg-gray-5' : 'bg-surface'}`}
         onMouseEnter={() => setHoverItemIndex(id)}
         onMouseLeave={() => setHoverItemIndex(null)}
       >
         {`${total / 100} ` + moneyService.getCurrencySymbol(currency.toUpperCase())}
-        <a className="px-2 text-gray-100" href={pdf} target="_blank" rel="noopener noreferrer">
-          <DownloadSimple colorRendering={'bg-gray-100'} size={20} />
+        <a className="px-2 text-gray-100 hover:text-gray-100" href={pdf} target="_blank" rel="noopener noreferrer">
+          <DownloadSimple size={20} />
         </a>
       </div>
     ))}

From f576b8c0afb57a11c976e2bed8c69a9cc1146576 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Fri, 13 Sep 2024 15:49:59 +0200
Subject: [PATCH 4/5] fix: member details dialog and team labels for members

---
 .../Members/containers/MemberDetailsContainer.tsx    |  8 ++++----
 .../Workspace/Teams/components/TeamDetails.tsx       | 12 ++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx b/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
index 0ff470da4..350e4275a 100644
--- a/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
+++ b/src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
@@ -162,7 +162,7 @@ const MemberDetailsContainer = ({ member, getWorkspacesMembers, isOwner, deselec
             </button>
             {isOptionsOpen && (
               <button onClick={() => setIsOptionsOpen(false)} className="absolute flex h-full w-full">
-                <div className="absolute right-0 top-16 flex flex-col items-center justify-center rounded-md border border-gray-10 bg-gray-5 shadow-sm">
+                <div className="absolute right-0 top-16 flex flex-col items-center justify-center rounded-md border border-gray-10 bg-surface shadow-sm dark:bg-gray-5">
                   {/* NOT INCLUDED IN INITIAL SCOPE OF MVP */}
                   {/* <button
                   onClick={() => setIsRequestChangePasswordModalOpen(true)}
@@ -173,7 +173,7 @@ const MemberDetailsContainer = ({ member, getWorkspacesMembers, isOwner, deselec
                   {memberRole !== 'deactivated' && (
                     <button
                       onClick={() => setIsDeactivateModalOpen(true)}
-                      className="flex h-10 w-full items-center justify-center rounded-b-md px-3 hover:bg-gray-20"
+                      className="flex h-10 w-full items-center rounded-t-md px-3 hover:bg-gray-5 dark:hover:bg-gray-20"
                     >
                       <span className="truncate">{translate('preferences.workspace.members.actions.deactivate')}</span>
                     </button>
@@ -181,14 +181,14 @@ const MemberDetailsContainer = ({ member, getWorkspacesMembers, isOwner, deselec
                   {memberRole === 'deactivated' && (
                     <button
                       onClick={() => setIsReactivateModalOpen(true)}
-                      className="flex h-10 w-full items-center justify-center rounded-b-md px-3 hover:bg-gray-20"
+                      className="flex h-10 w-full items-center rounded-b-md px-3 hover:bg-gray-5 dark:hover:bg-gray-20"
                     >
                       <span className="truncate">{translate('preferences.workspace.members.actions.reactivate')}</span>
                     </button>
                   )}
                   <button
                     onClick={() => setIsRemoveModalOpen(true)}
-                    className="flex h-10 w-full items-center justify-center rounded-b-md px-3 hover:bg-gray-20"
+                    className="flex h-10 w-full items-center rounded-b-md px-3 hover:bg-gray-5 dark:hover:bg-gray-20"
                   >
                     <span className="truncate">{translate('preferences.workspace.members.actions.remove')}</span>
                   </button>
diff --git a/src/app/newSettings/Sections/Workspace/Teams/components/TeamDetails.tsx b/src/app/newSettings/Sections/Workspace/Teams/components/TeamDetails.tsx
index 5ba68ecbb..75d37db96 100644
--- a/src/app/newSettings/Sections/Workspace/Teams/components/TeamDetails.tsx
+++ b/src/app/newSettings/Sections/Workspace/Teams/components/TeamDetails.tsx
@@ -124,7 +124,6 @@ const TeamDetails: React.FC<TeamDetailsProps> = ({
       ) : (
         <div className="pb-5">
           {selectedTeamMembers.map((member) => {
-            const isOwner = selectedWorkspace?.workspace.ownerId === member.uuid;
             const isManager = team.team.managerId === member.uuid;
             const isLastItem = selectedTeamMembers.indexOf(member) === selectedTeamMembers.length - 1;
             const isFirstItem = selectedTeamMembers.indexOf(member) === 0;
@@ -145,14 +144,7 @@ const TeamDetails: React.FC<TeamDetailsProps> = ({
                       <span className="break-all text-base font-medium leading-5 text-gray-100">
                         {member.name} {member.lastname}
                       </span>
-                      {isOwner && (
-                        <RoleBadge
-                          role="owner"
-                          roleText={t('preferences.workspace.members.role.owner')}
-                          size={'small'}
-                        />
-                      )}
-                      {isManager && !isOwner && (
+                      {isManager && (
                         <RoleBadge
                           role="manager"
                           roleText={t('preferences.workspace.members.role.manager')}
@@ -168,7 +160,7 @@ const TeamDetails: React.FC<TeamDetailsProps> = ({
                 {hoveredMember === member.uuid && (isCurrentUserManager || isCurrentUserWorkspaceOwner) && (
                   <div className="relative flex items-center">
                     <div className="flex items-center">
-                      {!isOwner && !isManager && (
+                      {!isManager && (
                         <Button
                           variant="secondary"
                           size="medium"

From d290615b395c92cf41e9b800cac55e94ba0e8c0a Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:05:13 +0200
Subject: [PATCH 5/5] fix: import the service

---
 src/app/newSettings/components/Invoices/InvoicesList.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/newSettings/components/Invoices/InvoicesList.tsx b/src/app/newSettings/components/Invoices/InvoicesList.tsx
index adb15602d..ae8619d81 100644
--- a/src/app/newSettings/components/Invoices/InvoicesList.tsx
+++ b/src/app/newSettings/components/Invoices/InvoicesList.tsx
@@ -5,6 +5,7 @@ import dateService from '../../../core/services/date.service';
 import { bytesToString } from '../../../drive/services/size.service';
 import { useTranslationContext } from '../../../i18n/provider/TranslationProvider';
 import Spinner from '../../../shared/components/Spinner/Spinner';
+import currencyService from 'app/payment/services/currency.service';
 
 const InvoicesList = ({ invoices, state }: { invoices: Invoice[]; state: 'loading' | 'empty' | 'ready' }) => {
   const [hoverItemIndex, setHoverItemIndex] = useState<string | null>(null);