From a90d541a71aefd960c82b8e4bb583f9b70f2870f Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 20 Jan 2021 11:18:48 +0500
Subject: [PATCH] update message card

---
 apps/mobile/AppRootEvents.js                  |  2 +-
 .../src/components/SimpleList/MessageCard.js  | 51 ++++++++++++++-----
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/apps/mobile/AppRootEvents.js b/apps/mobile/AppRootEvents.js
index d5ff87f8b..e576bee19 100644
--- a/apps/mobile/AppRootEvents.js
+++ b/apps/mobile/AppRootEvents.js
@@ -84,7 +84,7 @@ const onAppStateChanged = async (state) => {
       let state = JSON.stringify({
         editing: editing.currentlyEditing,
         note: getNote(),
-        movedAway:editing.movedAway
+        movedAway: editing.movedAway,
       });
       await MMKV.setItem('appState', state);
     }
diff --git a/apps/mobile/src/components/SimpleList/MessageCard.js b/apps/mobile/src/components/SimpleList/MessageCard.js
index a8ce961d9..4c5d1107a 100644
--- a/apps/mobile/src/components/SimpleList/MessageCard.js
+++ b/apps/mobile/src/components/SimpleList/MessageCard.js
@@ -1,10 +1,12 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import {TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { notesnook } from '../../../e2e/test.ids';
-import { useTracked } from '../../provider';
-import { DDS } from '../../services/DeviceDetection';
-import { SIZE } from '../../utils/SizeUtils';
+import {notesnook} from '../../../e2e/test.ids';
+import {useTracked} from '../../provider';
+import {DDS} from '../../services/DeviceDetection';
+import { getElevation } from '../../utils';
+import {SIZE} from '../../utils/SizeUtils';
+import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
 export const MessageCard = ({data, color}) => {
@@ -13,7 +15,7 @@ export const MessageCard = ({data, color}) => {
 
   return !messageBoardState.visible || selectionMode ? null : (
     <TouchableOpacity
-      activeOpacity={0.7}
+      activeOpacity={0.8}
       onPress={messageBoardState.onPress}
       testID={notesnook.ids.default.loginToSync}
       style={{
@@ -21,24 +23,47 @@ export const MessageCard = ({data, color}) => {
         alignItems: 'center',
         justifyContent: 'flex-start',
         position: DDS.isLargeTablet() ? 'relative' : 'absolute',
-        right: 10,
-        top: 10,
-        zIndex:999
+        right: 0,
+        top: 0,
+        zIndex: 999,
+        backgroundColor: messageBoardState.type === "error" ? "red" : color,
+        width: '100%',
       }}>
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
+          paddingHorizontal: 12,
+          paddingVertical: 5,
+          width: '100%',
         }}>
-        <Paragraph
-          color={color}
+        <View
           style={{
-            marginRight: 10,
+            borderRadius: 100,
+            backgroundColor: 'white',
+            marginRight: 5,
+            height: 20,
+            width: 20,
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...getElevation(5)
           }}>
+          <Icon name={messageBoardState.icon} size={SIZE.sm} color={messageBoardState.type === "error" ? "red" : color} />
+        </View>
+
+        <Paragraph size={SIZE.sm} color="white">
           {messageBoardState.actionText}
         </Paragraph>
 
-        <Icon name="arrow-right" size={SIZE.sm} color={color} />
+        <Icon
+          name="arrow-right"
+          size={SIZE.md}
+          color="white"
+          style={{
+            position: 'absolute',
+            right: 12,
+          }}
+        />
       </View>
     </TouchableOpacity>
   );