Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[PB-2262]: fix/design workspace issues #1276

Merged
merged 6 commits into from
Oct 1, 2024
Merged

[PB-2262]: fix/design workspace issues #1276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3eb07b4
feat: redirect the user to teams subSection
masterprog-cmd Sep 13, 2024
964b61f
fix: user card in members
masterprog-cmd Sep 13, 2024
9362fd7
fix: invoices card style
masterprog-cmd Sep 13, 2024
f576b8c
fix: member details dialog and team labels for members
masterprog-cmd Sep 13, 2024
e1ce8b8
Merge branch 'release/2.7.0' into fix/design-workspace-issues
masterprog-cmd Oct 1, 2024
d290615
fix: import the service
masterprog-cmd Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/newSettings/Sections/Workspace/Members/MembersSection.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading