Skip to content

Commit 4fc7846

Browse files
arjunkomatharjunkomath
committed
clean up tailwind config
1 parent c269802 commit 4fc7846

5 files changed

Lines changed: 97 additions & 107 deletions

File tree

‎apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ export default function RoadmapPage({
5454
>({});
5555
const [votingItems, setVotingItems] = useState<Set<string>>(new Set());
5656

57-
// Organize items by column
5857
const itemsByColumn = useMemo(() => {
5958
const organized: Record<string, RoadmapItem[]> = {};
6059
columns.forEach((column) => {
@@ -76,12 +75,10 @@ export default function RoadmapPage({
7675
};
7776

7877
const handleVote = async (itemId: string) => {
79-
// Prevent voting if already in progress or if user has already voted and we're not toggling
8078
if (votingItems.has(itemId)) return;
8179

8280
setVotingItems((prev) => new Set(prev).add(itemId));
8381

84-
// Optimistic update
8582
const currentVoteState = votes[itemId];
8683
const newVotedState = !currentVoteState?.voted;
8784
const newCount = currentVoteState?.count
@@ -106,7 +103,6 @@ export default function RoadmapPage({
106103
data: { item_id: itemId },
107104
});
108105

109-
// Update with server response to ensure consistency
110106
setVotes((prev) => ({
111107
...prev,
112108
[itemId]: {
@@ -116,7 +112,6 @@ export default function RoadmapPage({
116112
}));
117113
} catch (error) {
118114
console.error("Error voting:", error);
119-
// Revert optimistic update on error
120115
setVotes((prev) => ({
121116
...prev,
122117
[itemId]: {
@@ -360,7 +355,7 @@ export default function RoadmapPage({
360355
>
361356
<XIcon className="h-5 w-5" aria-hidden="true" />
362357
</button>
363-
<Dialog.Panel className="w-full max-w-5xl transform overflow-hidden rounded-t-2xl sm:rounded-2xl bg-white dark:bg-gray-900 p-8 text-left align-middle shadow-xl transition-all min-h-[50vh] sm:min-h-0">
358+
<Dialog.Panel className="w-full max-w-5xl sm:min-w-[880px] transform overflow-hidden rounded-t-2xl sm:rounded-2xl bg-white dark:bg-gray-900 p-8 text-left align-middle shadow-xl transition-all min-h-[50vh] sm:min-h-0">
364359
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 relative">
365360
{/* Column Divider */}
366361
<div className="hidden lg:block absolute left-2/3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700 transform -translate-x-1/2 z-10"></div>

‎apps/page/tailwind.config.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,15 @@ module.exports = {
88
"./node_modules/@changes-page/ui/components/**/*.{js,ts,jsx,tsx}",
99
],
1010
safelist: [
11-
// Roadmap category colors
12-
'bg-blue-100', 'text-blue-800', 'border-blue-200', 'dark:bg-blue-900', 'dark:text-blue-200', 'dark:border-blue-800',
13-
'bg-indigo-100', 'text-indigo-800', 'border-indigo-200', 'dark:bg-indigo-900', 'dark:text-indigo-200', 'dark:border-indigo-800',
14-
'bg-purple-100', 'text-purple-800', 'border-purple-200', 'dark:bg-purple-900', 'dark:text-purple-200', 'dark:border-purple-800',
15-
'bg-pink-100', 'text-pink-800', 'border-pink-200', 'dark:bg-pink-900', 'dark:text-pink-200', 'dark:border-pink-800',
16-
'bg-red-100', 'text-red-800', 'border-red-200', 'dark:bg-red-900', 'dark:text-red-200', 'dark:border-red-800',
17-
'bg-orange-100', 'text-orange-800', 'border-orange-200', 'dark:bg-orange-900', 'dark:text-orange-200', 'dark:border-orange-800',
18-
'bg-yellow-100', 'text-yellow-800', 'border-yellow-200', 'dark:bg-yellow-900', 'dark:text-yellow-200', 'dark:border-yellow-800',
19-
'bg-green-100', 'text-green-800', 'border-green-200', 'dark:bg-green-900', 'dark:text-green-200', 'dark:border-green-800',
20-
'bg-emerald-100', 'text-emerald-800', 'border-emerald-200', 'dark:bg-emerald-900', 'dark:text-emerald-200', 'dark:border-emerald-800',
21-
'bg-cyan-100', 'text-cyan-800', 'border-cyan-200', 'dark:bg-cyan-900', 'dark:text-cyan-200', 'dark:border-cyan-800',
22-
// Dark mode backgrounds
23-
'bg-gray-950', 'bg-gray-900', 'bg-gray-800', 'dark:bg-gray-950', 'dark:bg-gray-900', 'dark:bg-gray-800',
24-
'border-gray-800', 'dark:border-gray-800', 'border-gray-700', 'dark:border-gray-700'
11+
{
12+
// emit base + dark variants for the used families and shades (incl. preview 500)
13+
pattern:
14+
/(bg|text|border)-(blue|indigo|purple|pink|red|orange|yellow|green|emerald|cyan)-(100|200|500|800|900)/,
15+
variants: ["dark"],
16+
},
17+
// Gray backgrounds/borders used globally
18+
{ pattern: /bg-gray-(800|900|950)/, variants: ["dark"] },
19+
{ pattern: /border-gray-(700|800)/, variants: ["dark"] },
2520
],
2621
theme: {
2722
extend: {},

‎apps/web/components/layout/page.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@ export default function Page({
147147
</div>
148148

149149
{!!title && tabs?.length > 0 ? (
150-
<div className="mt-0 ml-4 md:ml-6 lg:ml-8">
151-
<div className="sm:hidden">
150+
<div className="ml-4 md:ml-6 lg:ml-8">
151+
<div className="sm:hidden mt-4">
152152
<label htmlFor="current-tab" className="sr-only">
153153
Select a tab
154154
</label>

‎apps/web/pages/pages/index.tsx‎

Lines changed: 76 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -107,79 +107,84 @@ export default function Pages({
107107

108108
{pages.length ? (
109109
<div className="overflow-hidden shadow rounded-md bg-white dark:bg-gray-900 border dark:border-gray-800">
110-
<div className="sm:grid sm:grid-cols-2">
111-
{pages.map((page, index) => (
112-
<div
113-
key={page.id}
114-
className={`relative group p-6 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors duration-200 ${
115-
index < pages.length - 1 ? 'border-b border-gray-200 dark:border-gray-800' : ''
116-
} ${
117-
index % 2 === 0 && index < pages.length - 2 ? 'sm:border-r sm:border-gray-200 sm:dark:border-gray-800' : ''
118-
} ${
119-
index % 2 === 0 && index === pages.length - 2 && pages.length % 2 === 0 ? 'sm:border-r sm:border-gray-200 sm:dark:border-gray-800' : ''
120-
}`}
121-
>
122-
<div>
123-
<span
124-
className={classNames(
125-
page.type === PageType.announcements &&
126-
"bg-blue-100 dark:bg-blue-700",
127-
page.type === PageType.changelogs &&
128-
"bg-teal-100 dark:bg-teal-700",
129-
page.type === PageType.releases &&
130-
"bg-rose-100 dark:bg-rose-700",
131-
page.type === PageType.updates &&
132-
"bg-amber-100 dark:bg-amber-700",
133-
page.type === PageType.announcements &&
134-
"text-blue-500 dark:text-blue-100",
135-
page.type === PageType.changelogs &&
136-
"text-teal-500 dark:text-teal-100",
137-
page.type === PageType.releases &&
138-
"text-rose-500 dark:text-rose-100",
139-
page.type === PageType.updates &&
140-
"text-amber-500 dark:text-amber-100",
141-
"inline-flex px-2 py-1 font-bold rounded-md"
142-
)}
143-
>
144-
{PageTypeToLabel[page.type]}
145-
</span>
146-
</div>
147-
<div className="mt-6">
148-
<h3 className="text-lg font-medium dark:text-white">
149-
<a
150-
href={`${ROUTES.PAGES}/${page.id}`}
151-
className="focus:outline-none font-bold tracking-tight hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-200"
152-
>
153-
<span className="absolute inset-0" aria-hidden="true" />
154-
{page.title}
155-
</a>
156-
</h3>
157-
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
158-
{page.description}
159-
</p>
160-
<p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
161-
{page.page_settings?.custom_domain
162-
? page.page_settings.custom_domain
163-
: `${page.url_slug}.changes.page`
164-
}
165-
</p>
166-
</div>
167-
<span
168-
className="pointer-events-none absolute top-6 right-6 text-gray-500 dark:text-gray-400 group-hover:text-indigo-400"
169-
aria-hidden="true"
170-
>
171-
{page.teams && page.user_id !== user?.id ? (
172-
<div className="flex items-center gap-1">
173-
<UserGroupIcon className="h-4 w-4" />
174-
<span className="text-sm font-medium">
175-
Editor ({page.teams.name})
176-
</span>
110+
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
111+
{pages.map((page) => (
112+
<li key={page.id} className="relative group hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200">
113+
<div className="flex items-center justify-between p-6">
114+
<div className="flex-1 min-w-0">
115+
<div className="flex items-center gap-3 mb-2">
116+
<span
117+
className={classNames(
118+
page.type === PageType.announcements &&
119+
"bg-blue-100 dark:bg-blue-700",
120+
page.type === PageType.changelogs &&
121+
"bg-teal-100 dark:bg-teal-700",
122+
page.type === PageType.releases &&
123+
"bg-rose-100 dark:bg-rose-700",
124+
page.type === PageType.updates &&
125+
"bg-amber-100 dark:bg-amber-700",
126+
page.type === PageType.announcements &&
127+
"text-blue-500 dark:text-blue-100",
128+
page.type === PageType.changelogs &&
129+
"text-teal-500 dark:text-teal-100",
130+
page.type === PageType.releases &&
131+
"text-rose-500 dark:text-rose-100",
132+
page.type === PageType.updates &&
133+
"text-amber-500 dark:text-amber-100",
134+
"inline-flex px-2 py-1 text-xs font-bold rounded-md"
135+
)}
136+
>
137+
{PageTypeToLabel[page.type]}
138+
</span>
139+
{page.teams && page.user_id !== user?.id && (
140+
<div className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
141+
<UserGroupIcon className="h-4 w-4" />
142+
<span className="text-xs font-medium">
143+
Editor ({page.teams.name})
144+
</span>
145+
</div>
146+
)}
147+
</div>
148+
<div>
149+
<h3 className="text-lg font-bold tracking-tight text-gray-900 dark:text-white">
150+
<a
151+
href={`${ROUTES.PAGES}/${page.id}`}
152+
className="focus:outline-none hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-200"
153+
>
154+
<span className="absolute inset-0" aria-hidden="true" />
155+
{page.title}
156+
</a>
157+
</h3>
158+
{page.description && (
159+
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
160+
{page.description}
161+
</p>
162+
)}
163+
<p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
164+
{page.page_settings?.custom_domain
165+
? page.page_settings.custom_domain
166+
: `${page.url_slug}.changes.page`
167+
}
168+
</p>
169+
</div>
177170
</div>
178-
) : null}
179-
</span>
180-
</div>
171+
<div className="ml-4 flex-shrink-0">
172+
<svg
173+
className="h-5 w-5 text-gray-400 group-hover:text-indigo-500 transition-colors"
174+
fill="currentColor"
175+
viewBox="0 0 20 20"
176+
>
177+
<path
178+
fillRule="evenodd"
179+
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
180+
clipRule="evenodd"
181+
/>
182+
</svg>
183+
</div>
184+
</div>
185+
</li>
181186
))}
182-
</div>
187+
</ul>
183188
</div>
184189
) : null}
185190
</div>

‎apps/web/tailwind.config.js‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,15 @@ module.exports = {
77
"./node_modules/@changes-page/ui/components/**/*.{js,ts,jsx,tsx}",
88
],
99
safelist: [
10-
// Roadmap category colors
11-
'bg-blue-100', 'text-blue-800', 'border-blue-200', 'dark:bg-blue-900', 'dark:text-blue-200', 'dark:border-blue-800',
12-
'bg-indigo-100', 'text-indigo-800', 'border-indigo-200', 'dark:bg-indigo-900', 'dark:text-indigo-200', 'dark:border-indigo-800',
13-
'bg-purple-100', 'text-purple-800', 'border-purple-200', 'dark:bg-purple-900', 'dark:text-purple-200', 'dark:border-purple-800',
14-
'bg-pink-100', 'text-pink-800', 'border-pink-200', 'dark:bg-pink-900', 'dark:text-pink-200', 'dark:border-pink-800',
15-
'bg-red-100', 'text-red-800', 'border-red-200', 'dark:bg-red-900', 'dark:text-red-200', 'dark:border-red-800',
16-
'bg-orange-100', 'text-orange-800', 'border-orange-200', 'dark:bg-orange-900', 'dark:text-orange-200', 'dark:border-orange-800',
17-
'bg-yellow-100', 'text-yellow-800', 'border-yellow-200', 'dark:bg-yellow-900', 'dark:text-yellow-200', 'dark:border-yellow-800',
18-
'bg-green-100', 'text-green-800', 'border-green-200', 'dark:bg-green-900', 'dark:text-green-200', 'dark:border-green-800',
19-
'bg-emerald-100', 'text-emerald-800', 'border-emerald-200', 'dark:bg-emerald-900', 'dark:text-emerald-200', 'dark:border-emerald-800',
20-
'bg-cyan-100', 'text-cyan-800', 'border-cyan-200', 'dark:bg-cyan-900', 'dark:text-cyan-200', 'dark:border-cyan-800',
21-
'bg-blue-500', 'bg-indigo-500', 'bg-purple-500', 'bg-pink-500', 'bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500', 'bg-emerald-500', 'bg-cyan-500',
22-
// Drag and drop indigo colors
23-
'bg-indigo-50', 'bg-indigo-400', 'bg-indigo-600', 'text-indigo-600', 'text-indigo-400', 'dark:bg-indigo-900', 'dark:bg-indigo-600', 'dark:text-indigo-400',
10+
{
11+
// emit base + dark variants for the used families and shades (incl. preview 500)
12+
pattern:
13+
/(bg|text|border)-(blue|indigo|purple|pink|red|orange|yellow|green|emerald|cyan)-(100|200|500|800|900)/,
14+
variants: ["dark"],
15+
},
16+
// Gray backgrounds/borders used globally
17+
{ pattern: /bg-gray-(800|900|950)/, variants: ["dark"] },
18+
{ pattern: /border-gray-(700|800)/, variants: ["dark"] },
2419
],
2520
theme: {
2621
extend: {

0 commit comments

Comments
 (0)