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

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
fix: use sentence case
  • Loading branch information
@jaaydenh
jaaydenh committed Nov 6, 2024
commit ef4b26194e4c5b8d1f6cd461ecc31c6295bfe961
41 changes: 20 additions & 21 deletions site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const EnterpriseVersion: FC = () => {
</div>
<Button asChild>
<a href="https://coder.com/contact/sales" className="no-underline">
Upgrade
<SquareArrowOutUpRight size={14} />
Contact sales
</a>
</Button>
</header>
Expand All @@ -35,7 +36,7 @@ const EnterpriseVersion: FC = () => {
>
<span className="flex items-center">
<h2 className="text-sm font-semibold m-0">
Copy link
Member

Choose a reason for hiding this comment

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

Should there be a need for an m-0? Seeing that makes me think that Tailwind's default reset isn't being applied correctly. Though I'm not sure if that's actually expected while we're migrating off MUI

Copy link
Contributor Author

Choose a reason for hiding this comment

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

in the tailwind config the css reset is turned off.

corePlugins: {
		preflight: false,
	},

So we are going to need to do things like this in the short-term or maybe we can find another workaround

Multi-Organization Access Controls&nbsp;
Multi-Organization access controls&nbsp;
</h2>
<SquareArrowOutUpRight size={14} />
</span>
Expand All @@ -52,7 +53,7 @@ const EnterpriseVersion: FC = () => {
href={docs("/admin/users/groups-roles")}
>
<span className="flex items-center">
<h2 className="text-sm font-semibold m-0">Custom Role&nbsp;</h2>
<h2 className="text-sm font-semibold m-0">Custom role&nbsp;</h2>
<SquareArrowOutUpRight size={14} />
</span>
</a>
Expand All @@ -69,7 +70,7 @@ const EnterpriseVersion: FC = () => {
>
<span className="flex items-center text-sm">
<h2 className="text-sm font-semibold m-0">
Org-Level Quotas for Chargeback&nbsp;
Org-Level quotas for chargeback&nbsp;
</h2>
<SquareArrowOutUpRight size={14} />
</span>
Expand Down Expand Up @@ -106,11 +107,9 @@ const OSSVersion: FC = () => {
</p>
</div>
<Button asChild>
<a
href="https://coder.com/pricing#compare-plans"
className="no-underline"
>
Compare Plans
<a href="https://coder.com/contact/sales" className="no-underline">
<SquareArrowOutUpRight size={14} />
Contact sales
</a>
</Button>
</div>
Expand All @@ -119,7 +118,7 @@ const OSSVersion: FC = () => {
<h2 className="text-xl text-content-primary m-0">
<span className="flex flex-row items-center">
<Expand size={18} className="text-content-secondary" />
&nbsp; Deploy Coder at Scale
&nbsp; Deploy coder at scale
</span>
</h2>
<p>
Expand All @@ -129,7 +128,7 @@ const OSSVersion: FC = () => {
<ul className="pl-5">
<li>
<span className="text-content-primary font-semibold">
High Availability
High availability
</span>
<br />
<span className="font-medium">
Expand All @@ -139,7 +138,7 @@ const OSSVersion: FC = () => {
</li>
<li>
<span className="text-content-primary font-semibold">
Multi-Organization Access Control
Multi-Organization access control
</span>
<br />
<span className="font-medium">
Expand All @@ -149,7 +148,7 @@ const OSSVersion: FC = () => {
</li>
<li>
<span className="text-content-primary font-semibold">
Unlimited External Authentication Integrations
Unlimited external authentication integrations
</span>
<br />
<span className="font-medium">
Expand All @@ -164,7 +163,7 @@ const OSSVersion: FC = () => {
<h2 className="text-xl text-content-primary m-0">
<span className="flex flex-row items-center">
<Coins size={18} className="text-content-secondary" />
&nbsp; Control Infrastructure Costs
&nbsp; Control infrastructure costs
</span>
</h2>
<p>
Expand All @@ -174,7 +173,7 @@ const OSSVersion: FC = () => {
<ul className="pl-5">
<li>
<span className="text-content-primary font-semibold">
Auto-Stop Idle Workspaces
Auto-Stop idle workspaces
</span>
<br />
<span className="font-medium">
Expand All @@ -184,7 +183,7 @@ const OSSVersion: FC = () => {
</li>
<li>
<span className="text-content-primary font-semibold">
Resource Quotas
Resource quotas
</span>
<br />
<span className="font-medium">
Expand All @@ -194,7 +193,7 @@ const OSSVersion: FC = () => {
</li>
<li>
<span className="text-content-primary font-semibold">
Usage Insights
Usage insights
</span>
<br />
<span className="font-medium">
Expand All @@ -209,7 +208,7 @@ const OSSVersion: FC = () => {
<h2 className="text-xl text-content-primary m-0">
<span className="flex flex-row items-center">
<Activity size={18} className="text-content-secondary" />
&nbsp; Govern Workspace Activity
&nbsp; Govern workspace activity
</span>
</h2>
<p>
Expand All @@ -219,7 +218,7 @@ const OSSVersion: FC = () => {
<ul className="pl-5">
<li>
<span className="text-content-primary font-semibold">
Audit Logging
Audit logging
</span>
<br />
<span className="font-medium">
Expand All @@ -229,7 +228,7 @@ const OSSVersion: FC = () => {
</li>
<li>
<span className="text-content-primary font-semibold">
< 70CB span class='blob-code-inner blob-code-marker js-skip-tagsearch' data-code-marker="-"> Template Permissions
Template permissions
</span>
<br />
<span className="font-medium">
Expand All @@ -239,7 +238,7 @@ const OSSVersion: FC = () => {
</li>
<li>
<span className="text-content-primary font-semibold">
Workspace Command Logging
Workspace command logging
</span>
<br />
<span className="font-medium">
Expand Down
Loading
0