Style gauge in box

src/components/DeviceStorageHealth.tsx

@@ -10,14 +10,14 @@ const DeviceStorageHealth = () => {
     {
       id: 'storage',
       label: 'Storage',
-      value: 450,
+      value: 55,
       color: '#E95460',
     },
     {
       id: 'storage',
       label: 'Storage',
       value: 45,
-      color: '#E95460',
+      color: '#E7EAEE',
     },
   ]
   return (
@@ -27,11 +27,16 @@ const DeviceStorageHealth = () => {
           justifyContent="space-between"
           style={{
             padding: '8px 16px',
-            position: 'relative', // Make XStack a positioning context
+            position: 'relative',
           }}
         >
           <div
-            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100px', height: '100px' }}
+            style={{
+              position: 'absolute',
+              right: '44px',
+              width: '75px',
+              height: '75px',
+            }}
           >
             <StandardGauge data={data} />
           </div>

src/components/StandardGauge.tsx

@@ -11,18 +11,20 @@ interface StandardGaugeProps {
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (
-  <ResponsivePie
-    data={data}
-    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
-    innerRadius={0.65}
-    colors={datum => datum.data.color}
-    fit={false}
-    activeOuterRadiusOffset={8}
-    enableArcLinkLabels={false}
-    arcLinkLabelsColor={{ from: 'color' }}
-    enableArcLabels={false}
-    legends={[]}
-  />
+  // <div style={{ width: '75px', height: '75px' }}>
+    <ResponsivePie
+      data={data}
+      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
+      innerRadius={0.65}
+      colors={datum => datum.data.color}
+      fit={false}
+      activeOuterRadiusOffset={8}
+      enableArcLinkLabels={false}
+      arcLinkLabelsColor={{ from: 'color' }}
+      enableArcLabels={false}
+      legends={[]}
+    />
+  // </div>
 )
 
 export default StandardGauge