LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update based on latest designs

Browse Source
This commit is contained in:
Bill He 2023-10-31 10:47:30 -07:00
parent 846c6ca608
commit 1823690299
No known key found for this signature in database
GPG Key ID: 73AEEF9D79E5BBF8
7 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Icon.tsx
View File

@ -24,10 +24,10 @@ import {
CommentIcon,
CopyIcon,
CubeIcon,
DiscordIcon,
DownloadIcon,
EtherscanIcon,
DepositIcon,
DepthChartIcon,
DiscordIcon,
EtherscanIcon,
ExportKeysIcon,
FeedbackIcon,
FileIcon,
@ -67,10 +67,10 @@ import {
TransferIcon,
TriangleIcon,
TryAgainIcon,
UploadIcon,
WarningIcon,
WebsiteIcon,
WhitepaperIcon,
WithdrawIcon,
} from '@/icons';
export enum IconName {
@ -95,9 +95,9 @@ export enum IconName {
Comment = 'Comment',
Copy = 'Copy',
Cube = 'Cube',
Deposit = 'Deposit',
DepthChart = 'DepthChart',
Discord = 'Discord',
Download = 'Download',
Etherscan = 'Etherscan',
ExportKeys = 'ExportKeys',
Feedback = 'Feedback',
@ -139,10 +139,10 @@ export enum IconName {
Transfer = 'Transfer',
Triangle = 'Triangle',
TryAgain = 'TryAgain',
Upload = 'Upload',
Warning = 'Warning',
Website = 'Website',
Whitepaper = 'Whitepaper',
Withdraw = 'Withdraw',
}
const icons = {
@ -167,9 +167,9 @@ const icons = {
[IconName.Comment]: CommentIcon,
[IconName.Copy]: CopyIcon,
[IconName.Cube]: CubeIcon,
[IconName.Deposit]: DepositIcon,
[IconName.DepthChart]: DepthChartIcon,
[IconName.Discord]: DiscordIcon,
[IconName.Download]: DownloadIcon,
[IconName.Etherscan]: EtherscanIcon,
[IconName.ExportKeys]: ExportKeysIcon,
[IconName.Feedback]: FeedbackIcon,
@ -210,10 +210,10 @@ const icons = {
[IconName.Transfer]: TransferIcon,
[IconName.Triangle]: TriangleIcon,
[IconName.TryAgain]: TryAgainIcon,
[IconName.Upload]: UploadIcon,
[IconName.Warning]: WarningIcon,
[IconName.Website]: WebsiteIcon,
[IconName.Whitepaper]: WhitepaperIcon,
[IconName.Withdraw]: WithdrawIcon,
} as Record<IconName, ElementType>;
type ElementProps = {

11
src/icons/deposit.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<g clip-path="url(#clip0_18204_36775)">
<path d="M13.2426 6.25736C14.0817 7.09647 14.6531 8.16557 14.8846 9.32946C15.1162 10.4933 14.9973 11.6997 14.5432 12.7961C14.0891 13.8925 13.32 14.8295 12.3334 15.4888C11.3467 16.1481 10.1866 16.5 8.99993 16.5C7.81324 16.5 6.6532 16.1481 5.66651 15.4888C4.67981 14.8295 3.91078 13.8925 3.45665 12.7961C3.00253 11.6997 2.88371 10.4933 3.11522 9.32946C3.34673 8.16557 3.91817 7.09647 4.75729 6.25736" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
<path d="M11.25 9L9 11.25M9 11.25L6.75 9M9 11.25V1.6875" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_18204_36775">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 886 B

6
src/icons/download.svg
View File

@ -1,6 +0,0 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame">
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M1.75 9.18753C1.86603 9.18753 1.97731 9.23362 2.05936 9.31567C2.14141 9.39772 2.1875 9.509 2.1875 9.62503V10.9375C2.1875 11.1696 2.27969 11.3922 2.44378 11.5562C2.60788 11.7203 2.83044 11.8125 3.0625 11.8125H10.9375C11.1696 11.8125 11.3921 11.7203 11.5562 11.5562C11.7203 11.3922 11.8125 11.1696 11.8125 10.9375V9.62503C11.8125 9.509 11.8586 9.39772 11.9406 9.31567C12.0227 9.23362 12.134 9.18753 12.25 9.18753C12.366 9.18753 12.4773 9.23362 12.5594 9.31567C12.6414 9.39772 12.6875 9.509 12.6875 9.62503V10.9375C12.6875 11.4017 12.5031 11.8468 12.1749 12.175C11.8467 12.5032 11.4016 12.6875 10.9375 12.6875H3.0625C2.59837 12.6875 2.15325 12.5032 1.82506 12.175C1.49687 11.8468 1.3125 11.4017 1.3125 10.9375V9.62503C1.3125 9.509 1.35859 9.39772 1.44064 9.31567C1.52269 9.23362 1.63397 9.18753 1.75 9.18753Z" fill="#C8C7D8"/>
<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M6.69078 9.93458C6.77282 10.0165 6.88401 10.0625 6.99995 10.0625C7.11589 10.0625 7.22709 10.0165 7.30912 9.93458L9.93412 7.30958C10.0114 7.22665 10.0535 7.11695 10.0515 7.00361C10.0495 6.89027 10.0036 6.78213 9.9234 6.70197C9.84324 6.62181 9.7351 6.5759 9.62176 6.5739C9.50841 6.5719 9.39872 6.61397 9.31578 6.69125L7.43745 8.56958V1.75041C7.43745 1.63438 7.39136 1.5231 7.30931 1.44106C7.22726 1.35901 7.11598 1.31291 6.99995 1.31291C6.88392 1.31291 6.77264 1.35901 6.69059 1.44106C6.60855 1.5231 6.56245 1.63438 6.56245 1.75041V8.56958L4.68412 6.69125C4.60118 6.61397 4.49149 6.5719 4.37815 6.5739C4.2648 6.5759 4.15666 6.62181 4.07651 6.70197C3.99635 6.78213 3.95043 6.89027 3.94843 7.00361C3.94643 7.11695 3.9885 7.22665 4.06578 7.30958L6.69078 9.93458Z" fill="#C8C7D8"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

4
src/icons/index.ts
View File

@ -19,9 +19,9 @@ export { default as CoinsIcon } from './coins.svg';
export { default as CommentIcon } from './comment.svg';
export { default as CopyIcon } from './copy.svg';
export { default as CubeIcon } from './cube.svg';
export { default as DepositIcon } from './deposit.svg';
export { default as DepthChartIcon } from './depth-chart.svg';
export { default as DiscordIcon } from './discord.svg';
export { default as DownloadIcon } from './download.svg';
export { default as ExportKeysIcon } from './export-keys.svg';
export { default as FeedbackIcon } from './feedback.svg';
export { default as FileIcon } from './file.svg';
@ -59,8 +59,8 @@ export { default as TradeIcon } from './trade.svg';
export { default as TransferIcon } from './transfer.svg';
export { default as TriangleIcon } from './triangle.svg';
export { default as TryAgainIcon } from './try-again.svg';
export { default as UploadIcon } from './upload.svg';
export { default as WarningIcon } from './warning.svg';
export { default as WithdrawIcon } from './withdraw.svg';
// Wallets
export { default as BitkeepIcon } from './wallets/bitkeep.svg';

3
src/icons/upload.svg
View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.69083 1.44088C6.77286 1.35895 6.88406 1.31293 7 1.31293C7.11594 1.31293 7.22713 1.35895 7.30917 1.44088L9.93417 4.06588C10.0114 4.14881 10.0535 4.25851 10.0515 4.37185C10.0495 4.48519 10.0036 4.59333 9.92345 4.67349C9.84329 4.75365 9.73515 4.79956 9.6218 4.80156C9.50846 4.80356 9.39877 4.76149 9.31583 4.68421L7.4375 2.80588V9.62504C7.4375 9.74108 7.39141 9.85236 7.30936 9.9344C7.22731 10.0164 7.11603 10.0625 7 10.0625C6.88397 10.0625 6.77269 10.0164 6.69064 9.9344C6.60859 9.85236 6.5625 9.74108 6.5625 9.62504V2.80588L4.68417 4.68421C4.60123 4.76149 4.49154 4.80356 4.3782 4.80156C4.26485 4.79956 4.15671 4.75365 4.07655 4.67349C3.9964 4.59333 3.95048 4.48519 3.94848 4.37185C3.94648 4.25851 3.98855 4.14881 4.06583 4.06588L6.69083 1.44088ZM1.75 9.18754C1.86603 9.18754 1.97731 9.23364 2.05936 9.31568C2.14141 9.39773 2.1875 9.50901 2.1875 9.62504V10.9375C2.1875 11.1696 2.27969 11.3922 2.44378 11.5563C2.60788 11.7204 2.83044 11.8125 3.0625 11.8125H10.9375C11.1696 11.8125 11.3921 11.7204 11.5562 11.5563C11.7203 11.3922 11.8125 11.1696 11.8125 10.9375V9.62504C11.8125 9.50901 11.8586 9.39773 11.9406 9.31568C12.0227 9.23364 12.134 9.18754 12.25 9.18754C12.366 9.18754 12.4773 9.23364 12.5594 9.31568C12.6414 9.39773 12.6875 9.50901 12.6875 9.62504V10.9375C12.6875 11.4017 12.5031 11.8468 12.1749 12.175C11.8467 12.5032 11.4016 12.6875 10.9375 12.6875H3.0625C2.59837 12.6875 2.15325 12.5032 1.82506 12.175C1.49687 11.8468 1.3125 11.4017 1.3125 10.9375V9.62504C1.3125 9.50901 1.35859 9.39773 1.44064 9.31568C1.52269 9.23364 1.63397 9.18754 1.75 9.18754Z" fill="#C8C7D8"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

4
src/icons/withdraw.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M13.2426 6.2573C14.0817 7.09641 14.6531 8.16551 14.8846 9.3294C15.1162 10.4933 14.9973 11.6997 14.5432 12.796C14.0891 13.8924 13.32 14.8295 12.3334 15.4888C11.3467 16.148 10.1866 16.4999 8.99993 16.4999C7.81324 16.4999 6.6532 16.148 5.66651 15.4888C4.67981 14.8295 3.91078 13.8924 3.45665 12.796C3.00253 11.6997 2.88371 10.4933 3.11522 9.3294C3.34673 8.16551 3.91817 7.09641 4.75729 6.2573" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
<path d="M11.25 2.9375L9 0.6875M9 0.6875L6.75 2.9375M9 0.6875V10.25" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 723 B

30
src/views/menus/AccountMenu.tsx
View File

@ -224,29 +224,23 @@ const AssetActions = memo(
}) => (
<Styled.InlineRow>
{[
// TODO(@rosepuppy): Add withdraw action for USDC
{
dialogType: DialogTypes.Receive,
dialogProps: { selectedAsset: asset },
iconName: IconName.Qr,
withOnboarding && {
dialogType: DialogTypes.Withdraw,
iconName: IconName.Withdraw,
},
withOnboarding && {
dialogType: DialogTypes.Deposit,
iconName: IconName.Deposit,
},
{
dialogType: DialogTypes.Transfer,
dialogProps: { selectedAsset: asset },
iconName: IconName.Send,
},
withOnboarding && {
dialogType: DialogTypes.Withdraw,
iconName: IconName.Upload,
},
withOnboarding && {
dialogType: DialogTypes.Deposit,
iconName: IconName.Download,
},
]
.filter(isTruthy)
.map(({ iconName, dialogType, dialogProps }) => (
<IconButton
<Styled.IconButton
key={dialogType}
action={ButtonAction.Base}
shape={ButtonShape.Square}
@ -273,10 +267,6 @@ Styled.Column = styled.div`
Styled.InlineRow = styled.div`
${layoutMixins.inlineRow}
flex-wrap: wrap;
width: calc(1.75rem * 2 + 0.5ch);
min-width: 0;
`;
Styled.AddressRow = styled.div`
@ -378,3 +368,7 @@ Styled.ConnectToChain = styled(Styled.Column)`
font: var(--font-small-book);
}
`;
Styled.IconButton = styled(IconButton)`
--button-padding: 0 0.25rem;
`;