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 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: update colors
  • Loading branch information
@jaaydenh
jaaydenh committed Nov 5, 2024
commit 58fbeb3019f4ccb3daca0e225c9d4065c2241f44
10 changes: 8 additions & 2 deletions site/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,34 @@
--content-secondary: #52525b;
--content-link: #2563eb;
--content-invert: #fafafa;
--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;
--border-error: #F87171;
--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.

}
.dark {
--content-primary: #fafafa;
--content-secondary: #a1a1aa;
--content-link: #60a5fa;
--content-invert: #09090b;
--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;
--border-error: #F87171;
--border-error: #f87171;
}
}
14 changes: 7 additions & 7 deletions site/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ module.exports = {
content: {
primary: "var(--content-primary)",
Copy link
Member

Choose a reason for hiding this comment

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

Wondering if it might be good to define default values for the var calls, just in the off chance that a variable isn't defined

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Then we have potentially 2 sources of truth for the colors. I would imagine that once this setup, it would rarely change.

secondary: "var(--content-secondary)",
disabled: colors.zinc[600],
disabled: "var(--content-disabled)",
invert: "var(--content-invert)",
success: colors.green[600],
danger: colors.red[500],
link: colors.blue[500],
success: "var(--content-success)",
danger: "var(--content-danger)",
link: "var(--content-link)",
},
surface: {
primary: colors.zinc[950],
secondary: colors.zinc[900],
tertiary: colors.zinc[800],
primary: "var(--surface-primary)",
secondary: "var(--surface-secondary)",
tertiary: "var(--surface-tertiary)",
invert: {
primary: "var(--surface-invert-primary)",
secondary: "var(--surface-invert-secondary)",
Expand Down
0