fix: Fixed the asterisk color bug for MUI labels

openmetadata-ui-core-components/src/main/resources/ui/src/theme/form-theme.ts

@@ -112,7 +112,7 @@ export const formTheme = (colors: any) => ({
       input: {
         color: colors.gray[900],
         '&::placeholder': {
-          color: colors.gray[500],
+          color: colors.gray[400],
           opacity: 1,
         },
         '&:disabled': {
@@ -517,4 +517,11 @@ export const formTheme = (colors: any) => ({
       },
     },
   },
+  MuiFormLabel: {
+    styleOverrides: {
+      asterisk: {
+        color: colors.error[600],
+      },
+    },
+  },
 });

openmetadata-ui/src/main/resources/ui/src/components/common/MUIFormItemLabel/MUIFormItemLabel.tsx

@@ -12,7 +12,7 @@
  */
 
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { Box, Chip, FormLabel, Tooltip } from '@mui/material';
+import { Box, Chip, FormLabel, SxProps, Theme, Tooltip } from '@mui/material';
 import { TooltipProps } from '@mui/material/Tooltip';
 import { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,13 +27,15 @@ export interface MUIFormItemLabelProps {
   isBeta?: boolean;
   required?: boolean;
   slotProps?: Partial<TooltipProps>;
+  labelSx?: SxProps<Theme>;
 }
 
 const MUIFormItemLabel: FC<MUIFormItemLabelProps> = ({
   helperText,
   helperTextType = HelperTextType.Tooltip,
   isBeta = false,
   label,
+  labelSx,
   placement = 'top',
   required = false,
   showHelperText = true,
@@ -49,6 +51,7 @@ const MUIFormItemLabel: FC<MUIFormItemLabelProps> = ({
         required={required}
         sx={{
           fontSize: (theme) => theme.typography.body2.fontSize,
+          ...labelSx,
         }}>
         {label}
       </FormLabel>

openmetadata-ui/src/main/resources/ui/src/components/common/MUISelect/MUISelect.tsx

@@ -21,7 +21,8 @@ import {
   Typography,
   useTheme,
 } from '@mui/material';
-import { FC, memo, ReactNode } from 'react';
+import { isEmpty } from 'lodash';
+import { FC, memo, ReactNode, useMemo } from 'react';
 
 interface SelectOption {
   label: string;
@@ -51,6 +52,11 @@ const MUISelect: FC<MUISelectProps> = ({
   const labelId = id ? `${id}-label` : 'mui-select-label';
   const theme = useTheme();
 
+  const optionsMap = useMemo(
+    () => new Map(options.map((opt) => [opt.value, opt.label])),
+    [options]
+  );
+
   return (
     <FormControl fullWidth error={error} required={required} size={size}>
       {label && <InputLabel id={labelId}>{label}</InputLabel>}
@@ -70,16 +76,22 @@ const MUISelect: FC<MUISelectProps> = ({
         }}
         label={label}
         labelId={labelId}
+        renderValue={(selected) => {
+          if (isEmpty(selected)) {
+            return placeholder ? (
+              <Typography color={theme.palette.grey[400]}>
+                {placeholder}
+              </Typography>
+            ) : null;
+          }
+
+          const selectedValue = selected as string | number;
+
+          return optionsMap.get(selectedValue) ?? selectedValue;
+        }}
         value={value}
         onChange={onChange}
         {...props}>
-        {placeholder && (
-          <MenuItem disabled value="">
-            <Typography sx={{ color: theme.palette.grey[500] }}>
-              {placeholder}
-            </Typography>
-          </MenuItem>
-        )}
         {options.map((option) => (
           <MenuItem
             disabled={option.disabled}

openmetadata-ui/src/main/resources/ui/src/components/form/MUISwitch/MUISwitch.tsx

@@ -10,10 +10,16 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Box, Switch as MuiSwitch, Typography } from '@mui/material';
+import { Box, Switch as MuiSwitch, SxProps, Theme } from '@mui/material';
 import { FC, memo, useCallback } from 'react';
+import MUIFormItemLabel from '../../common/MUIFormItemLabel/MUIFormItemLabel';
 import { MUISwitchProps } from './MUISwitch.interface';
 
+const LABEL_STYLES: SxProps<Theme> = {
+  color: (theme) => theme.palette.grey[700],
+  fontWeight: (theme) => theme.typography.subtitle2.fontWeight,
+};
+
 const MUISwitch: FC<MUISwitchProps> = ({
   checked = false,
   onChange,
@@ -38,11 +44,7 @@ const MUISwitch: FC<MUISwitchProps> = ({
         onChange={handleChange}
         {...props}
       />
-      {label && (
-        <Typography fontWeight={500} variant="body2">
-          {label}
-        </Typography>
-      )}
+      {label && <MUIFormItemLabel label={label} labelSx={LABEL_STYLES} />}
     </Box>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/ClassificationFormDrawer.test.tsx

@@ -11,10 +11,14 @@
  *  limitations under the License.
  */
 
+import { ThemeProvider } from '@mui/material/styles';
+import { createMuiTheme } from '@openmetadata/ui-core-components';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { FormInstance } from 'antd';
 import ClassificationFormDrawer from './ClassificationFormDrawer';
 
+const theme = createMuiTheme();
+
 jest.mock('./TagsForm', () => {
   return jest.fn(() => <div data-testid="tags-form">Tags Form</div>);
 });
@@ -46,7 +50,11 @@ describe('ClassificationFormDrawer', () => {
   });
 
   it('should render drawer when open is true', () => {
-    render(<ClassificationFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     expect(
       screen.getByTestId('classification-form-drawer')
@@ -57,15 +65,23 @@ describe('ClassificationFormDrawer', () => {
   });
 
   it('should not render drawer when open is false', () => {
-    render(<ClassificationFormDrawer {...defaultProps} open={false} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} open={false} />
+      </ThemeProvider>
+    );
 
     expect(
       screen.queryByTestId('classification-form-drawer')
     ).not.toBeInTheDocument();
   });
 
   it('should call onClose when close button is clicked', () => {
-    render(<ClassificationFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     const closeButton = screen.getByTestId('drawer-close-icon');
 
@@ -75,7 +91,11 @@ describe('ClassificationFormDrawer', () => {
   });
 
   it('should call onClose when cancel button is clicked', () => {
-    render(<ClassificationFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     const cancelButton = screen.getByTestId('cancel-button');
 
@@ -85,29 +105,45 @@ describe('ClassificationFormDrawer', () => {
   });
 
   it('should render TagsForm component', () => {
-    render(<ClassificationFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     expect(screen.getByTestId('tags-form')).toBeInTheDocument();
   });
 
   it('should disable save button when isLoading is true', () => {
-    render(<ClassificationFormDrawer {...defaultProps} isLoading />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} isLoading />
+      </ThemeProvider>
+    );
 
     const saveButton = screen.getByTestId('save-button');
 
     expect(saveButton).toBeDisabled();
   });
 
   it('should keep "Save" text visible when isLoading is true', () => {
-    render(<ClassificationFormDrawer {...defaultProps} isLoading />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} isLoading />
+      </ThemeProvider>
+    );
 
     const saveButton = screen.getByTestId('save-button');
 
     expect(saveButton).toHaveTextContent('label.save');
   });
 
   it('should show "Save" text when isLoading is false', () => {
-    render(<ClassificationFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <ClassificationFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     const saveButton = screen.getByTestId('save-button');
 

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/ClassificationFormDrawer.tsx

@@ -18,6 +18,7 @@ import {
   Drawer,
   IconButton,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { XClose } from '@untitledui/icons';
 import { FC } from 'react';
@@ -34,6 +35,7 @@ const ClassificationFormDrawer: FC<ClassificationFormDrawerProps> = ({
   onClose,
   onSubmit,
 }) => {
+  const theme = useTheme();
   const { t } = useTranslation();
 
   return (
@@ -94,8 +96,19 @@ const ClassificationFormDrawer: FC<ClassificationFormDrawerProps> = ({
           boxShadow: (theme) => `0px -4px 6px -2px ${theme.palette.grey[200]}`,
         }}>
         <Button
+          color="primary"
           data-testid="cancel-button"
-          variant="outlined"
+          sx={{
+            px: theme.spacing(4),
+            py: theme.spacing(2.5),
+            fontSize: theme.typography.body2.fontSize,
+            color: theme.palette.allShades.blue[600],
+            '&:hover': {
+              backgroundColor: 'transparent',
+              color: theme.palette.allShades.blue[700],
+            },
+          }}
+          variant="text"
           onClick={onClose}>
           {t('label.cancel')}
         </Button>

openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagFormDrawer.test.tsx

@@ -11,10 +11,14 @@
  *  limitations under the License.
  */
 
+import { ThemeProvider } from '@mui/material/styles';
+import { createMuiTheme } from '@openmetadata/ui-core-components';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { FormInstance } from 'antd';
 import TagFormDrawer from './TagFormDrawer';
 
+const theme = createMuiTheme();
+
 jest.mock('./TagsForm', () => {
   return jest.fn(() => <div data-testid="tags-form">Tags Form</div>);
 });
@@ -52,20 +56,32 @@ describe('TagFormDrawer', () => {
   });
 
   it('should render drawer when open is true', () => {
-    render(<TagFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     expect(screen.getByTestId('tag-form-drawer')).toBeInTheDocument();
     expect(screen.getByTestId('form-heading')).toHaveTextContent('Add Tag');
   });
 
   it('should not render drawer when open is false', () => {
-    render(<TagFormDrawer {...defaultProps} open={false} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} open={false} />
+      </ThemeProvider>
+    );
 
     expect(screen.queryByTestId('tag-form-drawer')).not.toBeInTheDocument();
   });
 
   it('should call onClose when close button is clicked', () => {
-    render(<TagFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     const closeButton = screen.getByTestId('drawer-close-icon');
 
@@ -75,7 +91,11 @@ describe('TagFormDrawer', () => {
   });
 
   it('should call onClose when cancel button is clicked', () => {
-    render(<TagFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     const cancelButton = screen.getByTestId('cancel-button');
 
@@ -85,21 +105,33 @@ describe('TagFormDrawer', () => {
   });
 
   it('should render TagsForm component', () => {
-    render(<TagFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     expect(screen.getByTestId('tags-form')).toBeInTheDocument();
   });
 
   it('should apply disabled attribute to save button when isLoading is true', () => {
-    render(<TagFormDrawer {...defaultProps} isLoading />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} isLoading />
+      </ThemeProvider>
+    );
 
     const saveButton = screen.getByTestId('save-button');
 
     expect(saveButton).toBeDisabled();
   });
 
   it('should display "Save" text in save button when isLoading is false', () => {
-    render(<TagFormDrawer {...defaultProps} />);
+    render(
+      <ThemeProvider theme={theme}>
+        <TagFormDrawer {...defaultProps} />
+      </ThemeProvider>
+    );
 
     const saveButton = screen.getByTestId('save-button');