dylan/crosspost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(frontend): move stylings out of logic into centralized file

Browse Source
This commit is contained in:
Dylan De Faoite
2026-03-03 20:28:23 +00:00
parent e2ac4495fd
commit bd0e1a9050
21 changed files with 652 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/pages/DatasetStatus.tsx
View File

@@ -78,9 +78,9 @@ const DatasetStatusPage = () => {
return (
<div style={styles.page}>
<div style={{ ...styles.container, maxWidth: 720 }}>
<div style={styles.containerNarrow}>
<div style={{ ...styles.card, marginTop: 28 }}>
<h1 style={{ margin: 0, fontSize: 28, color: "#111827" }}>
<h1 style={styles.sectionHeaderTitle}>
{isProcessing ? "Processing dataset..." : isError ? "Dataset processing failed" : "Dataset ready"}
</h1>
@@ -94,11 +94,10 @@ const DatasetStatusPage = () => {
<div
style={{
...styles.card,
marginTop: 12,
...styles.statusMessageCard,
borderColor: isError ? "rgba(185, 28, 28, 0.28)" : "rgba(0,0,0,0.06)",
background: isError ? "#fff5f5" : "#ffffff",
color: isError ? "#991b1b" : "#374151",
boxShadow: "none",
}}
>
{statusMessage || (isProcessing ? "Waiting for updates from the worker queue..." : "No details provided.")}

23
frontend/src/pages/Datasets.tsx
View File

@@ -55,11 +55,11 @@ const DatasetsPage = () => {
return (
<div style={styles.page}>
<div style={{ ...styles.container, maxWidth: 1100 }}>
<div style={styles.containerWide}>
<div style={{ ...styles.card, ...styles.headerBar }}>
<div>
<h1 style={{ margin: 0, color: "#111827", fontSize: 28 }}>My Datasets</h1>
<p style={{ margin: "8px 0 0", color: "#6b7280", fontSize: 14 }}>
<h1 style={styles.sectionHeaderTitle}>My Datasets</h1>
<p style={styles.sectionHeaderSubtitle}>
View and reopen datasets you previously uploaded.
</p>
</div>
@@ -91,7 +91,7 @@ const DatasetsPage = () => {
{!error && datasets.length > 0 && (
<div style={{ ...styles.card, marginTop: 14, padding: 0, overflow: "hidden" }}>
<ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
<ul style={styles.listNoBullets}>
{datasets.map((dataset) => {
const isComplete = dataset.status === "complete";
const targetPath = isComplete
@@ -101,24 +101,17 @@ const DatasetsPage = () => {
return (
<li
key={dataset.id}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 12,
padding: "14px 16px",
borderBottom: "1px solid rgba(0,0,0,0.06)",
}}
style={styles.datasetListItem}
>
<div style={{ minWidth: 0 }}>
<div style={{ fontWeight: 700, color: "#111827" }}>
<div style={styles.datasetName}>
{dataset.name || `Dataset #${dataset.id}`}
</div>
<div style={{ fontSize: 13, color: "#6b7280", marginTop: 4 }}>
<div style={styles.datasetMeta}>
ID #{dataset.id} • Status: {dataset.status || "unknown"}
</div>
{dataset.status_message && (
<div style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>
<div style={styles.datasetMetaSecondary}>
{dataset.status_message}
</div>
)}

90
frontend/src/pages/Login.tsx
View File

@@ -6,11 +6,6 @@ import StatsStyling from "../styles/stats_styling";
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL
const styles = StatsStyling;
const controlStyle = {
width: "100%",
maxWidth: "100%",
boxSizing: "border-box" as const,
};
const LoginPage = () => {
const navigate = useNavigate();
@@ -77,54 +72,44 @@ const LoginPage = () => {
};
return (
<div style={{ ...styles.container, maxWidth: 560, padding: "48px 24px" }}>
<div
style={{
...styles.card,
padding: 28,
background:
"linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,255,1) 100%)",
}}
>
<div style={{ marginBottom: 22, textAlign: "center" }}>
<h1 style={{ margin: 0, color: "#111827", fontSize: 30, lineHeight: 1.1 }}>
<div style={styles.containerAuth}>
<div style={{ ...styles.card, ...styles.authCard }}>
<div style={styles.headingBlock}>
<h1 style={styles.headingXl}>
{isRegisterMode ? "Create your account" : "Welcome back"}
</h1>
<p style={{ margin: "8px 0 0", color: "#6b7280", fontSize: 14 }}>
<p style={styles.mutedText}>
{isRegisterMode
? "Register to start uploading and exploring your dataset insights."
: "Sign in to continue to your analytics workspace."}
</p>
</div>
<form
onSubmit={handleSubmit}
style={{ display: "grid", gap: 12, maxWidth: 380, margin: "0 auto" }}
>
<form onSubmit={handleSubmit} style={styles.authForm}>
<input
type="text"
placeholder="Username"
style={{ ...styles.input, ...controlStyle }}
style={{ ...styles.input, ...styles.authControl }}
value={username}
onChange={(event) => setUsername(event.target.value)}
required
/>
{isRegisterMode && (
<input
type="email"
placeholder="Email"
style={{ ...styles.input, ...controlStyle }}
value={email}
onChange={(event) => setEmail(event.target.value)}
required
<input
type="email"
placeholder="Email"
style={{ ...styles.input, ...styles.authControl }}
value={email}
onChange={(event) => setEmail(event.target.value)}
required
/>
)}
<input
type="password"
placeholder="Password"
style={{ ...styles.input, ...controlStyle }}
style={{ ...styles.input, ...styles.authControl }}
value={password}
onChange={(event) => setPassword(event.target.value)}
required
@@ -132,7 +117,7 @@ const LoginPage = () => {
<button
type="submit"
style={{ ...styles.buttonPrimary, ...controlStyle, marginTop: 2 }}
style={{ ...styles.buttonPrimary, ...styles.authControl, marginTop: 2 }}
disabled={loading}
>
{loading
@@ -144,57 +129,24 @@ const LoginPage = () => {
</form>
{error && (
<p
style={{
color: "#b91c1c",
margin: "12px auto 0",
fontSize: 14,
maxWidth: 380,
textAlign: "center",
}}
>
<p style={styles.authErrorText}>
{error}
</p>
)}
{info && (
<p
style={{
color: "#166534",
margin: "12px auto 0",
fontSize: 14,
maxWidth: 380,
textAlign: "center",
}}
>
<p style={styles.authInfoText}>
{info}
</p>
)}
<div
style={{
marginTop: 16,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 8,
flexWrap: "wrap",
}}
>
<span style={{ color: "#6b7280", fontSize: 14 }}>
<div style={styles.authSwitchRow}>
<span style={styles.authSwitchLabel}>
{isRegisterMode ? "Already have an account?" : "New here?"}
</span>
<button
type="button"
style={{
border: "none",
background: "transparent",
color: "#2563eb",
fontSize: 14,
fontWeight: 600,
cursor: "pointer",
padding: 0,
}}
style={styles.authSwitchButton}
onClick={() => {
setError("");
setInfo("");

6
frontend/src/pages/Stats.tsx
View File

@@ -174,11 +174,11 @@ return (
</button>
</div>
<div style={{ fontSize: 13, color: "#6b7280" }}>Analytics Dashboard</div>
<div style={{ fontSize: 13, color: "#6b7280" }}>Dataset #{datasetId ?? "-"}</div>
<div style={styles.dashboardMeta}>Analytics Dashboard</div>
<div style={styles.dashboardMeta}>Dataset #{datasetId ?? "-"}</div>
</div>
<div style={{ ...styles.container, display: "flex", gap: 8, marginTop: 12 }}>
<div style={{ ...styles.container, ...styles.tabsRow }}>
<button
onClick={() => setActiveView("summary")}
style={activeView === "summary" ? styles.buttonPrimary : styles.buttonSecondary}

27
frontend/src/pages/Upload.tsx
View File

@@ -70,11 +70,11 @@ const UploadPage = () => {
return (
<div style={styles.page}>
<div style={{ ...styles.container, maxWidth: 1100 }}>
<div style={styles.containerWide}>
<div style={{ ...styles.card, ...styles.headerBar }}>
<div>
<h1 style={{ margin: 0, color: "#111827", fontSize: 28 }}>Upload Dataset</h1>
<p style={{ margin: "8px 0 0", color: "#6b7280", fontSize: 14 }}>
<h1 style={styles.sectionHeaderTitle}>Upload Dataset</h1>
<p style={styles.sectionHeaderSubtitle}>
Name your dataset, then upload posts and topic map files to generate analytics.
</p>
</div>
@@ -96,10 +96,10 @@ const UploadPage = () => {
}}
>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#111827" }}>Dataset Name</h2>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Dataset Name</h2>
<p style={styles.sectionSubtitle}>Use a clear label so you can identify this upload later.</p>
<input
style={{ ...styles.input, width: "100%", maxWidth: "100%", boxSizing: "border-box" }}
style={{ ...styles.input, ...styles.inputFullWidth }}
type="text"
placeholder="Example: Cork Discussions - Jan 2026"
value={datasetName}
@@ -108,29 +108,29 @@ const UploadPage = () => {
</div>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#111827" }}>Posts File (.jsonl)</h2>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Posts File (.jsonl)</h2>
<p style={styles.sectionSubtitle}>Upload the raw post records export.</p>
<input
style={{ ...styles.input, width: "100%", maxWidth: "100%", boxSizing: "border-box" }}
style={{ ...styles.input, ...styles.inputFullWidth }}
type="file"
accept=".jsonl"
onChange={(event) => setPostFile(event.target.files?.[0] ?? null)}
/>
<p style={{ margin: "10px 0 0", fontSize: 13, color: "#374151" }}>
<p style={styles.subtleBodyText}>
{postFile ? `Selected: ${postFile.name}` : "No file selected"}
</p>
</div>
<div style={{ ...styles.card, gridColumn: "auto" }}>
<h2 style={{ ...styles.sectionTitle, color: "#111827" }}>Topics File (.json)</h2>
<h2 style={{ ...styles.sectionTitle, color: "#24292f" }}>Topics File (.json)</h2>
<p style={styles.sectionSubtitle}>Upload your topic bucket mapping file.</p>
<input
style={{ ...styles.input, width: "100%", maxWidth: "100%", boxSizing: "border-box" }}
style={{ ...styles.input, ...styles.inputFullWidth }}
type="file"
accept=".json"
onChange={(event) => setTopicBucketFile(event.target.files?.[0] ?? null)}
/>
<p style={{ margin: "10px 0 0", fontSize: 13, color: "#374151" }}>
<p style={styles.subtleBodyText}>
{topicBucketFile ? `Selected: ${topicBucketFile.name}` : "No file selected"}
</p>
</div>
@@ -140,10 +140,7 @@ const UploadPage = () => {
style={{
...styles.card,
marginTop: 14,
borderColor: hasError ? "rgba(185, 28, 28, 0.28)" : "rgba(0,0,0,0.06)",
background: hasError ? "#fff5f5" : "#ffffff",
color: hasError ? "#991b1b" : "#374151",
fontSize: 14,
...(hasError ? styles.alertCardError : styles.alertCardInfo),
}}
>
{returnMessage || "After upload, your dataset is queued for processing and you'll land on stats."}