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

feat: dark mode for my wallet page #259

Merged
merged 14 commits into from
Oct 23, 2023
Merged

feat: dark mode for my wallet page #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
968d11d
feat: dark mode for my wallet table
patricio0312rev Oct 20, 2023
5e7c8b9
feat: dark mode for table cell
patricio0312rev Oct 20, 2023
e7cf569
feat: dark mode for table row
patricio0312rev Oct 20, 2023
0aac182
feat: dark mode for table header
patricio0312rev Oct 20, 2023
b3d0c7e
feat: dark mode for wallet token table
patricio0312rev Oct 20, 2023
1fc7e17
feat: dark mode for price change
patricio0312rev Oct 20, 2023
8bf0d56
fix: collection activity table
patricio0312rev Oct 20, 2023
0b9892b
feat: dark mode for balance header skeleton
patricio0312rev Oct 20, 2023
e7505c0
feat: dark mode for balance header
patricio0312rev Oct 20, 2023
6a0d9f7
feat: dark mode for balance header mobile skeleton
patricio0312rev Oct 20, 2023
432a332
feat: dark mode for balance header mobile
patricio0312rev Oct 20, 2023
5c5553a
feat: dark mode for donut chart
patricio0312rev Oct 20, 2023
803a67f
feat: dark mode for donut graph
patricio0312rev Oct 20, 2023
b84948b
feat: dark mode for portfolio breakdown table
patricio0312rev Oct 20, 2023
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
19 changes: 12 additions & 7 deletions resources/js/Components/BalanceHeader/BalanceHeader.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
<>
<div
data-testid="BalanceHeaderSkeleton"
className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 sm:block xl:flex"
className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 dark:border-theme-dark-700 sm:block xl:flex"
>
<div className="flex w-auto justify-between pb-3 xl:justify-start xl:divide-x xl:divide-theme-secondary-300 xl:pb-0">
<div className="flex divide-x divide-theme-secondary-300 font-medium">
<div className="flex w-auto justify-between pb-3 xl:justify-start xl:divide-x xl:divide-theme-secondary-300 xl:pb-0 dark:xl:divide-theme-dark-700">
<div className="flex divide-x divide-theme-secondary-300 font-medium dark:xl:divide-theme-dark-700">
<div className="pr-4">
<div className="text-sm text-theme-secondary-500">{t("common.my_balance")}</div>
<div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
{t("common.my_balance")}
</div>
<Skeleton
className="mt-1 h-6"
width={91}
Expand All @@ -25,7 +27,9 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
</div>

<div className="px-4">
<div className="text-sm text-theme-secondary-500">{t("common.tokens")}</div>
<div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
{t("common.tokens")}
</div>
<Skeleton
className="mt-1 h-6"
width={30}
Expand All @@ -35,7 +39,7 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
</div>

<div className="pl-4 font-medium">
<div className="text-right text-sm text-theme-secondary-500 xl:text-left">
<div className="text-right text-sm text-theme-secondary-500 dark:text-theme-dark-300 xl:text-left">
{t("common.my_address")}
</div>

Expand Down Expand Up @@ -159,13 +163,14 @@ export const BalanceHeaderSkeleton = ({ animated }: { animated: boolean }): JSX.
</div>
</div>

<div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300">
<div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300 dark:xl:border-theme-dark-700">
<LinkButton
data-testid="BalanceHeader__more-details"
className={cn(
"transition-default rounded-full text-sm font-medium leading-5.5 text-theme-primary-600 underline decoration-transparent underline-offset-2 outline-none",
"hover:text-theme-primary-700 hover:decoration-theme-primary-700",
"outline-offset-4 focus-visible:outline-3 focus-visible:outline-theme-primary-300",
"dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
)}
>
{t("common.more_details")}
Expand Down
25 changes: 15 additions & 10 deletions resources/js/Components/BalanceHeader/BalanceHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,15 @@ export const BalanceHeader = ({
<>
<div
data-testid="BalanceHeader"
className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 sm:block xl:flex"
className="hidden items-center justify-between whitespace-nowrap rounded-xl border border-theme-secondary-300 px-6 py-4 dark:border-theme-dark-700 sm:block xl:flex"
>
<div className="flex w-auto justify-between xl:justify-start xl:divide-x xl:divide-theme-secondary-300">
<div className="flex divide-x divide-theme-secondary-300 font-medium">
<div className="flex w-auto justify-between xl:justify-start xl:divide-x xl:divide-theme-secondary-300 dark:xl:divide-theme-dark-700">
<div className="flex divide-x divide-theme-secondary-300 font-medium dark:divide-theme-dark-700">
<div className="pr-4">
<div className="text-sm text-theme-secondary-500">{t("common.my_balance")}</div>
<div className="text-lg text-theme-secondary-900">
<div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
{t("common.my_balance")}
</div>
<div className="text-lg text-theme-secondary-900 dark:text-theme-dark-50">
<DynamicBalance
balance={balance}
currency={currency}
Expand All @@ -64,17 +66,19 @@ export const BalanceHeader = ({
</div>

<div className="px-4">
<div className="text-sm text-theme-secondary-500">{t("common.tokens")}</div>
<div className="text-lg text-theme-secondary-900">{tokens}</div>
<div className="text-sm text-theme-secondary-500 dark:text-theme-dark-300">
{t("common.tokens")}
</div>
<div className="text-lg text-theme-secondary-900 dark:text-theme-dark-50">{tokens}</div>
</div>
</div>

<div className="pl-4 font-medium">
<div className="text-right text-sm text-theme-secondary-500 xl:text-left">
<div className="text-right text-sm text-theme-secondary-500 dark:text-theme-dark-300 xl:text-left">
{t("common.my_address")}
</div>

<div className="flex items-center text-right text-lg text-theme-secondary-900 xl:text-left">
<div className="flex items-center text-right text-lg text-theme-secondary-900 dark:text-theme-dark-50 xl:text-left">
<TruncateMiddle
length={16}
text={address}
Expand Down Expand Up @@ -106,7 +110,7 @@ export const BalanceHeader = ({
/>
</div>

<div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300">
<div className="ml-4 flex pl-4 text-sm xl:border-l xl:border-theme-secondary-300 dark:xl:border-theme-dark-700">
<LinkButton
data-testid="BalanceHeader__more-details"
onClick={() => {
Expand All @@ -118,6 +122,7 @@ export const BalanceHeader = ({
"outline-none outline-3 outline-offset-4",
"hover:text-theme-primary-700 hover:decoration-theme-primary-700",
"focus-visible:outline-theme-primary-300",
"dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
)}
>
{t("common.more_details")}
Expand Down
13 changes: 9 additions & 4 deletions resources/js/Components/BalanceHeader/BalanceHeaderMobile.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })

return (
<div data-testid="BalanceHeaderMobileSkeleton">
<div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5">
<div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5 dark:bg-theme-dark-950">
<div className="flex w-full items-center justify-between">
<div className="flex text-sm font-medium">
<span className="mr-1 text-theme-secondary-700">{t("common.my_address")}:</span>
<span className="mr-1 text-theme-secondary-700 dark:text-theme-dark-200">
{t("common.my_address")}:
</span>
<Skeleton
height={15}
width={100}
Expand All @@ -30,7 +32,9 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })

<div className="flex flex-col items-center space-y-4 text-center">
<div>
<div className="text-sm font-medium text-theme-secondary-500">{t("common.my_balance")}</div>
<div className="text-sm font-medium text-theme-secondary-500 dark:text-theme-dark-300">
{t("common.my_balance")}
</div>
<div className="text-2xl font-medium text-theme-secondary-900">
<Skeleton
height={32}
Expand Down Expand Up @@ -69,7 +73,7 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })

<div className="mt-2 flex items-center justify-between">
<div className="flex space-x-2">
<p className="text-sm font-medium leading-5.5 text-theme-secondary-700">
<p className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
{t("common.tokens")}:
</p>

Expand All @@ -86,6 +90,7 @@ export const BalanceHeaderMobileSkeleton = ({ animated }: { animated: boolean })
"transition-default rounded-sm border-b border-transparent text-sm font-medium leading-none text-theme-primary-600 outline-none ",
"hover:border-theme-primary-700 hover:text-theme-primary-700",
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-theme-primary-300 focus-visible:ring-offset-2",
"dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
)}
>
{t("common.more_details")}
Expand Down
22 changes: 14 additions & 8 deletions resources/js/Components/BalanceHeader/BalanceHeaderMobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,13 @@ export const BalanceHeaderMobile = ({

return (
<div data-testid="BalanceHeaderMobile">
<div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5">
<div className="-mx-6 -mt-6 mb-6 flex bg-theme-secondary-50 px-6 py-2.5 dark:bg-theme-dark-950">
<div className="flex w-full items-center justify-between">
<div className="text-sm font-medium">
<span className="mr-1 text-theme-secondary-700">{t("common.my_address")}:</span>
<span>
<span className="mr-1 text-theme-secondary-700 dark:text-theme-dark-200">
{t("common.my_address")}:
</span>
<span className="dark:text-theme-dark-50">
<TruncateMiddle
length={10}
text={address}
Expand All @@ -45,7 +47,7 @@ export const BalanceHeaderMobile = ({
<Clipboard text={address}>
<button type="button">
<Icon
className="text-theme-primary-600"
className="text-theme-primary-600 dark:text-theme-primary-400"
name="Copy"
size="md"
/>
Expand All @@ -56,8 +58,10 @@ export const BalanceHeaderMobile = ({

<div className="flex flex-col items-center space-y-4">
<div className="space-y-0.5 text-center font-medium">
<p className="text-sm leading-5.5 text-theme-secondary-500">{t("common.my_balance")}</p>
<p className="text-2xl text-theme-secondary-900">
<p className="text-sm leading-5.5 text-theme-secondary-500 dark:text-theme-dark-300">
{t("common.my_balance")}
</p>
<p className="text-2xl text-theme-secondary-900 dark:text-theme-dark-50">
<FormatFiat
value={balance}
currency={currency}
Expand All @@ -76,8 +80,9 @@ export const BalanceHeaderMobile = ({
<PortfolioBreakdownLine assets={assets} />

<div className="mt-2 flex items-center justify-between">
<p className="text-sm font-medium leading-5.5 text-theme-secondary-700">
{t("common.tokens")}: <span className="text-theme-secondary-900">{assets.length}</span>
<p className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
{t("common.tokens")}:{" "}
<span className="text-theme-secondary-900 dark:text-theme-dark-50">{assets.length}</span>
</p>

<LinkButton
Expand All @@ -89,6 +94,7 @@ export const BalanceHeaderMobile = ({
"transition-default rounded-sm border-b border-transparent text-sm font-medium leading-none text-theme-primary-600 outline-none ",
"hover:border-theme-primary-700 hover:text-theme-primary-700",
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-theme-primary-300 focus-visible:ring-offset-2",
"dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
)}
>
{t("common.more_details")}
Expand Down
2 changes: 1 addition & 1 deletion ...rces/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,7 +713,7 @@ export const CollectionActivityTableItem = ({
<TableRow
data-testid="ActivityTable__Row"
borderClass={cn(
"group border-b border-theme-secondary-300 border-dashed",
"group border-b border-theme-secondary-300 border-dashed dark:border-theme-dark-700",
hasBorderBottom ? "last:border-b-[5px] last:border-solid" : "last:border-b-0",
)}
>
Expand Down
4 changes: 2 additions & 2 deletions resources/js/Components/Graphs/DonutGraph/DonutGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const DonutGraph = ({ data, size, renderTooltip, children }: DonutGraphPr
{...circleProperties}
id={`circleTrackLine__${index}`}
data-testid="DonutGraph__item-track-line"
className="stroke-theme-secondary-300"
className="stroke-theme-secondary-300 dark:stroke-theme-dark-700"
strokeWidth={2}
pointerEvents="none"
/>
Expand Down Expand Up @@ -63,7 +63,7 @@ export const DonutGraph = ({ data, size, renderTooltip, children }: DonutGraphPr
width={size}
height={size}
data-testid="DonutGraph__svg"
className="fill-theme-secondary-100"
className="fill-theme-secondary-100 dark:fill-theme-dark-950"
>
<>
<circle {...backgroundCircle} />
Expand Down
8 changes: 5 additions & 3 deletions resources/js/Components/PortfolioBreakdown/DonutChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,13 +103,15 @@ export const DonutChart = ({ assets, currency, size = 276 }: DonutChartPropertie
>
<Icon
name="Wallet"
className="bg-theme-primary-50 text-theme-primary-600"
className="bg-theme-primary-50 text-theme-primary-600 dark:bg-theme-dark-950 dark:text-theme-primary-400"
size="lg"
/>

<div className="mt-2 text-sm font-medium text-theme-secondary-700">{t("common.my_balance")}</div>
<div className="mt-2 text-sm font-medium text-theme-secondary-700 dark:text-theme-dark-200">
{t("common.my_balance")}
</div>

<div className="text-lg font-medium">
<div className="text-lg font-medium dark:text-theme-dark-50">
<FormatFiat
value={totalValue.toString()}
currency={currency}
Expand Down
12 changes: 6 additions & 6 deletions resources/js/Components/PortfolioBreakdown/PortfolioBreakdownTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ const PortfolioBreakdownTableItem = ({
>
<div className={`h-8 w-1 ${color}`} />
<div className="flex flex-col">
<span className="font-medium">
<span className="font-medium dark:text-theme-dark-50">
{asset.symbol}{" "}
<span className="text-theme-secondary-500 sm:hidden">
<span className="text-theme-secondary-500 dark:text-theme-dark-200 sm:hidden">
&nbsp;
<FormatPercentage value={Number(asset.percentage)} />
</span>
</span>
<span
className="max-w-[8rem] truncate text-sm font-medium text-theme-secondary-500"
className="max-w-[8rem] truncate text-sm font-medium text-theme-secondary-500 dark:text-theme-dark-300"
data-testid="PortfolioBreakdownItemAsset"
>
{asset.name}
Expand All @@ -49,15 +49,15 @@ const PortfolioBreakdownTableItem = ({

<TableCell innerClassName="py-2.5 justify-end">
<div className="flex flex-col items-end">
<span className="font-medium">
<span className="font-medium dark:text-theme-dark-50">
<FormatFiat
value={asset.fiat_balance}
currency={currency}
/>
</span>

{!isOtherGroup(asset) && (
<span className="whitespace-nowrap text-sm font-medium text-theme-secondary-500">
<span className="whitespace-nowrap text-sm font-medium text-theme-secondary-500 dark:text-theme-dark-300">
<FormatCrypto
token={{
name: asset.name,
Expand All @@ -76,7 +76,7 @@ const PortfolioBreakdownTableItem = ({
className="hidden sm:table-cell"
innerClassName="justify-end"
>
<span className="font-medium text-theme-secondary-700">
<span className="font-medium text-theme-secondary-700 dark:text-theme-dark-200">
<FormatPercentage value={Number(asset.percentage)} />
</span>
</TableCell>
Expand Down
4 changes: 2 additions & 2 deletions resources/js/Components/PortfolioBreakdown/PortfolioBreakdownText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const PortfolioBreakdownTextItem = ({
>
<span className={cn("h-3 w-1", color)} />

<span className="text-theme-secondary-700">{asset.symbol}</span>
<span className="text-theme-secondary-500">
<span className="text-theme-secondary-700 dark:text-theme-dark-200">{asset.symbol}</span>
<span className="text-theme-secondary-500 dark:text-theme-dark-100">
<FormatPercentage value={Number(asset.percentage)} />
</span>
</span>
Expand Down
Loading
Loading