Skip to content

Commit f215a47

Browse files
AndyRaeAndyRae
authored
Update forms for consistency and improved experience (#1167)
1 parent 6a5654f commit f215a47

23 files changed

Lines changed: 1203 additions & 838 deletions

File tree

‎app/next-client-app/app/(protected)/scanreports/[id]/details/page.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,12 @@ export default async function ScanreportDetails(props: ScanReportDetailsProps) {
4646
}
4747

4848
return (
49-
<div>
50-
<ScanReportDetailsForm
51-
scanreport={scanreport}
52-
datasetList={datasetList}
53-
users={users}
54-
permissions={permissionsDS.permissions}
55-
isAuthor={isAuthor}
56-
/>
57-
</div>
49+
<ScanReportDetailsForm
50+
scanreport={scanreport}
51+
datasetList={datasetList}
52+
users={users}
53+
permissions={permissionsDS.permissions}
54+
isAuthor={isAuthor}
55+
/>
5856
);
5957
}

‎app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/fields/[fieldId]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,11 @@ export default async function ScanReportsValue(props: ScanReportsValueProps) {
6969
<div className="gap-2 flex">
7070
{" "}
7171
<Link href={`/scanreports/${id}/tables/${tableId}`}>
72-
<Button variant="secondary" className="mb-3 bg-muted text-foreground">
72+
<Button variant="secondary" className="mb-3">
7373
Table: {table.name}
7474
</Button>
7575
</Link>
76-
<Button variant="secondary" className="mb-3 bg-muted text-foreground">
76+
<Button variant="secondary" className="mb-3">
7777
Field: {field.name}
7878
</Button>
7979
</div>

‎app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default async function ScanReportsField(props: ScanReportsFieldProps) {
5858

5959
return (
6060
<div>
61-
<Button variant={"secondary"} className="mb-3 bg-muted text-foreground-3">
61+
<Button variant={"secondary"} className="mb-3">
6262
Table: {tableName.name}
6363
</Button>
6464
<div>

‎app/next-client-app/app/(protected)/scanreports/[id]/tables/[tableId]/update/page.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "@/api/scanreports";
77
import { objToQuery } from "@/lib/client-utils";
88
import { AlertCircleIcon } from "lucide-react";
9-
import { Alert } from "@/components/ui/alert";
9+
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
1010
import { ScanReportTableUpdateForm } from "@/components/scanreports/ScanReportTableUpdateForm";
1111
import { Button } from "@/components/ui/button";
1212
import Link from "next/link";
@@ -78,19 +78,15 @@ export default async function UpdateTable(props: UpdateTableProps) {
7878
</Button>
7979
</Link>
8080
{(table.date_event === null || table.person_id === null) && (
81-
<Alert className="flex items-center gap-3 bg-accent text-accent-foreground mt-3 w-1/2">
82-
<div>
83-
<AlertCircleIcon />
84-
</div>
85-
<div>
86-
{" "}
87-
Mapping Rules cannot be generated without the Person ID and Date
88-
Event being set.
89-
<br />
81+
<Alert className="max-w-2xl mb-5">
82+
<AlertCircleIcon />
83+
<AlertTitle>Mapping Rules cannot be generated without Person ID and Date Event event being set</AlertTitle>
84+
<AlertDescription>
85+
<p>
9086
Once you set these, Mapping Rules will be generated for all Concepts
9187
currently associated to the table.
92-
<br />
93-
</div>
88+
</p>
89+
</AlertDescription>
9490
</Alert>
9591
)}
9692
<div className="mt-1">

‎app/next-client-app/app/(protected)/scanreports/create/page.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { getDataPartners } from "@/api/datasets";
22
import { getAllProjects } from "@/api/projects";
33
import { CreateScanReportForm } from "@/components/scanreports/CreateScanReportForm";
4-
import { FileScan } from "lucide-react";
4+
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
5+
import { Button } from "@/components/ui/button";
6+
import { FileScan, Info } from "lucide-react";
57
import Link from "next/link";
68

79
export default async function ScanReports() {
@@ -17,9 +19,26 @@ export default async function ScanReports() {
1719
</Link>
1820
</div>
1921
<div className="flex justify-between mt-3">
20-
<h1 className="text-4xl font-semibold">Upload Scan Report</h1>
22+
<h1 className="text-2xl font-semibold">Upload Scan Report</h1>
2123
</div>
2224
<div className="mt-4">
25+
<Alert className="mb-6 max-w-md">
26+
<Info />
27+
<AlertTitle>Need help uploading a scan report?</AlertTitle>
28+
<AlertDescription>
29+
Please ensure your scan report follows the correct format.
30+
<Button variant="link" asChild className="p-0">
31+
<Link
32+
href="https://carrot.ac.uk/mapper/user_guide/upload_scan_report"
33+
target="_blank"
34+
rel="noopener noreferrer"
35+
className="underline text-primary hover:text-primary/80"
36+
>
37+
Read the guide
38+
</Link>
39+
</Button>
40+
</AlertDescription>
41+
</Alert>
2342
<CreateScanReportForm dataPartners={partners} projects={projects} />
2443
</div>
2544
</>

‎app/next-client-app/app/globals.css‎

Lines changed: 127 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
--accent: 240 4.8% 95.9%;
2020
--accent-foreground: 240 10% 3.9%;
2121
--primary: 0 0% 0%; /* black */
22+
/* --input: oklch(0.922 0 0); */
23+
--input: 320 0% 90%;
2224
--primary-foreground: 0 0% 100%; /* white */
2325
--secondary: 210 40% 96.1%;
2426
--secondary-foreground: 222.2 47.4% 11.2%;
@@ -44,6 +46,7 @@
4446
--secondary: 222.2 47.4% 11.2%;
4547
--secondary-foreground: 210 40% 98%;
4648
--ring: 215 100% 65%; /* #60a5fa, a visible blue */
49+
--input: 300 50% 100% / 0.15;
4750
}
4851

4952
button.rounded-full:hover,
@@ -52,76 +55,176 @@ button.rounded-full:focus-visible {
5255
transition: background-color 0.2s;
5356
}
5457

55-
/* React Select using shadcn/ui tokens */
58+
/* React Select using shadcn/ui tokens - updated to match shadcn design */
59+
.my-react-select-container {
60+
border-color: hsl(var(--border)) !important;
61+
border-radius: 0.5rem !important;
62+
background-color: hsl(var(--background)) !important;
63+
color: hsl(var(--foreground)) !important;
64+
font-size: 0.875rem !important;
65+
line-height: 1.25rem !important;
66+
min-height: 2.5rem !important;
67+
}
68+
69+
.my-react-select-container .my-react-select__control {
70+
border: 1px solid hsl(var(--input)) !important;
71+
border-radius: 0.5rem !important;
72+
background-color: hsl(var(--background)) !important;
73+
color: hsl(var(--foreground)) !important;
74+
box-shadow: none !important;
75+
min-height: 2.5rem !important;
76+
transition: border-color 0.2s ease-in-out !important;
77+
}
78+
79+
.my-react-select-container .my-react-select__control:hover {
80+
border-color: hsl(var(--border)) !important;
81+
}
82+
83+
.my-react-select-container .my-react-select__control--is-focused {
84+
border-color: hsl(var(--ring)) !important;
85+
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
86+
outline: none !important;
87+
}
88+
89+
.my-react-select-container .my-react-select__control--is-disabled {
90+
background-color: hsl(var(--muted)) !important;
91+
color: hsl(var(--muted-foreground)) !important;
92+
cursor: not-allowed !important;
93+
}
94+
5695
.my-react-select__menu {
5796
background-color: hsl(var(--popover)) !important;
5897
color: hsl(var(--popover-foreground)) !important;
98+
border: 1px solid hsl(var(--border)) !important;
99+
border-radius: 0.5rem !important;
100+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
101+
z-index: 50 !important;
59102
}
60103

61104
.my-react-select__option {
62105
background-color: hsl(var(--popover)) !important;
63-
color: hsl(var(--foreground)) !important;
64-
cursor: pointer;
106+
color: hsl(var(--popover-foreground)) !important;
107+
cursor: pointer !important;
108+
padding: 0.5rem 0.75rem !important;
109+
font-size: 0.875rem !important;
110+
line-height: 1.25rem !important;
111+
transition: background-color 0.2s ease-in-out !important;
65112
}
66113

67114
.my-react-select__option--is-focused {
68115
background-color: hsl(var(--accent)) !important;
69-
color: hsl(var(--foreground)) !important;
116+
color: hsl(var(--accent-foreground)) !important;
70117
}
71118

72119
.my-react-select__option--is-selected {
73120
background-color: hsl(var(--accent)) !important;
74-
color: hsl(var(--foreground)) !important;
75-
font-weight: 600;
121+
color: hsl(var(--accent-foreground)) !important;
122+
font-weight: 600 !important;
76123
}
77124

78-
.dark .my-react-select__option--is-selected {
79-
background-color: hsl(var(--accent)) !important;
125+
.my-react-select__single-value {
80126
color: hsl(var(--foreground)) !important;
81-
font-weight: 600;
82-
border: 1px solid hsl(var(--muted-foreground));
127+
font-size: 0.875rem !important;
128+
line-height: 1.25rem !important;
83129
}
84130

85-
.my-react-select__single-value,
86-
.my-react-select__multi-value__label {
87-
color: hsl(var(--foreground));
131+
.my-react-select__placeholder {
132+
color: hsl(var(--muted-foreground)) !important;
133+
font-size: 0.875rem !important;
134+
line-height: 1.25rem !important;
135+
}
136+
137+
.my-react-select__input-container {
138+
color: hsl(var(--foreground)) !important;
139+
font-size: 0.875rem !important;
140+
line-height: 1.25rem !important;
88141
}
89142

90143
.my-react-select__multi-value {
91-
background-color: hsl(var(--primary)) !important;
144+
background-color: hsl(var(--secondary)) !important;
92145
border-radius: 0.375rem !important;
146+
margin: 0.125rem !important;
147+
padding: 0.125rem 0.375rem !important;
93148
}
94149

95150
.my-react-select__multi-value__label {
96-
color: hsl(var(--primary-foreground)) !important;
97-
font-weight: 600;
151+
color: hsl(var(--secondary-foreground)) !important;
152+
font-weight: 500 !important;
153+
font-size: 0.75rem !important;
154+
line-height: 1rem !important;
98155
max-width: none !important;
99156
overflow: visible !important;
100157
text-overflow: unset !important;
101158
white-space: normal !important;
102159
}
103160

104161
.my-react-select__multi-value__remove {
105-
color: #ef4444 !important;
162+
color: hsl(var(--muted-foreground)) !important;
106163
background: transparent !important;
107-
cursor: pointer;
108-
transition: color 0.2s;
164+
cursor: pointer !important;
165+
transition: color 0.2s ease-in-out !important;
166+
padding: 0 0.25rem !important;
167+
margin-left: 0.25rem !important;
109168
}
169+
110170
.my-react-select__multi-value__remove:hover {
111-
color: #b91c1c !important;
171+
color: hsl(var(--foreground)) !important;
112172
background: transparent !important;
113173
}
114174

115-
.dark .my-react-select__option--is-focused {
116-
background-color: hsl(var(--muted)) !important;
175+
.my-react-select__indicator-separator {
176+
background-color: hsl(var(--border)) !important;
177+
margin: 0.5rem 0 !important;
178+
}
179+
180+
.my-react-select__dropdown-indicator {
181+
color: hsl(var(--muted-foreground)) !important;
182+
padding: 0.5rem !important;
183+
transition: color 0.2s ease-in-out !important;
184+
}
185+
186+
.my-react-select__dropdown-indicator:hover {
117187
color: hsl(var(--foreground)) !important;
118188
}
119189

120-
.dark .my-react-select__option--is-selected {
121-
background-color: hsl(var(--muted)) !important;
190+
.my-react-select__clear-indicator {
191+
color: hsl(var(--muted-foreground)) !important;
192+
padding: 0.5rem !important;
193+
transition: color 0.2s ease-in-out !important;
194+
}
195+
196+
.my-react-select__clear-indicator:hover {
122197
color: hsl(var(--foreground)) !important;
123198
}
124199

200+
/* Dark mode adjustments */
201+
.dark .my-react-select-container {
202+
border-color: hsl(var(--input)) !important;
203+
}
204+
205+
.dark .my-react-select-container .my-react-select__control {
206+
border-color: hsl(var(--input)) !important;
207+
background-color: hsl(var(--background)) !important;
208+
}
209+
210+
.dark .my-react-select__option--is-focused {
211+
background-color: hsl(var(--accent)) !important;
212+
color: hsl(var(--accent-foreground)) !important;
213+
}
214+
215+
.dark .my-react-select__option--is-selected {
216+
background-color: hsl(var(--accent)) !important;
217+
color: hsl(var(--accent-foreground)) !important;
218+
}
219+
220+
.dark .my-react-select__multi-value {
221+
background-color: hsl(var(--secondary)) !important;
222+
}
223+
224+
.dark .my-react-select__multi-value__label {
225+
color: hsl(var(--secondary-foreground)) !important;
226+
}
227+
125228
.avatar-initial {
126229
background-color: #f98109 !important;
127230
color: #fff !important;
@@ -178,19 +281,7 @@ input[type="file"]::file-selector-button {
178281
border: none;
179282
}
180283

181-
.my-react-select-container {
182-
border-color: hsl(var(--primary)) !important;
183-
}
184-
185-
.my-react-select-container .my-react-select__control {
186-
border-color: hsl(var(--primary)) !important;
187-
box-shadow: none;
188-
}
189284

190-
.my-react-select-container .my-react-select__control--is-focused {
191-
border-color: hsl(var(--ring)) !important;
192-
box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
193-
}
194285

195286
/* Make radix switch visible when off */
196287
[data-slot="switch"][data-state="unchecked"] {

‎app/next-client-app/components/core/mode-toggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function ModeToggle() {
2121
<Button
2222
variant="outline"
2323
size="icon"
24-
className="group hover:bg-muted transition-colors"
24+
className="group transition-colors"
2525
>
2626
<Sun className="h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:text-blue-400" />
2727
<Moon className="absolute h-[1.2rem] w-[1.2rem] text-black dark:text-white rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:text-blue-400" />

‎app/next-client-app/components/core/nav-button.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,7 @@ export const NavButton = ({
5252
<Button
5353
variant="ghost"
5454
className={cn(
55-
"rounded-md px-3 py-1 transition-colors",
56-
"hover:bg-muted hover:text-foreground",
57-
isActive && "bg-muted text-foreground underline"
55+
isActive && "bg-muted"
5856
)}
5957
>
6058
{Icon && <Icon className="mr-2 size-4" />}

‎app/next-client-app/components/core/sidebar-button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export function SidebarButton({
2222
variant="ghost"
2323
className={cn(
2424
"gap-2 justify-start focus-visible:ring-0 dark:focus-visible:ring-offset-0",
25-
"hover:bg-muted hover:text-foreground transition-colors",
25+
"hover:text-foreground transition-colors",
2626
"text-black dark:text-white",
2727
className
2828
)}

0 commit comments

Comments
 (0)