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,9 +11,10 @@ interface StandardGaugeProps {
 }
 
 const StandardGauge = ({ data }: StandardGaugeProps) => (
+  // <div style={{ width: '75px', height: '75px' }}>
     <ResponsivePie
       data={data}
-    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
+      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
       innerRadius={0.65}
       colors={datum => datum.data.color}
       fit={false}
@@ -23,6 +24,7 @@ const StandardGauge = ({ data }: StandardGaugeProps) => (
       enableArcLabels={false}
       legends={[]}
     />
+  // </div>
 )
 
 export default StandardGauge