drew/captains-log
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

Create a frontend wireframe. (#7)

Browse source 
Sets up API methods and types.
Sets up a colorscheme.
Sets up a homepage.

Removes tailwind in favor of mui for now.

Reviewed-on: #7
Co-authored-by: Drew Galbraith <drew@tiramisu.one>
Co-committed-by: Drew Galbraith <drew@tiramisu.one>
This commit is contained in:
Drew 2025-09-23 04:08:45 +00:00 • committed by Drew
parent 7d2b7fc90c
commit d60d834f38
27 changed files with 3114 additions and 977 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/app/app.css
View file

@ -1,59 +1,8 @@
@import 'tailwindcss';
@theme {
--font-sans:
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
/* Captain's Log Design Tokens */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-500: #3b82f6;
--color-primary-950: #172554;
--color-task-todo: #3b82f6;
--color-task-done: #22c55e;
--color-task-backlog: #6b7280;
}
/* Captain's Log - Global Styles */
/* Base font family is handled by Material-UI theme */
html,
body {
@apply bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100;
@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
/* Captain's Log Component Styles */
.task-card {
@apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 transition-all duration-200;
}
.task-card:hover {
@apply shadow-md border-gray-300 dark:border-gray-600;
}
.quick-capture {
@apply bg-white dark:bg-gray-800 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-4 transition-colors duration-200;
}
.quick-capture:focus-within {
@apply border-blue-500 bg-blue-50 dark:bg-blue-950;
}
.status-badge {
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.status-todo {
@apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}
.status-done {
@apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}
.status-backlog {
@apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
margin: 0;
padding: 0;
}