From 675f7eca231f1ab7e95ad05d3a05b1e2563782ba Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Wed, 30 Oct 2024 14:48:52 +0100 Subject: [PATCH] Update `ProgressBar` styles --- dapp/src/assets/icons/BoltFilled.tsx | 13 ++++ dapp/src/assets/icons/index.ts | 1 + dapp/src/components/shared/ProgressBar.tsx | 24 +++++-- .../pages/DashboardPage/AcreTVLProgress.tsx | 11 ++-- dapp/src/theme/AcreTVLProgress.ts | 18 +++--- dapp/src/theme/Progress.ts | 63 ++++++++++--------- 6 files changed, 83 insertions(+), 47 deletions(-) create mode 100644 dapp/src/assets/icons/BoltFilled.tsx diff --git a/dapp/src/assets/icons/BoltFilled.tsx b/dapp/src/assets/icons/BoltFilled.tsx new file mode 100644 index 000000000..7f2e18282 --- /dev/null +++ b/dapp/src/assets/icons/BoltFilled.tsx @@ -0,0 +1,13 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const BoltFilled = createIcon({ + displayName: "BoltFilled", + viewBox: "0 0 24 24", + path: [ + , + ], +}) diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts index 88b17c659..1ea0349f6 100644 --- a/dapp/src/assets/icons/index.ts +++ b/dapp/src/assets/icons/index.ts @@ -9,3 +9,4 @@ export * from "./MezoSignIcon" export * from "./AcreSignIcon" export * from "./BitcoinsStackErrorIcon" export { default as MatsIcon } from "./MatsIcon" +export * from "./BoltFilled" diff --git a/dapp/src/components/shared/ProgressBar.tsx b/dapp/src/components/shared/ProgressBar.tsx index 177a3cb6e..254935dce 100644 --- a/dapp/src/components/shared/ProgressBar.tsx +++ b/dapp/src/components/shared/ProgressBar.tsx @@ -1,16 +1,28 @@ import React from "react" -import { Box, Progress, ProgressProps, ProgressLabel } from "@chakra-ui/react" +import { Progress, ProgressProps, ProgressLabel, Icon } from "@chakra-ui/react" +import { BoltFilled } from "#/assets/icons" function ProgressBar(props: ProgressProps) { - const { value, children, ...restProps } = props + const { value = 0, children, ...restProps } = props return ( - - {children} + {children} - {value}% - + {value > 2 && ( + + )} ) } diff --git a/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx b/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx index a121c19cd..7355ba3a3 100644 --- a/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx +++ b/dapp/src/pages/DashboardPage/AcreTVLProgress.tsx @@ -11,7 +11,7 @@ import { useTVL } from "#/hooks" import { BitcoinIcon } from "#/assets/icons" import { CurrencyBalance } from "#/components/shared/CurrencyBalance" import ProgressBar from "#/components/shared/ProgressBar" -import { TextMd } from "#/components/shared/Typography" +import { TextMd, TextXs } from "#/components/shared/Typography" type AcreTVLProgressProps = StackProps @@ -27,24 +27,23 @@ export function AcreTVLProgress(props: AcreTVLProgressProps) { - Total value locked + Total value locked {[50, 100, 150, 200, 250].map((value) => ( - + {value} - + ))} - + diff --git a/dapp/src/theme/AcreTVLProgress.ts b/dapp/src/theme/AcreTVLProgress.ts index 945bd0077..622b34263 100644 --- a/dapp/src/theme/AcreTVLProgress.ts +++ b/dapp/src/theme/AcreTVLProgress.ts @@ -18,7 +18,6 @@ const containerStyles = defineStyle({ bgGradient: "linear(to-r, transparent, rgba(255, 122, 0, 0.2) 10%, rgba(243, 73, 0, 0.25) 20%, transparent 30%)", color: "gold.200", - pb: 4, mask: 'linear-gradient(0, black, black), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MzkuNjI3IiBoZWlnaHQ9IjI4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNzM5LjYyNyAwYzAgNi42MjctNS4zNyAxMi0xMiAxMkgyOS4yNTRhMTUuOTk2IDE1Ljk5NiAwIDAgMC0xMS4zMTMgNC42ODZsLTYuNjI4IDYuNjI4QzguMzEzIDI2LjMxNSA0LjI0MyAyOCAwIDI4aDczOS42Mjd6IiBzdHlsZT0iZmlsbDojMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZCIvPjwvc3ZnPg==")', maskPosition: "100% 100%", clipPath: "inset(0 1px 0 0 round 12px)", @@ -48,8 +47,6 @@ const valueWrapperStyles = defineStyle({ alignItems: "start", gap: 0, }) -const valueAmountStyles = defineStyle({}) -const valueLabelStyles = defineStyle({}) const progressWrapperStyles = defineStyle({ flex: 1, }) @@ -57,8 +54,17 @@ const progressLabelsWrapperStyles = defineStyle({ w: "full", }) const progressLabelStyles = defineStyle({ - flexGrow: 1, - textAlign: "end", + ml: "auto", + + _after: { + content: '""', + display: "block", + clipPath: "polygon(50% 100%, 0 0, 100% 0)", + w: 3, + h: 1, + bgColor: "#5A4D3A", + mx: "auto", + }, }) const multiStyleConfig = createMultiStyleConfigHelpers(PARTS) @@ -69,8 +75,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({ contentWrapper: contentWrapperStyles, valueIcon: valueIconStyles, valueWrapper: valueWrapperStyles, - valueAmount: valueAmountStyles, - valueLabel: valueLabelStyles, progressWrapper: progressWrapperStyles, progressLabelsWrapper: progressLabelsWrapperStyles, progressLabel: progressLabelStyles, diff --git a/dapp/src/theme/Progress.ts b/dapp/src/theme/Progress.ts index 237b74e51..4ea40e0b7 100644 --- a/dapp/src/theme/Progress.ts +++ b/dapp/src/theme/Progress.ts @@ -8,27 +8,27 @@ import { keyframes } from "@chakra-ui/react" const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys) -const filledStyle = defineStyle((props) => { - const { colorScheme: color, theme, isIndeterminate, hasStripe } = props +const trackStyle = defineStyle((props) => { + const { isIndeterminate, hasStripe } = props - const bgColor = `${color}.400` - const stripeColor = "opacity.white.1" + const bgColor = "#3A3328" + const stripeColor = getColorVar(props.theme, "grey.700") as string const stripesAnimation = keyframes` from { background-position: 0 0; } - to { background-position: 1rem 0; } + to { background-position: 17px 0; } ` const addStripe = Boolean(!isIndeterminate && hasStripe) const style = { bgColor, bgImage: `repeating-linear-gradient( - 105deg, - transparent 0%, - transparent 25%, - ${getColorVar(theme, stripeColor)} 25%, - ${getColorVar(theme, stripeColor)} 50% + 125deg, + ${stripeColor}, + ${stripeColor} 2px, + ${bgColor} 2px, + ${bgColor} 14px )`, - bgSize: "16.64px 58.05px", // Calculated for 8px stripes + bgSize: "17px 33px", // Calculated for 8px stripes animation: `${stripesAnimation} 2s linear infinite`, } @@ -36,20 +36,26 @@ const filledStyle = defineStyle((props) => { }) const indeterminateStyle = defineStyle((props) => { - const { colorScheme: color, theme, isIndeterminate } = props + const { theme, isIndeterminate } = props - const bgColor = `${color}.400` + const bgColorPrimary = "#FF1822" + const bgColorSecondary = "#FF8A02" - const style = { + if (!isIndeterminate) { + return { + bgGradient: `linear(to-r, ${bgColorPrimary}, ${bgColorSecondary})`, + } + } + + return { bgImage: `linear-gradient( to right, transparent 0%, - ${getColorVar(theme, bgColor)} 50%, + ${getColorVar(theme, bgColorPrimary)} 25%, + ${getColorVar(theme, bgColorSecondary)} 75%, transparent 100% )`, } - - return isIndeterminate ? style : { bgColor } }) const baseStyleLabel = defineStyle({ @@ -59,33 +65,35 @@ const baseStyleLabel = defineStyle({ justifyContent: "space-between", }) -const baseStyleTrack = defineStyle({ - bg: "grey.700", +const baseStyleTrack = defineStyle((props) => ({ + ...trackStyle(props), rounded: "full", w: "full", - ringColor: "grey.700", -}) +})) const baseStyleFilledTrack = defineStyle((props) => ({ - ...filledStyle(props), ...indeterminateStyle(props), rounded: "inherit", - inset: 0, + bgSize: "100%", })) const baseStyle = multiStyleConfig.definePartsStyle((props) => ({ label: baseStyleLabel, filledTrack: baseStyleFilledTrack(props), - track: baseStyleTrack, + track: baseStyleTrack(props), })) const sizes = { + lg: multiStyleConfig.definePartsStyle({ + track: { h: 4 }, + label: { fontSize: "0.875em", lineHeight: 3, px: 1.5 }, + }), xl: multiStyleConfig.definePartsStyle({ - track: { h: 8, ring: 4, m: 1 }, + track: { h: 8 }, label: { fontSize: "1.125em", lineHeight: 6, px: 3 }, }), "2xl": multiStyleConfig.definePartsStyle({ - track: { h: 16, ring: 8, m: 2 }, + track: { h: 16 }, label: { fontSize: "4xl", lineHeight: "4xl", px: 6 }, }), } @@ -94,7 +102,6 @@ export const progressTheme = multiStyleConfig.defineMultiStyleConfig({ sizes, baseStyle, defaultProps: { - size: "xl", - colorScheme: "brand", + size: "lg", }, })