Mostly front-end updates to make the table look more normal. Man design is hard. Most of the time I swear you are better off just doing simple colors.

This commit is contained in:
Gabriel Brown 2024-07-20 14:47:54 -05:00
parent 4a3eebfdf6
commit 6791cab2c6
5 changed files with 2422 additions and 2969 deletions

View File

@ -51,5 +51,5 @@
"ct3aMetadata": {
"initVersion": "7.36.1"
},
"packageManager": "pnpm@9.3.0"
"packageManager": "pnpm@9.5.0"
}

5373
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -7,7 +7,9 @@ export default function TT_Header() {
<Image src="/images/tech_tracker_logo.png"
alt="Tech Tracker Logo" width={100} height={100}
/>
<h1 className="title-text text-8xl font-semibold pl-12">
<h1 className="title-text text-8xl font-bold pl-12
bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
text-transparent bg-clip-text">
Tech Tracker
</h1>
</div>

View File

@ -122,7 +122,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
return (
<div>
<table className="techtable w-5/6 m-auto text-center border-collapse text-[42px]">
<thead className="bg-gradient-to-br from-[#232323] to-[#444444]">
<thead className="bg-gradient-to-b from-[#323232] to-[#444444]">
<tr>
<th className="tabletitles p-4 border border-[#3e4446] text-[48px]">
<input
@ -139,8 +139,8 @@ export default function Table({ employees }: { employees: Employee[] }) {
</thead>
<tbody>
{employeeData.map((employee) => (
<tr className="even:bg-gradient-to-br from-[#252525] to-[#333333]
odd:bg-gradient-to-bl odd:from-[#212127] odd:to-[#232325]" key={employee.id}>
<tr className="even:bg-gradient-to-br from-[#282828] to-[#333333]
odd:bg-gradient-to-tr odd:from-[#212127] odd:to-[#222225]" key={employee.id}>
<td className="p-1 border border-[#3e4446]">
<input
type="checkbox"
@ -160,14 +160,14 @@ export default function Table({ employees }: { employees: Employee[] }) {
<input
type="text"
placeholder="New Status"
className="min-w-[100px] p-2.5 border-none rounded-xl text-[#111111] md:text-xl"
className="min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE] py-2.5 px-3 border-none rounded-xl text-[#111111] md:text-xl"
value={status}
onChange={handleStatusChange}
onKeyDown={handleKeyPress}
/>
<button
type="submit"
className="m-2 p-3 border-none rounded-2xl text-center
className="min-w-[100px] lg:min-w-[160px] m-2 p-3 border-none rounded-xl text-center
font-semibold md:text-xl hover:text-slate-300
hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
bg-gradient-to-br from-[#595959] to-[#444444]"

View File

@ -64,7 +64,7 @@
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-[#FDF5E6];
}
}