feat: improve multi action announcement UI

apps/web/src/components/announcements/index.js

@@ -21,10 +21,7 @@ function Announcements({ announcements, removeAnnouncement }) {
         >
           <Icon.Announcement size={12} color="primary" sx={{ mr: "3px" }} />
           <Text color="primary" variant="subBody" fontWeight="bold">
-            Announcement{" "}
-            {announcements.length - 1 >= 1
-              ? `(${announcements.length - 1} more)`
-              : ""}
+            Announcement
           </Text>
         </Flex>
         <Text
@@ -34,8 +31,12 @@ function Announcements({ announcements, removeAnnouncement }) {
           py={"1px"}
           variant="subBody"
           fontWeight="bold"
-          sx={{ cursor: "pointer", ":hover": { opacity: 0.7 } }}
+          sx={{
+            cursor: "pointer",
+            ":hover": { opacity: 0.7 },
+          }}
           onClick={() => {
+            trackEvent(announcement.title, "dismissed");
             removeAnnouncement && removeAnnouncement(announcement.id);
           }}
         >
@@ -51,38 +52,55 @@ function Announcements({ announcements, removeAnnouncement }) {
           {announcement.description}
         </Text>
       )}
-
-      {announcement.callToActions?.map((action) =>
-        action.platforms.some(
-          (platform) => allowedPlatforms.indexOf(platform) > -1
-        ) ? (
-          <Button
-            m={0}
-            mt={1}
-            p={1}
-            fontWeight="bold"
-            onClick={async () => {
-              trackEvent(action.data, action.type);
-              switch (action.type) {
-                case "link":
-                  const url = new URL(action.data);
-                  if (url.origin === window.location.origin)
-                    window.open(action.data, "_self");
-                  else window.open(action.data, "_blank");
-                  break;
-                case "promo":
-                  const coupon = action.data;
-                  await showBuyDialog(coupon);
-                  break;
-                default:
-                  return;
+      <Flex justifyContent="space-evenly" mt={1}>
+        {announcement.callToActions?.map((action, index) =>
+          action.platforms.some(
+            (platform) => allowedPlatforms.indexOf(platform) > -1
+          ) ? (
+            <Button
+              flex={1}
+              m={0}
+              p={1}
+              as={action.type === "link" ? "a" : "button"}
+              href={action.type === "link" ? action.data : ""}
+              variant={
+                index === 0
+                  ? "primary"
+                  : index === 1
+                  ? "secondary"
+                  : index === 2
+                  ? "tertiary"
+                  : "shade"
               }
-            }}
-          >
-            {action.title}
-          </Button>
-        ) : null
-      )}
+              sx={{
+                ":first-of-type": {
+                  mr: 1,
+                },
+              }}
+              fontWeight="bold"
+              onClick={async () => {
+                trackEvent(action.data, action.type);
+                switch (action.type) {
+                  case "link":
+                    const url = new URL(action.data);
+                    if (url.origin === window.location.origin)
+                      window.open(action.data, "_self");
+                    else window.open(action.data, "_blank");
+                    break;
+                  case "promo":
+                    const coupon = action.data;
+                    await showBuyDialog(coupon);
+                    break;
+                  default:
+                    return;
+                }
+              }}
+            >
+              {action.title}
+            </Button>
+          ) : null
+        )}
+      </Flex>
     </Flex>
   );
 }

apps/web/src/theme/variants/button.js

@@ -9,6 +9,7 @@ class ButtonFactory {
       anchor: new Anchor(),
       tool: new Tool(),
       icon: new Icon(),
+      shade: new Shade(),
       statusitem: new StatusItem(),
     };
   }
@@ -31,6 +32,9 @@ class Default {
         border: "2px solid",
         borderColor: "primary",
       },
+      ":hover": {
+        opacity: 0.8,
+      },
     };
   }
 }
@@ -41,10 +45,6 @@ class Primary {
       variant: "buttons.default",
       color: "static",
       bg: "primary",
-      transition: "opacity 300ms linear",
-      ":hover": {
-        opacity: 0.8,
-      },
       ":focus-visible": {
         border: "2px solid",
         borderColor: "text",
@@ -53,6 +53,12 @@ class Primary {
   }
 }
 
+class Shade {
+  constructor() {
+    return { variant: "buttons.primary", color: "primary", bg: "shade" };
+  }
+}
+
 class Secondary {
   constructor() {
     return { variant: "buttons.default", color: "text", bg: "border" };

apps/web/src/utils/use-announcements.js

@@ -11,13 +11,14 @@ export default function useAnnouncements() {
   useEffect(() => {
     (async function () {
       try {
-        CACHED_ANNOUNCEMENTS =
-          CACHED_ANNOUNCEMENTS || (await db.announcements());
+        CACHED_ANNOUNCEMENTS = CACHED_ANNOUNCEMENTS.length
+          ? CACHED_ANNOUNCEMENTS
+          : await db.announcements();
       } catch (e) {
         console.error(e);
       } finally {
-        setAnnouncements((announcements) => {
-          const filtered = announcements.filter((announcement) =>
+        setAnnouncements(() => {
+          const filtered = CACHED_ANNOUNCEMENTS.filter((announcement) =>
             shouldShowAnnouncement(announcement)
           );
           return filtered;