Make Modals like in new Web

- Title has a coloured bg, bottom is white
sos-lapsikyla · Dec 22, 2023 · 1153cdf · 1153cdf
1 parent fde6830
commit 1153cdf
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 58 deletions.
diff --git a/src/Screens/Main/Chat/chatProperties.ts b/src/Screens/Main/Chat/chatProperties.ts
@@ -3,21 +3,25 @@ import { DropDownItem } from 'src/Screens/components/DropDownMenu';
 
 export const dialogProperties = {
   deleted: {
+    title: 'main.chat.delete',
     messageId: 'main.chat.delete.confirmation',
     primaryButtonMessage: 'main.chat.delete.confirmation.button',
     modalType: 'danger',
   },
   ok: {
+    title: 'main.chat.unban',
     messageId: 'main.chat.unban.confirmation',
     primaryButtonMessage: 'main.chat.unban.confirmation.button',
     modalType: 'info',
   },
   banned: {
+    title: 'main.chat.ban',
     messageId: 'main.chat.ban.confirmation',
     primaryButtonMessage: 'main.chat.ban.confirmation.button',
     modalType: 'warning',
   },
   archived: {
+    title: 'main.chat.archive',
     messageId: 'main.chat.archive.confirmation',
     primaryButtonMessage: 'main.chat.archive.confirmation.button',
     modalType: 'info',

diff --git a/src/Screens/Main/FolderedChats/index.tsx b/src/Screens/Main/FolderedChats/index.tsx
@@ -99,6 +99,7 @@ export default ({ navigation, route }: Props) => {
       )}
       {dialogState.dialogOpen && (
         <Modal
+          title={'main.chat.deleteAll'}
           messageId={'main.chat.deleteAll.confirmation'}
           primaryButtonMessage={'main.chat.delete.confirmation.button'}
           secondaryButtonMessage={'meta.cancel'}
@@ -109,6 +110,7 @@ export default ({ navigation, route }: Props) => {
       )}
       {isBanRequestFailed ? (
         <Modal
+          title="meta.error"
           modalType="danger"
           messageId="main.chat.deleteAll.error"
           onSecondaryPress={resetBanRequestState}

diff --git a/src/Screens/Main/Settings/Email/Email.tsx b/src/Screens/Main/Settings/Email/Email.tsx
@@ -97,6 +97,7 @@ export default ({ navigation }: Props) => {
               ),
               () => (
                 <AlertModal
+                  title="meta.error"
                   modalType="danger"
                   messageId="main.settings.account.email.fail"
                   onPrimaryPress={changeEmail}

diff --git a/src/Screens/Main/Settings/Email/index.tsx b/src/Screens/Main/Settings/Email/index.tsx
@@ -92,6 +92,7 @@ export default ({ navigation }: Props) => {
               () => <Spinner style={styles.spinner} />,
               () => (
                 <AlertModal
+                  title="meta.error"
                   modalType="danger"
                   messageId="main.settings.account.email.fail"
                   onPrimaryPress={changeEmail}

diff --git a/src/Screens/Main/Settings/Password/index.tsx b/src/Screens/Main/Settings/Password/index.tsx
@@ -98,6 +98,7 @@ export default ({ navigation }: Props) => {
               () => <Spinner style={styles.spinner} />,
               () => (
                 <AlertModal
+                  title="meta.error"
                   modalType="danger"
                   messageId="main.settings.account.password.failure"
                   onSecondaryPress={reset}

diff --git a/src/Screens/Main/Settings/UserAccount/MentorForm.tsx b/src/Screens/Main/Settings/UserAccount/MentorForm.tsx
@@ -145,6 +145,7 @@ export default ({ userId }: Props) => {
             () => <Spinner />,
             () => (
               <AlertModal
+                title="meta.error"
                 modalType="danger"
                 messageId="main.settings.account.status.fail"
                 onSecondaryPress={resetStatusMessage}

diff --git a/src/Screens/Onboarding/PrivacyPolicy.tsx b/src/Screens/Onboarding/PrivacyPolicy.tsx
@@ -64,37 +64,31 @@ const PrivacyPolicy = ({ navigation, route }: Props) => {
           style={styles.bodyText}
           id="onboarding.privacyPolicy.bodyText2"
         />
-
         <Message
           style={styles.bodyText3}
           id="onboarding.privacyPolicy.bodyText3"
         />
         <Link
-          style={styles.link}
           linkName="onboarding.privacyPolicy.link"
           url={config.termsUrl}
+          style={styles.link}
         />
-
-        <ErrorMessage
-          style={styles.errorText}
-          getMessageId={() => 'meta.error'}
-          data={createUserState}
-        />
-
+        {RD.isFailure(createUserState) && (
+          <ErrorMessage
+            getMessageId={() => 'meta.error'}
+            data={createUserState}
+          />
+        )}
         <MessageSwitch
-          style={styles.switch}
           messageStyle={styles.switchMessage}
-          containerStyle={styles.toggleMargin}
           onPress={() => setIsOver15(!isOver15)}
           value={isOver15}
           testID={'onboarding.age.switch'}
           messageOn={'onboarding.age.switch'}
           messageOff={'onboarding.age.switch'}
         />
         <MessageSwitch
-          style={styles.switch}
           messageStyle={styles.switchMessage}
-          containerStyle={styles.toggleMargin}
           onPress={() => setAgreed(!isAgreed)}
           value={isAgreed}
           testID={'onboarding.privacyPolicy.switch'}
@@ -109,7 +103,6 @@ const PrivacyPolicy = ({ navigation, route }: Props) => {
             noShadow={true}
             emphasis="low"
           />
-
           <Button
             style={
               isAgreed && isOver15 ? styles.nextButton : styles.notValidButton
@@ -132,65 +125,51 @@ const styles = RN.StyleSheet.create({
   card: {
     padding: 30,
     alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
   },
   title: {
     ...fonts.titleBold,
     textAlign: 'center',
     color: colors.darkestBlue,
-    marginBottom: 32,
-  },
-  nickNameInput: {
-    marginBottom: 24,
   },
   bodyText: {
     ...fonts.regular,
     color: colors.darkestBlue,
-    marginBottom: 32,
   },
   bodyText3: {
     ...fonts.regular,
     color: colors.darkestBlue,
-    marginBottom: 5,
+  },
+  link: {
+    marginTop: -16,
   },
   buttonContainer: {
-    marginTop: 16,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: 24,
   },
   backButton: {
     flex: 1.2,
-    marginHorizontal: 4,
     height: 32,
-    marginTop: 4,
   },
   notValidButton: {
     backgroundColor: colors.background,
     flex: 2,
     height: 32,
     width: 32,
-    marginTop: 4,
-    marginLeft: 18,
   },
   nextButton: {
     flex: 2,
     height: 32,
     width: 32,
-    marginTop: 4,
-    marginLeft: 18,
   },
   badgeStyle: {
     height: 32,
     width: 32,
-    marginTop: 5,
-    marginLeft: 4,
-  },
-  toggleMargin: {
-    marginBottom: 16,
   },
-  link: {},
-  errorText: {},
-  switch: {},
   switchMessage: {
     ...fonts.regular,
   },

diff --git a/src/Screens/components/Modal/index.tsx b/src/Screens/components/Modal/index.tsx
@@ -15,6 +15,7 @@ import { props as modalProps } from './modalProps';
 
 type Props = {
   style?: RN.StyleProp<RN.ViewStyle>;
+  title: localization.MessageId;
   messageId: localization.MessageId;
   modalType: AlertVariant;
   primaryButtonMessage?: localization.MessageId;
@@ -24,7 +25,7 @@ type Props = {
 };
 
 const Modal: React.FC<Props> = props => {
-  const { backgroundColor, tintColor, icon } = modalProps[props.modalType];
+  const { backgroundColor, icon } = modalProps[props.modalType];
 
   const hasTwoCallbacks =
     typeof props.onSecondaryPress !== 'undefined' &&
@@ -38,11 +39,13 @@ const Modal: React.FC<Props> = props => {
     <RN.View style={styles.container}>
       <RN.Modal animationType="fade" transparent={true} visible={true}>
         <RN.View style={styles.background}>
-          <RN.View
-            style={[props.style, styles.modalContainer, { backgroundColor }]}
-          >
+          <RN.View style={[props.style, styles.modalContainer]}>
+            <RN.View style={[styles.titleContainer, { backgroundColor }]}>
+              <RN.Image style={styles.image} source={icon} />
+              <Message id={props.title} style={styles.title} />
+            </RN.View>
+
             <RN.View style={styles.textContainer}>
-              <RN.Image style={[styles.image, { tintColor }]} source={icon} />
               <Message id={props.messageId} style={styles.text} />
             </RN.View>
 
@@ -85,38 +88,52 @@ const styles = RN.StyleSheet.create({
   },
   modalContainer: {
     marginHorizontal: 24,
+    backgroundColor: colors.white,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'space-around',
     borderRadius: 16,
-    padding: 24,
-    marginTop: 24,
     ...shadow(7),
   },
-  textContainer: {
+  titleContainer: {
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
+    gap: 16,
     alignItems: 'center',
     justifyContent: 'flex-start',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+  },
+  textContainer: {
+    padding: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  title: {
+    color: colors.darkestBlue,
+    ...fonts.titleBold,
   },
   text: {
     color: colors.darkestBlue,
     ...fonts.large,
-    marginLeft: 24,
     flex: 1,
     flexWrap: 'wrap',
   },
   buttonContainer: {
     width: '100%',
     flexDirection: 'row',
-    marginTop: 24,
     alignItems: 'center',
+    padding: 24,
   },
   image: {
-    width: 40,
-    height: 40,
+    tintColor: colors.darkestBlue,
+    width: 32,
+    height: 32,
   },
   button: {
     flex: 1,

diff --git a/src/Screens/components/Modal/modalProps.ts b/src/Screens/components/Modal/modalProps.ts
@@ -2,23 +2,19 @@ import colors from '../colors';
 
 export const props = {
   danger: {
-    backgroundColor: colors.lightDanger,
-    tintColor: colors.danger,
+    backgroundColor: colors.red,
     icon: require('../../images/error_icon.svg'),
   },
   success: {
-    backgroundColor: colors.lighterGreen,
-    tintColor: colors.green,
+    backgroundColor: colors.green,
     icon: require('../../images/success_icon.svg'),
   },
   info: {
-    backgroundColor: colors.lightBlue,
-    tintColor: colors.darkestBlue,
+    backgroundColor: colors.blue,
     icon: require('../../images/info_icon.svg'),
   },
   warning: {
-    backgroundColor: colors.orangeLight,
-    tintColor: colors.purple,
+    backgroundColor: colors.orangeLighter,
     icon: require('../../images/alert_icon.svg'),
   },
 };
diff --git a/src/Screens/components/Toast.tsx b/src/Screens/components/Toast.tsx
@@ -29,7 +29,7 @@ export const Toast: React.FC<Props> = ({
 }) => {
   const opacity = React.useRef(new RN.Animated.Value(0)).current;
 
-  const { backgroundColor, tintColor, icon } = toastProps[toastType];
+  const { backgroundColor, icon } = toastProps[toastType];
 
   const fadeInAndOut = () =>
     RN.Animated.sequence([
@@ -60,7 +60,7 @@ export const Toast: React.FC<Props> = ({
         <RN.Animated.View
           style={[styles.toastContainer, style, { opacity, backgroundColor }]}
         >
-          <RN.Image style={[styles.image, { tintColor }]} source={icon} />
+          <RN.Image style={styles.image} source={icon} />
           <Message id={messageId} style={styles.text} />
         </RN.Animated.View>
       </RN.Modal>
@@ -84,6 +84,7 @@ const styles = RN.StyleSheet.create({
     ...shadow(7),
   },
   image: {
+    tintColor: colors.darkestBlue,
     width: 40,
     height: 40,
     marginRight: 24,

diff --git a/src/Screens/components/colors.ts b/src/Screens/components/colors.ts
@@ -17,6 +17,7 @@ const colors = {
   purple: '#4A2ACB',
   purplePale: '#E5E4FF',
   orangeLight: '#F0BA8C',
+  orangeLighter: '#FFD79B',
   blue: '#01A5EC',
   lightBlue: '#D3EFFF',
   darkBlue: '#43BFFF',
@@ -29,7 +30,6 @@ const colors = {
 
   // greens
   green: '#75C550',
-  lighterGreen: '#E4FDD3',
 };
 
 export default colors;