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

fix: admin theme #42

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: admin theme #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
db34612
fix: admin page theme
fmorency Nov 15, 2024
f87bb77
fix: tally close button render
fmorency Nov 15, 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';
34 changes: 16 additions & 18 deletions components/admins/components/validatorList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
<div className="flex justify-between items-center mb-4 min-h-[52px]">
<div className="flex items-center space-x-4">
<h2
className="text-black dark:text-white"
className="text-secondary-content"
style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
>
Validators
Expand All @@ -89,31 +89,27 @@
<input
type="text"
placeholder="Search for a validator..."
className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg:[#0000000A] dark:bg-[#FFFFFF1F] pl-10"
className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
<SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 " />
</div>
</div>
</div>
<div className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-[#0000000A] dark:bg-[#FFFFFF0F]">
<div className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-secondary">
<button
onClick={() => setActive(true)}
className={`flex-1 py-2 px-4 text-sm font-medium rounded-xl ${
active
? 'dark:bg-[#FFFFFF1F] bg-[#FFFFFF] text-[#161616] dark:text-white'
: 'text-[#808080]'
active ? 'bg-base-300 text-secondary-content' : 'text-gray-500'
}`}
>
Active
</button>
<button
onClick={() => setActive(false)}
className={`flex-1 py-2 px-4 text-sm font-medium rounded-xl ${
!active
? 'dark:bg-[#FFFFFF1F] bg-[#FFFFFF] text-[#161616] dark:text-white'
: 'text-[#808080]'
!active ? 'bg-base-300 text-secondary-content' : 'text-gray-500'
}`}
>
Pending
Expand Down Expand Up @@ -148,32 +144,32 @@
.fill(0)
.map((_, index) => (
<tr key={index}>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] w-1/6">
<td className="bg-secondary rounded-l-[12px] w-1/6">

Check warning on line 147 in components/admins/components/validatorList.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/components/validatorList.tsx#L147 

Added line #L147 was not covered by tests
<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] w-1/6">
<td className="bg-secondary w-1/6">

Check warning on line 153 in components/admins/components/validatorList.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/components/validatorList.tsx#L153 

Added line #L153 was not covered by tests
<div className="skeleton h-2 w-24"></div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6">
<td className="bg-secondary w-1/6">

Check warning on line 156 in components/admins/components/validatorList.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/components/validatorList.tsx#L156 

Added line #L156 was not covered by tests
<div className="skeleton h-2 w-8"></div>
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] w-1/6 rounded-r-[12px] text-right">
<td className="bg-secondary w-1/6 rounded-r-[12px] text-right">

Check warning on line 159 in components/admins/components/validatorList.tsx

View check run for this annotation

Codecov / codecov/patch

components/admins/components/validatorList.tsx#L159 

Added line #L159 was not covered by tests
<div className="skeleton h-2 w-8 ml-auto"></div>
</td>
Comment on lines +147 to 161
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add visual regression tests for loading state

While the loading UI implementation looks good, it lacks test coverage. Consider adding visual regression tests to ensure the loading state UI remains consistent across changes.

Would you like me to help generate visual regression tests using a tool like Playwright or Cypress?

🧰 Tools
🪛 GitHub Check: codecov/patch

[warning] 147-147: components/admins/components/validatorList.tsx#L147
Added line #L147 was not covered by tests

[warning] 153-153: components/admins/components/validatorList.tsx#L153
Added line #L153 was not covered by tests

[warning] 156-156: components/admins/components/validatorList.tsx#L156
Added line #L156 was not covered by tests

[warning] 159-159: components/admins/components/validatorList.tsx#L159
Added line #L159 was not covered by tests

</tr>
))
: filteredValidators.map(validator => (
<tr
key={validator.operator_address}
className="bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] text-black dark:text-white rounded-lg cursor-pointer"
className="group text-black dark:text-white rounded-lg cursor-pointer transition-colors"
onClick={() => handleRowClick(validator)}
role="row"
aria-label={`Validator ${validator.description.moniker}`}
>
<td className="rounded-l-[12px] py-4">
<td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] py-4">
<div className="flex items-center space-x-3">
{validator.logo_url ? (
<Image
Expand All @@ -193,14 +189,16 @@
</div>
</td>

<td className="py-4">
<td className="bg-secondary group-hover:bg-base-300 py-4">
<TruncatedAddressWithCopy
slice={10}
address={validator.operator_address}
/>
</td>
<td className="py-4">{validator.consensus_power?.toString() ?? 'N/A'}</td>
<td className="rounded-r-[12px] py-4 text-right">
<td className="bg-secondary group-hover:bg-base-300 py-4">
{validator.consensus_power?.toString() ?? 'N/A'}
</td>
<td className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] py-4 text-right">
<button
onClick={e => {
e.stopPropagation();
Expand Down
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">
Comment on lines 28 to +29
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove duplicate grid container structure

There are two nested div elements with almost identical grid classes, which creates unnecessary DOM depth.

Apply this diff to simplify the structure:

-    <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="grid grid-flow-col gap-5 mt-2 text-center auto-cols-max text-primary-content">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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="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
45 changes: 21 additions & 24 deletions components/groups/components/groupProposals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,15 +241,12 @@ 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">
<button
onClick={onBack}
className="btn btn-circle rounded-[16px] dark:bg-[#FFFFFF0F] bg-[#FFFFFF] btn-md"
>
<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] bg-secondary btn-md">
<ArrowRightIcon className="text-primary" />
</button>
<h1 className="text-2xl font-bold">{groupName}</h1>
<h1 className="text-2xl font-bold text-primary-content">{groupName}</h1>
<ProfileAvatar walletAddress={policyAddress} size={40} />
</div>
<div className="flex items-center space-x-4">
Expand All @@ -269,25 +266,25 @@ export default function GroupProposals({
</div>

{/* Search and New Proposal section */}
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold">Proposals</h2>
<div className="flex justify-between items-center mb-4">
<div className="flex items-center space-x-4">
<h2 className="text-xl font-semibold text-primary-content">Proposals</h2>
<div className="relative">
<input
type="text"
placeholder="Search for a group..."
className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-[#0000000A] dark:bg-[#FFFFFF1F] pl-10"
placeholder="Search for a proposal..."
className="input input-bordered w-[224px] h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 " />
</div>
<Link href={`/groups/submit-proposal/${policyAddress}`} passHref>
<button className="btn btn-gradient rounded-[12px] w-[140px] text-white h-[52px]">
New proposal
</button>
</Link>
</div>
<Link href={`/groups/submit-proposal/${policyAddress}`} passHref>
<button className="btn btn-gradient rounded-[12px] w-[140px] text-white h-[52px]">
New proposal
</button>
</Link>
</div>

{/* Table section - will fill remaining space */}
Expand Down Expand Up @@ -357,25 +354,25 @@ export default function GroupProposals({
<tr
key={proposal.id.toString()}
onClick={() => handleRowClick(proposal)}
className="hover:bg-base-200 text-black dark:text-white rounded-lg cursor-pointer"
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] 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="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="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%]">
{proposal.messages.length > 0
? proposal.messages.map((message, index) => (
<div key={index}>{getHumanReadableType((message as any)['@type'])}</div>
))
: 'No messages'}
</td>
<td className="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%]">
Comment on lines +357 to +375
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve table row keyboard accessibility

While the styling changes look good, the table rows should be keyboard accessible since they're clickable.

 <tr
   key={proposal.id.toString()}
   onClick={() => handleRowClick(proposal)}
+  onKeyDown={(e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleRowClick(proposal);
+    }
+  }}
+  role="button"
+  tabIndex={0}
   className="group text-black dark:text-white rounded-lg cursor-pointer"
 >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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] 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="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="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%]">
{proposal.messages.length > 0
? proposal.messages.map((message, index) => (
<div key={index}>{getHumanReadableType((message as any)['@type'])}</div>
))
: 'No messages'}
</td>
<td className="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%]">
key={proposal.id.toString()}
onClick={() => handleRowClick(proposal)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleRowClick(proposal);
}
}}
role="button"
tabIndex={0}
className="group text-black dark:text-white rounded-lg cursor-pointer"
>
<td className="bg-secondary group-hover:bg-base-300 rounded-l-[12px] px-4 py-4 w-[25%]">
{proposal.id.toString()}
</td>
<td className="bg-secondary group-hover:bg-base-300 truncate max-w-xs px-4 py-4 w-[25%]">
{proposal.title}
</td>
<td className="bg-secondary group-hover:bg-base-300 px-4 py-4 w-[25%]">
{timeLeft}
</td>
<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="bg-secondary group-hover:bg-base-300 rounded-r-[12px] px-4 py-4 w-[25%]">

{isTalliesLoading ? (
<span className="loading loading-spinner loading-xs"></span>
) : (
Expand All @@ -388,7 +385,7 @@ export default function GroupProposals({
</tbody>
</table>
) : (
<div className="text-center py-8 text-gray-500">No proposals found</div>
<div className="text-center py-8 text-gray-500">No proposal was found.</div>
)}
</div>

Expand Down
Loading
Loading