PR 2/10 — Port shared models and SCSS

react-app/src/main.tsx

@@ -3,6 +3,8 @@ import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
+import './styles/styles.scss';
+
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <App />

react-app/src/models/comment.ts

@@ -0,0 +1,10 @@
+export interface Comment {
+    id: number;
+    level: number;
+    user: string;
+    time: number;
+    time_ago: string;
+    content: string;
+    deleted?: boolean;
+    comments: Comment[];
+}

react-app/src/models/feed-type.type.ts

@@ -0,0 +1 @@
+export type FeedType = 'poll' | 'story' | 'job';

react-app/src/models/poll-result.ts

@@ -0,0 +1,4 @@
+export interface PollResult {
+    points: number;
+    content: string;
+}

react-app/src/models/settings.ts

@@ -0,0 +1,7 @@
+export interface Settings {
+    showSettings: boolean;
+    openLinkInNewTab: boolean;
+    theme: string;
+    titleFontSize: string;
+    listSpacing: string;
+}

react-app/src/models/story.ts

@@ -0,0 +1,23 @@
+import type { Comment } from './comment';
+import type { FeedType } from './feed-type.type';
+import type { PollResult } from './poll-result';
+
+export interface Story {
+    id: number;
+    title: string;
+    points: number;
+    user: string;
+    time: number;
+    time_ago: number;
+    type: FeedType;
+    url?: string;
+    domain?: string;
+    comments?: Comment[];
+    comments_count: number;
+    poll?: PollResult[];
+    poll_votes_count?: number;
+    deleted?: boolean;
+    dead?: boolean;
+    content?: string;
+    text?: string;
+}

react-app/src/models/user.ts

@@ -0,0 +1,8 @@
+export interface User {
+    id: string;
+    crated_time: number;
+    created: string;
+    karma: number;
+    avg: number;
+    about?: string;
+}

react-app/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)";

react-app/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);

react-app/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
+
+---------------------------------- */

react-app/src/styles/styles.scss

@@ -0,0 +1,43 @@
+@import "./themes";
+
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+}
+
+pre {
+    white-space: pre-wrap;
+}
+
+.app-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+@media screen and (max-width: 768px) {
+  .app-loader {
+    background-color: #fff;
+  }
+}
+
+#root:empty + .app-loader {
+    opacity: 1;
+    z-index: 100;
+}
+#root:empty + .app-loader .logo {
+    width: 20vh;
+}