Skip to content

Commit

Permalink
Merge pull request #1276 from internxt/fix/design-workspace-issues
Browse files Browse the repository at this point in the history 
[PB-2262]: fix/design workspace issues
  • Loading branch information
@masterprog-cmd
masterprog-cmd authored Oct 1, 2024
2 parents 3f6f22b + d290615 commit 348891d
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 40 deletions.
4 changes: 2 additions & 2 deletions src/app/newSettings/Sections/Workspace/Members/MembersSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand All @@ -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)}
Expand Down
33 changes: 22 additions & 11 deletions src/app/newSettings/Sections/Workspace/Members/components/UserCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface UserProps {
avatarsrc: string | null;
styleOptions?: {
avatarDiameter?: number;
containerClassName?: string;
nameStyle: string;
emailStyle: string;
rolePosition: 'row' | 'column';
Expand All @@ -21,23 +22,33 @@ 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 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 ?? '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>
);
Expand Down
9 changes: 5 additions & 4 deletions src/app/newSettings/Sections/Workspace/Members/containers/MemberDetailsContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -161,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)}
Expand All @@ -172,22 +173,22 @@ 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>
)}
{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>
Expand Down
3 changes: 1 addition & 2 deletions src/app/newSettings/Sections/Workspace/Overview/OverviewSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 2 additions & 10 deletions src/app/newSettings/Sections/Workspace/Teams/components/TeamDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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')}
Expand All @@ -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"
Expand Down
22 changes: 11 additions & 11 deletions src/app/newSettings/components/Invoices/InvoicesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}`}
Expand All @@ -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)}
Expand All @@ -120,16 +120,16 @@ const InvoiceAmountColumn = ({
}: 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)}
>
Expand Down

0 comments on commit 348891d

Please sign in to comment.