update announcement ui

apps/mobile/src/components/Button/index.js

@@ -27,7 +27,7 @@ export const Button = ({
   accentText = 'light',
   onLongPress,
   tooltipText,
-  textStyle
+  textStyle,
 }) => {
   const [state] = useTracked();
   const {colors} = state;
@@ -41,7 +41,7 @@ export const Button = ({
   return (
     <PressableButton
       onPress={onPress}
-      onLongPress={(event) => {
+      onLongPress={event => {
         if (onLongPress) {
           onLongPress();
           return;
@@ -81,9 +81,12 @@ export const Button = ({
         <Heading
           color={textColor}
           size={fontSize}
-          style={[{
+          style={[
+            {
               marginLeft: icon || loading ? 5 : 0,
-          },textStyle]}>
+            },
+            textStyle,
+          ]}>
           {title}
         </Heading>
       )}

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

@@ -12,15 +12,15 @@ import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
-export const Announcement = ({data, color}) => {
+export const Announcement = ({data, color,announcement,remove}) => {
   const [state] = useTracked();
+  const colors = state.colors;
   const {selectionMode} = state;
-  const [announcement, remove] = useAnnouncement();
 
   return !announcement || selectionMode ? null : (
     <View
       style={{
-        backgroundColor: color,
+        backgroundColor: colors.bg,
         width: '100%',
       }}>
       <View
@@ -29,6 +29,35 @@ export const Announcement = ({data, color}) => {
           paddingVertical: 12,
           width: '100%',
         }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}>
+          <Button
+            title="Announcement"
+            fontSize={12}
+            type="shade"
+            height={null}
+            icon="bullhorn"
+            style={{
+              paddingVertical: 4,
+            }}
+          />
+
+          <Button
+            title="Dismiss"
+            fontSize={12}
+            type="error"
+            height={null}
+            onPress={remove}
+            style={{
+              paddingVertical: 4,
+            }}
+          />
+        </View>
+
         <View
           style={{
             flexDirection: 'row',
@@ -38,25 +67,23 @@ export const Announcement = ({data, color}) => {
           {announcement?.title && (
             <Heading
               style={{
-                width: '90%',
+                width: '100%',
               }}
               size={SIZE.lg}
-              color="white">
+              color={colors.heading}>
               {announcement.title}
             </Heading>
           )}
-
-          <Icon onPress={remove} name="close" size={SIZE.xl} color="white" />
         </View>
 
         {announcement?.description && (
-          <Paragraph color="white">{announcement.description}</Paragraph>
+          <Paragraph color={colors.pri}>{announcement.description}</Paragraph>
         )}
         <Seperator />
 
         {announcement?.cta && (
           <Button
-            type="inverted"
+            type="accent"
             title={announcement.cta.text}
             fontSize={SIZE.md}
             onPress={async () => {

apps/mobile/src/components/SimpleList/card.js

@@ -6,15 +6,15 @@ import {useTracked} from '../../provider';
 import {DDS} from '../../services/DeviceDetection';
 import {getElevation} from '../../utils';
 import {SIZE} from '../../utils/SizeUtils';
+import useAnnouncement from '../../utils/useAnnouncement';
 import Paragraph from '../Typography/Paragraph';
 
-export const Card = ({data, color}) => {
+export const Card = ({data, color,announcement}) => {
   const [state] = useTracked();
   const {selectionMode, messageBoardState} = state;
 
 
-
-  return !messageBoardState.visible || selectionMode ? null : (
+  return !messageBoardState.visible || selectionMode || announcement ? null : (
     <TouchableOpacity
       activeOpacity={0.8}
       onPress={messageBoardState.onPress}
@@ -23,7 +23,7 @@ export const Card = ({data, color}) => {
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'flex-start',
-        position: DDS.isLargeTablet() ? 'relative' : 'absolute',
+        position: DDS.isLargeTablet() || announcement ? 'relative' : 'absolute',
         right: 0,
         top: 0,
         zIndex: 100,

apps/mobile/src/components/SimpleList/header.js

@@ -5,6 +5,7 @@ import {DDS} from '../../services/DeviceDetection';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {hexToRGBA} from '../../utils/ColorUtils';
 import {normalize, SIZE} from '../../utils/SizeUtils';
+import useAnnouncement from '../../utils/useAnnouncement';
 import {Button} from '../Button';
 import {Placeholder} from '../ListPlaceholders';
 import Heading from '../Typography/Heading';
@@ -20,12 +21,13 @@ export const Header = ({
   onPress,
   shouldShow = false,
   icon,
-  screen
+  screen,
+  announcement
 }) => {
   const [state] = useTracked();
   const {colors} = state;
 
-  return type === 'search' ? null : DDS.isLargeTablet() && !shouldShow ? (
+  return type === 'search' ? null : (DDS.isLargeTablet() && !shouldShow) || announcement ? (
     <View
       style={{
         minHeight: 50,

apps/mobile/src/components/SimpleList/index.js

@@ -9,6 +9,7 @@ import Sync from '../../services/Sync';
 import {dHeight, doInBackground, dWidth} from '../../utils';
 import {COLORS_NOTE} from '../../utils/Colors';
 import {eScrollEvent} from '../../utils/Events';
+import useAnnouncement from '../../utils/useAnnouncement';
 import JumpToDialog from '../JumpToDialog';
 import {NotebookWrapper} from '../NotebookItem/wrapper';
 import {NoteWrapper} from '../NoteItem/wrapper';
@@ -52,12 +53,11 @@ const SimpleList = ({
   );
   const [width, setWidth] = useState(dWidth);
   const scrollRef = useRef();
-
   const insets = useSafeAreaInsets();
-
   const {fontScale} = useWindowDimensions();
   const refreshing = false;
   const dataType = type;
+  const [announcement, remove] = useAnnouncement();
 
   useEffect(() => {
     setWidth(dWidth);
@@ -76,7 +76,7 @@ const SimpleList = ({
       _setLoading(true);
       setDataProvider(dataProvider.cloneWithRows([header, empty]));
     }
-  }, [listData, deviceMode, loading]);
+  }, [listData, deviceMode, loading, announcement]);
 
   const _onRefresh = async () => {
     await Sync.run();
@@ -133,8 +133,8 @@ const SimpleList = ({
           dim.height =
             dataType === 'search'
               ? 0
-              : DDS.isLargeTablet()
-              ? messageBoardState.visible
+              : DDS.isLargeTablet() || announcement
+              ? messageBoardState.visible && !announcement
                 ? 50
                 : 0
               : 195;
@@ -179,6 +179,7 @@ const SimpleList = ({
             onPress={headerProps.onPress}
             icon={headerProps.icon}
             type={dataType}
+            announcement={announcement}
             index={index}
             data={listData}
             screen={screen}
@@ -242,6 +243,8 @@ const SimpleList = ({
     <>
       {!loading && (
         <Announcement
+          announcement={announcement}
+          remove={remove}
           color={
             COLORS_NOTE[headerProps.heading?.toLowerCase()] || colors.accent
           }

apps/mobile/src/utils/useAnnouncement.js

@@ -24,14 +24,14 @@ export default function useAnnouncement() {
 
         setAnnouncement(CACHED_ANNOUNCEMENT);
       } catch (e) {
-        setAnnouncement();
+        setAnnouncement(null);
       }
     })();
   }, []);
 
   const remove = useCallback(async () => {
     await Storage.write('removedAnnouncement', CACHED_ANNOUNCEMENT.id);
-    setAnnouncement();
+    setAnnouncement(null);
   }, [announcement]);
   return [announcement, remove];
 }