10000 fix: update `WorkspacesEmpty.tsx` from material ui to tailwind (#16886) · coder/coder@83f1d82 · GitHub
[go: up one dir, main page]
Skip to content

Commit 83f1d82

Browse files
rohansinha01rohansinha01
authored
fix: update WorkspacesEmpty.tsx from material ui to tailwind (#16886)
1 parent 27a160d commit 83f1d82

File tree

1 file changed

+14
-70
lines changed

1 file changed

+14
-70
lines changed

‎site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx

Lines changed: 14 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
2525
const defaultMessage =
2626
"A workspace is your personal, customizable development environment.";
2727
const defaultImage = (
28-
<div
29-
css={{
30-
maxWidth: "50%",
31-
height: 272,
32-
overflow: "hidden",
33-
marginTop: 48,
34-
opacity: 0.85,
35-
36-
"& img": {
37-
maxWidth: "100%",
38-
},
39-
}}
40-
>
41-
<img src="/featured/workspaces.webp" alt="" />
28+
<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
29+
<img src="/featured/workspaces.webp" alt="" className="max-w-full" />
4230
</div>
4331
);
4432

@@ -56,9 +44,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
5644
<Link to="/templates">Go to templates</Link>
5745
</Button>
5846
}
59-
css={{
60-
paddingBottom: 0,
61-
}}
47+
className="pb-0"
6248
image={defaultImage}
6349
/>
6450
);
@@ -69,9 +55,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
6955
<TableEmpty
7056
message={defaultTitle}
7157
description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
72-
css={{
73-
paddingBottom: 0,
74-
}}
58+
className="pb-0"
7559
image={defaultImage}
7660
/>
7761
);
@@ -83,70 +67,30 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
8367
description={`${defaultMessage} Select one template below to start.`}
8468
cta={
8569
<div>
86-
<div
87-
css={{
88-
display: "flex",
89-
flexWrap: "wrap",
90-
gap: 16,
91-
marginBottom: 24,
92-
justifyContent: "center",
93-
maxWidth: "800px",
94-
}}
95-
>
70+
<div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
9671
{featuredTemplates?.map((t) => (
9772
<Link
9873
key={t.id}
9974
to={`${getLink(
10075
linkToTemplate(t.organization_name, t.name),
10176
)}/workspace`}
102-
css={(theme) => ({
103-
width: "320px",
104-
padding: 16,
105-
borderRadius: 6,
106-
border: `1px solid ${theme.palette.divider}`,
107-
textAlign: "left",
108-
display: "flex",
109-
gap: 16,
110-
textDecoration: "none",
111-
color: "inherit",
112-
113-
"&:hover": {
114-
backgroundColor: theme.palette.background.paper,
115-
},
116-
})}
77+
className="w-[320px] p-4 rounded-md border border-solid border-surface-quaternary text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
11778
>
118-
<div css={{ flexShrink: 0, paddingTop: 4 }}>
79+
<div className="flex-shrink-0 pt-1">
11980
<Avatar variant="icon" src={t.icon} fallback={t.name} />
12081
</div>
12182

122-
<div css={{ width: "100%", minWidth: "0" }}>
123-
<h4
124-
css={{
125-
fontSize: 14,
126-
fontWeight: 600,
127-
margin: 0,
128-
overflow: "hidden",
129-
textOverflow: "ellipsis",
130-
whiteSpace: "nowrap",
131-
}}
132-
>
83+
<div className="w-full min-w-0">
84+
<h4 className="text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap">
13385
{t.display_name || t.name}
13486
</h4>
13587

13688
<p
137-
css={(theme) => ({
138-
fontSize: 13,
139-
color: theme.palette.text.secondary,
140-
lineHeight: "1.4",
141-
margin: 0,
142-
paddingTop: "4px",
143-
144-
// We've had users plug URLs directly into the
145-
// descriptions, when those URLS have no hyphens or other
146-
// easy semantic breakpoints. Need to set this to ensure
147-
// those URLs don't break outside their containing boxes
148-
wordBreak: "break-word",
149-
})}
89+
// We've had users plug URLs directly into the
90+
// descriptions, when those URLS have no hyphens or other
91+
// easy semantic breakpoints. Need to set this to ensure
92+
// those URLs don't break outside their containing boxes
93+
className="text-sm text-gray-400 leading-[1.4] m-0 pt-1 break-words"
15094
>
15195
{t.description}
15296
</p>

0 commit comments

Comments
 (0)
0