chore: enable dynamic font scaling

package.json

@@ -8,7 +8,7 @@
     "@ionic/react": "^7.0.0",
     "@ionic/react-router": "^7.0.0",
     "date-fns": "^2.25.0",
-    "ionicons": "^5.0.1",
+    "ionicons": "^7.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^5.3.4",

src/App.scss

@@ -0,0 +1,14 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component.
+ */
+
+html {
+  /*
+   * For more information on dynamic font scaling, visit the documentation:
+   * https://ionicframework.com/docs/layout/dynamic-font-scaling
+   */
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
+}

src/App.tsx

@@ -28,6 +28,8 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+/* Global styles */
+import './App.scss';
 import MainTabs from './pages/MainTabs';
 import { connect } from './data/connect';
 import { AppContextProvider } from './data/AppContext';

src/components/Menu.css

@@ -26,7 +26,8 @@ ion-menu.md ion-list-header {
   padding-right: 18px;
 
   text-transform: uppercase;
-  letter-spacing: .1em;
+  letter-spacing: 0.1em;
+  font-size: min(0.875rem, 32px);
   font-weight: 450;
 }
 
@@ -66,6 +67,7 @@ ion-menu.ios ion-list-header {
   padding-right: 16px;
 
   margin-bottom: 8px;
+  font-size: clamp(22px, 1.375rem, 40px);
 }
 
 ion-menu.ios ion-list {
@@ -85,3 +87,9 @@ ion-menu.ios ion-item ion-icon {
 ion-menu.ios ion-item.selected ion-icon {
   color: var(--ion-color-primary);
 }
+
+.tutorial-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

src/components/Menu.tsx

@@ -132,7 +132,7 @@ const Menu: React.FC<MenuProps> = ({
             }}
           >
             <IonIcon slot="start" icon={hammer} />
-            Show Tutorial
+            <span className="tutorial-label">Show Tutorial</span>
           </IonItem>
         </IonList>
       </IonContent>

src/pages/About.scss

@@ -57,10 +57,11 @@
   }
 
   .about-info {
-    position: absolute;
+    position: relative;
     margin-top: -10px;
     border-radius: 10px;
     background: var(--ion-background-color, #fff);
+    z-index: 2; // display rounded border above header image
   }
 
   .about-info h3 {