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: admin theme #42

Merged
merged 6 commits into from
Nov 22, 2024
Merged

fix: admin theme #42

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
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
86aa1e2
Merge remote-tracking branch 'origin/main' into fix-admin-theme
fmorency Nov 22, 2024
f9ca76f
fix: prettier
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
30 changes: 10 additions & 20 deletions components/admins/components/validatorList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default function ValidatorList({
<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' }}
>
Validators
Expand All @@ -88,7 +88,7 @@ export default function ValidatorList({
<input
type="text"
placeholder="Search for a validator..."
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"
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
Expand All @@ -99,27 +99,23 @@ export default function ValidatorList({
<div
role="tablist"
aria-label="Validator status filter"
className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-[#0000000A] dark:bg-[#FFFFFF0F]"
className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-secondary"
>
<button
onClick={() => setActive(true)}
role="tab"
aria-selected={active}
aria-controls="active-validators"
className={`flex-1 py-2 px-4 text-sm font-medium rounded-xl focus:outline-none focus:ring-1 focus:ring-primary/50 ${
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 focus:outline-none focus:ring-1 focus:ring-primary/50 ${
!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 @@ -198,19 +194,13 @@ export default function ValidatorList({
{filteredValidators.map(validator => (
<tr
key={validator.operator_address}
className="bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] focus:bg-[#FFFFFF] dark:focus:bg-[#FFFFFF26] text-black dark:text-white rounded-lg cursor-pointer focus:outline-none transition-colors"
className="group text-black dark:text-white rounded-lg cursor-pointer focus:outline-none transition-colors"
onClick={() => handleRowClick(validator)}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleRowClick(validator);
}
}}
tabIndex={0}
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 @@ -227,14 +217,14 @@ export default function ValidatorList({
</div>
</td>

<td className="py-4 hidden lg:table-cell">
<td className="py-4 bg-secondary group-hover:bg-base-300 hidden lg:table-cell">
<TruncatedAddressWithCopy slice={10} address={validator.operator_address} />
</td>
<td className="py-4 hidden md:table-cell">
<td className="py-4 bg-secondary group-hover:bg-base-300 hidden md:table-cell">
{validator.consensus_power?.toString() ?? 'N/A'}
</td>
<td
className="rounded-r-[12px] py-4 text-right"
className="bg-secondary group-hover:bg-base-300 rounded-r-[12px] py-4 text-right"
onClick={e => e.stopPropagation()}
>
<button
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ module.exports = {
'neutral-content': '#FFFFFF',
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix potential color visibility issue

The neutral-content color (#FFFFFF) matches the neutral color (#FFFFFF), which would make text invisible. This appears to be an oversight.

-          'neutral-content': '#FFFFFF',
+          'neutral-content': '#161616',
📝 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
'neutral-content': '#FFFFFF',
'neutral-content': '#161616',

'base-100': '#FFFFFF',
'base-200': '#F0F0FF',
'base-300': '#F6F6FF',
'base-300': '#F5F5F5',
'base-content': '#161616',
'tooltip-color': '#ffffff',
'background-color': '#F0F0FF',
Expand Down
Loading