Add app store badges

duolicious · Jan 1, 2025 · 88993c7 · 88993c7
1 parent a0b8193
commit 88993c7
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 58 deletions.
diff --git a/assets/app-store-badges/download-on-the-app-store.png b/assets/app-store-badges/download-on-the-app-store.png
diff --git a/components/navigation/web-bar-footer/web-bar-footer.web.tsx b/components/navigation/web-bar-footer/web-bar-footer.web.tsx
@@ -1,74 +1,116 @@
-import { WEB_VERSION } from '../../../env/env';
-
 const discordIcon = require('../../../assets/social/discord-white.svg');
 const twitterIcon = require('../../../assets/social/twitter-white.svg');
 const redditIcon = require('../../../assets/social/reddit-white.svg');
 const githubIcon = require('../../../assets/social/github-white.svg');
 const koFiIcon = require('../../../assets/social/ko-fi.png');
 
+const appStoreBadge = require('../../../assets/app-store-badges/download-on-the-app-store.png');
 
-const WebBarFooter = () => {
+const SocialBadges = () => {
   return (
-    <div
+    <ul
       style={{
+        boxSizing: 'border-box',
+        flexWrap: 'wrap',
+        listStyleType: 'none',
         width: '100%',
-        marginLeft: '15px',
-        marginRight: '15px',
         justifyContent: 'center',
         display: 'flex',
-        flexDirection: 'column',
+        gap: '24px',
+        border: 'none',
+        padding: '0',
+        marginTop: 8,
+        marginBottom: 8,
+      }}
+    >
+      <li>
+        <a target="_blank" href="https://discord.gg/cxrgbPT5Ua">
+          <img src={discordIcon.uri} style={{ height: '20px' }} />
+        </a>
+      </li>
+      <li>
+        <a target="_blank" href="https://twitter.com/duoliciousapp">
+          <img src={twitterIcon.uri} style={{ height: '20px' }} />
+        </a>
+      </li>
+      <li>
+        <a target="_blank" href="https://www.reddit.com/r/duolicious">
+          <img src={redditIcon.uri} style={{ height: '20px' }} />
+        </a>
+      </li>
+      <li>
+        <a target="_blank" href="https://github.com/duolicious">
+          <img src={githubIcon.uri} style={{ height: '20px' }} />
+        </a>
+      </li>
+      <li>
+        <a target="_blank" href="https://ko-fi.com/duolicious">
+          <img src={koFiIcon.uri} style={{ height: '20px' }} />
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+const AppStoreBadges = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
       }}
     >
-      <ul
+      <a
+        target="_blank"
+        href="https://apps.apple.com/us/app/duolicious-dating-app/id6499066647"
         style={{
-          boxSizing: 'border-box',
-          flexWrap: 'wrap',
-          listStyleType: 'none',
-          width: '100%',
-          justifyContent: 'center',
-          display: 'flex',
-          gap: '24px',
-          border: 'none',
-          padding: '0',
+          flex: 1,
         }}
       >
-        <li>
-          <a target="_blank" href="https://discord.gg/cxrgbPT5Ua">
-            <img src={discordIcon.uri} style={{ height: '20px' }} />
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://twitter.com/duoliciousapp">
-            <img src={twitterIcon.uri} style={{ height: '20px' }} />
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://www.reddit.com/r/duolicious">
-            <img src={redditIcon.uri} style={{ height: '20px' }} />
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://github.com/duolicious">
-            <img src={githubIcon.uri} style={{ height: '20px' }} />
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://ko-fi.com/duolicious">
-            <img src={koFiIcon.uri} style={{ height: '20px' }} />
-          </a>
-        </li>
-      </ul>
-      <span
+        <img
+          alt="Download on the App Store"
+          src={appStoreBadge.uri}
+          style={{
+            width: '100%',
+          }}
+        />
+      </a>
+
+      <a
+        target="_blank"
+        href="https://play.google.com/store/apps/details?id=app.duolicious&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"
         style={{
-          textAlign: 'center',
-          color: 'white',
-          fontFamily: 'MontserratRegular',
-          fontSize: 12,
-          opacity: 0.4,
+          flex: 1,
+          display: 'block',
         }}
       >
-        Duolicious Web Version {WEB_VERSION}
-      </span>
+        <img
+          alt="Get it on Google Play"
+          src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
+          style={{
+            width: '100%',
+          }}
+        />
+      </a>
+    </div>
+  );
+};
+
+const WebBarFooter = () => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        marginLeft: '15px',
+        marginRight: '15px',
+        justifyContent: 'center',
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <AppStoreBadges/>
+      <SocialBadges/>
     </div>
   );
 };

diff --git a/components/navigation/web-bar.tsx b/components/navigation/web-bar.tsx
@@ -3,6 +3,7 @@ import {
   Pressable,
   Text,
   View,
+  ScrollView,
 } from 'react-native';
 import {
   useCallback,
@@ -178,28 +179,34 @@ const NavigationItems = ({state, navigation, descriptors}) => {
 
 const WebBar = ({state, navigation, tabBarStyle, descriptors}) => {
   return (
-    <View style={[
+    <ScrollView
+      style={{
+        height: '100%',
+        backgroundColor: '#70f',
+        borderRightWidth: 5,
+        borderColor: 'black',
+      }}
+      contentContainerStyle={[
         {
           width: '100%',
-          height: '100%',
-          backgroundColor: '#70f',
+          flex: 1,
           alignItems: 'flex-end',
-          borderRightWidth: 5,
-          borderColor: 'black',
           paddingHorizontal: 12,
         },
         tabBarStyle,
       ]}
+      showsVerticalScrollIndicator={false}
     >
       <View
         style={{
           flex: 1,
           justifyContent: 'space-between',
+          width: 260,
         }}
       >
         <View
           style={{
-            width: 260,
+            width: '100%',
             gap: 20,
           }}
         >
@@ -212,14 +219,16 @@ const WebBar = ({state, navigation, tabBarStyle, descriptors}) => {
         </View>
         <View
           style={{
+            width: '100%',
+            paddingTop: 40,
             paddingBottom: 10,
             alignItems: 'center',
           }}
         >
           <WebBarFooter/>
         </View>
       </View>
-    </View>
+    </ScrollView>
   );
 };