Update ProgressBar styles

thesis · Oct 30, 2024 · 675f7ec · 675f7ec
1 parent 811cf32
commit 675f7ec
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 47 deletions.
diff --git a/dapp/src/assets/icons/BoltFilled.tsx 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: [
+    <path
+      fill="currentColor"
+      d="M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z"
+    />,
+  ],
+})
diff --git 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
@@ -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 (
     <Progress value={value} hasStripe {...restProps}>
-      <ProgressLabel>
-        {children}
+      <ProgressLabel>{children}</ProgressLabel>
 
-        <Box>{value}%</Box>
-      </ProgressLabel>
+      {value > 2 && (
+        <Icon
+          position="absolute"
+          top="50%"
+          left={`${value}%`}
+          color="grey.700"
+          boxSize={3}
+          transform="auto"
+          translateX="-100%"
+          translateY="-50%"
+          as={BoltFilled}
+          mx={-1}
+        />
+      )}
     </Progress>
   )
 }

diff --git 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) {
 
           <CurrencyBalance
             size="3xl"
-            sx={styles.valueAmount}
             amount={totalValueLocked.value}
             currency="bitcoin"
           />
 
-          <TextMd sx={styles.valueLabel}>Total value locked</TextMd>
+          <TextMd>Total value locked</TextMd>
         </Grid>
 
         <VStack sx={styles.progressWrapper}>
           <HStack sx={styles.progressLabelsWrapper}>
             {[50, 100, 150, 200, 250].map((value) => (
-              <TextMd key={value} sx={styles.progressLabel}>
+              <TextXs key={value} sx={styles.progressLabel}>
                 {value}
-              </TextMd>
+              </TextXs>
             ))}
           </HStack>
 
-          <ProgressBar />
+          <ProgressBar value={totalValueLocked.progress} />
         </VStack>
       </HStack>
     </Box>

diff --git 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,17 +47,24 @@ const valueWrapperStyles = defineStyle({
   alignItems: "start",
   gap: 0,
 })
-const valueAmountStyles = defineStyle({})
-const valueLabelStyles = defineStyle({})
 const progressWrapperStyles = defineStyle({
   flex: 1,
 })
 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
@@ -8,48 +8,54 @@ 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`,
   }
 
   return addStripe ? style : {}
 })
 
 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",
   },
 })