Restructure

Author: Tombarr

public/icon.png

@@ -15,6 +15,8 @@ header {
 
 header img {
     margin-inline-end: 0.5em;
+    width: 1em;
+    height: 1em;
 }
 
 header img, header h1 {
@@ -24,6 +26,7 @@ header img, header h1 {
 
 header h1 {
     margin: 0;
+    font-size: 24pt;
 }
 
 /* QVGA */

src/assets/icon.png

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types'
 import './Header.css'
+import icon from '../assets/icon.png?inline'
 
 function Header({ title }) {
   return (
     <>
       <title>{title}</title>
       <header>
-        <img src="/icon.png" alt="Cloud Phone logo" draggable="false" />
+        <img src={icon} alt="Cloud Phone logo" draggable="false" width="1em" height="1em" />
         <h1>{title}</h1>
       </header>
     </>

src/Header.css src/components/Header.csssrc/Header.css renamed to src/components/Header.css

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import './OptionsMenu.css'
 import React, { useEffect, useRef, useState } from 'react'
-import { autoFocusFirstFocusable } from './focus';
+import { autoFocusFirstFocusable } from '../utils/focus';
 import { useNavigate } from 'react-router';
 
 function OptionsMenu({

src/Header.jsx src/components/Header.jsxsrc/Header.jsx renamed to src/components/Header.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import { useEffect } from 'react'
-import MenuIcon from './assets/icons/menu.svg?react'
-import BackIcon from './assets/icons/back.svg?react'
-import SelectIcon from './assets/icons/select.svg?react'
+import MenuIcon from '../assets/icons/menu.svg?react'
+import BackIcon from '../assets/icons/back.svg?react'
+import SelectIcon from '../assets/icons/select.svg?react'
 import './SoftKeyBar.css'
 
 function getIconFromName(name) {

src/OptionsMenu.css src/components/OptionsMenu.csssrc/OptionsMenu.css renamed to src/components/OptionsMenu.css

@@ -1,18 +1,18 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { HashRouter, Route, Routes } from 'react-router'
-import './i18n'
+import './utils/i18n.js'
 import './index.css'
-import App from './App.jsx'
-import Settings from './Settings.jsx'
-import About from './About.jsx'
+import Home from './pages/Home.jsx'
+import Settings from './pages/Settings.jsx'
+import About from './pages/About.jsx'
 
 // HashRouter is needed for GitHub pages
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <HashRouter basename='' hashType='noslash'>
       <Routes>
-        <Route index element={<App />} />
+        <Route index element={<Home />} />
         <Route path='settings' element={<Settings />} />
         <Route path='about' element={<About />} />
       </Routes>

src/OptionsMenu.jsx src/components/OptionsMenu.jsxsrc/OptionsMenu.jsx renamed to src/components/OptionsMenu.jsx

@@ -1,8 +1,8 @@
 import { useNavigate } from 'react-router';
-import './App.css'
-import { autoFocus } from './focus';
-import Header from './Header'
-import SoftKeyBar from './SoftKeyBar'
+import './Home.css'
+import { autoFocus } from '../utils/focus';
+import Header from '../components/Header'
+import SoftKeyBar from '../components/SoftKeyBar'
 import { t } from 'i18next'
 
 function About() {