From 75d7c4b160189eae144eb1eb27c617e22093ff27 Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Thu, 27 Oct 2022 11:36:50 +0300
Subject: [PATCH] ref(dialog) Update some dialogs' styles (#12467)

---
 react/features/base/ui/components/native/Input.tsx    |  4 ++--
 react/features/base/ui/components/types.ts            |  2 +-
 react/features/base/ui/components/web/Dialog.tsx      |  2 ++
 react/features/base/ui/components/web/Input.tsx       |  8 ++++++--
 .../embed-meeting/components/EmbedMeetingDialog.tsx   |  7 ++++---
 .../components/web/KeyboardShortcutsDialog.tsx        | 11 ++++++-----
 6 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/react/features/base/ui/components/native/Input.tsx b/react/features/base/ui/components/native/Input.tsx
index ac0252644..e77715adb 100644
--- a/react/features/base/ui/components/native/Input.tsx
+++ b/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(() => {
diff --git a/react/features/base/ui/components/types.ts b/react/features/base/ui/components/types.ts
index 480973ee6..124ea4041 100644
--- a/react/features/base/ui/components/types.ts
+++ b/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.
diff --git a/react/features/base/ui/components/web/Dialog.tsx b/react/features/base/ui/components/web/Dialog.tsx
index 6a5c5b446..e4478ffc4 100644
--- a/react/features/base/ui/components/web/Dialog.tsx
+++ b/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',
diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx
index 503744ef3..24299d569 100644
--- a/react/features/base/ui/components/web/Input.tsx
+++ b/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 } />
diff --git a/react/features/embed-meeting/components/EmbedMeetingDialog.tsx b/react/features/embed-meeting/components/EmbedMeetingDialog.tsx
index 56cbeee9b..e5ec41114 100644
--- a/react/features/embed-meeting/components/EmbedMeetingDialog.tsx
+++ b/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') }
diff --git a/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx b/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx
index 1358478bc..46d4151e5 100644
--- a/react/features/keyboard-shortcuts/components/web/KeyboardShortcutsDialog.tsx
+++ b/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`
             }
         }
     };