8000 feat: implement Premium features page using shadcn/ui and Tailwind by jaaydenh · Pull Request #15094 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: implement Premium features page using shadcn/ui and Tailwind #15094

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 27 commits into from
Nov 6, 2024
Merged

feat: implement Premium features page using shadcn/ui and Tailwind #15094

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
459a028
wip
jaaydenh Oct 2, 2024
169c4f5
fix
jaaydenh Oct 15, 2024
24c97dc
update lock file
jaaydenh Oct 15, 2024
4134d90
wip
jaaydenh Oct 16, 2024
15eded8
revert css
jaaydenh Oct 16, 2024
9dba1c8
fix: import index.css
jaaydenh Oct 30, 2024
579ced7
feat: changes for premium page
jaaydenh Oct 30, 2024
ae3bd9d
feat: implement Premium page with Tailwind and shadcn button
jaaydenh Nov 1, 2024
f977408
fix: fix lock file
jaaydenh Nov 1, 2024
71826a8
chore: updates to button styles
jaaydenh Nov 1, 2024
093d947
chore: update variant
jaaydenh Nov 1, 2024
58fbeb3
chore: update colors
jaaydenh Nov 1, 2024
4e6daaf
chore: move CacheP 8000 rovider to ThemeProvider
jaaydenh Nov 1, 2024
287a67a
chore: update paths for shadcn
jaaydenh Nov 1, 2024
1310637
fix: fix format
jaaydenh Nov 1, 2024
281ec8a
feat: use Lucide instead of Radix icons
jaaydenh Nov 2, 2024
25cbb87
fix: add useEffect cleanup function
jaaydenh Nov 3, 2024
42e82b6
chore: add comment
jaaydenh Nov 3, 2024
4ae065d
fix: fix format
jaaydenh Nov 3, 2024
fd045a6
feat: show premium tab if no premium license
jaaydenh Nov 3, 2024
e015d20
fix: fix format
jaaydenh Nov 3, 2024
3eba3af
fix: use rem for font overrides
jaaydenh Nov 5, 2024
162ad19
fix: remove fontSize
jaaydenh Nov 5, 2024
fcb4c2a
fix: fix lockfile
jaaydenh Nov 5, 2024
962045c
chore: add font sizes to Tailwind config
jaaydenh Nov 5, 2024
09c5844
feat: add icons for OSS version
jaaydenh Nov 6, 2024
ef4b261
fix: use sentence case
jaaydenh Nov 6, 2024
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
Prev Previous commit
Next Next commit
chore: move CacheProvider to ThemeProvider
  • Loading branch information
@jaaydenh
jaaydenh committed Nov 5, 2024
commit 4e6daafe9f51b1f630ac8d9f6f9e15d946f0d17c
31 changes: 11 additions & 20 deletions site/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import "./theme/globalFonts";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {
type FC,
Expand Down Expand Up @@ -40,11 +38,6 @@ declare global {
}
}

const cache = createCache({
key: "css",
prepend: true,
});

export const AppProviders: FC<AppProvidersProps> = ({
children,
queryClient = defaultQueryClient,
Expand All @@ -71,19 +64,17 @@ export const AppProviders: FC<AppProvidersProps> = ({
}, []);

return (
<CacheProvider value={cache}>
<HelmetProvider>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<ThemeProvider>
{children}
<GlobalSnackbar />
</ThemeProvider>
</AuthProvider>
{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
</QueryClientProvider>
</HelmetProvider>
</CacheProvider>
<HelmetProvider>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<ThemeProvider>
{children}
<GlobalSnackbar />
</ThemeProvider>
</AuthProvider>
{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
</QueryClientProvider>
</HelmetProvider>
);
};

Expand Down
23 changes: 16 additions & 7 deletions site/src/contexts/ThemeProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import createCache from "@emotion/cache";
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import { CacheProvider } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";
import {
ThemeProvider as MuiThemeProvider,
Expand Down Expand Up @@ -57,7 +59,7 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
// value could be anything, like an empty string.

useEffect(() => {
const root = window.document.documentElement;
const root = document.documentElement;
root.classList.remove("light", "dark");
if (themePreference === "auto") {
root.classList.add(preferredColorScheme);
Expand All @@ -77,18 +79,25 @@ export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
);
};

const cache = createCache({
key: "css",
prepend: true,
});
Comment on lines +87 to +90
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we add a comment on why we're defining a custom cache override? I'm guessing this is to make Emotion and Tailwind play nicely with each other, but I'm not 100% sure

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to allow using Tailwind on MUI components as described here: https://mui.com/material-ui/integrations/interoperability/#tailwind-css

This is actually not needed if never use Tailwind on MUI components and only use Tailwind with new components. I was adding it here just in case it is useful but actually maybe its better we don't add this. Any opinions either way?


interface ThemeOverrideProps {
theme: Theme;
children?: ReactNode;
}

export const ThemeOverride: FC<ThemeOverrideProps> = ({ theme, children }) => {
return (
<MuiThemeProvider theme={theme}>
<EmotionThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
{children}
</EmotionThemeProvider>
</MuiThemeProvider>
<CacheProvider value={cache}>
<MuiThemeProvider theme={theme}>
<EmotionThemeProvider theme={theme}>
<CssBaseline enableColorScheme />
{children}
</EmotionThemeProvider>
</MuiThemeProvider>
</CacheProvider>
);
};
12 changes: 6 additions & 6 deletions site/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@
--content-secondary: #52525b;
--content-link: #2563eb;
--content-invert: #fafafa;
--content-disabled: #A1A1AA;
--content-disabled: #a1a1aa;
--content-success: #15803d;
--content-danger: #ef4444;
--surface-primary: #fafafa;
--surface-secondary: #f4f4f5;
--surface-tertiary: #e4e4e7;
--surface-invert-primary: #27272a;
--surface-invert-secondary: #3f3f46;
--surface-error: #450A0A;
--border-default :#E4E4E7;
--surface-error: #450a0a;
--border-default: #e4e4e7;
--border-error: #ef4444;
--radius: 0.5rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making sure I'm understanding this correctly: does this bind the border radius value to the root em for the browser?

If so, do we want to do that? If the user ever increases or decreases their default font size, that would cause the borders to increase/decrease roundness and potentially look wonky, right?

Copy link
Contributor Author
@jaaydenh jaaydenh Nov 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--radius is used in the tailwind config here,

borderRadius: {
   lg: "var(--radius)",
   md: "calc(var(--radius) - 2px)",
   sm: "calc(var(--radius) - 4px)",
},

by default Tailwind uses border-radius: 0.5rem; for rounded-lg so nothing is changing there. Changing the zoom level in the browser should by fine as well.

These were both added by the shadcn installation. I was keeping this for now until we know exactly why shadcn is adding this override to Tailwind for md and sm.

}
Expand All @@ -26,16 +26,16 @@
--content-secondary: #a1a1aa;
--content-link: #60a5fa;
--content-invert: #09090b;
--content-disabled: #3F3F46;
--content-disabled: #3f3f46;
--content-success: #16a34a;
--content-danger: #f87171;
--surface-primary: #09090b;
--surface-secondary: #18181b;
--surface-tertiary: #27272a;
--surface-invert-primary: #e4e4e7;
--surface-invert-secondary: #a1a1aa;
--surface-error: #450A0A;
--border-default: #27272A;
--surface-error: #450a0a;
--border-default: #27272a;
--border-error: #f87171;
}
}
2 changes: 1 addition & 1 deletion site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ const OSSVersion: FC = () => {
Template Permissions
</span>
<br />
<span className=" font-medium">
<span className="font-medium">
Control who can create, modify, and access workspace templates
across teams.
</span>
Expand Down
0