Skip to content

Commit

Permalink
fix: layout of voting history modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnthecat
johnthecat committed Feb 12, 2025
1 parent f4c72b3 commit 2959b88
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 103 deletions.
114 changes: 52 additions & 62 deletions src/renderer/features/governance/components/VotingHistory/VotingHistoryDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ import { type Referendum } from '@/shared/core';
import { useI18n } from '@/shared/i18n';
import { useModalClose } from '@/shared/lib/hooks';
import { cnTw } from '@/shared/lib/utils';
import { Button, FootnoteText, Icon, SmallTitleText, Tabs } from '@/shared/ui';
import { type TabItem } from '@/shared/ui/Tabs/common/types';
import { Modal } from '@/shared/ui-kit';
import { Button, FootnoteText, Icon, SmallTitleText } from '@/shared/ui';
import { Box, Modal, Tabs } from '@/shared/ui-kit';
import { voteHistoryAggregate } from '../../aggregates/voteHistory';

import { VoteCount } from './VoteCount';
Expand All @@ -23,7 +22,7 @@ export const VotingHistoryDialog = ({ referendum, onClose }: Props) => {

const { t } = useI18n();
const [showModal, closeModal] = useModalClose(true, onClose);
const [selectedTab, setSelectedTab] = useState(0);
const [selectedTab, setSelectedTab] = useState('aye');

const chain = useUnit(voteHistoryAggregate.$chain);

Expand All @@ -41,66 +40,57 @@ export const VotingHistoryDialog = ({ referendum, onClose }: Props) => {
const nays = useMemo(() => voteHistory.filter((history) => history.decision === 'nay'), [voteHistory]);
const abstain = useMemo(() => voteHistory.filter((history) => history.decision === 'abstain'), [voteHistory]);

const tabs: TabItem[] = [
{
id: 'ayes',
title: (
<span className="flex items-center gap-1">
<Icon name="thumbUp" size={16} className={cnTw(selectedTab === 0 && 'text-icon-positive')} />
<span>{t('governance.referendum.ayes')}</span>
<VoteCount count={ayes.length} loading={isLoading} />
</span>
),
panel: <VotingHistoryList chain={chain} asset={votingAsset} items={ayes} loading={isLoading} />,
},
{
id: 'nays',
title: (
<span className="flex items-center gap-1">
<Icon name="thumbDown" size={16} className={cnTw(selectedTab === 1 && 'text-icon-negative')} />
<span>{t('governance.referendum.nays')}</span>
<VoteCount count={nays.length} loading={isLoading} />
</span>
),
panel: <VotingHistoryList chain={chain} asset={votingAsset} items={nays} loading={isLoading} />,
},
{
id: 'abstain',
title: (
<span className="flex items-center gap-1">
<Icon name="minusCircle" size={16} />
<span>{t('governance.referendum.abstain')}</span>
<VoteCount count={abstain.length} loading={isLoading} />
</span>
),
panel: <VotingHistoryList chain={chain} asset={votingAsset} items={abstain} loading={isLoading} />,
},
];

return (
<Modal isOpen={showModal} size="md" height="fit" onToggle={closeModal}>
<Modal isOpen={showModal} size="md" height="lg" onToggle={closeModal}>
<Modal.Title close>{t('governance.voteHistory.title')}</Modal.Title>
<Modal.Content>
<section className="flex h-[450px] w-modal grow flex-col px-5 pt-4">
{hasError ? (
<div className="flex h-full flex-col items-center justify-center gap-2">
<Icon name="document" size={64} className="text-icon-default" />
<SmallTitleText className="mt-4">{t('governance.voteHistory.notAvailable')}</SmallTitleText>
<FootnoteText className="text-text-tertiary">
{t('governance.voteHistory.notAvailableDescription')}
</FootnoteText>
<Button
className="mt-2"
size="sm"
onClick={() => voteHistoryAggregate.events.requestVoteHistory({ referendum })}
>
{t('general.button.refreshButton')}
</Button>
</div>
) : (
<Tabs panelClassName="overflow-y-auto grow" items={tabs} onChange={setSelectedTab} />
)}
</section>
<Modal.Content disableScroll>
{hasError ? (
<div className="flex h-full flex-col items-center justify-center gap-2">
<Icon name="document" size={64} className="text-icon-default" />
<SmallTitleText className="mt-4">{t('governance.voteHistory.notAvailable')}</SmallTitleText>
<FootnoteText className="text-text-tertiary">
{t('governance.voteHistory.notAvailableDescription')}
</FootnoteText>
<Button
className="mt-2"
size="sm"
onClick={() => voteHistoryAggregate.events.requestVoteHistory({ referendum })}
>
{t('general.button.refreshButton')}
</Button>
</div>
) : (
<Tabs value={selectedTab} onChange={setSelectedTab}>
<Box padding={[4, 5, 0]} shrink={0}>
<Tabs.List>
<Tabs.Trigger value="aye">
<Icon name="thumbUp" size={16} className={cnTw(selectedTab === 'aye' && 'text-icon-positive')} />
<span>{t('governance.referendum.ayes')}</span>
<VoteCount count={ayes.length} loading={isLoading} />
</Tabs.Trigger>
<Tabs.Trigger value="nay">
<Icon name="thumbDown" size={16} className={cnTw(selectedTab === 'nay' && 'text-icon-negative')} />
<span>{t('governance.referendum.nays')}</span>
<VoteCount count={nays.length} loading={isLoading} />
</Tabs.Trigger>
<Tabs.Trigger value="abstain">
<Icon name="minusCircle" size={16} />
<span>{t('governance.referendum.abstain')}</span>
<VoteCount count={abstain.length} loading={isLoading} />
</Tabs.Trigger>
</Tabs.List>
</Box>
<Tabs.Content value="aye">
<VotingHistoryList chain={chain} asset={votingAsset} items={ayes} loading={isLoading} />
</Tabs.Content>
<Tabs.Content value="nay">
<VotingHistoryList chain={chain} asset={votingAsset} items={nays} loading={isLoading} />
</Tabs.Content>
<Tabs.Content value="abstain">
<VotingHistoryList chain={chain} asset={votingAsset} items={abstain} loading={isLoading} />
</Tabs.Content>
</Tabs>
)}
</Modal.Content>
</Modal>
);
Expand Down
79 changes: 39 additions & 40 deletions src/renderer/features/governance/components/VotingHistory/VotingHistoryList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { useDeferredList } from '@/shared/lib/hooks';
import { formatAsset, formatBalance, performSearch, toAccountId } from '@/shared/lib/utils';
import { BodyText, FootnoteText } from '@/shared/ui';
import { AccountExplorers, Address } from '@/shared/ui-entities';
import { SearchInput } from '@/shared/ui-kit';
import { Box, ScrollArea, SearchInput } from '@/shared/ui-kit';
import { type AggregatedVoteHistory } from '../../types/structs';

import { VotingHistoryListEmptyState } from './VotingHistoryListEmptyState';
Expand Down Expand Up @@ -38,46 +38,45 @@ export const VotingHistoryList = memo(({ items, asset, chain, loading }: Props)
const shouldRenderList = !shouldRenderLoader && deferredItems.length > 0;

return (
<div className="flex flex-col gap-6 pb-4 pt-6">
<SearchInput placeholder={t('governance.searchPlaceholder')} value={query} onChange={setQuery} />
<div className="min-h-0">
<div className="flex flex-col gap-2">
<div className="flex justify-between px-2">
<FootnoteText className="text-text-tertiary">{t('governance.voteHistory.listColumnAccount')}</FootnoteText>
<FootnoteText className="text-text-tertiary">
{t('governance.voteHistory.listColumnVotingPower')}
</FootnoteText>
</div>
<div className="flex flex-col gap-1">
{shouldRenderLoader && <VotingHistoryListPlaceholder />}
{shouldRenderEmptyState && <VotingHistoryListEmptyState />}
{shouldRenderList &&
deferredItems.map(({ voter, balance, votingPower, conviction, name }) => {
return (
<div key={`${voter}-${balance.toString()}-${conviction}`} className="flex gap-3 px-2 text-body">
<div className="flex min-w-0 shrink grow items-center gap-1">
<Address address={voter} title={name ?? ''} variant="truncate" showIcon />
<AccountExplorers accountId={toAccountId(voter)} chain={chain} />
</div>
<div className="flex shrink-0 basis-28 flex-col items-end gap-0.5">
<BodyText className="whitespace-nowrap">
{t('governance.voteHistory.totalVotesCount', {
value: formatBalance(votingPower, asset.precision).formatted,
})}
</BodyText>
<FootnoteText className="whitespace-nowrap text-text-tertiary">
{t('general.actions.multiply', {
value: formatAsset(balance, asset),
multiplier: conviction,
})}
</FootnoteText>
</div>
<Box fitContainer>
<Box padding={[6, 5]} shrink={0}>
<SearchInput placeholder={t('governance.searchPlaceholder')} value={query} onChange={setQuery} />
</Box>

<Box direction="row" horizontalAlign="space-between" padding={[0, 5, 2]} shrink={0}>
<FootnoteText className="text-text-tertiary">{t('governance.voteHistory.listColumnAccount')}</FootnoteText>
<FootnoteText className="text-text-tertiary">{t('governance.voteHistory.listColumnVotingPower')}</FootnoteText>
</Box>
<ScrollArea>
<div className="flex flex-col gap-1 px-3 pb-2">
{shouldRenderLoader && <VotingHistoryListPlaceholder />}
{shouldRenderEmptyState && <VotingHistoryListEmptyState />}
{shouldRenderList &&
deferredItems.map(({ voter, balance, votingPower, conviction, name }) => {
return (
<div key={`${voter}-${balance.toString()}-${conviction}`} className="flex gap-3 px-2 text-body">
<div className="flex min-w-0 shrink grow items-center gap-1">
<Address address={voter} title={name ?? ''} variant="truncate" showIcon />
<AccountExplorers accountId={toAccountId(voter)} chain={chain} />
</div>
<div className="flex shrink-0 basis-28 flex-col items-end gap-0.5">
<BodyText className="whitespace-nowrap">
{t('governance.voteHistory.totalVotesCount', {
value: formatBalance(votingPower, asset.precision).formatted,
})}
</BodyText>
<FootnoteText className="whitespace-nowrap text-text-tertiary">
{t('general.actions.multiply', {
value: formatAsset(balance, asset),
multiplier: conviction,
})}
</FootnoteText>
</div>
);
})}
</div>
</div>
);
})}
</div>
</div>
</div>
</ScrollArea>
</Box>
);
});
1 change: 1 addition & 0 deletions src/renderer/shared/ui-kit/ScrollArea/ScrollArea.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
--scroll-area-top-fade: 0px;
--scroll-area-bottom-fade: 0px;

contain: layout;
mask-image: linear-gradient(
to bottom,
transparent 0px,
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/shared/ui-kit/Tabs/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const Trigger = ({ value, disabled, children }: TriggerProps) => {
<RadixTabs.Trigger
value={value}
className={cnTw(
'flex w-full items-center justify-center rounded bg-transparent px-2 py-1.5 text-button-small text-text-secondary',
'flex w-full items-center justify-center gap-1 rounded bg-transparent px-2 py-1.5 text-button-small text-text-secondary',
'transition-all duration-100',
'data-[state=active]:bg-white data-[state=active]:text-text-primary data-[state=active]:shadow-card-shadow',
)}
Expand Down

0 comments on commit 2959b88

Please sign in to comment.