mobile: fix announcements ui

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

@@ -25,10 +25,17 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
 import { DefaultAppStyles } from "../../utils/styles";
+import Heading from "../ui/typography/heading";
+import { AppFontSize } from "../../utils/size";
+import { Button } from "../ui/button";
+import { strings } from "@notesnook/intl";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
-  const announcements = useMessageStore((state) => state.announcements);
+  const [announcements, remove] = useMessageStore((state) => [
+    state.announcements,
+    state.remove
+  ]);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
@@ -57,6 +64,38 @@ export const Announcement = ({ color }) => {
             marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.primary.border,
+              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          >
+            <Heading color={colors.secondary.heading} size={AppFontSize.xxs}>
+              {strings.announcement()}
+            </Heading>
+
+            <Button
+              type="plain"
+              icon="close"
+              height={null}
+              onPress={() => {
+                remove(announcement.id);
+              }}
+              iconSize={20}
+              fontSize={AppFontSize.xs}
+              style={{
+                paddingVertical: 0,
+                paddingHorizontal: 0,
+                zIndex: 10
+              }}
+            />
+          </View>
+
           {announcement?.body
             .filter((item) => allowedOnPlatform(item.platforms))
             .map((item, index) =>

apps/mobile/app/components/announcements/cta.js

@@ -51,7 +51,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        flexDirection: inline ? "row" : "column"
+        flexDirection: inline ? "row" : "column",
+        gap: DefaultAppStyles.GAP_SMALL
       }}
     >
       <SheetProvider context="premium_cta" />
@@ -86,12 +87,10 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 fontSize={AppFontSize.sm}
                 type="plain"
                 onPress={() => onPress(item)}
-                width={null}
-                height={30}
                 style={{
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0,
-                  marginLeft: 12
+                  paddingHorizontal: 0
                 }}
                 textStyle={{
                   textDecorationLine: "underline"
@@ -115,10 +114,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}
-                width={250}
                 style={{
-                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
-                  borderRadius: 100
+                  width: "100%"
                 }}
               />
             ))}
@@ -135,7 +132,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+                  width: "100%"
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

apps/mobile/app/components/announcements/description.js

@@ -21,16 +21,17 @@ import React from "react";
 import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Description = ({ text, style = {}, inline }) => {
   return (
     <Paragraph
       style={{
-        marginHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? AppFontSize.sm : AppFontSize.md}
+      size={AppFontSize.sm}
     >
       {text}
     </Paragraph>

apps/mobile/app/components/announcements/index.js

@@ -33,6 +33,7 @@ import {
 import BaseDialog from "../dialog/base-dialog";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  * Test announcement
@@ -138,9 +139,9 @@ export const AnnouncementDialog = () => {
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",
-          marginBottom: DDS.isTab ? 20 : 0,
-          borderTopRightRadius: 10,
-          borderTopLeftRadius: 10
+          paddingVertical: DefaultAppStyles.GAP,
+          borderTopRightRadius: 15,
+          borderTopLeftRadius: 15
         }}
       >
         <FlatList

apps/mobile/app/components/announcements/title.js

@@ -27,10 +27,6 @@ import { getStyle } from "./functions";
 import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
-  const announcements = useMessageStore((state) => state.announcements);
-  let announcement = announcements.length > 0 ? announcements[0] : null;
-  const remove = useMessageStore((state) => state.remove);
-
   return inline ? (
     <View
       style={{
@@ -42,46 +38,21 @@ export const Title = ({ text, style = {}, inline }) => {
     >
       <Heading
         style={{
-          marginHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
         }}
-        numberOfLines={1}
         size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
-
-      <Button
-        type="plain"
-        icon="close"
-        height={null}
-        onPress={() => {
-          remove(announcement.id);
-        }}
-        hitSlop={{
-          left: 15,
-          top: 10,
-          bottom: 10,
-          right: 0
-        }}
-        iconSize={24}
-        fontSize={AppFontSize.xs}
-        style={{
-          borderRadius: 100,
-          paddingVertical: 0,
-          paddingHorizontal: 0,
-          marginRight: 12,
-          zIndex: 10
-        }}
-      />
     </View>
   ) : (
     <Heading
       style={{
-        marginHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}

apps/mobile/app/hooks/use-app-events.tsx

@@ -346,6 +346,9 @@ const doAppLoadActions = async () => {
     eSendEvent(eLoginSessionExpired);
     return;
   }
+
+  await useMessageStore.getState().setAnnouncement();
+
   notifee.setBadgeCount(0);
 
   if (!(await db.user.getUser())) {
@@ -353,7 +356,6 @@ const doAppLoadActions = async () => {
     return;
   }
 
-  await useMessageStore.getState().setAnnouncement();
   if (NewFeature.present()) return;
   if (await checkAppUpdateAvailable()) return;
   if (await checkForRateAppRequest()) return;

apps/mobile/app/stores/use-message-store.ts

@@ -110,10 +110,14 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
     );
     const dialogIndex = dialogsCopy.findIndex((dialog) => dialog.id === id);
 
-    if (index >= -1) {
-      dialogsCopy.splice(dialogIndex, 1);
+    if (index != -1) {
       inlineCopy.splice(index, 1);
     }
+
+    if (dialogIndex != -1) {
+      dialogsCopy.splice(dialogIndex, 1);
+    }
+
     set({ announcements: inlineCopy, dialogs: dialogsCopy });
   },
   dialogs: [],
@@ -163,8 +167,6 @@ async function shouldShowAnnouncement(announcement: Announcement) {
   if (announcement.appVersion) {
     return announcement.appVersion === (getVersion() as unknown as number);
   }
-
-  if (!show) return false;
   if (!show) return false;
   const user = (await db.user?.getUser()) as User;
   const subStatus = user?.subscription?.status;
@@ -183,6 +185,7 @@ async function shouldShowAnnouncement(announcement: Announcement) {
       case "unverified":
         return !user?.isEmailConfirmed;
       case "any":
+        return true;
       default:
         return false;
     }

packages/intl/locale/en.po

@@ -859,6 +859,10 @@ msgstr "and much more."
 msgid "and we will manually confirm your account."
 msgstr "and we will manually confirm your account."
 
+#: src/strings.ts:2591
+msgid "ANNOUNCEMENT"
+msgstr "ANNOUNCEMENT"
+
 #: src/strings.ts:252
 msgid "App data has been cleared. Kindly relaunch the app to login again."
 msgstr "App data has been cleared. Kindly relaunch the app to login again."

packages/intl/locale/pseudo-LOCALE.po

@@ -859,6 +859,10 @@ msgstr ""
 msgid "and we will manually confirm your account."
 msgstr ""
 
+#: src/strings.ts:2591
+msgid "ANNOUNCEMENT"
+msgstr ""
+
 #: src/strings.ts:252
 msgid "App data has been cleared. Kindly relaunch the app to login again."
 msgstr ""

packages/intl/src/strings.ts

@@ -2587,5 +2587,6 @@ Use this if changes from other devices are not appearing on this device. This wi
   alreadySubscribed: () => t`You are already subscribed to this plan.`,
   specialOffer: () => t`Special Offer`,
   changePlanOnWeb: () =>
-    t`You can change your subscription plan from the web app`
+    t`You can change your subscription plan from the web app`,
+  announcement: () => t`ANNOUNCEMENT`
 };