remove unnecessary code & enhance gray color over the app

src/ThemeConstants.ts

@@ -7,10 +7,7 @@ export const colors = {
   darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
 };
 
-export const ProGray1 = "#f7f9fa";
-export const ProGray2 = "#F1F1F1";
-export const ProGray3 = "#edf0f2"; // for modal header background
-export const ProGray4 = "#DCDCDC"; // lines color
+export const ProGray1 = "#8a8a8a";
 export const ProGreen = "#03B100";
 export const ProGreen2 = "#52c41a";
 export const ProDraft = "#f36c00";
@@ -21,7 +18,7 @@ export const errorColorDark = "#d9363e";
 export const DisabledColor = "#424242";
 
 
-export const COLOR = {
+export const WHITE_COLOR = {
   50: "#e0f1ff",
   100: "#b0d2ff",
   200: "#7fb0ff",
@@ -150,7 +147,7 @@ export const themeConfig: ThemeConfig = {
     borderRadius: 8,
     // Futuristic button styles
     controlHeight: 40,
-    colorTextLabel: COLOR.blackColor,
+    colorTextLabel: WHITE_COLOR.blackColor,
     colorBgLayout: componentBackground,
   },
   components: {
@@ -159,9 +156,9 @@ export const themeConfig: ThemeConfig = {
       itemColor: "rgba(0,0,0,.8)",
     },
     Button: {
-      colorLink: COLOR["600"],
-      colorLinkActive: COLOR["700"],
-      colorLinkHover: COLOR["300"],
+      colorLink: WHITE_COLOR["600"],
+      colorLinkActive: WHITE_COLOR["700"],
+      colorLinkHover: WHITE_COLOR["300"],
       borderRadius: 1000,
       borderRadiusLG: 1000,
       // defaultShadow: "none",
@@ -170,8 +167,8 @@ export const themeConfig: ThemeConfig = {
       colorBgContainer: "none",
     },
     Card: {
-      colorBgContainer: COLOR.cardBg,
-      colorBorderSecondary: COLOR["borderColor"],
+      colorBgContainer: WHITE_COLOR.cardBg,
+      colorBorderSecondary: WHITE_COLOR["borderColor"],
       boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
       padding: 16,
       paddingLG: 16,
@@ -179,54 +176,54 @@ export const themeConfig: ThemeConfig = {
       borderRadiusLG: 24,
     },
     Carousel: {
-      colorBgContainer: COLOR["800"],
+      colorBgContainer: WHITE_COLOR["800"],
       dotWidth: 8,
     },
     Rate: {
-      colorFillContent: COLOR["100"],
-      colorText: COLOR["600"],
+      colorFillContent: WHITE_COLOR["100"],
+      colorText: WHITE_COLOR["600"],
     },
     Segmented: {
-      colorBgLayout: COLOR["100"],
+      colorBgLayout: WHITE_COLOR["100"],
       borderRadius: 6,
       colorTextLabel: "#000000",
     },
     Table: {
-      borderColor: COLOR["100"],
-      headerBg: COLOR.primaryColor,
-      headerColor: COLOR.whiteColor,
-      rowSelectedBg: COLOR.primaryColor,
+      borderColor: WHITE_COLOR["100"],
+      headerBg: WHITE_COLOR.primaryColor,
+      headerColor: WHITE_COLOR.whiteColor,
+      rowSelectedBg: WHITE_COLOR.primaryColor,
       cellPaddingBlock: 8,
-      colorBgContainer: COLOR.tableBg,
-      colorFillAlter: COLOR.hoverBg,
+      colorBgContainer: WHITE_COLOR.tableBg,
+      colorFillAlter: WHITE_COLOR.hoverBg,
     },
     Tabs: {
-      colorBorderSecondary: COLOR["100"],
+      colorBorderSecondary: WHITE_COLOR["100"],
     },
     Timeline: {
       dotBg: "none",
     },
     Typography: {
-      colorLink: COLOR["600"],
-      colorLinkActive: COLOR["700"],
-      colorLinkHover: COLOR["300"],
+      colorLink: WHITE_COLOR["600"],
+      colorLinkActive: WHITE_COLOR["700"],
+      colorLinkHover: WHITE_COLOR["300"],
       linkHoverDecoration: "underline",
     },
     Drawer: {
       wireframe: true,
-      colorSplit: ProGray4,
+      colorSplit: ProGray1,
       lineWidth: 3,
       controlHeightLG: 30,
     },
     Menu: {
-      colorItemBg: COLOR.sidebarBg,
-      colorItemText: COLOR["800"],
-      colorItemTextSelected: COLOR.primaryColor2,
-      colorItemBgSelected: COLOR.activeBg,
-      colorItemBgHover: COLOR.hoverBg,
+      colorItemBg: WHITE_COLOR.sidebarBg,
+      colorItemText: WHITE_COLOR["800"],
+      colorItemTextSelected: WHITE_COLOR.primaryColor2,
+      colorItemBgSelected: WHITE_COLOR.activeBg,
+      colorItemBgHover: WHITE_COLOR.hoverBg,
     },
     Layout: {
-      headerBg: COLOR.headerBg,
+      headerBg: WHITE_COLOR.headerBg,
       bodyBg: componentBackground,
     },
     Input: {