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

fix: group & proposal theme and layout #41

Merged
merged 8 commits into from
Nov 22, 2024
Merged

fix: group & proposal theme and layout #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fd7c320
fix: group & proposal theme and layout
fmorency Nov 14, 2024
1c22999
fix: parent container overflow
fmorency Nov 14, 2024
8901001
fix: tally close button render
fmorency Nov 15, 2024
16c9c64
fix: alignment
fmorency Nov 15, 2024
abb9199
test: vote detail modal
fmorency Nov 18, 2024
ac26717
Merge remote-tracking branch 'origin/main' into proposal-english
fmorency Nov 22, 2024
ad1854d
fix: merge
fmorency Nov 22, 2024
d096049
fix: test
fmorency Nov 22, 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
47 changes: 0 additions & 47 deletions components/admins/components/__tests__/adminOptions.test.tsx
View file
Open in desktop

This file was deleted.

71 changes: 0 additions & 71 deletions components/admins/components/adminOptions.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion components/admins/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export * from './adminOptions';
export * from './stakingParams';
export * from './validatorList';
4 changes: 2 additions & 2 deletions components/groups/components/CountdownTimer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ export default function CountdownTimer({ endTime }: { endTime: Date }) {

return (
<div className="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max">
<div className="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max">
<div className="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max text-primary-content">
<div className="flex flex-col">
<span className="countdown text-xl">
<span className="countdown text-xl">
<span
style={{ '--value': timeLeft.days } as React.CSSProperties}
aria-label="days"
Expand Down
2 changes: 1 addition & 1 deletion components/groups/components/__tests__/groupProposals.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ describe('ProposalsForPolicy Component', () => {
}),
}));
renderWithChainProvider(<ProposalsForPolicy {...mockProps} />);
expect(screen.getByText('No proposals found')).toBeInTheDocument();
expect(screen.getByText('No proposal was found.')).toBeInTheDocument();
});

test('renders proposals list correctly', () => {
Expand Down
41 changes: 18 additions & 23 deletions components/groups/components/groupProposals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,16 +237,16 @@ export default function GroupProposals({
return (
<div className="h-full flex flex-col p-4">
{/* Header section */}
<div className="flex items-center justify-between mb-8">
<div className="flex items-center space-x-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center space-x-4">
<button
onClick={onBack}
className="btn btn-circle rounded-[16px] dark:bg-[#FFFFFF0F] bg-[#FFFFFF] btn-md focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
className="btn btn-circle rounded-[12px] bg-secondary btn-md focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
aria-label="Go back to groups list"
>
<ArrowRightIcon className="text-primary" />
</button>
<h1 className="text-2xl font-bold truncate">{groupName}</h1>
<h1 className="text-2xl font-bold text-primary-content truncate">{groupName}</h1>
<div className="hidden sm:block">
<ProfileAvatar walletAddress={policyAddress} size={40} />
</div>
Expand All @@ -256,12 +256,12 @@ export default function GroupProposals({
{/* Search and New Proposal section */}
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
<h2 className="text-xl font-semibold">Proposals</h2>
<h2 className="text-xl font-semibold text-primary-content">Proposals</h2>
<div className="relative w-full sm:w-[224px]">
<input
type="text"
placeholder="Search for a proposal..."
className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-[#0000000A] dark:bg-[#FFFFFF1F] pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
aria-label="Search proposals"
Expand Down Expand Up @@ -372,30 +372,25 @@ export default function GroupProposals({
<tr
key={proposal.id.toString()}
onClick={() => handleRowClick(proposal)}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleRowClick(proposal);
}
}}
className="hover:bg-base-200 text-black dark:text-white rounded-lg cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset"
tabIndex={0}
role="button"
aria-label={`View proposal: ${proposal.title}`}
className="group text-black dark:text-white rounded-lg cursor-pointer"
>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] px-4 py-4 w-[25%]">
<td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] px-4 py-4 w-[25%]">
{proposal.id.toString()}
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] md:rounded-r-none truncate max-w-xs px-4 py-4 w-[25%]">
<td className="bg-secondary group-hover:bg-base-300 truncate max-w-xs px-4 py-4 w-[25%]">
{proposal.title}
</td>
<td className=" hidden md:table-cell dark:bg-[#FFFFFF0F] bg-[#FFFFFF] px-4 py-4 w-[25%]">
<td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[25%]">
{timeLeft}
</td>
<td className="hidden md:table-cell dark:bg-[#FFFFFF0F] bg-[#FFFFFF] px-4 py-4 w-[25%]">
{getHumanReadableType((proposal.messages[0] as any)['@type'])}
<td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[25%]">
{proposal.messages.length > 0
? proposal.messages.map((message, index) => (
<div key={index}>{getHumanReadableType((message as any)['@type'])}</div>
))
: 'No messages'}
</td>
<td className="hidden md:table-cell dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] px-4 py-4 w-[25%]">
<td className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] px-4 py-4 w-[25%]">
{isTalliesLoading ? (
<span
className="loading loading-spinner loading-xs"
Expand All @@ -413,7 +408,7 @@ export default function GroupProposals({
</table>
) : (
<div className="text-center py-8 text-gray-500" role="status">
No proposals found
No proposal was found.
</div>
)}
<div className="block md:hidden mt-8">
Expand Down
65 changes: 28 additions & 37 deletions components/groups/components/myGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
<h1
className="text-black dark:text-white"
className="text-secondary-content"
style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
>
My groups
Expand All @@ -129,7 +129,7 @@
<input
type="text"
placeholder="Search for a group..."
className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-[#0000000A] dark:bg-[#FFFFFF1F] pl-10"
className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
aria-label="Search groups"
Expand Down Expand Up @@ -167,37 +167,37 @@
.fill(0)
.map((_, index) => (
<tr key={index} data-testid="skeleton-row">
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] ">
<td className="bg-secondary rounded-l-[12px] ">
<div className="flex items-center space-x-3">
<div className="skeleton w-10 h-8 rounded-full shrink-0"></div>
<div className="skeleton h-3 w-24"></div>
</div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] hidden xl:table-cell">
<td className="bg-secondary hidden xl:table-cell">
<div className="skeleton h-2 w-8"></div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] hidden sm:table-cell">
<td className="bg-secondary hidden sm:table-cell">
<div className="skeleton h-2 w-16"></div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] hidden xl:table-cell">
<td className="bg-secondary hidden xl:table-cell">
<div className="skeleton h-2 w-20"></div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] hidden lg:table-cell">
<td className="bg-secondary hidden lg:table-cell">
<div className="skeleton h-2 w-32"></div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] w-1/6">
<td className="bg-secondary rounded-r-[12px] w-1/6">
<div className="flex space-x-2 justify-end">
<button
className="btn btn-sm btn-outline btn-square btn-info"
className="btn btn-md btn-outline btn-square btn-info"
disabled
>
<PiInfo className="w-5 h-5 text-current opacity-50" />
<PiInfo className="w-7 h-7 text-current opacity-50" />
</button>
<button
className="btn btn-sm btn-outline btn-square btn-primary"
className="btn btn-md btn-outline btn-square btn-primary"
disabled
>
<MemberIcon className="w-5 h-5 text-current opacity-50" />
<MemberIcon className="w-7 h-7 text-current opacity-50" />
</button>
</div>
</td>
Expand Down Expand Up @@ -325,8 +325,9 @@

return (
<tr
className="hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] dark:bg-[#FFFFFF0F] bg-[#FFFFFF] text-black dark:text-white rounded-lg cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset"
onClick={() => {
className="group text-black dark:text-white rounded-lg cursor-pointer"
onClick={e => {
e.stopPropagation();
onSelectGroup(
policyAddress,
groupName,
Expand All @@ -335,64 +336,54 @@
'0'
);
}}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onSelectGroup(
policyAddress,
groupName,
(group.policies &&
(group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)?.threshold) ??
'0'
);
}
}}
tabIndex={0}
role="button"
aria-label={`Select ${groupName} group`}
>
<td className="rounded-l-[12px] w-1/6">
<td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] w-1/6">
<div className="flex items-center space-x-3">
<ProfileAvatar walletAddress={policyAddress} />
<span className="font-medium">{truncateString(groupName, 24)}</span>
</div>
</td>
<td className="hidden xl:table-cell w-1/6">
<td className="bg-secondary group-hover:bg-base-300 hidden xl:table-cell w-1/6">
{activeProposals.length > 0 ? (
<span className="badge badge-primary badge-sm">{activeProposals.length}</span>
<span className="badge badge-primary badge-sm text-neutral-content">
{activeProposals.length}

Check warning on line 352 in components/groups/components/myGroups.tsx

View check run for this annotation

Codecov / codecov/patch

components/groups/components/myGroups.tsx#L351-L352 

Added lines #L351 - L352 were not covered by tests
</span>
) : (
'-'
)}
</td>
<td className="hidden sm:table-cell w-1/6">
<td className="bg-secondary group-hover:bg-base-300 hidden sm:table-cell w-1/6">
{Number(shiftDigits(balance?.amount ?? '0', -6)).toLocaleString(undefined, {
maximumFractionDigits: 6,
})}{' '}
MFX
</td>
<td className="hidden xl:table-cell w-1/6">
<td className="bg-secondary group-hover:bg-base-300 hidden xl:table-cell w-1/6">
{`${(group.policies?.[0]?.decision_policy as ThresholdDecisionPolicySDKType)?.threshold ?? '0'} / ${group.total_weight ?? '0'}`}
</td>
<td className="hidden lg:table-cell w-1/6">
<td className="bg-secondary group-hover:bg-base-300 hidden lg:table-cell w-1/6">
<div onClick={e => e.stopPropagation()}>
<TruncatedAddressWithCopy address={policyAddress} slice={12} />
</div>
</td>
<td className="rounded-r-[12px] sm:rounded-l-none w-1/6">
<td className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] sm:rounded-l-none w-1/6">
<div className="flex space-x-2 justify-end">
<button
className="btn btn-sm btn-outline btn-square btn-info group"
className="btn btn-md bg-base-300 text-primary btn-square group-hover:bg-secondary hover:outline hover:outline-primary hover:outline-1 outline-none"
onClick={openInfoModal}
aria-label={`View info for ${groupName}`}
>
<PiInfo className="w-5 h-5 text-current group-hover:text-white" />
<PiInfo className="w-7 h-7 text-current" />
</button>
<button
className="btn btn-sm btn-outline btn-square btn-primary group"
className="btn btn-md bg-base-300 text-primary btn-square group-hover:bg-secondary hover:outline hover:outline-primary hover:outline-1 outline-none"
onClick={openMemberModal}
aria-label={`Manage members for ${groupName}`}
>
<MemberIcon className="w-5 h-5 text-current group-hover:text-white" />
<MemberIcon className="w-7 h-7 text-current" />
</button>
</div>
</td>
Expand Down
2 changes: 1 addition & 1 deletion components/groups/forms/proposals/ConfirmationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ export default function ConfirmationForm({
proposers: [formData.proposers],
title: formData.title,
summary: formData.metadata.summary,
exec: 1,
exec: 0, // For now
});
const fee = await estimateFee(address ?? '', [msg]);
await tx([msg], {
Expand Down
Loading
Loading