[pull] master from layer5io:master

src/custom/ResourceDetailFormatters/index.ts

@@ -15,7 +15,7 @@ import {
   TextWithLinkFormatter
 } from './Formatter';
 import { useResourceCleanData } from './useResourceCleanData';
-import { extractPodVolumnTables, splitCamelCaseString } from './utils';
+import { convertToReadableUnit, extractPodVolumnTables, splitCamelCaseString } from './utils';
 
 export {
   CodeFormatter,
@@ -33,6 +33,7 @@ export {
   StatusFormatter,
   TableDataFormatter,
   TextWithLinkFormatter,
+  convertToReadableUnit,
   extractPodVolumnTables,
   splitCamelCaseString,
   useResourceCleanData

src/custom/ResourceDetailFormatters/utils.ts

@@ -89,3 +89,17 @@ export function isEmptyAtAllDepths(input: any): boolean {
     return _.isEmpty(input);
   }
 }
+
+export const convertToReadableUnit = (value: number): string => {
+  if (!value) return '0';
+
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB'];
+  let index = 0;
+
+  while (value >= 1024 && index < units.length - 1) {
+    value /= 1024;
+    index++;
+  }
+
+  return `${value.toFixed(2)} ${units[index]}`;
+};

src/theme/components/appbar.modifiter.ts

@@ -6,9 +6,11 @@ export const MuiAppBar: Components<Theme>['MuiAppBar'] = {
       const {
         palette: {
           background: { default: defaultBackground }
-        }
+        },
+        typography: { fontFamily }
       } = theme;
       return {
+        fontFamily,
         elevation: 2,
         background: defaultBackground
       };

src/theme/components/buttongroup.modifier.ts

@@ -3,7 +3,8 @@ import { Components, Theme } from '@mui/material';
 export const MuiButtonGroup: Components<Theme>['MuiButtonGroup'] = {
   styleOverrides: {
     grouped: ({ theme }) => ({
-      borderColor: theme.palette.common.white
+      borderColor: theme.palette.common.white,
+      fontFamily: theme.typography.fontFamily
     })
   }
 };

src/theme/components/link.modifier.ts

@@ -7,9 +7,11 @@ export const MuiLink: Components<Theme>['MuiLink'] = {
         palette: {
           text: { default: defaultText },
           background: { brand }
-        }
+        },
+        typography: { fontFamily }
       } = theme;
       return {
+        fontFamily: fontFamily,
         fontWeight: '600',
         textDecoration: 'none',
         color: defaultText,

src/theme/components/listitem.modifier.ts

@@ -20,9 +20,11 @@ export const MuiListItem: Components<Theme>['MuiListItem'] = {
             text: { default: defaultText },
             icon: { default: defaultIcon },
             background: { brand }
-          }
+          },
+          typography: { fontFamily }
         } = theme;
         return {
+          fontFamily,
           textTransform: 'none',
           margin: '.5rem 0rem .5rem .5rem',
           padding: '0rem',

src/theme/components/menu.modifier.ts

@@ -2,13 +2,21 @@ import { Components, Theme } from '@mui/material';
 
 export const MuiMenu: Components<Theme>['MuiMenu'] = {
   styleOverrides: {
-    paper: {
-      '& .MuiMenuItem-root.Mui-selected': {
-        backgroundColor: 'rgba(0, 0, 0, 0.08)',
-        '&:hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.08)'
+    root: ({ theme }) => {
+      const {
+        typography: { fontFamily }
+      } = theme;
+      return {
+        paper: {
+          fontFamily: fontFamily,
+          '& .MuiMenuItem-root.Mui-selected': {
+            backgroundColor: 'rgba(0, 0, 0, 0.08)',
+            '&:hover': {
+              backgroundColor: 'rgba(0, 0, 0, 0.08)'
+            }
+          }
         }
-      }
+      };
     }
   }
 };

src/theme/components/menuitem.modifier.ts

@@ -6,9 +6,11 @@ export const MuiMenuItem: Components<Theme>['MuiMenuItem'] = {
       const {
         palette: {
           text: { tertiary }
-        }
+        },
+        typography: { fontFamily }
       } = theme;
       return {
+        fontFamily: fontFamily,
         '&:hover': {
           '& li': {
             color: tertiary,

src/theme/components/tab.modifier.ts

@@ -7,9 +7,11 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
         palette: {
           text: { default: defaultText },
           background: { tabs: defaultBackground }
-        }
+        },
+        typography: { textB1Regular }
       } = theme;
       return {
+        ...textB1Regular,
         '&.Mui-selected': {
           color: defaultText,
           backgroundColor: defaultBackground

src/theme/components/tabs.modifier.ts

@@ -3,7 +3,8 @@ import { Components, Theme } from '@mui/material';
 export const MuiTabs: Components<Theme>['MuiTabs'] = {
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.palette.background.tabs
+      backgroundColor: theme.palette.background.tabs,
+      fontFamily: theme.typography.fontFamily
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default