Merge branch 'master' into ci-add-lint-checks

Author: usamaidrsk

README.md

@@ -91,7 +91,6 @@ Find out more on the <a href="https://layer5.io/community">Layer5 community</a>.
 <br /><br /><br /><br />
 
 </p>
-
 <div>&nbsp;</div>
 
 <a href="https://slack.meshery.io">

src/custom/CatalogDetail/SocialSharePopper.tsx

@@ -83,7 +83,7 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
               size="small"
               onClick={() => handleCopyUrl(cleanedType, details?.name, details?.id)}
             >
-              <ChainIcon height={'24'} width={'24'} fill={theme.palette.icon.inverse} />
+              <ChainIcon height={'24'} width={'24'} fill={theme.palette.text.constant?.white} />
             </ShareSideButton>
           </CustomTooltip>
         </ShareButtonGroup>

src/custom/Markdown/index.tsx

@@ -5,6 +5,7 @@ import {
   BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
+  StyledMarkdownCode,
   StyledMarkdownH1,
   StyledMarkdownH2,
   StyledMarkdownH3,
@@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
         td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
-        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>,
+        code: ({ ...props }) => <StyledMarkdownCode>{props.children}</StyledMarkdownCode>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
   whiteSpace: 'pre-line',
   fontFamily: 'inherit'
 }));
+
+export const StyledMarkdownCode = styled('code')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line',
+  padding: '1.5px',
+  paddingInline: '5px',
+  fontFamily: 'inherit',
+  borderRadius: 3
+}));

src/custom/ShareModal/ShareModal.tsx

@@ -257,12 +257,14 @@ const ShareModal: React.FC<ShareModalProps> = ({
                         <PublicIcon
                           width={24}
                           height={24}
+                          fill={theme.palette.icon.default}
                           stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
                         />
                       ) : (
                         <LockIcon
                           width={24}
                           height={24}
+                          fill={theme.palette.icon.default}
                           stroke={theme.palette.mode === 'dark' ? WHITE : BLACK}
                         />
                       )}
@@ -289,7 +291,13 @@ const ShareModal: React.FC<ShareModalProps> = ({
                           </MenuItem>
                         ))}
                       </CustomSelect>
-                      <Typography component="span" variant="body2">
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary
+                        }}
+                        component="span"
+                        variant="body2"
+                      >
                         {selectedOption === SHARE_MODE.PRIVATE ? options.PRIVATE : options.PUBLIC}
                       </Typography>
                     </div>

src/index.tsx

@@ -6,3 +6,4 @@ export * from './icons';
 export * from './redux-persist';
 export * from './schemas';
 export * from './theme';
+export * from './utils';

src/theme/palette.ts

@@ -255,6 +255,7 @@ export const lightModePalette: PaletteOptions = {
       tertiary: Colors.red[70]
     },
     code: Colors.charcoal[90],
+
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],
@@ -326,7 +327,7 @@ export const darkModePalette: PaletteOptions = {
     brand: {
       default: Colors.keppel[40],
       hover: Colors.keppel[50],
-      disabled: Colors.charcoal[20],
+      disabled: Colors.charcoal[30],
       pressed: Colors.keppel[60],
       secondary: Colors.keppel[20],
       tertiary: Colors.keppel[10]
@@ -369,7 +370,7 @@ export const darkModePalette: PaletteOptions = {
       secondary: Colors.red[20],
       tertiary: Colors.red[10]
     },
-    code: Colors.accentGrey[90],
+    code: Colors.charcoal[10],
     constant: {
       white: Colors.accentGrey[100],
       disabled: Colors.charcoal[70],

src/theme/typography.ts

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

src/utils/components.ts

@@ -0,0 +1,14 @@
+export const componentIcon = ({
+  kind,
+  model,
+  color
+}: {
+  kind: string;
+  model: string;
+  color: 'white' | 'color' | 'complete';
+}) => {
+  if (!kind || !model || !color) {
+    return null;
+  }
+  return `/ui/public/static/img/meshmodels/${model}/${color}/${kind.toLowerCase()}-${color}.svg`;
+};

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './components';