Merge branch 'master' into improve-modal-msgs

Author: amitamrutiya

src/custom/ChapterCard/style.tsx

@@ -5,7 +5,7 @@ import { ALABASTER_WHITE, MIDNIGHT_BLACK } from '../../theme';
 export const ChapterCardWrapper = styled('div')(({ theme }) => ({
   transition: '0.8s cubic-bezier(0.2, 0.8, 0.2, 1)',
   padding: '1rem 1.25rem',
-  width: '64rem',
+  width: '100%',
   backgroundColor: theme.palette.mode === 'light' ? ALABASTER_WHITE : MIDNIGHT_BLACK,
   display: 'flex',
   border: `1px solid ${
@@ -45,15 +45,9 @@ export const ChapterDescription = styled('div')({
   },
   '@media screen and (max-width: 650px)': {
     p: {
-      whiteSpace: 'nowrap',
+      whiteSpace: 'normal',
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      width: '75vw'
-    }
-  },
-  '@media screen and (max-width: 650px) and (min-width: 300px)': {
-    p: {
-      width: '68vw'
+      textOverflow: 'ellipsis'
     }
   }
 });

src/custom/Panel/style.tsx

@@ -1,7 +1,7 @@
 import { ListItemProps } from '@mui/material';
 import { Box, IconButton, ListItem } from '../../base';
 import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
-import { black, styled } from '../../theme';
+import { styled } from '../../theme';
 import { PanelProps } from './Panel';
 
 export const ListHeader = styled(ListItem)(({ theme }) => ({
@@ -86,10 +86,10 @@ export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intiti
     borderRadius: '8px',
     overflow: 'hidden',
     flexShrink: 0,
-    zIndex: 99999,
+    zIndex: 100,
     position: 'absolute',
     backgroundColor: theme.palette.background.blur?.light,
-    boxShadow: `0 4px 16px ${black}`,
+    boxShadow: `0 4px 16px ${theme.palette.background.blur?.light}`,
     maxHeight: '80%',
     display: 'flex',
     boxSizing: 'border-box',

src/custom/ResponsiveDataTable.tsx

@@ -166,6 +166,15 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
           }
         }
       },
+      MuiTableSortLabel: {
+        styleOverrides: {
+          root: {
+            '&.Mui-active .MuiTableSortLabel-icon': {
+              color: theme.palette.icon.default
+            }
+          }
+        }
+      },
       MUIDataTableHeadCell: {
         styleOverrides: {
           data: {

src/custom/TransferModal/TransferList/TransferList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Checkbox, Grid, List, ListItem, Typography } from '../../../base';
 import { KubernetesIcon, LeftArrowIcon, RightArrowIcon, SMPIcon } from '../../../icons';
+import { GithubIcon } from '../../../icons/Github';
 import { MesheryIcon } from '../../../icons/Meshery';
 import Tooltip from '../../../patches/Tooltip';
 import {
@@ -22,7 +23,8 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme
   }
   const fallbackComponents: { [key: string]: JSX.Element } = {
     meshery: <MesheryIcon />,
-    kubernetes: <KubernetesIcon />
+    kubernetes: <KubernetesIcon />,
+    github: <GithubIcon />
   };
 
   return fallbackComponents[kind] || null;

src/theme/components/cssbaseline.modifier.ts

@@ -7,10 +7,9 @@ export const MuiCssBaseline: Components<Theme>['MuiCssBaseline'] = {
       font-style: normal;
       font-display: swap;
       font-weight: 400;
-      src: 
+      src:
         local('QanelasSoftRegular'),
-        local('Quanelas Soft Regular'),
-        url('/assets/fonts/QanelasSoftRegular.woff2') format('woff2');
+        local('Quanelas Soft Regular')
     }
     `
 };

src/theme/typography.ts

@@ -86,7 +86,7 @@ export const typography = (mode: PaletteMode): TypographyOptions => {
       }
     },
     textB1Regular: {
-      fontFamily: ['"Open Sans"', 'sans-serif'].join(','),
+      fontFamily: ['Qanelas Soft Regular', 'Open Sans', 'sans-serif'].join(','),
       color: mode === 'light' ? common.black : common.white,
       fontSize: '1rem',
       fontWeight: 400,