⚙️ Added Settings page scaffold

.dockerignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -4,7 +4,8 @@ LABEL maintainer="Rishi Ghan <rishi.ghan@gmail.com>"
 RUN mkdir -p /usr/src/threetwo
 WORKDIR /usr/src/threetwo
 
-COPY package.json yarn.lock /usr/src/threetwo/
+COPY package.json /usr/src/threetwo/
+COPY yarn.lock /usr/src/threetwo/
 COPY nodemon.json /usr/src/threetwo
 COPY jsdoc.json /usr/src/threetwo
 

src/client/assets/scss/App.scss

@@ -5,6 +5,9 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 $bg-color: yellow;
 $border-color: red;
 
+.container {
+  margin-top: 2em;
+}
 .app {
   font-family: helvetica, arial, sans-serif;
   padding: 2em;
@@ -188,7 +191,7 @@ $border-color: red;
   .download-icon-labels {
     .downloads-count {
       margin: 0 1em 0 0.4em;
-      border: 1px solid #CCC;
+      border: 1px solid #ccc;
     }
   }
   .download-tab-name {

src/client/components/App.tsx

@@ -6,6 +6,7 @@ import Import from "./Import";
 import { ComicDetail } from "./ComicDetail";
 import Library from "./Library";
 import Search from "./Search";
+import Settings from "./Settings";
 
 import { Switch, Route } from "react-router";
 import Navbar from "./Navbar";
@@ -33,6 +34,9 @@ class App extends React.Component {
             path={"/comic/details/:comicObjectId"}
             component={ComicDetail}
           />
+          <Route path="/settings">
+            <Settings />
+          </Route>
         </Switch>
       </div>
     );

src/client/components/Navbar.tsx

@@ -202,7 +202,11 @@ const Navbar: React.FunctionComponent = (props) => {
                   </span>
                 ) : null}
               </p>
-              <p className="control">Settings</p>
+              <p className="control">
+                <Link to="/settings" className="navbar-item">
+                  Settings
+                </Link>
+              </p>
             </div>
           </div>
         </div>

src/client/components/Settings.tsx

@@ -0,0 +1,15 @@
+import React, { useState, useEffect, useCallback, ReactElement } from "react";
+
+interface ISettingsProps {}
+
+export const Settings = (props: ISettingsProps): ReactElement => {
+  return (
+    <section className="container">
+      <div className="section">
+        <h1 className="title">Settings</h1>
+      </div>
+    </section>
+  );
+};
+
+export default Settings;

src/client/shared/settings.json

@@ -0,0 +1,51 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2015 Rishi Ghan
+ *
+ The MIT License (MIT)
+
+Copyright (c) 2015 Rishi Ghan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 
+ */
+
+/*
+ * Revision History:
+ *     Initial:        2021/09/06        Rishi Ghan
+ */
+
+// Settings file for ThreeTwo!
+
+{
+    "directConnect": {
+        "client": {
+            "name": "airdcpp",
+            "version": "",
+            "hostname": "",
+            "port": "",
+            "https": false,
+            "username": "admin",
+            "password": "password",
+            "hubs": [{
+                
+            }]
+        }
+    }
+}