From 6ca7e2e0fb56c933ddf6222b183cc497e4099cb0 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Wed, 12 Jul 2023 17:03:34 +0200
Subject: [PATCH] Fix download page copy, add link to server source code, show
 download link on phone-web

---
 src/components/NavLink/NavLink.module.scss |  6 ++++++
 src/components/NavLink/NavLink.tsx         | 10 ++++++++--
 src/components/NavMenu/NavMenu.module.scss |  4 ----
 src/components/NavMenu/NavMenu.tsx         | 13 +++++++++++--
 src/pages/Downloads.module.scss            | 12 ++++++++++--
 src/pages/Downloads.tsx                    | 17 +++++++++++++++++
 src/translations.ts                        | 19 +++++++++++++++++--
 7 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/src/components/NavLink/NavLink.module.scss b/src/components/NavLink/NavLink.module.scss
index a2185a0..6139847 100644
--- a/src/components/NavLink/NavLink.module.scss
+++ b/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;
diff --git a/src/components/NavLink/NavLink.tsx b/src/components/NavLink/NavLink.tsx
index 0bc005d..174ba96 100644
--- a/src/components/NavLink/NavLink.tsx
+++ b/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>
diff --git a/src/components/NavMenu/NavMenu.module.scss b/src/components/NavMenu/NavMenu.module.scss
index c1dd630..b219635 100644
--- a/src/components/NavMenu/NavMenu.module.scss
+++ b/src/components/NavMenu/NavMenu.module.scss
@@ -29,10 +29,6 @@
     > button {
       margin-bottom: 0px;
     }
-
-    button:nth-child(n+5) {
-      display: none;
-    }
   }
 
   .callToAction {
diff --git a/src/components/NavMenu/NavMenu.tsx b/src/components/NavMenu/NavMenu.tsx
index 37bdd8a..e039113 100644
--- a/src/components/NavMenu/NavMenu.tsx
+++ b/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 }) => {
-            return <NavLink to={to} label={label} icon={icon} bubble={bubble}/>
+          {({ to, label, icon, bubble, hiddenOnSmallScreens }) => {
+            return <NavLink
+              to={to}
+              label={label}
+              icon={icon}
+              bubble={bubble}
+              hiddenOnSmallScreens={hiddenOnSmallScreens}
+            />
           }
           }
         </For>
diff --git a/src/pages/Downloads.module.scss b/src/pages/Downloads.module.scss
index be32fff..071bd43 100644
--- a/src/pages/Downloads.module.scss
+++ b/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;
diff --git a/src/pages/Downloads.tsx b/src/pages/Downloads.tsx
index 1a05d18..1599c56 100644
--- a/src/pages/Downloads.tsx
+++ b/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'
diff --git a/src/translations.ts b/src/translations.ts
index b9a7194..a320a3c 100644
--- a/src/translations.ts
+++ b/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',
+    },
   },
 };