mogul menu style fixes and prediction toast

trufflehq · Jun 28, 2023 · 71abd20 · 71abd20
1 parent 94b6b03
commit 71abd20
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 19 deletions.
diff --git a/...l-menu-v2/src/components/activities/create-activity-dialog/create-activity-dialog.scss.js b/...l-menu-v2/src/components/activities/create-activity-dialog/create-activity-dialog.scss.js
@@ -11,7 +11,7 @@ export default scss`
 
   .c-dialog {
     
-    @media (min-width: 768px) {
+    @media (min-width: 600px) {
       width: 540px !important;
       height: 100%;
     }
@@ -25,7 +25,7 @@ export default scss`
     display: grid;
     grid-template-columns: 1fr;
 
-    @media (min-width: 768px) {
+    @media (min-width: 600px) {
       grid-template-columns: 1fr 1fr;
     }
     gap: 12px;

diff --git a/stream-projects/mogul-menu-v2/src/components/base/dialog-container/dialog-container.scss.js b/stream-projects/mogul-menu-v2/src/components/base/dialog-container/dialog-container.scss.js
@@ -22,7 +22,7 @@ export default scss`
     max-height: 80%;
     overflow: hidden;
     
-    @media (min-width: 768px) {
+    @media (min-width: 600px) {
       width: unset;
     }
   }

diff --git a/stream-projects/mogul-menu-v2/src/components/base/dialog/dialog.scss.js b/stream-projects/mogul-menu-v2/src/components/base/dialog/dialog.scss.js
@@ -11,7 +11,7 @@ export default scss`
   overflow: hidden;
   width: 90% !important;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     width: 424px !important;
   }
 

diff --git a/stream-projects/mogul-menu-v2/src/components/collectibles/collectibles.scss.js b/stream-projects/mogul-menu-v2/src/components/collectibles/collectibles.scss.js
@@ -39,7 +39,7 @@ export default scss`
   flex-direction: column;
   padding: 24px;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     padding:  0;
   }
 }
@@ -62,7 +62,7 @@ export default scss`
   background: var(--mm-color-bg-secondary);
   border-radius: 6px;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     width: 400px;
   }
 

diff --git a/stream-projects/mogul-menu-v2/src/components/menu/menu.scss.js b/stream-projects/mogul-menu-v2/src/components/menu/menu.scss.js
@@ -195,7 +195,7 @@ html, body {
   max-width: 200px;
   width: 100%;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     max-width: 232px;
   }
 

diff --git a/...cts/mogul-menu-v2/src/components/onboarding/chat-settings-page/chat-settings-page.scss.js b/...cts/mogul-menu-v2/src/components/onboarding/chat-settings-page/chat-settings-page.scss.js
@@ -29,7 +29,7 @@ export default scss`
       font-weight: 700;
       display: none;
 
-      @media (min-width: 768px) {
+      @media (min-width: 600px) {
         display: block;
       }
     }

diff --git a/...rojects/mogul-menu-v2/src/components/onboarding/continue-as-page/continue-as-page.scss.js b/...rojects/mogul-menu-v2/src/components/onboarding/continue-as-page/continue-as-page.scss.js
@@ -10,7 +10,7 @@ export default scss`
   text-align: center;
   flex: 1;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     padding: 32px;
   }
 

diff --git a/...gul-menu-v2/src/components/onboarding/oauth-connection-page/oauth-connection-page.scss.js b/...gul-menu-v2/src/components/onboarding/oauth-connection-page/oauth-connection-page.scss.js
@@ -44,7 +44,7 @@ export default scss`
     margin: 16px auto 0 auto;
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     padding: 32px 32px 8px 32px;
 
     > .onboard-image {

diff --git a/stream-projects/mogul-menu-v2/src/components/prediction-tile/prediction-tile.tsx b/stream-projects/mogul-menu-v2/src/components/prediction-tile/prediction-tile.tsx
@@ -19,6 +19,7 @@ import {
   OrgUserQuerySignal,
   useInterval,
 } from "../../shared/mod.ts";
+import { getEmbed } from "https://npm.tfl.dev/@trufflehq/sdk@0.3.2"; // TODO: deps file
 import { usePageStack } from "../page-stack/mod.ts";
 import { useDialog } from "../base/dialog-container/dialog-service.ts";
 import DeleteDialog from "../delete-dialog/delete-dialog.tsx";
@@ -31,6 +32,8 @@ import Time from "../time/time.tsx";
 import { getTimeInfo, getWinningInfo } from "../prediction/prediction.tsx";
 import styleSheet from "./prediction-tile.scss.js";
 
+const embed = getEmbed();
+
 const PASSIVE_POLL_INTERVAL = 60 * ONE_SECOND_MS;
 const RESULTS_TIMOUT = 100 * ONE_SECOND_MS;
 // NOTE: we don't currently have a way to clean up onMessage listeners
@@ -154,12 +157,21 @@ export default function PredictionTile(
     );
   }
 
-  const showPredictionPage = () => {
-    setIsOpen();
-    pushPage(<PredictionPage />);
-  };
+  // useListenForOpenPrediction(showPredictionPage);
 
-  useListenForOpenPrediction(showPredictionPage);
+  const prediction = prediction$.get();
+
+  useEffect(() => {
+    if (prediction?.id && !hasPredictionEnded) {
+      embed.showToast({
+        title: "New prediction!",
+        body: prediction.question,
+        onClick: () => {
+          embed.openWindow();
+        }
+      });
+    }
+  }, [prediction?.id]);
 
   if (!prediction$.get()) return <></>;
 

diff --git a/stream-projects/mogul-menu-v2/src/components/prediction/prediction.scss.js b/stream-projects/mogul-menu-v2/src/components/prediction/prediction.scss.js
@@ -13,7 +13,7 @@ export default scss`
     
     padding: 0 64px;
     
-    @media (min-width: 768px) {
+    @media (min-width: 600px) {
       padding:  0;
     }
 
@@ -57,7 +57,7 @@ export default scss`
 
   grid-column: span 2;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     grid-column: span 1;
   }
   
@@ -224,7 +224,7 @@ export default scss`
   box-sizing: border-box;
   margin-top: 20px;
   
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     width: 400px;
   }
 

diff --git a/stream-projects/mogul-menu-v2/src/components/tile/tile.scss.js b/stream-projects/mogul-menu-v2/src/components/tile/tile.scss.js
@@ -42,7 +42,7 @@ export default scss`
   position: relative;
   grid-column: span 2;
 
-  @media (min-width: 768px) {
+  @media (min-width: 600px) {
     grid-column: span 1;
   }