Add F-Droid badge

koofr · Jun 25, 2024 · 3808b61 · 3808b61
1 parent b24c640
commit 3808b61
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 20 deletions.
diff --git a/vault-web/public/config.json b/vault-web/public/config.json
@@ -3,5 +3,6 @@
   "oauth2ClientId": "7ZEK2BNCEVYEJIZC5OR3TR6PQDUJ4NP3",
   "oauth2ClientSecret": "VWTMENEWUYWH6G523CEV5CWOCHH7FMECW36PPQENOASYYZOQJOSGQXSR2Y62N3HB",
   "appStoreUrl": "https://apps.apple.com/app/koofr-vault/id6468869124",
-  "googlePlayUrl": "https://play.google.com/store/apps/details?id=net.koofr.vault"
+  "googlePlayUrl": "https://play.google.com/store/apps/details?id=net.koofr.vault",
+  "fDroidUrl": "https://f-droid.org/en/packages/net.koofr.vault/"
 }
diff --git a/vault-web/src/assets/images/apps/f-droid.png b/vault-web/src/assets/images/apps/f-droid.png
diff --git a/vault-web/src/assets/images/apps/[email protected] b/vault-web/src/assets/images/apps/[email protected]
diff --git a/vault-web/src/components/intro/IntroModal.tsx b/vault-web/src/components/intro/IntroModal.tsx
@@ -10,13 +10,15 @@ import {
   useState,
 } from 'react';
 
+import appStoreImage from '../../assets/images/apps/app-store.png';
+import appStore2xImage from '../../assets/images/apps/[email protected]';
+import fDroidImage from '../../assets/images/apps/f-droid.png';
+import fDroid2xImage from '../../assets/images/apps/[email protected]';
+import googlePlayImage from '../../assets/images/apps/google-play.png';
+import googlePlay2xImage from '../../assets/images/apps/[email protected]';
 import intro01Image from '../../assets/images/intro/intro-01.png';
 import intro012xImage from '../../assets/images/intro/[email protected]';
 import intro02Image from '../../assets/images/intro/intro-02.png';
-import googlePlayImage from '../../assets/images/apps/google-play.png';
-import googlePlay2xImage from '../../assets/images/apps/[email protected]';
-import appStoreImage from '../../assets/images/apps/app-store.png';
-import appStore2xImage from '../../assets/images/apps/[email protected]';
 import intro022xImage from '../../assets/images/intro/[email protected]';
 import intro03Image from '../../assets/images/intro/intro-03.png';
 import intro032xImage from '../../assets/images/intro/[email protected]';
@@ -36,6 +38,7 @@ import introEndImage from '../../assets/images/intro/intro-end.png';
 import introEnd2xImage from '../../assets/images/intro/[email protected]';
 import introStartImage from '../../assets/images/intro/intro-start.png';
 import introStart2xImage from '../../assets/images/intro/[email protected]';
+import { useConfig } from '../../config';
 import { buttonStyle } from '../../styles/mixins/buttons';
 import { imgRetinaBase } from '../../styles/mixins/images';
 
@@ -51,7 +54,6 @@ import {
   ModalHeader,
   ModalTitle,
 } from '../modal/Modal';
-import { useConfig } from '../../config';
 
 const introButtonColor = '#2286f7';
 const introButtonColorHover = '#0870e6';
@@ -322,7 +324,8 @@ const IntroStep5 = memo(() => {
         </p>
       </div>
       {config.appStoreUrl !== undefined ||
-      config.googlePlayUrl !== undefined ? (
+      config.googlePlayUrl !== undefined ||
+      config.fDroidUrl !== undefined ? (
         <div
           className={css`
             ${bp.small} {
@@ -359,7 +362,14 @@ const IntroStep5 = memo(() => {
           ) : null}
 
           {config.appStoreUrl !== undefined ? (
-            <a href={config.appStoreUrl} target="_blank" rel="noreferrer">
+            <a
+              href={config.appStoreUrl}
+              target="_blank"
+              rel="noreferrer"
+              className={css`
+                margin-right: 20px;
+              `}
+            >
               <RetinaImage
                 image={appStoreImage}
                 image2x={appStore2xImage}
@@ -368,6 +378,24 @@ const IntroStep5 = memo(() => {
               />
             </a>
           ) : null}
+
+          {config.fDroidUrl !== undefined ? (
+            <a
+              href={config.fDroidUrl}
+              target="_blank"
+              rel="noreferrer"
+              className={css`
+                margin-right: 20px;
+              `}
+            >
+              <RetinaImage
+                image={fDroidImage}
+                image2x={fDroid2xImage}
+                width={123}
+                height={36}
+              />
+            </a>
+          ) : null}
         </div>
       ) : null}
     </div>

diff --git a/vault-web/src/config.ts b/vault-web/src/config.ts
@@ -6,6 +6,7 @@ export interface Config {
   oauth2ClientSecret: string;
   appStoreUrl?: string;
   googlePlayUrl?: string;
+  fDroidUrl?: string;
 }
 
 export async function loadConfig(): Promise<Config> {

diff --git a/vault-web/src/pages/LandingPageOfficial.tsx b/vault-web/src/pages/LandingPageOfficial.tsx
@@ -3,14 +3,16 @@ import { css, cx } from '@emotion/css';
 import { memo } from 'react';
 import Typewriter from 'typewriter-effect';
 
+import appStoreImage from '../assets/images/apps/app-store.png';
+import appStore2xImage from '../assets/images/apps/[email protected]';
+import fDroidImage from '../assets/images/apps/f-droid.png';
+import fDroid2xImage from '../assets/images/apps/[email protected]';
+import googlePlayImage from '../assets/images/apps/google-play.png';
+import googlePlay2xImage from '../assets/images/apps/[email protected]';
 import arrowDownImage from '../assets/images/landing/arrow-down.png';
 import arrowDown2xImage from '../assets/images/landing/[email protected]';
 import arrowRightImage from '../assets/images/landing/arrow-right.png';
 import arrowRight2xImage from '../assets/images/landing/[email protected]';
-import googlePlayImage from '../assets/images/apps/google-play.png';
-import googlePlay2xImage from '../assets/images/apps/[email protected]';
-import appStoreImage from '../assets/images/apps/app-store.png';
-import appStore2xImage from '../assets/images/apps/[email protected]';
 import graphic1Image from '../assets/images/landing/graphic-1.png';
 import graphic12xImage from '../assets/images/landing/[email protected]';
 import graphic2Image from '../assets/images/landing/graphic-2.png';
@@ -38,10 +40,10 @@ import { BaseAnchorButton } from '../components/Button';
 import { GitRelease } from '../components/GitRelease';
 import { GitRevision } from '../components/GitRevision';
 import { RetinaImage } from '../components/RetinaImage';
+import { useConfig } from '../config';
 import { buttonStyle } from '../styles/mixins/buttons';
 import { allStates } from '../styles/mixins/hover';
 import { useDocumentTitle } from '../utils/useDocumentTitle';
-import { useConfig } from '../config';
 
 const landingButtonStyle = buttonStyle(
   '#1683fb',
@@ -314,7 +316,8 @@ export const LandingPageOfficial = memo(() => {
           </BaseAnchorButton>
 
           {config.appStoreUrl !== undefined ||
-          config.googlePlayUrl !== undefined ? (
+          config.googlePlayUrl !== undefined ||
+          config.fDroidUrl !== undefined ? (
             <div
               className={css`
                 display: flex;
@@ -341,7 +344,14 @@ export const LandingPageOfficial = memo(() => {
               ) : null}
 
               {config.appStoreUrl !== undefined ? (
-                <a href={config.appStoreUrl} target="_blank" rel="noreferrer">
+                <a
+                  href={config.appStoreUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={css`
+                    margin-right: 20px;
+                  `}
+                >
                   <RetinaImage
                     image={appStoreImage}
                     image2x={appStore2xImage}
@@ -350,6 +360,24 @@ export const LandingPageOfficial = memo(() => {
                   />
                 </a>
               ) : null}
+
+              {config.fDroidUrl !== undefined ? (
+                <a
+                  href={config.fDroidUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={css`
+                    margin-right: 20px;
+                  `}
+                >
+                  <RetinaImage
+                    image={fDroidImage}
+                    image2x={fDroid2xImage}
+                    width={123}
+                    height={36}
+                  />
+                </a>
+              ) : null}
             </div>
           ) : null}
         </div>

diff --git a/vault-web/src/pages/MobilePage.tsx b/vault-web/src/pages/MobilePage.tsx
@@ -4,6 +4,8 @@ import { useLocation } from 'react-router-dom';
 
 import appStoreImage from '../assets/images/apps/app-store.png';
 import appStore2xImage from '../assets/images/apps/[email protected]';
+import fDroidImage from '../assets/images/apps/f-droid.png';
+import fDroid2xImage from '../assets/images/apps/[email protected]';
 import googlePlayImage from '../assets/images/apps/google-play.png';
 import googlePlay2xImage from '../assets/images/apps/[email protected]';
 import { LinkButton } from '../components/Button';
@@ -75,12 +77,13 @@ export const MobilePage = memo(() => {
         </p>
 
         {config.appStoreUrl !== undefined ||
-        config.googlePlayUrl !== undefined ? (
+        config.googlePlayUrl !== undefined ||
+        config.fDroidUrl !== undefined ? (
           <div
             className={css`
               display: flex;
-              flex-direction: row;
-              margin: 0 0 30px;
+              flex-direction: column;
+              margin: 0 0 20px;
             `}
           >
             {config.googlePlayUrl !== undefined ? (
@@ -89,7 +92,7 @@ export const MobilePage = memo(() => {
                 target="_blank"
                 rel="noreferrer"
                 className={css`
-                  margin-right: 20px;
+                  margin-bottom: 15px;
                 `}
               >
                 <RetinaImage
@@ -102,7 +105,14 @@ export const MobilePage = memo(() => {
             ) : null}
 
             {config.appStoreUrl !== undefined ? (
-              <a href={config.appStoreUrl} target="_blank" rel="noreferrer">
+              <a
+                href={config.appStoreUrl}
+                target="_blank"
+                rel="noreferrer"
+                className={css`
+                  margin-bottom: 15px;
+                `}
+              >
                 <RetinaImage
                   image={appStoreImage}
                   image2x={appStore2xImage}
@@ -111,6 +121,17 @@ export const MobilePage = memo(() => {
                 />
               </a>
             ) : null}
+
+            {config.fDroidUrl !== undefined ? (
+              <a href={config.fDroidUrl} target="_blank" rel="noreferrer">
+                <RetinaImage
+                  image={fDroidImage}
+                  image2x={fDroid2xImage}
+                  width={123}
+                  height={36}
+                />
+              </a>
+            ) : null}
           </div>
         ) : null}