Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: add premium license banner for custom roles page#14595

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.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
jaaydenh merged 11 commits intomainfromjaaydenh/premium-banners
Sep 11, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
6 changes: 3 additions & 3 deletionssite/src/components/Badges/Badges.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,12 +4,12 @@ import {
Badges,
DisabledBadge,
EnabledBadge,
EnterpriseBadge,
EntitledBadge,
HealthyBadge,
NotHealthyBadge,
NotReachableBadge,
NotRegisteredBadge,
PremiumBadge,
PreviewBadge,
} from "./Badges";

Expand DownExpand Up@@ -50,9 +50,9 @@ export const Disabled: Story = {
children: <DisabledBadge />,
},
};
export constEnterprise: Story = {
export constPremium: Story = {
args: {
children: <EnterpriseBadge />,
children: <PremiumBadge />,
},
};
export const Preview: Story = {
Expand Down
21 changes: 2 additions & 19 deletionssite/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -106,31 +106,14 @@ export const DisabledBadge: FC = forwardRef<
);
});

export const EnterpriseBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.roles.notice.background,
border: `1px solid ${theme.roles.notice.outline}`,
color: theme.roles.notice.text,
}),
]}
>
Enterprise
</span>
);
};

export const PremiumBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.roles.notice.background,
border: `1px solid ${theme.roles.notice.outline}`,
backgroundColor: theme.branding.background,
border: `1px solid ${theme.branding.border}`,
color: theme.roles.notice.text,
}),
]}
Expand Down
4 changes: 1 addition & 3 deletionssite/src/components/Paywall/Paywall.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,12 +9,10 @@ const meta: Meta<typeof Paywall> = {
export default meta;
type Story = StoryObj<typeof Paywall>;

constExample: Story = {
exportconstPremium: Story = {
args: {
message: "Black Lotus",
description:
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
},
};

export { Example as Paywall };
62 changes: 37 additions & 25 deletionssite/src/components/Paywall/Paywall.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
import TaskAltIcon from "@mui/icons-material/TaskAlt";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import {EnterpriseBadge } from "components/Badges/Badges";
import {PremiumBadge } from "components/Badges/Badges";
import { Stack } from "components/Stack/Stack";
import type { FC, ReactNode } from "react";
import { docs } from "utils/docs";
Expand All@@ -19,11 +19,19 @@ export const Paywall: FC<PaywallProps> = ({
documentationLink,
}) => {
return (
<div css={styles.root}>
<div
css={[
styles.root,
(theme) => ({
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
border: `1px solid ${theme.branding.border}`,
}),
]}
>
<div>
<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
<h5 css={styles.title}>{message}</h5>
<EnterpriseBadge />
<PremiumBadge />
</Stack>

{description && <p css={styles.description}>{description}</p>}
Expand All@@ -36,20 +44,24 @@ export const Paywall: FC<PaywallProps> = ({
Read the documentation
</Link>
</div>
<div css={styles.separator}></div>
<div css={styles.separator} />
<Stack direction="column" alignItems="center" spacing={3}>
<ul css={styles.featureList}>
<li css={styles.feature}>
<FeatureIcon /> Template access control
<FeatureIcon />
High availability & workspace proxies
</li>
<li css={styles.feature}>
<FeatureIcon /> User groups
<FeatureIcon />
Multi-org & role-based access control
</li>
<li css={styles.feature}>
<FeatureIcon /> 24 hour support
<FeatureIcon />
24x7 global support with SLA
</li>
<li css={styles.feature}>
<FeatureIcon /> Audit logs
<FeatureIcon />
Unlimited Git & external auth integrations
</li>
</ul>
<Button
Expand All@@ -60,29 +72,33 @@ export const Paywall: FC<PaywallProps> = ({
variant="outlined"
color="neutral"
>
Learn aboutEnterprise
Learn aboutPremium
</Button>
</Stack>
</div>
);
};

const FeatureIcon: FC = () => {
return <TaskAltIcon css={styles.featureIcon} />;
return (
<TaskAltIcon
css={[
(theme) => ({
color: theme.branding.border,
}),
]}
/>
);
};

const styles = {
root: (theme) => ({
root: () => ({
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
minHeight: 300,
maxWidth: 920,
margin: "auto",
minHeight: 280,
padding: 24,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
border: `1px solid ${theme.roles.active.fill.outline}`,
borderRadius: 8,
gap: 32,
}),
Expand All@@ -92,25 +108,21 @@ const styles = {
fontSize: 22,
margin: 0,
},
description: (theme) => ({
marginTop: 16,
description: () => ({
fontFamily: "inherit",
maxWidth: 420,
lineHeight: "160%",
color: theme.palette.text.secondary,
fontSize: 16,
maxWidth: 460,
fontSize: 14,
}),
separator: (theme) => ({
Copy link
Member

Choose a reason for hiding this comment

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

Making a note for myself: we should update our color theme so that it works better on colored backgrounds. The gray divider color looks really washed out on a saturated colored background

Copy link
Member

@ParkreinerParkreinerSep 9, 2024•
edited
Loading

Choose a reason for hiding this comment

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

Before:
Screenshot 2024-09-09 at 10 20 08 AM

After:
Screenshot 2024-09-09 at 10 20 14 AM

Same thing applies to the border around the button, but I don't want to pop open an MUI library component

jaaydenh reacted with thumbs up emoji
Copy link
Member

Choose a reason for hiding this comment

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

ooooh, purple divider looksrad

width: 1,
height: 220,
backgroundColor: theme.palette.divider,
backgroundColor: theme.branding.divider,
marginLeft: 8,
}),
featureList: {
listStyle: "none",
margin: 0,
marginRight: 8,
padding: "0 12px",
padding: "0 24px",
fontSize: 14,
fontWeight: 500,
},
Expand Down
9 changes: 0 additions & 9 deletionssite/src/components/Paywall/PopoverPaywall.stories.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,19 +9,10 @@ const meta: Meta<typeof PopoverPaywall> = {
export default meta;
type Story = StoryObj<typeof PopoverPaywall>;

export const Enterprise: Story = {
args: {
message: "Black Lotus",
description:
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
},
};

export const Premium: Story = {
args: {
message: "Black Lotus",
description:
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
licenseType: "premium",
},
};
49 changes: 26 additions & 23 deletionssite/src/components/Paywall/PopoverPaywall.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
import TaskAltIcon from "@mui/icons-material/TaskAlt";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import {EnterpriseBadge,PremiumBadge } from "components/Badges/Badges";
import { PremiumBadge } from "components/Badges/Badges";
import { Stack } from "components/Stack/Stack";
import type { FC, ReactNode } from "react";
import { docs } from "utils/docs";
Expand All@@ -11,21 +11,27 @@ export interface PopoverPaywallProps {
message: string;
description?: ReactNode;
documentationLink?: string;
licenseType?: "enterprise" | "premium";
}

export const PopoverPaywall: FC<PopoverPaywallProps> = ({
message,
description,
documentationLink,
licenseType = "enterprise",
}) => {
return (
<div css={styles.root}>
<div
css={[
styles.root,
(theme) => ({
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
border: `1px solid ${theme.branding.border}`,
}),
]}
>
<div>
<Stack direction="row" alignItems="center" css={{ marginBottom: 18 }}>
<h5 css={styles.title}>{message}</h5>
{licenseType === "premium" ?<PremiumBadge /> : <EnterpriseBadge />}
<PremiumBadge />
</Stack>

{description && <p css={styles.description}>{description}</p>}
Expand All@@ -38,26 +44,21 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
Read the documentation
</Link>
</div>
<div css={styles.separator}></div>
<div css={styles.separator} />
<Stack direction="column" alignItems="center" spacing={2}>
<ul css={styles.featureList}>
<li css={styles.feature}>
<FeatureIcon />Template access control
<FeatureIcon />High availability & workspace proxies
</li>
<li css={styles.feature}>
<FeatureIcon />User groups
<FeatureIcon />Multi-org & role-based access control
</li>
<li css={styles.feature}>
<FeatureIcon />24 hour support
<FeatureIcon />24x7 global support with SLA
</li>
<li css={styles.feature}>
<FeatureIcon />Audit logs
<FeatureIcon />Unlimited Git & external auth integrations
</li>
{licenseType === "premium" && (
<li css={styles.feature}>
<FeatureIcon /> Organizations
</li>
)}
</ul>
<Button
href={docs("/enterprise")}
Expand All@@ -67,15 +68,23 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
variant="outlined"
color="neutral"
>
Learn about{licenseType === "premium" ? "Premium" : "Enterprise"}
Learn about Premium
</Button>
</Stack>
</div>
);
};

const FeatureIcon: FC = () => {
return <TaskAltIcon css={styles.featureIcon} />;
return (
<TaskAltIcon
css={[
(theme) => ({
color: theme.branding.border,
}),
]}
/>
);
};

const styles = {
Expand All@@ -85,8 +94,6 @@ const styles = {
alignItems: "center",
maxWidth: 600,
padding: "24px 36px",
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
border: `1px solid ${theme.roles.active.fill.outline}`,
borderRadius: 8,
gap: 18,
}),
Expand DownExpand Up@@ -118,10 +125,6 @@ const styles = {
fontSize: 13,
fontWeight: 500,
},
featureIcon: (theme) => ({
color: theme.roles.active.fill.outline,
fontSize: "1.5em",
}),
feature: {
display: "flex",
alignItems: "center",
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/AuditPage/AuditPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -138,7 +138,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
<Cond>
<Paywall
message="Audit logs"
description="Audit logs allow you to monitor user operations on your deployment. You need anEnterprise license to use this feature."
description="Audit logs allow you to monitor user operations on your deployment. You need anPremium license to use this feature."
documentationLink={docs("/admin/audit-logs")}
/>
</Cond>
Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,8 +5,8 @@ import type { UpdateAppearanceConfig } from "api/typesGenerated";
import {
Badges,
DisabledBadge,
EnterpriseBadge,
EntitledBadge,
PremiumBadge,
} from "components/Badges/Badges";
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
import {
Expand DownExpand Up@@ -64,13 +64,13 @@ export const AppearanceSettingsPageView: FC<
<Popover mode="hover">
<PopoverTrigger>
<span>
<EnterpriseBadge />
<PremiumBadge />
</span>
</PopoverTrigger>
<PopoverContent css={{ transform: "translateY(-28px)" }}>
<PopoverPaywall
message="Appearance"
description="Withan Enterprise license, you can customize the appearance of your deployment."
description="Witha Premium license, you can customize the appearance of your deployment."
documentationLink="https://coder.com/docs/admin/appearance"
/>
</PopoverContent>
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp