From 4a2bc0907bff039dfc816afad5c655c756d2417c Mon Sep 17 00:00:00 2001
From: Leo Huang <klhftco@berkeley.edu>
Date: Thu, 29 Feb 2024 19:35:06 -0800
Subject: [PATCH] some work on styling, looking at the index.tsx, maybe not
 worth to componentize each release, already pretty short code-wise; will
 continue working on styling and thinking about storing methods (json seems ok
 so far, maybe just make an input method or something)

---
 frontend/src/App.tsx                          | 10 +++
 .../app/Releases/Release/Release.module.scss  | 83 -------------------
 frontend/src/app/Releases/Release/index.tsx   | 33 --------
 .../src/app/Releases/Releases.module.scss     |  7 ++
 frontend/src/app/Releases/index.tsx           | 41 ++++-----
 5 files changed, 39 insertions(+), 135 deletions(-)
 delete mode 100644 frontend/src/app/Releases/Release/Release.module.scss
 delete mode 100644 frontend/src/app/Releases/Release/index.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2b10f6dfd..684b2bf0a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import About from "@/app/About";
 import Catalog from "@/app/Catalog";
 import Landing from "@/app/Landing";
 import Layout from "@/app/Layout";
+import Releases from "@/app/Releases";
 
 const router = createBrowserRouter([
   {
@@ -52,6 +53,15 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    element: <Layout />,
+    children: [
+      {
+        element: <Releases />,
+        path: "/releases",
+      },
+    ],
+  },
 ]);
 
 export default function App() {
diff --git a/frontend/src/app/Releases/Release/Release.module.scss b/frontend/src/app/Releases/Release/Release.module.scss
deleted file mode 100644
index 275dc0858..000000000
--- a/frontend/src/app/Releases/Release/Release.module.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.root {
-  padding: 96px 0;
-
-  .row {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 96px;
-
-    &:not(:last-child) {
-      margin-bottom: 96px;
-    }
-
-    .gallery {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      position: relative;
-
-      .calendar {
-        width: calc(100% - 128px);
-      }
-
-      .schedule {
-        width: 256px;
-        margin-left: auto;
-        margin-top: -128px;
-      }
-    }
-
-    .text {
-      width: 512px;
-      flex-shrink: 0;
-
-      .link {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: var(--blue-500);
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 1;
-        transition: all 100ms ease-in-out;
-
-        &:hover {
-          color: var(--blue-600);
-        }
-      }
-
-      .description {
-        font-size: 16px;
-        line-height: 1.5;
-        margin-bottom: 32px;
-        color: var(--slate-500);
-      }
-
-      .heading {
-        font-size: 32px;
-        font-weight: 660;
-        font-feature-settings: 'cv05' on, 'cv13' on, 'ss07' on, 'cv12' on, 'cv06' on;
-        line-height: 1.25;
-        letter-spacing: -1%;
-        margin-bottom: 16px;
-        color: var(--slate-900);
-      }
-
-      .badge {
-        height: 24px;
-        border-radius: 4px;
-        padding: 0 8px;
-        display: flex;
-        align-items: center;
-        background-color: var(--orange-500);
-        width: max-content;
-        color: white;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 1;
-        margin-bottom: 16px;
-      }
-    }
-  }
-}
diff --git a/frontend/src/app/Releases/Release/index.tsx b/frontend/src/app/Releases/Release/index.tsx
deleted file mode 100644
index cf325767b..000000000
--- a/frontend/src/app/Releases/Release/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ArrowRight } from "iconoir-react";
-import { Link } from "react-router-dom";
-
-import Container from "@/components/Container";
-
-import styles from "./Release.module.scss";
-
-interface ReleaseProps {
-  date: string;
-  updates: Array<string>;
-  fixes: Array<string>;
-}
-
-export default function Release(props: { release?: ReleaseProps }) {
-  console.log(release);
-  return (
-    <div className={styles.root}>
-        <h3 className={styles.heading}>{release.date}</h3>
-        <h4 className={styles.heading}>🤩 What's New</h4>
-        <ul>
-          {release.updates.map(item => {
-            return <li>{item}</li>
-          })}
-        </ul>
-        <h4 className={styles.heading}>🐛 Bug Fixes</h4>
-        <ul>
-          {release.fixes.map(item => {
-            return <li>{item}</li>
-          })}
-        </ul>
-    </div>
-  );
-}
diff --git a/frontend/src/app/Releases/Releases.module.scss b/frontend/src/app/Releases/Releases.module.scss
index e58bb830b..54ba02e72 100644
--- a/frontend/src/app/Releases/Releases.module.scss
+++ b/frontend/src/app/Releases/Releases.module.scss
@@ -14,6 +14,13 @@
   color: #383838;
 }
 
+.log_col {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+}
+
 .log {
   flex: 0 0 50%;
   max-width: 50%;
diff --git a/frontend/src/app/Releases/index.tsx b/frontend/src/app/Releases/index.tsx
index c3ba03f7e..bbf322f70 100644
--- a/frontend/src/app/Releases/index.tsx
+++ b/frontend/src/app/Releases/index.tsx
@@ -13,25 +13,28 @@ const Releases = () => {
           <h2>Berkeleytime Releases</h2>
           <h3>Keep up-to-date with our releases and bug fixes.</h3>
       </div>
-      {releases.map(rel => {
-        return (
-          <div className={styles.log}>
-              <h3 className={styles.heading}>{rel.date}</h3>
-              <h2 className={styles.heading}>🤩 What's New</h2>
-              <ul>
-                {rel.updates.map(item => {
-                  return <li>{item}</li>
-                })}
-              </ul>
-              <h2 className={styles.heading}>🐛 Bug Fixes</h2>
-              <ul>
-                {rel.fixes.map(item => {
-                  return <li>{item}</li>
-                })}
-              </ul>
-          </div>
-        );
-      })}
+      <div className={styles.log_col}>
+        {releases.map(rel => {
+          console.log(rel);
+          return (
+            <div className={styles.log}>
+                <h3>{rel.date}</h3>
+                <h2>🤩 What's New</h2>
+                <ul>
+                  {rel.updates.map(item => {
+                    return <li>{item}</li>
+                  })}
+                </ul>
+                <h2>🐛 Bug Fixes</h2>
+                <ul>
+                  {rel.fixes.map(item => {
+                    return <li>{item}</li>
+                  })}
+                </ul>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };