Fix download page copy, add link to server source code, show download link on phone-web

src/components/NavLink/NavLink.module.scss

@@ -119,6 +119,12 @@
   }
 }
 
+@media only screen and (max-width: 720px) {
+  .hiddenOnSmallScreens {
+    display: none
+  }
+}
+
 .bubble {
   position: absolute;
   text-align: center;

src/components/NavLink/NavLink.tsx

@@ -3,7 +3,13 @@ import { Component, Show } from 'solid-js';
 
 import styles from './NavLink.module.scss';
 
-const NavLink: Component<{ to: string, label: string, icon: string, bubble?: () => number}> = (props) => {
+const NavLink: Component<{
+  to: string,
+  label: string,
+  icon: string,
+  bubble?: () => number,
+  hiddenOnSmallScreens?: boolean,
+}> = (props) => {
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -34,7 +40,7 @@ const NavLink: Component<{ to: string, label: string, icon: string, bubble?: ()
   }
 
     return (
-      <button class={styles.navLink} onClick={onClick}>
+      <button class={`${styles.navLink} ${props.hiddenOnSmallScreens ? styles.hiddenOnSmallScreens : ''}`} onClick={onClick}>
         <Show when={props.bubble && props.bubble() > 0}>
           <div class={`${styles.bubble} ${bubbleClass()}`}>
             <div>{props.bubble && props.bubble() < 100 ? props.bubble() : '99+'}</div>

src/components/NavMenu/NavMenu.module.scss

@@ -29,10 +29,6 @@
     > button {
       margin-bottom: 0px;
     }
-
-    button:nth-child(n+5) {
-      display: none;
-    }
   }
 
   .callToAction {

src/components/NavMenu/NavMenu.tsx

@@ -39,6 +39,7 @@ const NavMenu: Component = () => {
       label: intl.formatMessage(t.notifications),
       icon: 'notificationsIcon',
       bubble: () => notifications?.notificationCount || 0,
+      hiddenOnSmallScreens: true,
     },
     {
       to: '/downloads',
@@ -50,11 +51,13 @@ const NavMenu: Component = () => {
       to: '/settings',
       label: intl.formatMessage(t.settings),
       icon: 'settingsIcon',
+      hiddenOnSmallScreens: true,
     },
     {
       to: '/help',
       label: intl.formatMessage(t.help),
       icon: 'helpIcon',
+      hiddenOnSmallScreens: true,
     },
   ];
 
@@ -62,8 +65,14 @@ const NavMenu: Component = () => {
     <div class={styles.navMenu}>
       <nav class={styles.sideNav}>
         <For each={links}>
-          {({ to, label, icon, bubble }) => {
+          {({ to, label, icon, bubble, hiddenOnSmallScreens }) => {
-            return <NavLink to={to} label={label} icon={icon} bubble={bubble}/>
+            return <NavLink
+              to={to}
+              label={label}
+              icon={icon}
+              bubble={bubble}
+              hiddenOnSmallScreens={hiddenOnSmallScreens}
+            />
           }
           }
         </For>

src/pages/Downloads.module.scss

@@ -13,7 +13,7 @@
   }
 }
 
-.callToAction, .callToActionAndroid {
+.callToAction, .callToActionAndroid, .callToActionIOS {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -38,7 +38,7 @@
   }
 }
 
-.callToActionAndroid {
+.callToActionAndroid, .callToActionIOS {
   display: none;
 }
 
@@ -180,6 +180,10 @@
     display: none;
   }
 
+  .callToAction {
+    display: none;
+  }
+
   .linkHolder {
     margin-top: 20px;
     flex-direction: column;
@@ -202,6 +206,9 @@
     }
 
     .appStore {
+      .callToActionIOS {
+        display: flex;
+      }
       >a {
         width: 188px;
         height: 63px;
@@ -210,6 +217,7 @@
 
     .playStore {
       margin-top: 77px;
+      margin-bottom: 250px;
       width: 100% !important;
       .callToActionAndroid {
         display: flex;

src/pages/Downloads.tsx

@@ -88,6 +88,13 @@ const Downloads: Component = () => {
               label={intl.formatMessage(t.links.cachingService)}
               href='https://github.com/PrimalHQ/primal-caching-service'
             />
+
+            <ExternalLink
+              darkIcon={gitHubLight}
+              lightIcon={gitHubDark}
+              label={intl.formatMessage(t.links.primalServer)}
+              href='https://github.com/PrimalHQ/primal-server'
+            />
           </div>
         </div>
       </StickySidebar>
@@ -139,6 +146,16 @@ const Downloads: Component = () => {
       <div class={styles.linkHolder}>
         <div class={styles.appStore}>
           <div>{intl.formatMessage(t.appStoreCaption)}</div>
+
+          <div class={styles.callToActionIOS}>
+            <div class={styles.ctaTitle}>
+              {intl.formatMessage(t.callToActionIOSTitle)}
+            </div>
+            <div class={styles.ctaDescription}>
+              {intl.formatMessage(t.callToActionIOSDescription)}
+            </div>
+          </div>
+
           <a
             href='https://testflight.apple.com/join/Is4tmDDR'
             target='_blank'

src/translations.ts

@@ -87,14 +87,24 @@ export const downloads = {
   },
   callToActionTitle: {
     id: 'downloads.ctaTitle',
-    defaultMessage: 'Primal iOS TestFlight is Here!',
+    defaultMessage: 'Primal Mobile Apps are Here!',
     description: 'Title for the downloads\' page call-to-action',
   },
   callToActionDescription: {
     id: 'downloads.ctaDescription',
-    defaultMessage: 'The app features easy onboarding, fast & snappy UI, ability to explore Nostr, and create & manage custom feeds',
+    defaultMessage: 'The iOS app is in public TestFlight and ready to be used as a daily driver. The Android app is in alpha, but developing quickly!',
     description: 'Description for the downloads\' page call-to-action',
   },
+  callToActionIOSTitle: {
+    id: 'downloads.ctaAndroidTitle',
+    defaultMessage: 'Primal iOS TestFlight',
+    description: 'Title for the iOS downloads\' page call-to-action',
+  },
+  callToActionIOSDescription: {
+    id: 'downloads.ctaAndroidDescription',
+    defaultMessage: 'The app features easy onboarding, fast & snappy UI, ability to explore Nostr, and create & manage custom feeds',
+    description: 'Description for the iOS downloads\' page call-to-action',
+  },
   callToActionAndroidTitle: {
     id: 'downloads.ctaAndroidTitle',
     defaultMessage: 'Primal Android Alpha',
@@ -146,6 +156,11 @@ export const downloads = {
       defaultMessage: 'Primal Caching Service',
       description: 'Label for the link to the caching service',
     },
+    primalServer: {
+      id: 'downloads.primalServer',
+      defaultMessage: 'Primal Server',
+      description: 'Label for the link to the primal server',
+    },
   },
 };