Merge branch 'main' of https:/cuappdev/app-status

frontend/src/app/globals.css

@@ -2,26 +2,66 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
+@font-face {
+ font-family: "pro-disp-sb";
+ src: url("../../public/SF-Pro-Display-Semibold.otf");
+}
+@font-face {
+ font-family: "pro-disp-md";
+ src: url("../../public/SF-Pro-Display-Medium.otf");
+}
+@font-face {
+ font-family: "pro-text-md";
+ src: url("../../public/SF-Pro-Text-Regular.otf");
+}
+@font-face {
+ font-family: "pro-text-rg";
+ src: url("../../public/SF-Pro-Text-Regular.otf");
 }
 
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
+@layer base {
+ h1 {
+ @apply font-pro-disp-sb text-[3rem] leading-[4rem];
+ }
+ h2 {
+ @apply font-pro-disp-sb text-[2.25rem] leading-[2.25rem];
+ }
+ h3 {
+ @apply font-pro-disp-sb text-[1.5rem] leading-[1.5rem];
+ }
+ h4 {
+ @apply font-pro-disp-md text-[1.5rem] leading-9;
+ }
+ h5 {
+ @apply font-pro-disp-md text-[1.25rem] leading-7;
+ }
+ h6 {
+ @apply font-pro-text-md text-[1rem] leading-6;
  }
 }
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+@layer components {
+ .p1 {
+ @apply font-pro-text-rg text-[1rem] leading-6;
+ }
+ .p2 {
+ @apply font-pro-text-rg text-[0.875rem] leading-5;
+ }
+ .p3 {
+ @apply font-pro-text-rg text-[0.75rem] leading-5;
+ }
+ .app-icon-shadow {
+ @apply shadow-[0px_0px_10px_0px_rgba(36, 41, 46, 0.05)];
+ }
+ .selected-icon-highlight {
+ @apply border-solid border-highlight border-2 shadow-[0_0_20px_20px_rgba(74, 144, 226, 0.25)];
+ }
+ .border-warning {
+ @apply border-solid border-[1px] border-warning;
+ }
+ .border-selected-highlight {
+ @apply border-solid border-2 border-highlight;
+ }
+ .border-other {
+ @apply border-stroke-colors border-2 box-border;
+ }
 }

frontend/src/app/page.tsx

@@ -1,9 +1,9 @@
-import Timeline from "@/components/Timeline";
+import Overview from "@/components/Overview";
 
 export default function Home() {
  return (
- <div className="background-black flex flex-col items-center justify-center h-screen">
- <Timeline />
+ <div className="bg-black flex flex-col items-center justify-center h-screen">
+ <Overview />
  </div>
  );
 }

frontend/src/components/Overview.tsx

@@ -0,0 +1,7 @@
+export default function Overview() {
+ return (
+ <div>
+ <h4>Overview</h4>
+ </div>
+ );
+}

frontend/src/components/Timeline.tsx

@@ -1,22 +1,13 @@
+import { App } from "@/models/App";
 import { DownInterval } from "@/models/DownInterval";
 import React from "react";
 
-export default function Timeline({
- appImgSrc,
- appName,
- lastUpdated,
- downIntervals,
-}: {
- appImgSrc: string;
- appName: string;
- lastUpdated: Date;
- downIntervals: DownInterval;
-}) {
+export default function Timeline(app: App) {
  return (
  <div className="bg-white rounded-xl flex flex-col gap-6 items-stretch p-8">
  {/* Header row */}
  <div className="flex flex-row">
- <img src={appImgSrc} className=" app-icon-shadow" />
+ <img src={app.iconSrc ?? ""} className=" app-icon-shadow" />
  <div className="flex flex-col"></div>
  </div>
  </div>

frontend/src/models/App.ts

@@ -0,0 +1,8 @@
+import { DownInterval } from "./DownInterval";
+
+export interface App {
+ name: string;
+ downIntervals: DownInterval[];
+ lastUpdated: Date;
+ imageUrl?: string;
+}

frontend/src/models/DownInterval.ts

@@ -1,5 +1,11 @@
 export interface DownInterval {
- startDate: Date;
- endDate: Date;
+ severity: Severity;
  description: string;
+ startTime: Date;
+ endTime?: Date;
+}
+
+enum Severity {
+ Medium,
+ High,
 }