diff --git a/src/assets/images/primal_apk_download.svg b/src/assets/images/primal_apk_download.svg new file mode 100644 index 0000000..6ba86b3 --- /dev/null +++ b/src/assets/images/primal_apk_download.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/ExternalLink/ExternalLink.module.scss b/src/components/ExternalLink/ExternalLink.module.scss new file mode 100644 index 0000000..2c22e41 --- /dev/null +++ b/src/components/ExternalLink/ExternalLink.module.scss @@ -0,0 +1,15 @@ +.externalLink { + >img { + width: 24px; + height: 24px; + display: inline-block; + margin-right: 9px; + } + + >a { + color: var(--text-secondary-2); + font-size: 16px; + font-weight: 400; + line-height: 40px; + } +} diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx new file mode 100644 index 0000000..39b3c1a --- /dev/null +++ b/src/components/ExternalLink/ExternalLink.tsx @@ -0,0 +1,35 @@ +import { Component, Show } from 'solid-js'; +import { useSettingsContext } from '../../contexts/SettingsContext'; + +import styles from './ExternalLink.module.scss'; + +const ExternalLink: Component<{ + lightIcon: string, + darkIcon: string, + label: string, + href: string, +}> = (props) => { + + const settings = useSettingsContext(); + + return ( +
+ + } + > + + + + {props.label} + +
+ ); +} + +export default ExternalLink; diff --git a/src/constants.ts b/src/constants.ts index 6d3dcbe..fa98dfa 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -252,3 +252,4 @@ export const emojiSearchLimit = 1; export const today = (new Date()).getTime(); export const iosRD = (new Date('07/11/2023')).getTime(); +export const andRD = (new Date('07/12/2023')).getTime(); diff --git a/src/contexts/NotificationsContext.tsx b/src/contexts/NotificationsContext.tsx index 5100a08..9707420 100644 --- a/src/contexts/NotificationsContext.tsx +++ b/src/contexts/NotificationsContext.tsx @@ -3,7 +3,6 @@ import { andRD, iosRD, Kind, today } from "../constants"; import { createContext, createEffect, - createSignal, onCleanup, useContext } from "solid-js"; @@ -63,6 +62,10 @@ export const NotificationsProvider = (props: { children: ContextChildren }) => { count++; } + if (!andDownload && today > andRD) { + count++; + } + updateStore('downloadsCount', () => count); }; diff --git a/src/pages/Downloads.module.scss b/src/pages/Downloads.module.scss index 628fa69..be32fff 100644 --- a/src/pages/Downloads.module.scss +++ b/src/pages/Downloads.module.scss @@ -13,7 +13,7 @@ } } -.callToAction { +.callToAction, .callToActionAndroid { display: flex; flex-direction: column; align-items: center; @@ -38,6 +38,10 @@ } } +.callToActionAndroid { + display: none; +} + .promoHolder { position: relative; height: 560px; @@ -205,7 +209,15 @@ } .playStore { - display: none; + margin-top: 77px; + width: 100% !important; + .callToActionAndroid { + display: flex; + } + >a { + width: 188px; + height: 63px; + } } } } diff --git a/src/pages/Downloads.tsx b/src/pages/Downloads.tsx index 64879df..1a05d18 100644 --- a/src/pages/Downloads.tsx +++ b/src/pages/Downloads.tsx @@ -14,14 +14,18 @@ import iphoneReflectionLight from '../assets/images/primal_iphone_reflection_lig import androidReflectionLight from '../assets/images/primal_android_reflection_light.png'; import appStore from '../assets/images/appstore_download.svg'; -import playStore from '../assets/images/playstore_download.svg'; +import apkDownload from '../assets/images/primal_apk_download.svg'; + +import gitHubLight from '../assets/icons/github_light.svg'; +import gitHubDark from '../assets/icons/github.svg'; import styles from './Downloads.module.scss'; import { downloads as t } from '../translations'; import { useIntl } from '@cookbook/solid-intl'; import StickySidebar from '../components/StickySidebar/StickySidebar'; import { useSettingsContext } from '../contexts/SettingsContext'; -import { iosRD, today } from '../constants'; +import { andRD, iosRD, today } from '../constants'; +import ExternalLink from '../components/ExternalLink/ExternalLink'; const Downloads: Component = () => { @@ -32,6 +36,10 @@ const Downloads: Component = () => { if (today > iosRD) { localStorage.setItem('iosDownload', 'seen'); } + + if (today > andRD) { + localStorage.setItem('andDownload', 'seen'); + } }); return ( @@ -48,41 +56,38 @@ const Downloads: Component = () => {
-
Source code
-
-
-
- } - > -
- - - {intl.formatMessage(t.links.webApp)} - -
-
-
- } - > -
- - - {intl.formatMessage(t.links.cachingService)} - -
+
+ {intl.formatMessage(t.links.title)} +
+
+ + + + + + +
@@ -131,7 +136,6 @@ const Downloads: Component = () => { -
{intl.formatMessage(t.appStoreCaption)}
@@ -143,9 +147,22 @@ const Downloads: Component = () => {
-
{intl.formatMessage(t.playStoreCaption)}
- - +
{intl.formatMessage(t.apkDownload)}
+ +
+
+ {intl.formatMessage(t.callToActionAndroidTitle)} +
+
+ {intl.formatMessage(t.callToActionAndroidDescription)} +
+
+ + +
diff --git a/src/translations.ts b/src/translations.ts index b362555..b9a7194 100644 --- a/src/translations.ts +++ b/src/translations.ts @@ -95,6 +95,16 @@ export const downloads = { defaultMessage: 'The app features easy onboarding, fast & snappy UI, ability to explore Nostr, and create & manage custom feeds', description: 'Description for the downloads\' page call-to-action', }, + callToActionAndroidTitle: { + id: 'downloads.ctaAndroidTitle', + defaultMessage: 'Primal Android Alpha', + description: 'Title for the Android downloads\' page call-to-action', + }, + callToActionAndroidDescription: { + 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 Android downloads\' page call-to-action', + }, appStoreCaption: { id: 'downloads.appStoreCaption', defaultMessage: 'TestFlight Available Now', @@ -105,12 +115,32 @@ export const downloads = { defaultMessage: 'Coming soon to Android', description: 'PlayStore promo caption', }, + apkDownload: { + id: 'downloads.apkDownload', + defaultMessage: 'Alpha Build Available Now', + description: 'APK download caption', + }, links: { + title: { + id: 'downloads.sidebarTitle', + defaultMessage: 'Source code', + description: 'Daownload sidebar links title', + }, webApp: { id: 'downloads.webAppLink', defaultMessage: 'Primal Web App', description: 'Label for the link to the web app', }, + iosApp: { + id: 'downloads.iosAppLink', + defaultMessage: 'Primal iOS App', + description: 'Label for the link to the iOS app', + }, + andApp: { + id: 'downloads.andAppLink', + defaultMessage: 'Primal Android App', + description: 'Label for the link to the Android app', + }, cachingService: { id: 'downloads.cachingService', defaultMessage: 'Primal Caching Service',