feat: add Header, Footer, Settings shell components and port SCSS theme system

src/App.tsx

@@ -1,13 +1,35 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { SettingsProvider } from './context/SettingsContext';
+import { useSettings } from './hooks/useSettings';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import './styles/app.scss';
+
+function AppShell() {
+  const { settings } = useSettings();
 
-function App() {
   return (
-    <SettingsProvider>
-      <div>
-        <h1>Angular2 HN – React Migration</h1>
-        <p>Migration scaffold is ready.</p>
+    <div className={settings.theme}>
+      <div className="body-cover"></div>
+      <div className="wrapper">
+        <Header />
+        <Routes>
+          <Route path="/" element={<Navigate to="/news/1" replace />} />
+          <Route path="/:feed/:page" element={<div>Feed placeholder</div>} />
+        </Routes>
+        <Footer />
       </div>
-    </SettingsProvider>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <SettingsProvider>
+        <AppShell />
+      </SettingsProvider>
+    </BrowserRouter>
   );
 }
 

src/components/Footer.scss

@@ -0,0 +1,23 @@
+@import "../styles/media";
+@import "../styles/theme_variables";
+
+#footer {
+  position: relative;
+  padding: 10px;
+  height: 60px;
+  letter-spacing: 0.7px;
+  text-align: center;
+
+  a {
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}

src/components/Footer.tsx

@@ -0,0 +1,14 @@
+import './Footer.scss';
+
+export function Footer() {
+  return (
+    <div id="footer">
+      <p>
+        Show this project some {'❤'} on{' '}
+        <a href="https://github.com/hdjirdeh/angular2-hn" target="_blank" rel="noopener noreferrer">
+          GitHub
+        </a>
+      </p>
+    </div>
+  );
+}

src/components/Header.scss

@@ -0,0 +1,149 @@
+@import "../styles/media";
+@import "../styles/theme_variables";
+
+#header {
+  color: #fff;
+  padding: 6px 0;
+  line-height: 18px;
+  vertical-align: middle;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  @media #{$mobile-only} {
+    height: 50px;
+    position: fixed;
+    top: 0;
+  }
+
+  a {
+    display: inline;
+  }
+}
+
+.home-link {
+  width: 50px;
+  height: 66px;
+}
+
+.logo-inner {
+  width: 32px;
+  position: absolute;
+  left: 17px;
+  top: 18px;
+  z-index: -1;
+  height: 32px;
+  border-radius: 50%;
+
+  @media #{$mobile-only} {
+    left: 16px;
+    top: 12px;
+  }
+}
+
+.logo {
+  width: 50px;
+  padding: 3px 8px 0;
+
+  @media #{$mobile-only} {
+    width: 45px;
+    padding: 0 0 0 10px;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  font-size: 16px;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.name {
+  margin-right: 30px;
+  margin-bottom: 2px;
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}
+
+.header-text {
+  position: absolute;
+  width: inherit;
+  height: 20px;
+  left: 10px;
+  top: 27px;
+  z-index: -1;
+
+  @media #{$mobile-only} {
+    top: 22px;
+  }
+}
+
+.left {
+  position: absolute;
+  left: 60px;
+  font-size: 16px;
+
+  @media #{$mobile-only} {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.header-nav {
+  display: inline-block;
+  margin-left: 20px;
+
+  @media #{$mobile-only} {
+    margin-left: 60px;
+  }
+
+  a {
+    color: hsla(0, 0%, 100%, .9);
+    text-decoration: none;
+    margin: 0 5px;
+    letter-spacing: 1.8px;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .active {
+    color: #fff;
+  }
+}
+
+.info {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  height: 100%;
+
+  @media #{$mobile-only} {
+    right: 10px;
+  }
+
+  img {
+    opacity: 0.8;
+    width: 25px;
+    margin-top: 21.5px;
+    display: block;
+
+    &:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
+
+    @media #{$mobile-only} {
+      margin-top: 15px;
+    }
+  }
+}

src/components/Header.tsx

@@ -0,0 +1,43 @@
+import { Link, NavLink } from 'react-router-dom';
+import { useSettings } from '../hooks/useSettings';
+import { Settings } from './Settings';
+import './Header.scss';
+
+export function Header() {
+  const { settings, toggleSettings } = useSettings();
+
+  const scrollTop = () => window.scrollTo(0, 0);
+
+  return (
+    <header>
+      <div id="header">
+        <Link className="home-link" to="/news/1" onClick={scrollTop}>
+          <div className="logo-inner"></div>
+          <img className="logo" src="/assets/images/logo.svg" alt="Logo" />
+        </Link>
+        <div className="header-text">
+          <div className="left">
+            <span className="header-nav">
+              <NavLink to="/newest/1" onClick={scrollTop}>new</NavLink>
+                {' | '}
+              <NavLink to="/show/1" onClick={scrollTop}>show</NavLink>
+                {' | '}
+              <NavLink to="/ask/1" onClick={scrollTop}>ask</NavLink>
+                {' | '}
+              <NavLink to="/jobs/1" onClick={scrollTop}>jobs</NavLink>
+            </span>
+          </div>
+        </div>
+        <div className="info">
+          <img
+            className="settings"
+            src="/assets/images/cog.svg"
+            alt="Settings"
+            onClick={toggleSettings}
+          />
+        </div>
+      </div>
+      {settings.showSettings && <Settings />}
+    </header>
+  );
+}

src/components/Settings.scss

@@ -0,0 +1,81 @@
+@import "../styles/media";
+@import "../styles/theme_variables";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.7);
+  opacity: 1;
+  z-index: 1;
+}
+
+.popup {
+  margin: 70px auto;
+  padding: 30px;
+  border-radius: 5px;
+  width: 30%;
+  position: relative;
+
+  h1 {
+    margin-top: 0;
+    margin-bottom: 0px;
+    color: #fff;
+    text-align: center;
+    letter-spacing: 1px;
+  }
+
+  h2 {
+    padding-top: 10px;
+  }
+
+  hr {
+    width: 40%;
+    margin-bottom: 20px;
+  }
+
+  .close {
+    position: absolute;
+    top: 12px;
+    right: 20px;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.8);
+
+    &:hover {
+      color: #fff;
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    max-height: 30%;
+    color: #fff;
+    letter-spacing: 1px;
+    overflow: auto;
+  }
+
+  input[type=number] {
+    display: block;
+    width: 80%;
+    height: 20px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+    padding: 2px;
+  }
+}
+
+.control-section {
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid white;
+}
+
+@media screen and (max-width: 700px) {
+  .box, .popup {
+    width: 70%;
+  }
+}