Link to GitHub

src/data/AppVersion.ts

@@ -70,3 +70,12 @@ export async function downloadLatestRelease() {
   const latestRelease = await getLatestReleaseInfo();
   window.open(latestRelease.htmlUrl, "_system", "location=yes");
 }
+
+const homepageURL = "https://github.com/IraSoro/peri";
+export function openGitHubPage() {
+  if (isPlatform("desktop")) {
+    window.open(homepageURL, "_blank")?.focus();
+    return;
+  }
+  window.open(homepageURL, "_system", "location=yes");
+}

src/modals/Menu.tsx

@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import {
+  IonChip,
   IonIcon,
   IonItem,
   IonLabel,
@@ -16,6 +17,7 @@ import {
   cloudUploadOutline,
   globeOutline,
   colorFillOutline,
+  logoGithub,
 } from "ionicons/icons";
 import { useTranslation } from "react-i18next";
 import { storage } from "../data/Storage";
@@ -24,6 +26,7 @@ import { exportConfig, importConfig } from "../data/Config";
 import {
   downloadLatestRelease,
   isNewVersionAvailable,
+  openGitHubPage,
 } from "../data/AppVersion";
 import { CyclesContext, ThemeContext } from "../state/Context";
 import {
@@ -267,24 +270,44 @@ export const Menu = (props: MenuProps) => {
           </IonItem>
         )}
       </IonList>
-      <IonItem
-        color="none"
-        lines="none"
+      <IonList
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
       >
-        <IonLabel
-          style={{ fontSize: "13px" }}
-          color="medium"
+        <IonChip
+          outline
+          color={`text-${theme}`}
+          onClick={() => openGitHubPage()}
         >
-          Peri - The Period Tracker App
-        </IonLabel>
-        <IonLabel
-          style={{ fontSize: "13px" }}
-          color="medium"
-          slot="end"
+          <IonIcon
+            icon={logoGithub}
+            color={`text-${theme}`}
+          />
+          <IonLabel>{t("We are on GitHub")}</IonLabel>
+        </IonChip>
+        <IonItem
+          color="none"
+          lines="none"
+          style={{ width: "100%" }}
         >
-          {configuration.app.version}
-        </IonLabel>
-      </IonItem>
+          <IonLabel
+            style={{ fontSize: "13px" }}
+            color="medium"
+          >
+            Peri - The Period Tracker App
+          </IonLabel>
+          <IonLabel
+            style={{ fontSize: "13px" }}
+            color="medium"
+            slot="end"
+          >
+            {configuration.app.version}
+          </IonLabel>
+        </IonItem>
+      </IonList>
     </IonMenu>
   );
 };

src/utils/translations/es.ts

@@ -91,6 +91,7 @@ const es = {
   "This is just a demo": "Esto es solo una demostración",
   "You can download the application ": "Puedes descargar la aplicación ",
   here: "Aquí",
+  "We are on GitHub": "Estamos en GitHub",
 };
 
 export default es;

src/utils/translations/ru.ts

@@ -89,6 +89,7 @@ const ru = {
   "This is just a demo": "Это только demo",
   "You can download the application ": "Загрузить приложение можно ",
   here: "тут",
+  "We are on GitHub": "Мы в GitHub",
 };
 
 export default ru;