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 CacheProvider 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: updates to button styles
  • Loading branch information
@jaaydenh
jaaydenh committed Nov 5, 2024
commit 71826a809c31e45ee66c21166186de78a148bce4
8 changes: 4 additions & 4 deletions site/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ import * as React from "react";
import { cn } from "@/lib/utils";
Copy link
Member

Choose a reason for hiding this comment

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

I think we're gonna wanna change this path to fit in with what we've already got. maybe modules/classes.ts or utils/classes.ts? I'd lean towards modules as I don't really like the name "utils", everything is a util but nothing should just be a util, y'know?


const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-0 font-semibold",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 font-semibold border-solid",
{
variants: {
variant: {
default:
"bg-surface-invert-primary text-content-invert hover:bg-surface-invert-secondary",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
"border border-border-default text-content-primary bg-transparent hover:bg-surface-secondary",
subtle:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
"border-none bg-transparent text-content-secondary hover:text-content-primary",
warning:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
"border border-border-error text-content-primary bg-surface-error hover:bg-transparent",
},
size: {
default: "h-10 px-3 py-2",
Expand Down
6 changes: 6 additions & 0 deletions site/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
--surface-tertiary: #e4e4e7;
--surface-invert-primary: #27272a;
--surface-invert-secondary: #3f3f46;
--surface-error: #450A0A;
--border-default :#E4E4E7;
--border-error: #F87171;
--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.

}
.dark {
Expand All @@ -25,5 +28,8 @@
--surface-tertiary: #27272a;
--surface-invert-primary: #e4e4e7;
--surface-invert-secondary: #a1a1aa;
--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 @@ -21,7 +21,7 @@ const EnterpriseVersion: FC = () => {
Premium for enhanced multi-tenant control and flexibility:
</p>
</div>
<Button asChild>
<Button asChild variant="warning">
<a href="https://coder.com/contact/sales" className="no-underline">
Upgrade
</a>
Expand Down
5 changes: 5 additions & 0 deletions site/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ module.exports = {
primary: "var(--surface-invert-primary)",
secondary: "var(--surface-invert-secondary)",
},
error: "var(--surface-error)",
},
border: {
default: "var(--border-default)",
error: "var(--border-error)",
},
},
},
Expand Down