[deleted] | Comment Deleted
;
+ }
+ return (
+
+
+
+ );
+}
diff --git a/react/src/components/ErrorMessage.tsx b/react/src/components/ErrorMessage.tsx
new file mode 100644
index 000000000..f4384d175
--- /dev/null
+++ b/react/src/components/ErrorMessage.tsx
@@ -0,0 +1,9 @@
+export function ErrorMessage({ message }: { message: string }) {
+ return (
+
+ {' '}
+ {comment.user}{comment.time_ago}
+
+
+
+
- {comment.comments.map((child) =>
+
+
+ );
+}
diff --git a/react/src/components/Footer.tsx b/react/src/components/Footer.tsx
new file mode 100644
index 000000000..c36ffd2de
--- /dev/null
+++ b/react/src/components/Footer.tsx
@@ -0,0 +1,3 @@
+export function Footer() {
+ return ;
+}
diff --git a/react/src/components/Header.tsx b/react/src/components/Header.tsx
new file mode 100644
index 000000000..3b8e3c28a
--- /dev/null
+++ b/react/src/components/Header.tsx
@@ -0,0 +1,25 @@
+import { Link, NavLink } from 'react-router-dom';
+import { useSettings } from '../context/SettingsContext';
+import { SettingsPanel } from './SettingsPanel';
+
+export function Header() {
+ const { settings, toggleSettings } = useSettings();
+ const scrollTop = () => window.scrollTo(0, 0);
+ return (
+ {message}
+If you are offline viewing, you'll need to visit this page with a network connection first before it can work offline.
+
+ 
+
+
+
+ {settings.showSettings &&
+
+ {[
+ ['/newest/1', 'new'],
+ ['/show/1', 'show'],
+ ['/ask/1', 'ask'],
+ ['/jobs/1', 'jobs']
+ ].map(([to, label], index) => {label} {index < 3 ? ' | ' : ''})}
+
+
+ );
+}
diff --git a/react/src/components/Loader.tsx b/react/src/components/Loader.tsx
new file mode 100644
index 000000000..527871b54
--- /dev/null
+++ b/react/src/components/Loader.tsx
@@ -0,0 +1,3 @@
+export function Loader() {
+ return {hasUrl ? <>{item.title}{item.domain && ({item.domain})} : {item.title}}
+
+ {item.type !== 'job' &&
+ {item.user}{item.points} ★
}
+ {item.time_ago}{item.type !== 'job' && • {formatCommentCount(item.comments_count)}}
+
+ {item.type !== 'job' && {item.points} points by {item.user}}
+ {item.time_ago}{item.type !== 'job' && <> | {formatCommentCount(item.comments_count)}}
+
+ Loading...
+
+ );
+}
diff --git a/react/src/context/SettingsContext.tsx b/react/src/context/SettingsContext.tsx
new file mode 100644
index 000000000..270168917
--- /dev/null
+++ b/react/src/context/SettingsContext.tsx
@@ -0,0 +1,77 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import type { Settings, Theme } from '../types/models';
+
+interface SettingsContextValue {
+ settings: Settings;
+ toggleSettings: () => void;
+ toggleOpenLinksInNewTab: () => void;
+ setTheme: (theme: Theme) => void;
+ setFont: (fontSize: string) => void;
+ setSpacing: (spacing: string) => void;
+}
+
+const SettingsContext = createContext
+
+
+ Settings
+
+
+
+ Links
+ +
+
+
+
+ Select a theme
+ {themes.map((theme) => )} +Change Font
+ + +
+ {!items && !errorMessage &&
+ );
+}
diff --git a/react/src/pages/ItemDetails.tsx b/react/src/pages/ItemDetails.tsx
new file mode 100644
index 000000000..d1bc1d242
--- /dev/null
+++ b/react/src/pages/ItemDetails.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { fetchItem } from '../api/hackerNewsApi';
+import { useSettings } from '../context/SettingsContext';
+import type { Story } from '../types/models';
+import { Comment } from '../components/Comment';
+import { ErrorMessage } from '../components/ErrorMessage';
+import { Loader } from '../components/Loader';
+import { formatCommentCount } from '../utils/formatCommentCount';
+
+export function ItemDetails() {
+ const { id = '' } = useParams();
+ const navigate = useNavigate();
+ const { settings } = useSettings();
+ const [item, setItem] = useStateThese are jobs at startups that were funded by Y Combinator. You can also get a job at a YC startup through Triplebyte.
} +-
+ {items.map((item) =>
+ {listStart !== 1 && ‹ Prev}
+ {items.length === 30 && More ›}
+
+ }
+ {errorMessage ?
;
+ const hasUrl = item.url.startsWith('http');
+ const externalProps = settings.openLinkInNewTab ? { target: '_blank', rel: 'noopener' } : {};
+ const titleLink = hasUrl ? {item.title} : {item.title};
+ return (
+
+
+
0 || item.type === 'job' ? ' item-header' : ''}${item.text ? ' head-margin' : ''}`}>
+
+ {item.type === 'poll' && {titleLink}{hasUrl && item.domain && ({item.domain})}
+{item.type !== 'job' && {item.points} points by {item.user}}{item.time_ago}{item.type !== 'job' && <> | {formatCommentCount(item.comments_count)}}
+ {item.poll.map((pollResult, index) => )}
}
+ {item.content && }
+ {pollResult.points} points
- {item.comments.map((comment) =>
+
};
+}
diff --git a/react/src/styles.scss b/react/src/styles.scss
new file mode 100644
index 000000000..f26051d86
--- /dev/null
+++ b/react/src/styles.scss
@@ -0,0 +1,63 @@
+@import './styles/media';
+@import './styles/theme_variables';
+@import './styles/themes';
+@import './styles/header';
+@import './styles/footer';
+@import './styles/settings';
+@import './styles/feed';
+@import './styles/item';
+@import './styles/item-details';
+@import './styles/comment';
+@import './styles/user';
+@import './styles/loader';
+@import './styles/error';
+
+html {
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+
+pre {
+ white-space: pre-wrap;
+}
+
+.body-cover {
+ width: 100%;
+ z-index: 0;
+ position: fixed;
+ height: 100%;
+}
+
+.wrapper {
+ position: relative;
+ width: 85%;
+ min-height: 80px;
+ margin: 0 auto;
+ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+ font-size: 15px;
+ height: 100%;
+ line-height: 1.3;
+
+ @media #{$mobile-only} {
+ width: 100%;
+ }
+}
+
+.settings-button {
+ border: 0;
+ padding: 0;
+ background: transparent;
+}
+
+.collapse {
+ border: 0;
+ padding: 0;
+ background: transparent;
+ color: inherit;
+}
diff --git a/react/src/styles/_media.scss b/react/src/styles/_media.scss
new file mode 100644
index 000000000..b04b71a92
--- /dev/null
+++ b/react/src/styles/_media.scss
@@ -0,0 +1,3 @@
+$mobile-only: "only screen and (max-width : 768px)";
+$laptop-only: "only screen and (min-width : 769px)";
+$tablet-only: "only screen and (max-width : 1024px)";
diff --git a/react/src/styles/_theme_variables.scss b/react/src/styles/_theme_variables.scss
new file mode 100644
index 000000000..41dae5eea
--- /dev/null
+++ b/react/src/styles/_theme_variables.scss
@@ -0,0 +1,37 @@
+$skull-size: 200px;
+
+// -------------------------------------------------------------------------------------------
+// Theme Engine
+// -------------------------------------------------------------------------------------------
+
+// Day theme colors
+$theme-day-body-background-color: #fff;
+$theme-day-wrapper-background-color: #f5f5f5;
+$theme-day-wrapper-mobile-background-color: #fff;
+$theme-day-text-color: #000;
+$theme-day-subtext-color: #696969;
+$theme-day-secondary-color: #b92b27;
+$theme-day-header-background-color: $theme-day-secondary-color;
+$theme-day-logo-inner: #fff;
+
+// Day theme extras
+$theme-day-border: 2px solid #b92b27;
+
+// Night theme colors
+$theme-night-body-background-color: #37474F;
+$theme-night-wrapper-background-color: #263238;
+$theme-night-wrapper-mobile-background-color: $theme-night-wrapper-background-color;
+$theme-night-text-color: rgba(255, 255, 255, 0.7);
+$theme-night-subtext-color: #999;
+$theme-night-secondary-color: #00c0ff;
+$theme-night-header-background-color: #263238;
+$theme-night-logo-inner: $theme-night-header-background-color;
+
+// Night theme extras
+$theme-night-border: 2px solid #00c0ff;
+
+// Black theme colors
+$theme-amoledblack-body-background-color: #000;
+$theme-amoledblack-text-color: rgba(255, 255, 255, 0.75);
+$theme-amoledblack-subtext-color: rgba(255, 255, 255, 0.5);
+$theme-amoledblack-secondary-color: rgba(255, 255, 255, 0.6);
diff --git a/react/src/styles/_themes.scss b/react/src/styles/_themes.scss
new file mode 100644
index 000000000..231ed7cf9
--- /dev/null
+++ b/react/src/styles/_themes.scss
@@ -0,0 +1,245 @@
+@import "./media";
+@import "./theme_variables";
+
+/* ----------------------------------
+
+ Want a new theme? Add your new theme variables here!
+
+---------------------------------- */
+
+@mixin theme(
+ $name,
+ $body-background-color,
+ $wrapper-background-color,
+ $wrapper-mobile-background-color,
+ $wrapper-color,
+ $item-a-color,
+ $item-a-visited-color,
+ $header-background-color,
+ $subtext-color,
+ $secondary-link-color,
+ $logo-inner-color,
+ $border
+) {
+ .#{$name} {
+ .body-cover {
+ background: $body-background-color;
+
+ @media #{$mobile-only} {
+ background: $wrapper-mobile-background-color;
+ }
+ }
+
+ .wrapper {
+ background: $wrapper-background-color;
+ color: $wrapper-color;
+
+ @media #{$mobile-only} {
+ background: $wrapper-mobile-background-color;
+ }
+
+ a {
+ color: $item-a-color;
+
+ &:visited {
+ color: $item-a-visited-color;
+ }
+ }
+
+ #header {
+ background: $header-background-color;
+ border-bottom: $border;
+ }
+
+ .logo-inner {
+ background: $logo-inner-color;
+ }
+
+ .nav {
+ a {
+ color: $secondary-link-color;
+
+ @media #{$mobile-only} {
+ color: $secondary-link-color;
+ }
+ }
+ }
+
+ #footer {
+ border-top: $border;
+
+ a {
+ color: $secondary-link-color;
+ }
+ }
+
+ .subtext, .subtext-palm, .subtext-laptop, .domain, .meta, .deleted-meta{
+ color: $subtext-color;
+
+ a {
+ color: $secondary-link-color;
+ }
+ }
+
+ .popup {
+ background: $header-background-color;
+ }
+
+ .item-header {
+ border-bottom: $border;
+
+ @media #{$mobile-only} {
+ background: $wrapper-mobile-background-color;
+ }
+ }
+
+ .pollContent {
+ .pollBar {
+ background: $secondary-link-color;
+ }
+ }
+
+ .loader {
+ color: $secondary-link-color;
+ background: $secondary-link-color;
+
+ &:before, &:after {
+ background: $secondary-link-color;
+ }
+ }
+
+ .job-header {
+ @media #{$mobile-only} {
+ border-bottom: $border;
+ }
+ }
+
+ .back-button {
+ @media #{$mobile-only} {
+ border-top: .3rem solid $secondary-link-color;
+ border-right: .3rem solid $secondary-link-color;
+ }
+ }
+
+ .error-section {
+ .skull {
+ .head {
+ background-color: $secondary-link-color;
+
+ &:before, &:after {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+ }
+
+ .crack {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+
+ &:before {
+ border-top: $skull-size / 8 solid $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ border-top: $skull-size / 8 solid $wrapper-mobile-background-color;
+ }
+ }
+ }
+ }
+
+ .mouth {
+ background-color: $secondary-link-color;
+
+ &:before {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+ }
+ }
+
+ .teeth {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+
+ &:before, &:after {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+ }
+ }
+ }
+ }
+
+ .main-details {
+ .name {
+ color: $secondary-link-color;
+ }
+ .right {
+ color: $secondary-link-color;
+ }
+ }
+ }
+ }
+}
+
+@include theme(
+ default,
+ $theme-day-body-background-color,
+ $theme-day-wrapper-background-color,
+ $theme-day-wrapper-mobile-background-color,
+ $theme-day-text-color,
+ $theme-day-text-color,
+ $theme-day-subtext-color,
+ $theme-day-header-background-color,
+ $theme-day-subtext-color,
+ $theme-day-secondary-color,
+ $theme-day-logo-inner,
+ $theme-day-border
+);
+
+@include theme(
+ night,
+ $theme-night-body-background-color,
+ $theme-night-wrapper-background-color,
+ $theme-night-wrapper-mobile-background-color,
+ $theme-night-text-color,
+ $theme-night-text-color,
+ $theme-night-subtext-color,
+ $theme-night-header-background-color,
+ $theme-night-subtext-color,
+ $theme-night-secondary-color,
+ $theme-night-logo-inner,
+ $theme-night-border
+);
+
+@include theme(
+ amoledblack,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-text-color,
+ $theme-amoledblack-text-color,
+ darken($theme-amoledblack-text-color, 33%),
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-subtext-color,
+ $theme-amoledblack-secondary-color,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-secondary-color
+);
+
+/* ----------------------------------
+
+ Include your new theme here as well as the settings component
+
+---------------------------------- */
diff --git a/react/src/styles/comment.scss b/react/src/styles/comment.scss
new file mode 100644
index 000000000..c8bb10965
--- /dev/null
+++ b/react/src/styles/comment.scss
@@ -0,0 +1,83 @@
+@import "./media";
+@import "./theme_variables";
+
+a {
+ font-weight: bold;
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.meta {
+ font-size: 13px;
+ color: #696969;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+ margin-bottom: 8px;
+ a {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ .time {
+ padding-left: 5px;
+ }
+}
+
+@media #{$mobile-only} {
+ .meta {
+ font-size: 14px;
+ margin-bottom: 10px;
+ .time {
+ padding: 0;
+ float: right;
+ }
+ }
+}
+
+.meta-collapse {
+ margin-bottom: 20px;
+}
+
+.deleted-meta {
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+ margin: 30px 0;
+ a {
+ text-decoration: none;
+ }
+}
+
+.collapse {
+ font-size: 13px;
+ letter-spacing: 2px;
+ cursor: pointer;
+}
+
+.comment-tree {
+ margin-left: 24px;
+}
+
+@media #{$tablet-only} {
+ .comment-tree {
+ margin-left: 8px;
+ }
+}
+
+.comment-text {
+ font-size: 15px;
+ margin-top: 0;
+ margin-bottom: 20px;
+ word-wrap: break-word;
+ line-height: 1.5em;
+}
+
+.subtree {
+ margin-left: 0;
+ padding: 0;
+ list-style-type: none;
+}
diff --git a/react/src/styles/error.scss b/react/src/styles/error.scss
new file mode 100644
index 000000000..eafe016ab
--- /dev/null
+++ b/react/src/styles/error.scss
@@ -0,0 +1,115 @@
+@import "./media";
+@import "./theme_variables";
+
+.error-section {
+ height: 300px;
+ margin: 200px;
+
+ @media #{$mobile-only} {
+ height: 0;
+ display: block;
+ position: relative;
+ margin: 30vh 0;
+ }
+
+ p {
+ text-align: center;
+ padding: 0 25px;
+
+ &.strong {
+ margin-top: 25px;
+ font-weight: bold;
+ }
+ }
+
+ .skull {
+ width: $skull-size;
+ height: $skull-size;
+ position: relative;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+
+ .head {
+ width: 100%;
+ height: 75%;
+ border-radius: 15% / 20%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ &:before, &:after {
+ content: "";
+ position: absolute;
+ border-radius: 50%;
+ width: 20%;
+ height: 30%;
+ bottom: 10%;
+ }
+ &:before {
+ left: 10%;
+ }
+ &:after {
+ right: 10%;
+ }
+ .crack {
+ width: 10%;
+ height: 10%;
+ position: absolute;
+ top: 0;
+ right: 25%;
+ transform: skew(-15deg);
+
+ &:before {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: $skull-size / 15;
+ border-right: $skull-size / 20 solid transparent;
+ border-left: $skull-size / 40 solid transparent;
+ }
+ }
+ }
+ .mouth {
+ width: 40%;
+ height: 25%;
+ position: absolute;
+ top: 75%;
+ left: 30%;
+ border-radius: 0 0 $skull-size / 10 $skull-size / 10;
+ &:before {
+ content: "";
+ position: absolute;
+ width: 15%;
+ height: 50%;
+ border-radius: 50% / 30%;
+ left: 42.5%;
+ top: -25%;
+ }
+ .teeth {
+ position: absolute;
+ bottom: 0;
+ left: 45%;
+ width: 10%;
+ height: 50%;
+ margin-bottom: -5%;
+ border-radius: 50% / 20%;
+
+ &:before, &:after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50% / 20%;
+ }
+ &:before {
+ left: -250%;
+ }
+ &:after {
+ right: -250%;
+ }
+ }
+ }
+ }
+}
diff --git a/react/src/styles/feed.scss b/react/src/styles/feed.scss
new file mode 100644
index 000000000..abd6a7ad7
--- /dev/null
+++ b/react/src/styles/feed.scss
@@ -0,0 +1,108 @@
+@import "./media";
+@import "./theme_variables";
+
+a {
+ text-decoration: none;
+ font-weight: bold;
+
+ &:hover {
+ text-decoration: underline;
+ };
+}
+
+ol {
+ padding: 0 40px;
+ margin: 0;
+
+ @media #{$mobile-only} {
+ box-sizing: border-box;
+ list-style: none;
+ padding: 0 10px;
+ }
+
+ li {
+ position: relative;
+ -webkit-transition: background-color .2s ease;
+ transition: background-color .2s ease;
+ }
+}
+
+.list-margin {
+ @media #{$mobile-only} {
+ margin-top: 55px;
+ }
+}
+
+.main-content {
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ -webkit-transition: opacity .2s ease;
+ transition: opacity .2s ease;
+ box-sizing: border-box;
+ padding: 8px 0;
+ z-index: 0;
+}
+
+.post {
+ padding: 10px 0 10px 5px;
+ transition: background-color 0.2s ease;
+ border-bottom: 1px solid #CECECB;
+
+ .itemNum {
+ color: #696969;
+ position: absolute;
+ width: 30px;
+ text-align: right;
+ left: 0;
+ top: 4px;
+ }
+}
+
+.item-block {
+ display: block;
+}
+
+
+.nav {
+ padding: 10px 40px;
+ margin-top: 10px;
+ font-size: 17px;
+
+ a {
+ @media #{$mobile-only} {
+ text-decoration: none;
+ }
+ }
+
+ @media #{$mobile-only} {
+ margin: 20px 0;
+ text-align: center;
+ padding: 10px 80px;
+ height: 20px;
+ }
+
+ .prev {
+ padding-right: 20px;
+
+ @media #{$mobile-only} {
+ float: left;
+ padding-right: 0;
+ }
+ }
+
+ .more {
+ @media #{$mobile-only} {
+ float: right;
+ }
+ }
+}
+
+.job-header {
+ font-size: 15px;
+ padding: 0 40px 10px;
+
+ @media #{$mobile-only} {
+ padding: 60px 15px 25px 15px;
+ }
+}
diff --git a/react/src/styles/footer.scss b/react/src/styles/footer.scss
new file mode 100644
index 000000000..50a35fa8c
--- /dev/null
+++ b/react/src/styles/footer.scss
@@ -0,0 +1,23 @@
+@import "./media";
+@import "./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;
+ }
+}
diff --git a/react/src/styles/header.scss b/react/src/styles/header.scss
new file mode 100644
index 000000000..8a903a241
--- /dev/null
+++ b/react/src/styles/header.scss
@@ -0,0 +1,149 @@
+@import "./media";
+@import "./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;
+ }
+ }
+}
diff --git a/react/src/styles/item-details.scss b/react/src/styles/item-details.scss
new file mode 100644
index 000000000..63f675695
--- /dev/null
+++ b/react/src/styles/item-details.scss
@@ -0,0 +1,151 @@
+@import "./media";
+@import "./theme_variables";
+
+.main-content {
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ -webkit-transition: opacity .2s ease;
+ transition: opacity .2s ease;
+ box-sizing: border-box;
+ padding: 8px 0;
+ z-index: 0;
+}
+
+.item {
+ box-sizing: border-box;
+ padding: 10px 40px 0 40px;
+ z-index: 0;
+}
+
+@media #{$tablet-only} {
+ .item {
+ padding: 10px 20px 0 40px;
+ }
+}
+
+@media #{$mobile-only} {
+ .item {
+ box-sizing: border-box;
+ padding: 110px 15px 0 15px;
+ }
+}
+
+.head-margin {
+ margin-bottom: 15px;
+}
+
+p {
+ margin: 2px 0;
+}
+
+.subject {
+ word-wrap: break-word;
+ margin-top: 20px;
+}
+
+a {
+ cursor: pointer;
+ text-decoration: none;
+}
+
+@media #{$mobile-only} {
+ .laptop {
+ display: none;
+ }
+}
+
+@media #{$laptop-only} {
+ .mobile {
+ display: none;
+ }
+}
+
+.title {
+ font-size: 16px;
+ font-family: Verdana, Geneva, sans-serif;
+}
+
+.title-block {
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 75px;
+}
+
+@media #{$mobile-only} {
+ .title {
+ font-size: 15px;
+ }
+ .back-button {
+ position: absolute;
+ top: 52%;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: transparent;
+ box-shadow: 0 0 0 lightgray;
+ transition: all 200ms ease;
+ left: 4%;
+ transform: translate3d(0, -50%, 0) rotate(-135deg);
+ }
+}
+
+.subtext {
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+}
+
+.domain {
+ letter-spacing: 0.5px;
+}
+
+.subtext a {
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.item-details {
+ padding: 10px;
+}
+
+.item-header {
+ padding-bottom: 10px;
+}
+
+@media #{$mobile-only} {
+ .item-header {
+ padding: 10px 0 10px 0;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 62px;
+ }
+}
+
+.pollResults {
+ margin-bottom: 1em;
+}
+
+.pollContent {
+ * {
+ padding-bottom: 0;
+ margin-bottom: -1em;
+ margin-top: 1em;
+ }
+ .pollBar {
+ height: 10px;
+ margin-bottom: 1em;
+ }
+}
+
+ul {
+ list-style-type: none;
+ padding: 10px 0;
+}
+
+li {
+ display: list-item;
+}
diff --git a/react/src/styles/item.scss b/react/src/styles/item.scss
new file mode 100644
index 000000000..e5b7bfcdc
--- /dev/null
+++ b/react/src/styles/item.scss
@@ -0,0 +1,68 @@
+@import "./media";
+@import "./theme_variables";
+
+p {
+ margin: 2px 0;
+
+ @media #{$mobile-only} {
+ margin-bottom: 5px;
+ margin-top: 0;
+ }
+ }
+
+ a {
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .title {
+ font-size: 16px;
+ font-family: Verdana, Geneva, sans-serif;
+ }
+
+ .subtext-laptop {
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+
+ a {
+ &:hover {
+ text-decoration: underline;
+ };
+ }
+ @media #{$mobile-only} {
+ display: none;
+ }
+ }
+
+ .subtext-palm {
+ font-size: 13px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+
+ a {
+ &:hover {
+ text-decoration: underline;
+ };
+ }
+
+ .details {
+ margin-top: 5px;
+
+ .right {
+ float: right;
+ }
+ }
+ @media #{$laptop-only} {
+ display: none;
+ }
+ }
+
+ .domain {
+ color: #696969;
+ letter-spacing: 0.5px;
+ }
+
+ .item-details {
+ padding: 10px;
+ }
diff --git a/react/src/styles/loader.scss b/react/src/styles/loader.scss
new file mode 100644
index 000000000..d5824469a
--- /dev/null
+++ b/react/src/styles/loader.scss
@@ -0,0 +1,109 @@
+@import "./media";
+@import "./theme_variables";
+
+.loader {
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+ &:before, &:after {
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+ }
+ &:before, &:after {
+ position: absolute;
+ top: 0;
+ content: '';
+ }
+ &:before {
+ left: -1.5em;
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+ }
+}
+
+.loading-section {
+ height: 70px;
+ margin: 40px 0 40px 40px;
+
+ @media #{$mobile-only} {
+ display: block;
+ position: relative;
+ margin: 45vh 0;
+ }
+}
+
+.loader {
+ text-indent: -9999em;
+ margin: 20px 20px;
+ position: relative;
+ font-size: 11px;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+ &:after {
+ left: 1.5em;
+ }
+
+ @media #{$mobile-only} {
+ margin: 20px auto;
+ }
+}
+
+@-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 3em;
+ }
+}
+
+@keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 3em;
+ }
+}
+
+@media #{$mobile-only} {
+ @-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 4em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 5em;
+ }
+ }
+
+ @keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 3em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 4em;
+ }
+ }
+}
diff --git a/react/src/styles/settings.scss b/react/src/styles/settings.scss
new file mode 100644
index 000000000..d0b07d50f
--- /dev/null
+++ b/react/src/styles/settings.scss
@@ -0,0 +1,74 @@
+@import "./media";
+@import "./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%;
+ }
+}
diff --git a/react/src/styles/user.scss b/react/src/styles/user.scss
new file mode 100644
index 000000000..0f8270f04
--- /dev/null
+++ b/react/src/styles/user.scss
@@ -0,0 +1,89 @@
+@import "./media";
+@import "./theme_variables";
+
+pre {
+ white-space: pre-wrap;
+}
+
+.profile {
+ padding: 30px;
+}
+
+@media #{$mobile-only} {
+ .profile {
+ padding: 110px 15px 0 15px;
+ }
+ .title-block {
+ font-size: 15px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 75px;
+ }
+ .back-button {
+ position: absolute;
+ top: 52%;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: transparent;
+ box-shadow: 0 0 0 lightgray;
+ transition: all 200ms ease;
+ left: 4%;
+ transform: translate3d(0, -50%, 0) rotate(-135deg);
+ }
+ .item-header {
+ padding-bottom: 10px;
+ background-color: #fff;
+ padding: 10px 0 10px 0;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 62px;
+ height: 20px;
+ }
+}
+
+@media #{$laptop-only} {
+ .mobile {
+ display: none;
+ }
+}
+
+.main-details {
+ .name {
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+ .age {
+ font-weight: bold;
+ color: #696969;
+ padding-bottom: 0;
+ }
+ .right {
+ float: right;
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details {
+ margin-top: 20px;
+ .name {
+ font-size: 18px;
+ }
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details .right {
+ font-size: 18px;
+ }
+}
+
+.other-details {
+ word-wrap: break-word;
+}
diff --git a/react/src/test/App.test.tsx b/react/src/test/App.test.tsx
new file mode 100644
index 000000000..d4251a8fe
--- /dev/null
+++ b/react/src/test/App.test.tsx
@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+import { Header } from '../components/Header';
+import { SettingsProvider } from '../context/SettingsContext';
+
+describe('app shell', () => {
+ it('renders the Hacker News header', () => {
+ render(
+
{user.id}{user.karma} ★
+ {user.about && Created {user.created}
}
+