Skip to content

Commit e47dc9c

Browse files
corrierilucacorrieriluca
committed
feat(ui): upgrade to tailwindcss v4
1 parent c0784c6 commit e47dc9c

28 files changed

+466
-651
lines changed

‎ui/package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,26 @@
2121
"react-focus-lock": "^2.13.2",
2222
"react-router-dom": "^7.0.0",
2323
"react-tooltip": "^5.21.6",
24-
"tailwind-merge": "^2.0.0"
24+
"tailwind-merge": "^3.3.0"
2525
},
2626
"devDependencies": {
2727
"@eslint/compat": "^1.2.1",
28+
"@tailwindcss/vite": "^4.1.7",
2829
"@types/react": "^19.0.0",
2930
"@types/react-dom": "^19.0.0",
3031
"@typescript-eslint/eslint-plugin": "^8.0.0",
3132
"@typescript-eslint/parser": "^8.0.0",
3233
"@vitejs/plugin-react-swc": "^3.7.0",
33-
"autoprefixer": "^10.4.19",
3434
"eslint": "^9.0.0",
3535
"eslint-config-prettier": "^10.0.0",
3636
"eslint-plugin-prettier": "^5.2.1",
3737
"eslint-plugin-react": "^7.37.2",
3838
"eslint-plugin-react-hooks": "^5.0.0",
3939
"eslint-plugin-react-refresh": "^0.4.13",
40-
"postcss": "^8.4.38",
4140
"prettier": "3.4.2",
42-
"tailwindcss": "^3.4.4",
41+
"tailwindcss": "^4.1.7",
4342
"typescript": "^5.3.3",
4443
"typescript-eslint": "^8.11.0",
4544
"vite": "^6.0.0"
4645
}
47-
}
46+
}

‎ui/postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎ui/src/components/cards/Card.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const Card: React.FC<CardProps> = ({
9696
p-6
9797
gap-4
9898
${styles.base[variant]}`,
99-
isRunning && `outline outline-4 ${styles.isRunning[variant]}`,
99+
isRunning && `outline-solid outline-4 ${styles.isRunning[variant]}`,
100100
className
101101
)}
102102
>

‎ui/src/components/core/Button.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Button: React.FC<ButtonProps> = ({
3535
text-nuances-white
3636
hover:bg-nuances-400
3737
active:bg-nuances-400
38-
focus-visible:outline
38+
focus-visible:outline-solid
3939
focus-visible:outline-1
4040
focus-visible:outline-offset-[3px]
4141
focus-visible:outline-nuances-black
@@ -47,7 +47,7 @@ const Button: React.FC<ButtonProps> = ({
4747
border-nuances-black
4848
hover:bg-nuances-50
4949
active:bg-nuances-50
50-
focus-visible:outline
50+
focus-visible:outline-solid
5151
focus-visible:outline-1
5252
focus-visible:outline-offset-[3px]
5353
focus-visible:outline-nuances-white
@@ -60,7 +60,7 @@ const Button: React.FC<ButtonProps> = ({
6060
hover:fill-primary-400
6161
active:text-primary-400
6262
active:fill-primary-400
63-
focus-visible:outline-none
63+
focus-visible:outline-hidden
6464
fill-primary-600`
6565
},
6666

@@ -94,7 +94,7 @@ const Button: React.FC<ButtonProps> = ({
9494
text-nuances-white
9595
hover:bg-nuances-400
9696
active:bg-nuances-400
97-
focus-visible:outline
97+
focus-visible:outline-solid
9898
focus-visible:outline-1
9999
focus-visible:outline-offset-[3px]
100100
focus-visible:outline-nuances-black
@@ -106,7 +106,7 @@ const Button: React.FC<ButtonProps> = ({
106106
border-nuances-black
107107
hover:bg-nuances-50
108108
active:bg-nuances-50
109-
focus-visible:outline
109+
focus-visible:outline-solid
110110
focus-visible:outline-1
111111
focus-visible:outline-offset-[3px]
112112
focus-visible:outline-nuances-white
@@ -119,7 +119,7 @@ const Button: React.FC<ButtonProps> = ({
119119
hover:fill-primary-400
120120
active:text-primary-400
121121
active:fill-primary-400
122-
focus-visible:outline-none
122+
focus-visible:outline-hidden
123123
fill-primary-600`
124124
},
125125

‎ui/src/components/core/Checkbox.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
1818
light: `bg-nuances-white
1919
border-primary-500
2020
hover:border-primary-600
21-
focus:outline
21+
focus:outline-solid
2222
focus:outline-1
2323
focus:outline-offset-2
2424
focus:outline-primary-600
@@ -29,7 +29,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
2929
dark: `bg-nuances-400
3030
border-nuances-300
3131
hover:border-nuances-100
32-
focus:outline
32+
focus:outline-solid
3333
focus:outline-1
3434
focus:outline-offset-2
3535
focus:outline-nuances-100
@@ -80,7 +80,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
8080
pointer-events-none
8181
hidden
8282
peer-checked:block
83-
peer-checked:peer-hover:hidden
83+
peer-hover:peer-checked:hidden
8484
`}
8585
height={16}
8686
width={16}
@@ -93,7 +93,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
9393
pointer-events-none
9494
hidden
9595
peer-checked:hidden
96-
peer-checked:peer-hover:block
96+
peer-hover:peer-checked:block
9797
`}
9898
height={16}
9999
width={16}

‎ui/src/components/core/Dropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
5858
cursor-pointer
5959
outline-primary-600
6060
outline-offset-0
61-
hover:outline
61+
hover:outline-solid
6262
hover:outline-1
63-
focus:outline
63+
focus:outline-solid
6464
focus:outline-2
6565
${styles.base[variant]}`,
6666
className,

‎ui/src/components/core/Input.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,11 @@ const Input: React.FC<InputProps> = ({
113113
text-base
114114
outline-primary-600
115115
outline-offset-0
116-
hover:outline
116+
hover:outline-solid
117117
hover:outline-1
118-
focus:outline
118+
focus:outline-solid
119119
focus:outline-2
120-
active:outline
120+
active:outline-solid
121121
active:outline-2
122122
${styles.base[variant]}`,
123123
leftIcon && 'pl-12',

‎ui/src/components/dropdowns/AttemptsDropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ const AttemptsDropdown: React.FC<AttemptsDropdownProps> = ({
137137
`flex
138138
flex-col
139139
rounded-lg
140-
outline-none
140+
outline-hidden
141141
p-2
142142
z-20`,
143143
styles[variant]
@@ -147,7 +147,7 @@ const AttemptsDropdown: React.FC<AttemptsDropdownProps> = ({
147147
<span className="font-semibold px-2">Attempts</span>
148148
<hr
149149
className={`
150-
h-[1px]
150+
h-px
151151
w-auto
152152
-mx-2
153153
my-2

‎ui/src/components/dropdowns/DateDropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const DateDropdown: React.FC<DateDropdownProps> = ({
125125
`flex
126126
flex-col
127127
rounded-lg
128-
outline-none
128+
outline-hidden
129129
p-2`,
130130
styles[variant]
131131
)}
@@ -134,7 +134,7 @@ const DateDropdown: React.FC<DateDropdownProps> = ({
134134
<span className="font-semibold px-2">Date</span>
135135
<hr
136136
className={`
137-
h-[1px]
137+
h-px
138138
w-auto
139139
-mx-2
140140
my-2

‎ui/src/components/dropdowns/PaginationDropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ const PaginationDropdown: React.FC<PaginationDropdownProps> = ({
124124
`flex
125125
flex-col
126126
rounded-lg
127-
outline-none
127+
outline-hidden
128128
p-2`,
129129
styles[variant]
130130
)}
@@ -134,7 +134,7 @@ const PaginationDropdown: React.FC<PaginationDropdownProps> = ({
134134
{options.map(({ value, label }) => (
135135
<button
136136
key={value}
137-
className="outline-none"
137+
className="outline-hidden"
138138
onClick={() => {
139139
setSelectedPagination(value);
140140
setIsOpen(false);

0 commit comments

Comments
 (0)