minor: Make the Usage Indicator grow with usage

latitude-dev · Sep 26, 2024 · f6fce38 · f6fce38
1 parent d50bdb4
commit f6fce38
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/apps/web/src/components/layouts/AppLayout/Header/UsageIndicator/index.tsx b/apps/web/src/components/layouts/AppLayout/Header/UsageIndicator/index.tsx
@@ -24,14 +24,15 @@ function UsageIndicatorCircle({
   isLoading: boolean
 }) {
   const ratio = useMemo(() => {
-    if (!data) return 0
-    if (data.max === 0) return 0
-    const actualRatio = (data.max - data.usage) / data.max
+    if (!data) return 1
+    if (data.max === 0) return 1
+    const actualRatio = data.usage / data.max
 
-    if (actualRatio <= 0) return 0
     if (actualRatio >= 1) return 1
+    if (actualRatio <= 0) return 0
+
+    if (actualRatio < 0.01) return 0.01 // Too small of a value makes the progress so small its not visible
 
-    if (actualRatio < 0.01) return 0.01 // Too low of a ratio makes the circle so small it disappears
     return actualRatio
   }, [data])
 
@@ -46,20 +47,18 @@ function UsageIndicatorCircle({
       />
     )
   }
-  if (ratio <= 0) {
-    return <CircularProgress value={1} color='destructive' {...props} />
-  }
 
   return (
     <CircularProgress
-      value={ratio || 1}
+      value={ratio}
       color={
-        ratio > 0.25
+        ratio < 0.75
           ? 'primary'
-          : ratio === 0
+          : ratio >= 1
             ? 'destructive'
             : 'warningMutedForeground'
       }
+      showBackground
       {...props}
     />
   )

diff --git a/packages/web-ui/src/ds/atoms/CircularProgress/index.tsx b/packages/web-ui/src/ds/atoms/CircularProgress/index.tsx
@@ -8,7 +8,7 @@ import { colors, TextColor } from '../../tokens'
 export type CircularProgressProps = {
   value: number
   color?: TextColor
-  backgroundColor?: TextColor
+  showBackground?: boolean
   size?: number
   strokeWidth?: number
   className?: string
@@ -18,7 +18,7 @@ export type CircularProgressProps = {
 export function CircularProgress({
   value: valueProp,
   color = 'primary',
-  backgroundColor,
+  showBackground,
   size = 14,
   strokeWidth = 3,
   className,
@@ -44,17 +44,13 @@ export function CircularProgress({
       height={size}
       className={cn('-rotate-90', colors.textColors[color], className)}
     >
-      {backgroundColor && (
+      {showBackground && (
         <circle
-          className={cn(
-            'transition-all duration-300 ease-in-out',
-            colors.textColors[backgroundColor],
-          )}
+          className='opacity-20'
           stroke='currentColor'
           fill='transparent'
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
-          strokeDashoffset={progress - circumference}
           strokeLinecap='round'
           r={radius}
           cx={size / 2}