8000 fix: update `WorkspacesEmpty.tsx` from material ui to tailwind by rohansinha01 · Pull Request #16886 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

fix: update WorkspacesEmpty.tsx from material ui to tailwind #16886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 17, 2025
Merged

fix: update WorkspacesEmpty.tsx from material ui to tailwind #16886

Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d9254e8
updated to tailwind
rohansinha01 Mar 11, 2025
2d61365
updated WorkspacesEmpty material ui to tailwind
rohansinha01 Mar 12, 2025
5111f08
make fmt
rohansinha01 Mar 12, 2025
40ac4e5
moved comment before className
rohansinha01 Mar 12, 2025
2e19a4e
removed blank space
rohansinha01 Mar 12, 2025
9c7d3cc
fixed outdated colors from palette
rohansinha01 Mar 13, 2025
8b7f049
updated colors
rohansinha01 Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 14 additions & 70 deletions site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
const defaultMessage =
"A workspace is your personal, customizable development environment.";
const defaultImage = (
<div
css={{
maxWidth: "50%",
height: 272,
overflow: "hidden",
marginTop: 48,
opacity: 0.85,

"& img": {
maxWidth: "100%",
},
}}
>
<img src="/featured/workspaces.webp" alt="" />
<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
<img src="/featured/workspaces.webp" alt="" className="max-w-full" />
</div>
);

Expand All @@ -56,9 +44,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
<Link to="/templates">Go to templates</Link>
</Button>
}
css={{
paddingBottom: 0,
}}
className="pb-0"
image={defaultImage}
/>
);
Expand All @@ -69,9 +55,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
<TableEmpty
message={defaultTitle}
description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
css={{
paddingBottom: 0,
}}
className="pb-0"
image={defaultImage}
/>
);
Expand All @@ -83,70 +67,30 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
description={`${defaultMessage} Select one template below to start.`}
cta={
<div>
<div
css={{
display: "flex",
flexWrap: "wrap",
gap: 16,
marginBottom: 24,
justifyContent: "center",
maxWidth: "800px",
}}
>
<div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
{featuredTemplates?.map((t) => (
<Link
key={t.id}
to={`${getLink(
linkToTemplate(t.organization_name, t.name),
)}/workspace`}
css={(theme) => ({
width: "320px",
padding: 16,
borderRadius: 6,
border: `1px solid ${theme.palette.divider}`,
textAlign: "left",
display: "flex",
gap: 16,
textDecoration: "none",
color: "inherit",

"&:hover": {
backgroundColor: theme.palette.background.paper,
},
})}
className="w-[320px] p-4 rounded-md border-solid border-surface-grey text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
>
<div css={{ flexShrink: 0, paddingTop: 4 }}>
<div className="flex-shrink-0 pt-1">
<Avatar variant="icon" src={t.icon} fallback={t.name} />
</div>

<div css={{ width: "100%", minWidth: "0" }}>
<h4
css={{
fontSize: 14,
fontWeight: 600,
margin: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
<div className="w-full min-w-0">
<h4 className="text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap">
{t.display_name || t.name}
</h4>

<p
css={(theme) => ({
fontSize: 13,
color: theme.palette.text.secondary,
lineHeight: "1.4",
margin: 0,
paddingTop: "4px",

// We've had users plug URLs directly into the
// descriptions, when those URLS have no hyphens or other
// easy semantic breakpoints. Need to set this to ensure
// those URLs don't break outside their containing boxes
wordBreak: "break-word",
})}
// We've had users plug URLs directly into the
// descriptions, when those URLS have no hyphens or other
// easy semantic breakpoints. Need to set this to ensure
// those URLs don't break outside their containing boxes
className="text-sm text-gray-600 leading-[1.4] m-0 pt-1 break-words"
>
{t.description}
</p>
Expand Down
Loading
0