diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3c0bdfa..37eb5a1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,6 +15,7 @@ }, "devDependencies": { "@ngneat/falso": "^7.3.0", + "@parcel/transformer-css": "^2.13.3", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.2.0", diff --git a/frontend/package.json b/frontend/package.json index bcae314..77e07f4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,7 @@ }, "devDependencies": { "@ngneat/falso": "^7.3.0", + "@parcel/transformer-css": "^2.13.3", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.2.0", diff --git a/frontend/src/css/style.css b/frontend/src/css/style.module.css similarity index 80% rename from frontend/src/css/style.css rename to frontend/src/css/style.module.css index d2f9acd..1821a12 100644 --- a/frontend/src/css/style.css +++ b/frontend/src/css/style.module.css @@ -14,7 +14,7 @@ --table-row-even: #f3f3f3; } -.dark-mode { +.dark_mode { --main-color-bg: #15141a; --main-color: white; /* Menu */ @@ -30,7 +30,6 @@ --table-row-even: #232229; } - #root { padding: 0; margin: 0; @@ -55,6 +54,27 @@ a { text-decoration: none; } +canvas { + width: 100%; + display: block; + padding-left: 0; + padding-right: 0; + margin-left: auto; + margin-right: auto; +} + +form { + width: 100%; +} +input[type=text] { + width: 100%; + height: 30px; + box-sizing: border-box; + border: 2px solid var(--menu-color-bg); + border-radius: 5px; + padding-left: 5px; +} + .navbar { background-color: var(--menu-color-bg); display: flex; @@ -115,72 +135,76 @@ a { font-size: 20px; font-weight: 200; } -.totals-key { +.totals_key { grid-area: 1 / 1 / 2 / 2; text-align: right; } -.totals-value { +.totals_value { grid-area: 1 / 2 / 2 / 3; padding-left: 10px; text-align: left; } -#menu-title { +#menu_title { color: var(--menu-color-text-hover); font-family: "Secular One", sans-serif; font-size: 30px; font-weight: 300; } -#menu-logo { +#menu_logo { padding: 5px; content: url("../assets/apiary.svg"); width: 30px; height: 30px; } -.menu-link { +.menu_link { color: var(--menu-color-text); } -.menu-link:hover { +.menu_link:hover { color: var(--menu-color-text-hover); } -.menu-link-active { +.menu_link_active { color: var(--menu-color-text-hover); } -.stats-pie { - height: 50vh; - width: 50vw; +.stats_pie { + max-height: 70vh; + text-align: left; + color: white; } -.live-table { +.live_table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; + width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } -.live-table thead tr { +.live_table thead tr { background-color: var(--table-color-header-bg); color: var(--table-color-header-text); text-align: left; } -.live-table th, -.live-table td { +.live_table th, +.live_table td { padding: 12px 15px; } -.live-table tbody tr { +.live_table tbody tr { border-bottom: 1px solid var(--table-row-odd); } -.live-table tbody tr:nth-of-type(even) { +.live_table tbody tr:nth-of-type(even) { background-color: var(--table-row-even); } -.live-table tbody tr:last-of-type { +.live_table tbody tr:last-of-type { border-bottom: 2px solid var(--table-color-bg); } -.live-table tbody tr.active-row { +.live_table tbody tr.active-row { font-weight: bold; color: var(--table-color-bg); } .content { margin-left: 10vw; + width: 50vw; + text-align: center; } diff --git a/frontend/src/index.html b/frontend/src/index.html index 45b238b..9761a7a 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -3,7 +3,6 @@ - diff --git a/frontend/src/js/app.tsx b/frontend/src/js/app.tsx index 3d317eb..96df0f2 100644 --- a/frontend/src/js/app.tsx +++ b/frontend/src/js/app.tsx @@ -3,11 +3,13 @@ import { createRoot } from "react-dom/client"; import { useState, useEffect } from 'react'; import { ApiaryAPI, LoginAttempt, DummyApiaryAPIClient, ApiaryAPIClient, TotalStats, StatsResult, StatsType } from "./api"; import { BrowserRouter, NavLink, Routes, Route } from "react-router"; -import { Chart as ChartJS, Tooltip, ArcElement, Legend } from "chart.js"; +import { Chart as ChartJS, Tooltip, ArcElement, Legend, ChartOptions } from "chart.js"; import { Pie } from "react-chartjs-2"; import humanizeDuration from "humanize-duration"; +import * as classes from "../css/style.module.css"; ChartJS.register(Tooltip, ArcElement, Legend); +console.log(classes); interface AppProps { api: ApiaryAPI @@ -71,9 +73,9 @@ export function App({ api }: AppProps) { setMode(mode); if (mode === "dark") { - document.body.classList.add("dark-mode"); + document.body.classList.add(classes.dark_mode); } else { - document.body.classList.remove("dark-mode"); + document.body.classList.remove(classes.dark_mode); } } @@ -89,7 +91,7 @@ export function App({ api }: AppProps) {
-
+
} /> } /> @@ -100,7 +102,7 @@ export function App({ api }: AppProps) {
- + ); } @@ -167,9 +169,23 @@ export function StatsPie({ data }: StatsPieProps) { borderWidth: 1 }] }; + const getTextColor = () => { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'white' : 'black' + } + const options: ChartOptions<"pie"> = { + plugins: { + legend: { + display: true, + align: "start", + labels: { + color: getTextColor(), + } + } + } + } return ( -
- +
+
) } @@ -207,14 +223,14 @@ export interface TotalsProps { export function Totals({ totals }: TotalsProps) { return ( -
-
+
+

Unique passwords

Unique username

Unique IPs

Total attempts

-
+

{totals.password}

{totals.username}

{totals.ip}

@@ -268,7 +284,7 @@ export function DateTD({ date, now }: DateTDProps) { }, [displayDate, now]) return ( - {displayDate} + {displayDate} ) } @@ -281,10 +297,10 @@ export function LiveList({ list }: LiveListProps) { return ( - {a.username} - {a.password} - {a.remoteIP} - {a.country} + {a.username} + {a.password} + {a.remoteIP} + {a.country} ) }) @@ -301,14 +317,14 @@ export function LiveList({ list }: LiveListProps) { return ( <> - +
- - - - - + + + + + @@ -344,7 +360,7 @@ export function Query({ api }: AppProps) { return ( <> - + {queryErr ? : null} @@ -358,7 +374,7 @@ interface ErrorBoxProps { export function ErrorBox({ message }: ErrorBoxProps) { return ( -
+

Error: {message}

) @@ -366,17 +382,17 @@ export function ErrorBox({ message }: ErrorBoxProps) { export function Header() { return ( -
+
-
+
); } @@ -394,16 +410,16 @@ export function HeaderMenu({ title, items }: HeaderMenuProps) { const menuItems = items.map((item) => { return (
  • - isActive ? "menu-link-active" : "menu-link"}>{item.name} + isActive ? classes.menu_link_active : classes.menu_link}>{item.name}
    • ) }) return ( -
    - - -
    DateUsernamePasswordIPCountryDateUsernamePasswordIPCountry