From b679de60b9b51a0b1b21d8c076a05a85f4a055fa Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Sun, 6 Feb 2022 18:28:58 +0100
Subject: [PATCH] refactor: add missing component using example

---
 src/components/Dialog/DialogIcon.tsx | 39 ++++++++++++++++++++++++++++
 src/components/Modal.tsx             |  7 ++---
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/Dialog/DialogIcon.tsx b/src/components/Dialog/DialogIcon.tsx
index a6ce5a8e55..cb867ae9e6 100644
--- a/src/components/Dialog/DialogIcon.tsx
+++ b/src/components/Dialog/DialogIcon.tsx
@@ -17,6 +17,43 @@ type Props = {
    */
   size?: number;
 };
+
+/**
+ * A component to show an icon in a Dialog.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { StyleSheet } from 'react-native';
+ * import { Paragraph, Dialog, Portal } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [visible, setVisible] = React.useState(false);
+ *
+ *   const hideDialog = () => setVisible(false);
+ *
+ *   return (
+ *     <Portal>
+ *       <Dialog visible={visible} onDismiss={hideDialog}>
+ *         <Dialog.Icon icon="alert" />
+ *         <Dialog.Title style={styles.title}>This is a title</Dialog.Title>
+ *         <Dialog.Content>
+ *           <Paragraph>This is simple dialog</Paragraph>
+ *         </Dialog.Content>
+ *       </Dialog>
+ *     </Portal>
+ *   );
+ * };
+ *
+ * const styles = StyleSheet.create({
+ *   title: {
+ *     textAlign: 'center',
+ *   },
+ * })
+ *
+ * export default MyComponent;
+ * ```
+ */
 const DialogIcon = ({ size = 24, color, icon }: Props) => {
   const { md } = useTheme();
   return (
@@ -30,6 +67,8 @@ const DialogIcon = ({ size = 24, color, icon }: Props) => {
   );
 };
 
+DialogIcon.displayName = 'Dialog.Icon';
+
 const styles = StyleSheet.create({
   wrapper: {
     alignItems: 'center',
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index e2c2645037..5fee9a2691 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -19,6 +19,7 @@ import { useTheme } from '../core/theming';
 import useAnimatedValue from '../utils/useAnimatedValue';
 import { addEventListener } from '../utils/addEventListener';
 import color from 'color';
+import { tokens } from '../styles/themes/v3/tokens';
 
 type Props = {
   /**
@@ -110,7 +111,7 @@ export default function Modal({
     visibleRef.current = visible;
   });
 
-  const { colors, animation, isV3, md } = useTheme();
+  const { colors, animation, isV3 } = useTheme();
 
   const opacity = useAnimatedValue(visible ? 1 : 0);
 
@@ -222,8 +223,8 @@ export default function Modal({
             styles.backdrop,
             {
               backgroundColor: isV3
-                ? color(md('md.sys.color.background') as string)
-                    .alpha(0.8)
+                ? color(tokens.md.ref.palette['neutral-variant20'])
+                    .alpha(0.4)
                     .rgb()
                     .string()
                 : colors?.backdrop,