Warn users to open friendship portal on mobile

hulloitskai · Jan 17, 2025 · c816530 · c816530
1 parent cc1be43
commit c816530
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/app/pages/FriendPage.module.css b/app/pages/FriendPage.module.css
@@ -6,8 +6,17 @@
 
 .highlight {
   font-weight: 500;
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  text-wrap: nowrap;
+}
 
-  @mixin dark {
-    color: var(--mantine-color-white);
-  }
+.landingStack {
+  line-height: var(--mantine-line-height-xs);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  text-align: center;
+  text-wrap: pretty;
+}
+
+.landingHeadline {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
 }
diff --git a/app/pages/FriendPage.tsx b/app/pages/FriendPage.tsx
@@ -35,6 +35,7 @@ const FriendPage: PageComponent<FriendPageProps> = ({
   statusId,
 }) => {
   const isStandalone = useIsStandaloneMode();
+  const isMobile = useMediaQuery("(pointer: coarse");
   const { registration } = useWebPush();
   const standaloneMode = emulateStandalone || isStandalone;
   const installPromptEvent = useInstallPromptEvent();
@@ -100,8 +101,8 @@ const FriendPage: PageComponent<FriendPageProps> = ({
         )}
         {standaloneMode === false && (
           <>
-            <Stack gap={6} lh="xs">
-              <Text inherit fw={700}>
+            <Stack gap={6} className={classes.landingStack}>
+              <Text inherit fw={700} className={classes.landingHeadline}>
                 Hi, {friend.emoji}{" "}
                 <span className={classes.name}>{friend.name}</span>!
               </Text>
@@ -131,7 +132,7 @@ const FriendPage: PageComponent<FriendPageProps> = ({
             <Stack gap={6} align="center">
               <Button
                 loading={!pwaInstall}
-                disabled={pwaInstalled}
+                disabled={pwaInstalled || !isMobile}
                 leftSection={<PhoneIcon />}
                 onClick={() => {
                   if (pwaInstall) {
@@ -154,6 +155,11 @@ const FriendPage: PageComponent<FriendPageProps> = ({
                   On Android, you&apos;ll find me in your app drawer.
                 </Text>
               )}
+              {!isMobile && (
+                <Text size="xs" c="dimmed" lh="xs">
+                  Open this page on your phone to continue.
+                </Text>
+              )}
             </Stack>
           </>
         )}