Skip to content

feat: remove css from various pages/Template.* pages #21267

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

Draft
jakehwll wants to merge 2 commits into
base: jakehwll/mui-cssnuke-components
Choose a base branch
from
Draft

feat: remove css from various pages/Template.* pages #21267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00cdf7f
feat: first implementation of templates `css` removal
jakehwll Dec 15, 2025
3fbec5a
fix: implement various layout shift fixes
jakehwll Dec 15, 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
2 changes: 1 addition & 1 deletion site/src/components/HelpTooltip/HelpTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ const getIconSpacingFromSize = (size?: Size): number => {

const classNames = {
title: "mt-0 mb-2 text-content-primary text-sm leading-relaxed font-semibold",
text: "my-1 text-sm leading-relaxed",
text: "my-1 text-sm leading-relaxed font-normal",
link: "flex items-center text-sm text-content-link",
linkIcon: "size-icon-xs mr-2 text-inherit",
linksGroup: "mt-4",
Expand Down
102 changes: 26 additions & 76 deletions site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import type { Interpolation, Theme } from "@emotion/react";
import Link from "@mui/material/Link";
import type { TemplateExample } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Pill } from "components/Pill/Pill";
import type { FC, HTMLAttributes } from "react";
import { Link as RouterLink } from "react-router";
import { cn } from "utils/cn";

type TemplateExampleCardProps = HTMLAttributes<HTMLDivElement> & {
example: TemplateExample;
Expand All @@ -18,19 +18,24 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
...divProps
}) => {
return (
<div css={styles.card} {...divProps}>
<div css={styles.header}>
<div css={styles.icon}>
<div {...divProps} className={cn(classNames.card, divProps.className)}>
<div className={classNames.header}>
<div className={classNames.icon}>
<ExternalImage
src={example.icon}
css={{ width: "100%", height: "100%", objectFit: "contain" }}
className="w-full h-full object-contain"
/>
</div>

<div css={styles.tags}>
<div className={classNames.tags}>
{example.tags.map((tag) => (
<RouterLink key={tag} to={`/starter-templates?tag=${tag}`}>
<Pill css={[styles.tag, activeTag === tag && styles.activeTag]}>
<Pill
className={cn([
classNames.tag,
activeTag === tag && classNames.activeTag,
])}
>
{tag}
</Pill>
</RouterLink>
Expand All @@ -39,22 +44,20 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
</div>

<div>
<h4 css={{ fontSize: 14, fontWeight: 600, margin: 0, marginBottom: 4 }}>
{example.name}
</h4>
<span css={styles.description}>
<h4 className="text-sm font-semibold m-0 mb-1">{example.name}</h4>
<span className={classNames.description}>
{example.description}{" "}
<Link
component={RouterLink}
to={`/starter-templates/${example.id}`}
css={{ display: "inline-block", fontSize: 13, marginTop: 4 }}
className="inline-block text-[13px] leading-none mt-2"
>
Read more
</Link>
</span>
</div>

<div css={styles.useButtonContainer}>
<div className={classNames.useButtonContainer}>
<Button asChild className="w-full">
<RouterLink to={`/templates/new?exampleId=${example.id}`}>
Use template
Expand All @@ -65,66 +68,13 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
);
};

const styles = {
card: (theme) => ({
width: "320px",
padding: 24,
borderRadius: 6,
border: `1px solid ${theme.palette.divider}`,
textAlign: "left",
color: "inherit",
display: "flex",
flexDirection: "column",
}),

header: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: 24,
},

icon: {
flexShrink: 0,
paddingTop: 4,
width: 32,
height: 32,
},

tags: {
display: "flex",
flexWrap: "wrap",
gap: 8,
justifyContent: "end",
},

tag: (theme) => ({
borderColor: theme.palette.divider,
textDecoration: "none",
cursor: "pointer",
"&: hover": {
borderColor: theme.palette.primary.main,
},
}),

activeTag: (theme) => ({
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
}),

description: (theme) => ({
fontSize: 13,
color: theme.palette.text.secondary,
lineHeight: "1.6",
display: "block",
}),

useButtonContainer: {
display: "flex",
gap: 12,
flexDirection: "column",
paddingTop: 24,
marginTop: "auto",
alignItems: "center",
},
} satisfies Record<string, Interpolation<Theme>>;
const classNames = {
card: "w-[320px] p-6 rounded-md border border-solid border-border dark:border-surface-quaternary text-left text-inherit flex flex-col",
header: "flex items-center justify-between mb-6",
icon: "flex-shrink-0 pt-1 w-8 h-8",
tags: "flex flex-wrap gap-2 justify-end",
tag: "border border-solid border-border dark:border-surface-quaternary text-decoration-none cursor-pointer hover:border-sky-500",
activeTag: "bg-sky-950 border-sky-500 dark:border-sky-500",
description: "text-[13px] leading-relaxed block text-content-secondary",
useButtonContainer: "flex flex-col items-center gap-3 pt-6 mt-auto",
};
10 changes: 1 addition & 9 deletions site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { chromatic } from "testHelpers/chromatic";
import { useTheme } from "@emotion/react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import type { FileTree } from "utils/filetree";
import { TemplateFileTree } from "./TemplateFileTree";
Expand Down Expand Up @@ -30,15 +29,8 @@ const meta: Meta<typeof TemplateFileTree> = {
},
decorators: [
(Story) => {
const theme = useTheme();
return (
<div
css={{
maxWidth: 260,
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
}}
>
<div className="max-w-[260px] rounded-lg border border-solid border-border">
<Story />
</div>
);
Expand Down
77 changes: 23 additions & 54 deletions site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import { useTheme } from "@emotion/react";
import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter";
import set from "lodash/set";
import { EditIcon } from "lucide-react";
Expand Down Expand Up @@ -61,8 +61,8 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({

return (
<div>
<div css={{ display: "flex", alignItems: "flex-start", gap: 32 }}>
<div css={styles.sidebar}>
<div className="flex items-start gap-8">
<div className={classNames.sidebar}>
<TemplateFileTree
fileTree={fileTree}
onSelect={(path: string) => {
Expand All @@ -85,15 +85,19 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
/>
</div>

<div css={styles.files} data-testid="template-files-content">
<div className={classNames.files} data-testid="template-files-content">
{Object.keys(currentFiles)
.sort((a, b) => a.localeCompare(b))
.map((filename) => {
const info = fileInfo(filename);

return (
<div key={filename} css={styles.filePanel} id={filename}>
<header css={styles.fileHeader}>
<div
key={filename}
className={classNames.filePanel}
id={filename}
>
<header className={classNames.fileHeader}>
<span
className={cn({
"text-content-warning": info.hasDiff,
Expand All @@ -102,21 +106,13 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
{filename}
</span>

<div css={{ marginLeft: "auto" }}>
<div className="ml-auto">
<Link
to={`${versionLink}/edit?path=${filename}`}
css={{
display: "flex",
gap: 4,
alignItems: "center",
fontSize: 14,
color: theme.palette.text.secondary,
textDecoration: "none",

"&:hover": {
color: theme.palette.text.primary,
},
}}
className={cn([
"flex gap-1 items-center text-sm leading-none no-underline",
"text-content-secondary hover:text-content-primary",
])}
>
<EditIcon className="text-inherit size-icon-xs" />
Edit
Expand Down Expand Up @@ -171,38 +167,11 @@ const numberOfLines = (content: string) => {
return content.split("\n").length;
};

const styles = {
sidebar: (theme) => ({
width: 240,
flexShrink: 0,
borderRadius: 8,
overflow: "auto",
border: `1px solid ${theme.palette.divider}`,
padding: "4px 0",
position: "sticky",
top: 32,
}),

files: {
display: "flex",
flexDirection: "column",
gap: 16,
flex: 1,
},

filePanel: (theme) => ({
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
overflow: "hidden",
}),

fileHeader: (theme) => ({
padding: "8px 16px",
borderBottom: `1px solid ${theme.palette.divider}`,
fontSize: 13,
fontWeight: 500,
display: "flex",
gap: 8,
alignItems: "center",
}),
} satisfies Record<string, Interpolation<Theme>>;
const classNames = {
sidebar:
"w-60 flex-shrink-0 rounded-lg overflow-auto border border-solid border-zinc-700 py-1 sticky top-8",
files: "flex flex-col gap-4 flex-1",
filePanel: "rounded-lg border border-solid border-zinc-700 overflow-hidden",
fileHeader:
"py-2 px-4 flex gap-2 items-center border-0 border-b border-solid border-zinc-700 text-[13px] font-medium",
};
76 changes: 17 additions & 59 deletions site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type { Interpolation, Theme } from "@emotion/react";
import Card from "@mui/material/Card";
import CardActionArea from "@mui/material/CardActionArea";
import CardContent from "@mui/material/CardContent";
Expand Down Expand Up @@ -44,43 +43,29 @@ export const CreateTemplateGalleryPageView: FC<
</PageHeader>
<Stack spacing={8}>
<Stack direction="row" spacing={4}>
<div css={{ width: 202 }}>
<h2 css={styles.sectionTitle}>
<div className="w-[202px]">
<h2 className={classNames.sectionTitle}>
Choose a starting point for your new template
</h2>
</div>
<div
css={{
display: "flex",
flexWrap: "wrap",
gap: 32,
height: "max-content",
}}
>
<Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
<div className="flex flex-wrap gap-8 h-max">
<Card variant="outlined" className="w-[320px] rounded-md">
<CardActionArea
component={RouterLink}
to="/templates/new"
sx={{ height: 115, padding: 1 }}
>
<CardContent>
<Stack
direction="row"
spacing={3}
css={{ alignItems: "center" }}
>
<div css={styles.icon}>
<Stack direction="row" spacing={3} className="items-center">
<div className={classNames.icon}>
<ExternalImage
src="/emojis/1f4e1.png"
css={{
width: "100%",
height: "100%",
}}
className="w-full h-full"
/>
</div>
<div>
<h4 css={styles.cardTitle}>Upload Template</h4>
<span css={styles.cardDescription}>
<h4 className={classNames.cardTitle}>Upload Template</h4>
<span className={classNames.cardDescription}>
Get started by uploading an existing template
</span>
</div>
Expand All @@ -101,38 +86,11 @@ export const CreateTemplateGalleryPageView: FC<
);
};

const styles = {
sectionTitle: (theme) => ({
color: theme.palette.text.primary,
fontSize: 16,
fontWeight: 400,
margin: 0,
}),

cardTitle: (theme) => ({
color: theme.palette.text.secondary,
fontSize: 14,
fontWeight: 600,
margin: 0,
marginBottom: 4,
}),

cardDescription: (theme) => ({
fontSize: 13,
color: theme.palette.text.secondary,
lineHeight: "1.6",
display: "block",
}),

icon: {
flexShrink: 0,
width: 32,
height: 32,
},

menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width: 20,
height: 20,
}),
} satisfies Record<string, Interpolation<Theme>>;
const classNames = {
sectionTitle:
"text-content-primary text-base font-normal m-0 leading-relaxed",
cardTitle: "text-content-secondary text-sm font-semibold m-0 mb-1",
cardDescription: "text-[13px] leading-relaxed block text-content-secondary",
icon: "flex-shrink-0 w-8 h-8",
menuItemIcon: "text-content-secondary size-5",
};
Loading
Loading