improve announcements ui

apps/mobile/src/components/announcements/announcement.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { FlatList, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
 import { useMessageStore, useSelectionStore } from '../../stores/stores';
-import { Button } from '../ui/button';
+import { useThemeStore } from '../../stores/theme';
 import { allowedOnPlatform, renderItem } from './functions';
-import { SIZE } from '../../utils/size';
 
 export const Announcement = ({ color }) => {
   const colors = useThemeStore(state => state.colors);
   const announcements = useMessageStore(state => state.announcements);
-  const remove = useMessageStore(state => state.remove);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore(state => state.selectionMode);
 
@@ -17,49 +14,25 @@ export const Announcement = ({ color }) => {
     <View
       style={{
         backgroundColor: colors.bg,
-        width: '100%'
+        width: '100%',
+        paddingHorizontal: 12,
+        paddingTop: 12,
+        paddingBottom: 12
       }}
     >
       <View
         style={{
-          paddingVertical: 12,
           width: '100%',
           borderRadius: 10,
-          overflow: 'hidden'
+          overflow: 'hidden',
+          backgroundColor: colors.nav
         }}
       >
-        <Button
-          type="error"
-          icon="close"
-          height={null}
-          onPress={() => {
-            remove(announcement.id);
-          }}
-          hitSlop={{
-            left: 10,
-            top: 0,
-            bottom: 10,
-            right: 0
-          }}
-          title="Hide"
-          iconSize={16}
-          fontSize={SIZE.xs + 1}
-          style={{
-            borderRadius: 100,
-            position: 'absolute',
-            top: 10,
-            right: 12,
-            paddingVertical: 4,
-            paddingHorizontal: 6,
-            zIndex: 999
-          }}
-        />
-
         <View>
           <FlatList
             style={{
               width: '100%',
-              marginTop: 15
+              marginTop: 12
             }}
             data={announcement?.body.filter(item => allowedOnPlatform(item.platforms))}
             renderItem={({ item, index }) =>