style: adjust chart style and fonts

PolkaGate · Nov 11, 2024 · c4c28d5 · c4c28d5
1 parent e30ef9c
commit c4c28d5
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 12 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx
@@ -97,7 +97,6 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
         }]
       },
       options: {
-        cutout: '75%',
         plugins: {
           tooltip: {
             callbacks: {
@@ -110,7 +109,7 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props):
           }
         }
       },
-      type: 'doughnut'
+      type: 'pie'
     });
 
     return () => {

diff --git a/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/.../extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx
@@ -93,7 +93,8 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un
           hideNumbers || hideNumbers === undefined
             ? <Box component='img' src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string} sx={{ height: '36px', width: '154px' }} />
             : <FormatPrice
-              fontSize='28px'
+              commify
+              fontSize='24px'
               fontWeight={700}
               num={totalBalance}
               skeletonHeight={28}

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Chart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Chart.tsx
@@ -48,6 +48,7 @@ function ChartTotal ({ assets }: Props): React.ReactElement {
       },
       options: {
         animation: false,
+        cutout: '75%',
         plugins: {
           tooltip: {
             callbacks: {
@@ -61,7 +62,7 @@ function ChartTotal ({ assets }: Props): React.ReactElement {
           }
         }
       },
-      type: 'pie'
+      type: 'doughnut'
     });
 
     // Clean up the chart instance on component unmount
@@ -71,7 +72,7 @@ function ChartTotal ({ assets }: Props): React.ReactElement {
   }, [assets, theme.palette.divider]);
 
   return (
-    <Grid container item sx={{ height: '125px', mr: '5px', width: '125px' }}>
+    <Grid container item sx={{ height: '120px', mr: '5px', width: '120px' }}>
       <canvas id='chartCanvas' ref={chartRef} />
     </Grid>
   );

diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx
@@ -224,13 +224,13 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.
             : <>
               <FormatPrice
                 commify
-                fontSize='32px'
+                fontSize='30px'
                 fontWeight={700}
                 num={youHave?.portfolio}
                 textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
                 withCountUp
               />
-              <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '18px', fontWeight: 500 }}>
+              <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
                 <CountUp
                   decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
                   duration={1}
@@ -244,9 +244,9 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.
         </Grid>
       </Grid>
       {youHave?.portfolio !== 0 && assets && assets.length > 0 &&
-        <Grid container item sx={{ borderTop: '1px solid', borderTopColor: 'divider', pt: '10px' }}>
+        <Grid container item sx={{ borderTop: '1px solid', borderTopColor: 'divider' }}>
           <Chart assets={assets} />
-          <Grid container item pt='10px' rowGap='10px' xs>
+          <Grid container item pt='20px' rowGap='10px' xs>
             {assets.slice(0, 3).map((asset, index) => (
               <DisplayAssetRow
                 asset={asset}

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -15,7 +15,7 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.21.6",
+  "version": "0.27.0",
   "dependencies": {
     "@polkadot/api": "^11.2.1",
     "@polkadot/extension-base": "^0.47.5",

diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json
@@ -1423,5 +1423,41 @@
   "I'll think about it": "",
   "Vote Now": "",
   "Tokens will be locked for": "",
-  "Drag to move the window.": ""
+  "Drag to move the window.": "",
+  "NFT album": "",
+  "NFT Detail": "",
+  "Unique Detail": "",
+  "Collection name": "",
+  "Collection ID": "",
+  "Items": "",
+  "NFT ID": "",
+  "Unique ID": "",
+  "Price": "",
+  "Creator": "",
+  "Owner": "",
+  "Network": "",
+  "Image": "",
+  "Animation": "",
+  "Audio": "",
+  "Media": "",
+  "View on": "",
+  "View in Full Screen": "",
+  "🔍 Search": "",
+  "Not listed": "",
+  "Collections": "",
+  "NFTs": "",
+  "Uniques": "",
+  "Kusama Asset Hub": "",
+  "Polkadot Asset Hub": "",
+  "Sort": "",
+  "Price: High to Low": "",
+  "Price: Low to High": "",
+  "Looking for NFTs/Uniques!": "",
+  "You do not own any NFTs/Uniques": "",
+  "Nothing to Show": "",
+  "NFT Album": "",
+  "The chosen blockchain does not support NFTs/Uniques.": "",
+  "Here, you can view all your created or owned NFTs and unique items. Click on any to enlarge, access more details, and view in fullscreen mode.": "",
+  "APY": "",
+  "Unable to fetch NFT/Unique items!": ""
 }
diff --git a/packages/extension/src/packageInfo.ts b/packages/extension/src/packageInfo.ts
@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.21.6' };
+export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.27.0' };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,4 +3,4 @@

		// Do not edit, auto-generated by @polkadot/dev

		export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.21.6' };
		export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.27.0' };