Skip to content

Cyd/design2 #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
srkirkland merged 18 commits into from
Jan 16, 2026
Merged

Cyd/design2 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e52d644
favicon and header
cydoval Jan 14, 2026
2d90957
Merge branch 'main' into cyd/design2
cydoval Jan 14, 2026
726e080
report clean up
cydoval Jan 15, 2026
35da42c
report clean up
cydoval Jan 15, 2026
bc07c5f
code rabbit changes
cydoval Jan 15, 2026
1a25c47
faq
cydoval Jan 15, 2026
f7ab910
UCD blue and gold
cydoval Jan 15, 2026
6d53812
table reorg
cydoval Jan 15, 2026
0f36951
faq tempalte
cydoval Jan 15, 2026
75c156b
new favicon color
cydoval Jan 15, 2026
a374565
full bg
cydoval Jan 16, 2026
8d0004e
code rabbit
cydoval Jan 16, 2026
6db796a
Revert "full bg"
cydoval Jan 16, 2026
7cb3cf2
darker tones
cydoval Jan 16, 2026
68c2460
aligned tables and color fixes
cydoval Jan 16, 2026
17db03b
no soft badges
cydoval Jan 16, 2026
3e7b808
unneeded space
cydoval Jan 16, 2026
3da6408
Enhances link security for outbound links
srkirkland Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 46 additions & 11 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Readable</title>
<meta
name="description"
content="Readable is a PDF accessibility conversion tool built by CRU at CA&ES UC Davis."
/>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/thumbnail.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web App Template</title>
</head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="alternate icon" href="/favicon.ico" type="image/x-icon" />

<body data-theme='gunrock' className='antialiased'>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<meta name="theme-color" content="#002855" />

</html>
<meta property="og:title" content="Readable | CA&ES UC Davis" />
<meta
property="og:description"
content="Readable is a PDF accessibility conversion tool built by CRU at CA&ES UC Davis."
/>
<meta
property="og:image"
content="https://readable.ucdavis.edu/thumbnail.jpg"
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://readable.ucdavis.edu" />
<meta property="og:site_name" content="Readable UC Davis" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Readable | CA&ES UC Davis" />
<meta
name="twitter:description"
content="Readable is a PDF accessibility conversion tool built by CRU at CA&ES UC Davis."
/>
<meta
name="twitter:image"
content="https://readable.ucdavis.edu/thumbnail.jpg"
/>
<meta name="twitter:creator" content="@ucdavis" />

<meta name="author" content="CAESDO" />
<meta name="robots" content="index, follow" />
<meta name="language" content="English" />
</head>

<body data-theme="readable" class="antialiased">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Binary file added client/public/favicon.ico
View file
Open in desktop
Binary file not shown.
10 changes: 10 additions & 0 deletions client/public/favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions client/src/components/pdf/PdfActivityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export function PdfActivityCard({
<td>
<div className="space-y-2">
<div className="flex flex-wrap items-center gap-2">
<span className="badge badge-ghost">
<span className="badge badge-primary badge-soft">
{file.status}
</span>
{recentlyCompletedByFileId[file.fileId] ? (
Expand Down Expand Up @@ -146,7 +146,7 @@ export function PdfActivityCard({
{typeof fixedIssues === 'number' &&
fixedIssues > 0 ? (
<span className="badge badge-success badge-outline badge-sm">
Fixed {fixedIssues}
Fixed {fixedIssues} Issues
</span>
) : null}
</div>
Expand Down
25 changes: 15 additions & 10 deletions client/src/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,38 @@

--font-proxima-bold: 'proxima-nova-b', sans-serif;

--color-primary-color: var(--color-ucd-gunrock);
--color-secondary-color: var(--color-ucd-goldenstate);
--color-accent-color: var(--color-ucd-goldenstate);
--color-error-color: var(--color-ucd-doubledecker);
--color-info-color: var(--color-ucd-arboretum);
--color-success-color: var(--color-ucd-sage);
--color-warning-color: var(--color-ucd-poppy);
--color-primary-color: #022851;
--color-secondary-color: #ffbf00;
--color-accent-color: var(--color-ucd-sunflower);
--color-error-color: var(--color-ucd-merlot);
--color-info-color: var(--color-ucd-bodega);
--color-success-color: var(--color-ucd-redwood);
--color-warning-color: var(--color-ucd-california);
}

@plugin "daisyui/theme" {
name: 'walter';
name: 'readable';
--color-base-100: var(--color-light-bg-100);
--color-base-200: var(--color-light-bg-200);
--color-base-300: var(--color-light-bg-300);
--color-base-content: var(--color-dark-font);

--color-primary: var(--color-primary-color);
--color-primary-content: var(--color-light-font);

--color-secondary: var(--color-secondary-color);
--color-accent: var(--color-accent-color);
--color-error: var(--color-error-color);
--color-error-content: var(--color-light-font);
--color-info: var(--color-info-color);
--color-info-content: var(--color-light-font);
--color-success: var(--color-success-color);
--color-success-content: var(--color-light-font);
--color-warning: var(--color-warning-color);
--color-warning-content: var(--color-light-font);
Comment on lines +34 to +40
Copy link

@coderabbitai coderabbitai bot Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, search for --color-light-font definition
echo "=== Searching for --color-light-font definition ==="
rg --type css '\-\-color-light-font' -C2

echo ""
echo "=== Checking client/src/main.css structure ==="
head -50 client/src/main.css

Repository: ucdavis/readable

Length of output: 2590

🏁 Script executed:

#!/bin/bash
# Search for definition of --color-light-font (where it's assigned, not referenced)
echo "=== Searching for --color-light-font definition (whole file) ==="
rg --type css '\-\-color-light-font\s*:' 

echo ""
echo "=== Searching for all font color variables ==="
rg --type css '\-\-color-(light|dark)-font' -C1

echo ""
echo "=== Full main.css file ==="
cat -n client/src/main.css

Repository: ucdavis/readable

Length of output: 4186

🏁 Script executed:

#!/bin/bash
# Search for definitions of font color variables across all CSS/JS files
echo "=== Searching entire codebase for --color-light-font and --color-dark-font definitions ==="
rg '\-\-color-(light|dark)-font\s*:' --type css --type js --type ts

echo ""
echo "=== Searching for gunrock-tailwind references ==="
rg 'gunrock-tailwind' --type json --type ts --type tsx

echo ""
echo "=== Check package.json for design system version ==="
cat package.json | grep -A 2 -B 2 'gunrock'

Repository: ucdavis/readable

Length of output: 300

🏁 Script executed:

#!/bin/bash
# Check package.json
echo "=== package.json content ==="
cat package.json

echo ""
echo "=== Search for all CSS files ==="
fd -e css

echo ""
echo "=== Search for --color definitions in all CSS files ==="
rg --type css 'color-light-font|color-dark-font' --no-heading

Repository: ucdavis/readable

Length of output: 801

Define --color-light-font and --color-dark-font variables.

The CSS variables --color-light-font (used in lines 30, 34, 36, 38, 40) and --color-dark-font (line 27) are referenced but not defined anywhere in the codebase. Additionally, @ucdavis/gunrock-tailwind is imported but not listed in package.json dependencies. Either add these variables to client/src/main.css within the @theme block or ensure the gunrock-tailwind package is installed and exports these variables.

🤖 Prompt for AI Agents 
In `@client/src/main.css` around lines 34 - 40, The CSS references to variables
--color-light-font and --color-dark-font are missing; add definitions for these
variables inside the `@theme` block in client/src/main.css (e.g., set
--color-light-font and --color-dark-font to the desired color values) so usages
in --color-error-content, --color-info-content, --color-success-content, and
--color-warning-content resolve; alternatively, if you intend to rely on
`@ucdavis/gunrock-tailwind` to provide them, ensure that package is added to
package.json dependencies and installed so its exported variables are available
to the stylesheet.

}
@layer base {

html {
background-color: var(--color-light-bg-200);
}

.container {
Expand Down
34 changes: 17 additions & 17 deletions client/src/routeTree.gen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

import { Route as rootRouteImport } from './routes/__root'
import { Route as AboutRouteImport } from './routes/about'
import { Route as FAQsRouteImport } from './routes/FAQs'
import { Route as authenticatedRouteRouteImport } from './routes/(authenticated)/route'
import { Route as authenticatedIndexRouteImport } from './routes/(authenticated)/index'
import { Route as authenticatedReportsFileIdIndexRouteImport } from './routes/(authenticated)/reports/$fileId/index'

const AboutRoute = AboutRouteImport.update({
id: '/about',
path: '/about',
const FAQsRoute = FAQsRouteImport.update({
id: '/FAQs',
path: '/FAQs',
getParentRoute: () => rootRouteImport,
} as any)
const authenticatedRouteRoute = authenticatedRouteRouteImport.update({
Expand All @@ -36,47 +36,47 @@ const authenticatedReportsFileIdIndexRoute =
} as any)

export interface FileRoutesByFullPath {
'/about': typeof AboutRoute
'/FAQs': typeof FAQsRoute
'/': typeof authenticatedIndexRoute
'/reports/$fileId': typeof authenticatedReportsFileIdIndexRoute
}
export interface FileRoutesByTo {
'/about': typeof AboutRoute
'/FAQs': typeof FAQsRoute
'/': typeof authenticatedIndexRoute
'/reports/$fileId': typeof authenticatedReportsFileIdIndexRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/(authenticated)': typeof authenticatedRouteRouteWithChildren
'/about': typeof AboutRoute
'/FAQs': typeof FAQsRoute
'/(authenticated)/': typeof authenticatedIndexRoute
'/(authenticated)/reports/$fileId/': typeof authenticatedReportsFileIdIndexRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/about' | '/' | '/reports/$fileId'
fullPaths: '/FAQs' | '/' | '/reports/$fileId'
fileRoutesByTo: FileRoutesByTo
to: '/about' | '/' | '/reports/$fileId'
to: '/FAQs' | '/' | '/reports/$fileId'
id:
| '__root__'
| '/(authenticated)'
| '/about'
| '/FAQs'
| '/(authenticated)/'
| '/(authenticated)/reports/$fileId/'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
authenticatedRouteRoute: typeof authenticatedRouteRouteWithChildren
AboutRoute: typeof AboutRoute
FAQsRoute: typeof FAQsRoute
}

declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/about': {
id: '/about'
path: '/about'
fullPath: '/about'
preLoaderRoute: typeof AboutRouteImport
'/FAQs': {
id: '/FAQs'
path: '/FAQs'
fullPath: '/FAQs'
preLoaderRoute: typeof FAQsRouteImport
parentRoute: typeof rootRouteImport
}
'/(authenticated)': {
Expand Down Expand Up @@ -118,7 +118,7 @@ const authenticatedRouteRouteWithChildren =

const rootRouteChildren: RootRouteChildren = {
authenticatedRouteRoute: authenticatedRouteRouteWithChildren,
AboutRoute: AboutRoute,
FAQsRoute: FAQsRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
Expand Down
28 changes: 20 additions & 8 deletions client/src/routes/(authenticated)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { myFilesQueryOptions } from '@/queries/files.ts';
import { useQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
import { useCallback, useEffect } from 'react';
import { Link } from '@tanstack/react-router';

export const Route = createFileRoute('/(authenticated)/')({
component: RouteComponent,
Expand Down Expand Up @@ -54,14 +55,25 @@ function RouteComponent() {

return (
<div className="container">
<header className="space-y-1 my-5">
<h1 className="text-3xl sm:text-4xl font-extrabold tracking-tight">
Readable
</h1>
<p className="text-base-content/70">PDF Accessibility Conversion Tool</p>
</header>

{/* Upload Dropzone */}
<div className="text-center mb-4">
<h3 className="text-lg font-extrabold">Make Your PDFs Accessible</h3>
<p className="max-w-prose mx-auto">
Readable helps you meet modern accessibility requirements by
transforming standard PDFs into documents that are more compliant with{' '}
<a
className="link"
href="https://digitalaccessibility.ucop.edu/index.html"
rel="noopener noreferrer"
target="_blank"
>
WCAG and PDF/UA guidelines
</a>
.
</p>
<Link className="btn btn-outline btn-sm mt-3" to="/FAQs">
More Info
</Link>
</div>
<PdfUploadDropzone
isUploading={blobUpload.isPending}
onFilesSelected={handleFilesSelected}
Expand Down
Loading