Merge branch 'master' into aryanshah/add_hooks

Author: Namanv0509

CONTRIBUTING.md

@@ -129,6 +129,43 @@ Run the following command before commiting the changes:
 make lint
 ```
 
+# Project Directory Structure
+
+## Overview of `/src` Directory
+
+### actors
+
+### assets
+
+- Assets are the files that are used in the project. These files can be images, videos, logos or fonts etc. The assets directory is used to store all the assets that are used in the project.
+
+### base
+
+- Base directory contains all the basic components that are used in the project. These components are the building blocks of the project. The base directory contains the following subdirectories like `Buttons`, `Forms`, `Typography` etc.
+
+### constants
+
+- Constants directory contains all the constants that are used in the project. These constants can be colors, fonts, breakpoints etc.
+
+### custom
+
+- Custom directory contains all the custom components using the theme colors.
+
+### icons
+
+- Icons directory contains all the icons that are used in the project or can be used in any of other projects.
+
+### theme
+
+- Theme directory contains all the theme related files. The theme directory contains the following subdirectories like:
+  - `Colors`- contains all the colors that are used in the project or theme components.
+  - `components` - contains all the theme components like `Button`,
+  - `Typography` with brand colors.
+  - [`typography.ts`](https://github.com/layer5io/sistent/blob/master/src/theme/typography.ts) - contains all the typography related files like `font-size`, `font-family` etc.
+  - [`palette.ts`](https://github.com/layer5io/sistent/blob/master/src/theme/palette.ts) - contains all the tokens that are used in the project and used in components.
+
+Through the theme directory, we export the SistentThemeProvider which is used to provide the theme to the project.
+
 # <a name="maintaining"> Reviews</a>
 
 All contributors are invited to review pull requests. See this short video on [how to review a pull request](https://www.youtube.com/watch?v=isLfo7jfE6g&feature=youtu.be).

src/custom/CustomCatalog/style.tsx

@@ -1,5 +1,5 @@
 import { styled, Typography } from '@mui/material';
-import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, slateGray, WHITESMOKE } from '../../theme';
+import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, WHITESMOKE } from '../../theme';
 import { charcoal, DARK_TEAL, SNOW_WHITE } from '../../theme/colors/colors';
 
 type DesignCardProps = {
@@ -52,9 +52,11 @@ export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProp
   theme
 }) => {
   const mapToColor: Record<string, string> = {
-    community: slateGray.main,
-    official: theme.palette.background.cta?.default || '#EBC017',
-    verified: theme.palette.background.brand?.default || '#00B39F'
+    community: theme.palette.catalogStatus?.community,
+    official:
+      theme.palette.catalogStatus?.official,
+    verified:
+      theme.palette.catalogStatus?.verified
   };
   return {
     font: 'bold 10px sans-serif',

src/theme/palette.ts

@@ -169,6 +169,17 @@ declare module '@mui/material/styles' {
         alt: string;
       };
     };
+    status: {
+      success: string;
+      warning: string;
+      error: string;
+      info: string;
+    };
+    catalogStatus: {
+      community: string;
+      official: string;
+      verified: string;
+    };
   }
 
   // surface tokens need to have enough contrast
@@ -261,6 +272,18 @@ declare module '@mui/material/styles' {
         alt: string;
       };
     };
+
+    status: {
+      success: string;
+      warning: string;
+      error: string;
+      info: string;
+    };
+    catalogStatus: {
+      community: string;
+      official: string;
+      verified: string;
+    };
   }
 }
 
@@ -416,6 +439,17 @@ export const lightModePalette: PaletteOptions = {
       default: Colors.charcoal[40],
       alt: Colors.charcoal[40]
     }
+  },
+  status: {
+    success: Colors.notificationColors.success.main,
+    warning: Colors.notificationColors.warning.main,
+    error: Colors.notificationColors.error.main,
+    info: Colors.notificationColors.info.main
+  },
+  catalogStatus: {
+    community: Colors.slateGray.main,
+    official: Colors.saffron[40],
+    verified: Colors.keppel[40]
   }
 };
 
@@ -567,5 +601,16 @@ export const darkModePalette: PaletteOptions = {
       default: Colors.accentGrey[100],
       alt: Colors.keppel[40]
     }
+  },
+  status: {
+    success: Colors.notificationColors.success.main,
+    warning: Colors.notificationColors.warning.main,
+    error: Colors.notificationColors.error.main,
+    info: Colors.notificationColors.info.main
+  },
+  catalogStatus: {
+    community: Colors.slateGray.main,
+    official: Colors.saffron[40],
+    verified: Colors.keppel[40]
   }
 };

src/theme/theme.ts

@@ -297,6 +297,19 @@ export const createCustomTheme = (mode: PaletteMode, primitives?: PrimitivePalet
             default: alpha(p.foreground, 0.9),
             alt: alpha(p.foreground, 0.8)
           }
+        },
+        status: {
+          //->org-independent status colors
+          success: Colors.notificationColors.success.main,
+          warning: Colors.notificationColors.warning.main,
+          error: Colors.notificationColors.error.main,
+          info: Colors.notificationColors.info.main
+        },
+        //->catalog status colors (org-independent)
+        catalogStatus: {
+          community: Colors.slateGray.main,
+          official: Colors.saffron[40],
+          verified: Colors.keppel[40]
         }
       }
     : {};