ref(styles) Change some withStyles to makeStyles (#12373)

Convert PreMeetingScreen to TS and transform it to function component

react/features/prejoin/components/DropdownButton.tsx

@@ -1,16 +1,11 @@
 import { Theme } from '@mui/material';
-import { withStyles } from '@mui/styles';
 import React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../base/icons/components/Icon';
 
 type Props = {
 
-    /**
-     * The css classes generated from theme.
-     */
-    classes: any;
-
     /**
      * Attribute used in automated testing.
      */
@@ -37,14 +32,8 @@ type Props = {
     onKeyPressed: (e?: React.KeyboardEvent) => void;
 };
 
-/**
- * Creates the styles for the component.
- *
- * @param {Object} theme - The current UI theme.
- *
- * @returns {Object}
- */
-const styles = (theme: Theme) => {
+
+const useStyles = makeStyles()((theme: Theme) => {
     return {
         prejoinPreviewDropdownBtn: {
             alignItems: 'center',
@@ -70,7 +59,7 @@ const styles = (theme: Theme) => {
             }
         }
     };
-};
+});
 
 /**
  * Buttons used for pre meeting actions.
@@ -78,26 +67,30 @@ const styles = (theme: Theme) => {
  * @returns {ReactElement}
  */
 const DropdownButton = ({
-    classes,
     dataTestId,
     icon,
     onButtonClick,
     onKeyPressed,
     label
-}: Props) => (
-    <div
-        className = { classes.prejoinPreviewDropdownBtn }
-        data-testid = { dataTestId }
-        onClick = { onButtonClick }
-        onKeyPress = { onKeyPressed }
-        role = 'button'
-        tabIndex = { 0 }>
-        <Icon
-            className = { classes.prejoinPreviewDropdownIcon }
-            size = { 24 }
-            src = { icon } />
-        {label}
-    </div>
-);
+}: Props) => {
+    const { classes } = useStyles();
 
-export default withStyles(styles)(DropdownButton);
+    return (
+        <div
+            className = { classes.prejoinPreviewDropdownBtn }
+            data-testid = { dataTestId }
+            onClick = { onButtonClick }
+            onKeyPress = { onKeyPressed }
+            role = 'button'
+            tabIndex = { 0 }>
+            <Icon
+                className = { classes.prejoinPreviewDropdownIcon }
+                color = '#1C2025'
+                size = { 24 }
+                src = { icon } />
+            {label}
+        </div>
+    );
+};
+
+export default DropdownButton;