🃏 Added a vertical settings menu scaffold

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12-alpine
+FROM node:12.21.0
 LABEL maintainer="Rishi Ghan <rishi.ghan@gmail.com>"
 
 RUN mkdir -p /usr/src/threetwo
@@ -9,10 +9,7 @@ COPY yarn.lock /usr/src/threetwo
 COPY nodemon.json /usr/src/threetwo
 COPY jsdoc.json /usr/src/threetwo
 
-RUN apk add --no-cache --virtual .build-deps git automake autoconf \
+RUN yarn
- && yarn \
- && apk del .build-deps
-
 
 COPY . /usr/src/threetwo
 EXPOSE 3050

src/client/components/ComicDetail.tsx

@@ -261,14 +261,14 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       name: PropTypes.string,
       number: PropTypes.string,
       resource_type: PropTypes.string,
-      id: PropTypes.string,
+      id: PropTypes.number,
     }),
   };
 
   RawFileDetails.propTypes = {
     data: PropTypes.shape({
       containedIn: PropTypes.string,
-      fileSize: PropTypes.string,
+      fileSize: PropTypes.number,
       path: PropTypes.string,
       extension: PropTypes.string,
     }),

src/client/components/Settings.tsx

@@ -5,8 +5,50 @@ interface ISettingsProps {}
 export const Settings = (props: ISettingsProps): ReactElement => {
   return (
     <section className="container">
-      <div className="section">
+      <div className="columns">
-        <h1 className="title">Settings</h1>
+        <div className="section column is-one-quarter">
+          <h1 className="title">Settings</h1>
+          <aside className="menu">
+            <p className="menu-label">General</p>
+            <ul className="menu-list">
+              <li>
+                <a>Dashboard</a>
+              </li>
+              <li>
+                <a>Customers</a>
+              </li>
+            </ul>
+            <p className="menu-label">Acquisition</p>
+            <ul className="menu-list">
+              <li>
+                <a className="is-active">AirDC++</a>
+                <ul>
+                  <li>
+                    <a>Connection</a>
+                  </li>
+                  <li>
+                    <a>Hubs</a>
+                  </li>
+                  <li>
+                    <a>Additional Configuration</a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <p className="menu-label">ComicVine</p>
+            <ul className="menu-list">
+              <li>
+                <a>Payments</a>
+              </li>
+              <li>
+                <a>Transfers</a>
+              </li>
+              <li>
+                <a>Balance</a>
+              </li>
+            </ul>
+          </aside>
+        </div>
       </div>
     </section>
   );