Add the About page

src/components/Footer.jsx

@@ -9,7 +9,7 @@ export default function Footer() {
         <h2>
           Dakara client <span className="version">{version}</span>
         </h2>
-        <p className="contact">
+        <p className="contact text">
           Visit the <a href={projectHomepage}>project page</a>
           <br />
           Report a <a href={bugtracker}>bug</a>

src/components/settings/About.jsx

@@ -0,0 +1,76 @@
+const dependencies = [
+  {
+    name: 'Classnames',
+    url: 'https://github.com/JedWatson/classnames',
+  },
+  {
+    name: 'Color convert (dev)',
+    url: 'https://github.com/Qix-/color-convert',
+  },
+  { name: 'Day.js', url: 'https://day.js.org' },
+  {
+    name: 'Embla Carousel',
+    url: 'https://www.embla-carousel.com/',
+  },
+  {
+    name: 'Line Awesome',
+    url: 'https://icons8.com/line-awesome',
+  },
+  {
+    name: 'Prop-types',
+    url: 'https://github.com/facebook/prop-types',
+  },
+  {
+    name: 'Query-string',
+    url: 'https://github.com/sindresorhus/query-string',
+  },
+  { name: 'React', url: 'https://react.dev' },
+  {
+    name: 'React Highlight Words',
+    url: 'https://github.com/bvaughn/react-highlight-words',
+  },
+  { name: 'React-Redux', url: 'https://react-redux.js.org' },
+  { name: 'React-router', url: 'https://reactrouter.com' },
+  {
+    name: 'React-transitioning',
+    url: 'https://fakundo.github.io/react-transitioning',
+  },
+  { name: 'Redux', url: 'https://redux.js.org' },
+  {
+    name: 'Redux-localstorage',
+    url: 'https://github.com/elgerlambert/redux-localstorage',
+  },
+  {
+    name: 'Redux-thunk',
+    url: 'https://github.com/reduxjs/redux-thunk',
+  },
+  {
+    name: 'Roboto',
+    url: 'https://fonts.google.com/specimen/Roboto',
+  },
+  { name: 'Semver', url: 'https://github.com/npm/node-semver' },
+  {
+    name: 'WCAG Contrast utils (dev)',
+    url: 'https://github.com/pavlogolovatyy/wcag-contrast-utils',
+  },
+]
+
+export default function About() {
+  return (
+    <div id="about" className="flow">
+      <h3>About the project</h3>
+      <p className="text">
+        <a href="https://github.com/DakaraProject">Dakara</a> is an open-source,
+        self-hosted Karaoke project.
+      </p>
+      <h3>About the dependencies</h3>
+      <ul className="text">
+        {dependencies.map((item) => (
+          <li key={item.name}>
+            <a href={item.url}>{item.name}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/components/settings/Settings.jsx

@@ -18,6 +18,7 @@ export default function Settings() {
           name="Kara stop time"
         />
         <Tab to="/settings/tokens" iconName="user-circle" name="Tokens" />
+        <Tab to="/settings/about" iconName="info" name="About" />
       </TabBar>
       <Outlet context={[searchBoxQuery, setSearchBoxQuery]} />
     </div>

src/main.jsx

@@ -8,6 +8,7 @@ import { applyMiddleware, compose, createStore } from 'redux'
 import persistState from 'redux-localstorage'
 import { thunk } from 'redux-thunk'
 
+import SettingsAbout from 'components/settings/About'
 import ProtectedRoute from 'components/generics/ProtectedRoute'
 import Colors from 'components/lab/Colors'
 import Fields from 'components/lab/Fields'
@@ -105,6 +106,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
                   element={<SettingsKaraDateStop />}
                 />
                 <Route path="tokens" element={<SettingsTokens />} />
+                <Route path="about" element={<SettingsAbout />} />
               </Route>
             </Route>
             {/* #if DEV */}

src/style/base/_common.scss

@@ -51,7 +51,7 @@ h3 {
   font-size: 1.75em;
 }
 
-p {
+.text {
   @include fonts.make-long;
 
   margin: 0;