ref(dialog) Update some dialogs' styles (#12467)

react/features/base/ui/components/native/Input.tsx

@@ -45,11 +45,11 @@ const Input = ({
     const handleChange = useCallback((e: NativeSyntheticEvent<TextInputChangeEventData>) => {
         const { nativeEvent: { text } } = e;
 
-        onChange(text);
+        onChange?.(text);
     }, []);
 
     const clearInput = useCallback(() => {
-        onChange('');
+        onChange?.('');
     }, []);
 
     const blur = useCallback(() => {

react/features/base/ui/components/types.ts

@@ -70,7 +70,7 @@ export interface IInputProps {
     /**
      * Change callback.
      */
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
 
     /**
      * The input placeholder text.

react/features/base/ui/components/web/Dialog.tsx

@@ -21,6 +21,8 @@ const useStyles = makeStyles()((theme: Theme) => {
             width: '100%',
             height: '100%',
             position: 'fixed',
+            color: theme.palette.text01,
+            ...withPixelLineHeight(theme.typography.bodyLongRegular),
             top: 0,
             left: 0,
             display: 'flex',

react/features/base/ui/components/web/Input.tsx

@@ -21,6 +21,7 @@ interface IProps extends IInputProps {
     minRows?: number;
     name?: string;
     onKeyPress?: (e: React.KeyboardEvent) => void;
+    readOnly?: boolean;
     textarea?: boolean;
     type?: 'text' | 'email' | 'number' | 'password';
 }
@@ -147,6 +148,7 @@ const Input = React.forwardRef<any, IProps>(({
     onChange,
     onKeyPress,
     placeholder,
+    readOnly = false,
     textarea = false,
     type = 'text',
     value
@@ -155,9 +157,9 @@ const Input = React.forwardRef<any, IProps>(({
     const isMobile = isMobileBrowser();
 
     const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-        onChange(e.target.value), []);
+        onChange?.(e.target.value), []);
 
-    const clearInput = useCallback(() => onChange(''), []);
+    const clearInput = useCallback(() => onChange?.(''), []);
 
     return (
         <div className = { cx(styles.inputContainer, className) }>
@@ -183,6 +185,7 @@ const Input = React.forwardRef<any, IProps>(({
                         onChange = { handleChange }
                         onKeyPress = { onKeyPress }
                         placeholder = { placeholder }
+                        readOnly = { readOnly }
                         ref = { ref }
                         value = { value } />
                 ) : (
@@ -198,6 +201,7 @@ const Input = React.forwardRef<any, IProps>(({
                         onChange = { handleChange }
                         onKeyPress = { onKeyPress }
                         placeholder = { placeholder }
+                        readOnly = { readOnly }
                         ref = { ref }
                         type = { type }
                         value = { value } />

react/features/embed-meeting/components/EmbedMeetingDialog.tsx

@@ -7,6 +7,7 @@ import CopyButton from '../../base/buttons/CopyButton.web';
 import { getInviteURL } from '../../base/connection/functions';
 import { translate } from '../../base/i18n/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
+import Input from '../../base/ui/components/web/Input';
 
 interface IProps extends WithTranslation {
 
@@ -37,10 +38,10 @@ function EmbedMeeting({ t, url }: IProps) {
             ok = {{ hidden: true }}
             titleKey = { 'embedMeeting.title' }>
             <div className = 'embed-meeting-dialog'>
-                <textarea
-                    aria-label = { t('dialog.embedMeeting') }
-                    className = 'embed-meeting-code'
+                <Input
+                    accessibilityLabel = { t('dialog.embedMeeting') }
                     readOnly = { true }
+                    textarea = { true }
                     value = { getEmbedCode() } />
                 <CopyButton
                     aria-label = { t('addPeople.copyLink') }

react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx

@@ -34,16 +34,17 @@ const useStyles = makeStyles()((theme: Theme) => {
             '& .shortcuts-list__item': {
                 display: 'flex',
                 justifyContent: 'space-between',
-                marginBottom: theme.spacing(2),
-                ...withPixelLineHeight(theme.typography.labelRegular),
+                alignItems: 'center',
+                padding: `${theme.spacing(1)} 0`,
+                ...withPixelLineHeight(theme.typography.bodyShortRegular),
                 color: theme.palette.text01
             },
 
             '& .item-action': {
                 backgroundColor: theme.palette.ui04,
-                fontWeight: 'bold',
-                padding: '1px 4px',
-                borderRadius: '4px'
+                ...withPixelLineHeight(theme.typography.labelBold),
+                padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+                borderRadius: `${Number(theme.shape.borderRadius) / 2}px`
             }
         }
     };