diff --git a/packages/app/src/app/pages/Pro/upgrade/utils.ts b/packages/app/src/app/hooks/useCreateCustomerPortal.ts
similarity index 89%
rename from packages/app/src/app/pages/Pro/upgrade/utils.ts
rename to packages/app/src/app/hooks/useCreateCustomerPortal.ts
index 838047cf11e..b98f53a4802 100644
--- a/packages/app/src/app/pages/Pro/upgrade/utils.ts
+++ b/packages/app/src/app/hooks/useCreateCustomerPortal.ts
@@ -2,9 +2,6 @@ import { useState } from 'react';
import { useEffects } from 'app/overmind';
import { dashboard } from '@codesandbox/common/lib/utils/url-generator';
-export type WorkspaceType = 'pro' | 'teamPro';
-export type Interval = 'month' | 'year';
-
export const useCreateCustomerPortal = (
activeTeam: string
): [boolean, () => void] => {
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx
index a57888c135f..cbc60070db3 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx
@@ -1,10 +1,9 @@
import React from 'react';
-import { Stack, Text, Link, Button } from '@codesandbox/components';
-import { useAppState } from 'app/overmind';
import { format } from 'date-fns';
-
import css from '@styled-system/css';
-import { useCreateCustomerPortal } from 'app/pages/Pro/upgrade/utils';
+import { Stack, Text, Link, Button } from '@codesandbox/components';
+import { useAppState } from 'app/overmind';
+import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal';
export const Stripe = () => {
const { activeTeam, activeTeamInfo: team } = useAppState();
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx
index f586eea1737..ea1605a4ef1 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx
@@ -4,7 +4,7 @@ import { useAppState } from 'app/overmind';
import { format } from 'date-fns';
import css from '@styled-system/css';
-import { useCreateCustomerPortal } from '../../../../../../Pro/upgrade/utils';
+import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal';
export const Stripe = () => {
const { activeTeam, activeTeamInfo: team } = useAppState();
diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx
index c9804ee47c4..ee0eb52fbc7 100644
--- a/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx
+++ b/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Stack, Text, Button } from '@codesandbox/components';
-import { useCreateCustomerPortal } from 'app/pages/Pro/upgrade/utils';
+import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal';
export const TrialExpiring: React.FC<{
activeTeam: string;
diff --git a/packages/app/src/app/pages/Pro/legacy.tsx b/packages/app/src/app/pages/Pro/Legacy.tsx
similarity index 100%
rename from packages/app/src/app/pages/Pro/legacy.tsx
rename to packages/app/src/app/pages/Pro/Legacy.tsx
diff --git a/packages/app/src/app/pages/Pro/upgrade.tsx b/packages/app/src/app/pages/Pro/Upgrade.tsx
similarity index 82%
rename from packages/app/src/app/pages/Pro/upgrade.tsx
rename to packages/app/src/app/pages/Pro/Upgrade.tsx
index ea50495f5c2..0e2372437de 100644
--- a/packages/app/src/app/pages/Pro/upgrade.tsx
+++ b/packages/app/src/app/pages/Pro/Upgrade.tsx
@@ -4,19 +4,21 @@ import {
ThemeProvider,
Stack,
Element,
+ Link as StyledLink,
Tooltip,
+ Icon,
Text,
} from '@codesandbox/components';
import { Helmet } from 'react-helmet';
import { Navigation } from 'app/pages/common/Navigation';
+import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal';
import css from '@styled-system/css';
import { sortBy } from 'lodash-es';
import { AnimatePresence, motion } from 'framer-motion';
import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useHistory, Link as RouterLink } from 'react-router-dom';
import { formatCurrency } from 'app/utils/currency';
import { useCreateCheckout } from 'app/hooks';
-import { useCreateCustomerPortal, Interval } from './upgrade/utils';
import {
UpgradeButton,
Caption,
@@ -24,14 +26,16 @@ import {
BoxPlaceholder,
SwitchPlan,
PlanTitle,
-} from './upgrade/elements';
-import { Switcher } from './upgrade/Switcher';
+} from './components/elements';
+import { Switcher } from './components/Switcher';
import {
SubscriptionPaymentProvider,
SubscriptionType,
TeamMemberAuthorization,
} from '../../graphql/types';
+type Interval = 'month' | 'year';
+
export const ProUpgrade = () => {
const {
pro: { pageMounted },
@@ -329,32 +333,46 @@ export const ProUpgrade = () => {
exit={{ opacity: 0, height: 0 }}
style={{ overflow: 'hidden' }}
>
-
-
- Paid seats
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ Go to team settings
+
+
+
+
+
{amountPaidMember}
diff --git a/packages/app/src/app/pages/Pro/upgrade/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx
similarity index 85%
rename from packages/app/src/app/pages/Pro/upgrade/Switcher.tsx
rename to packages/app/src/app/pages/Pro/components/Switcher.tsx
index 643cb78d657..fb2a71a4972 100644
--- a/packages/app/src/app/pages/Pro/upgrade/Switcher.tsx
+++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx
@@ -3,6 +3,7 @@ import React from 'react';
import { TeamAvatar } from 'app/components/TeamAvatar';
import styled from 'styled-components';
import {
+ Badge,
Stack,
Avatar,
Menu,
@@ -41,6 +42,10 @@ export const Switcher: React.FC<{
const members = activeTeamInfo.users.length;
const memberLabel = `${members} member${members > 1 ? 's' : ''}`;
const isPersonalWorkspace = workspaceType === 'pro';
+ const isFreeWorkspace = ![
+ SubscriptionType.TeamPro,
+ SubscriptionType.PersonalPro,
+ ].includes(activeTeamInfo.subscription?.type);
return (
-
-
- {activeTeamInfo.name}
-
+
+
+
+ {activeTeamInfo.name}
+
+ {isFreeWorkspace && Free}
+
+
- {isPersonalWorkspace ? 'personal team' : memberLabel}
+ {isPersonalWorkspace ? 'Personal' : memberLabel}
@@ -102,7 +111,7 @@ export const Switcher: React.FC<{
onSelect={() => setActiveTeam(workspace)}
key={workspace.id}
disabled={disabled}
- style={{ opacity: disabled ? 0.5 : 1 }}
+ style={{ opacity: disabled ? 0.5 : 1, padding: 0 }}
>
-
- {workspace.name}
- {isPro && Pro}
+
+
+ {workspace.id === personalWorkspaceId
+ ? 'Personal'
+ : workspace.name}
+
- {workspace.id === personalWorkspaceId
- ? 'personal team'
- : seatsLabel}
+ {workspace.id !== personalWorkspaceId
+ ? seatsLabel
+ : null}
- {workspace.id === activeTeamInfo.id && (
-
- )}
+ {!isPro && Free}
);
@@ -247,17 +257,17 @@ const Dialog = styled.div`
`;
const WorkspaceName = styled.p`
- font-family: 'TWKEverett', sans-serif;
+ font-family: 'Inter', sans-serif;
font-style: normal;
+ font-size: 28px;
font-weight: 500;
+ line-height: 36px;
+ letter-spacing: -0.01em;
margin: 0;
- position: relative;
text-align: left;
color: #e5e5e5;
- font-size: 24px;
-
& span::-moz-selection {
-webkit-text-stroke: 1px #e5e5e5;
color: transparent;
@@ -269,15 +279,6 @@ const WorkspaceName = styled.p`
color: transparent;
background: transparent;
}
-
- &:after {
- content: '';
- position: absolute;
- right: -20px;
- top: calc(50% - 4px);
- border: 5px solid transparent;
- border-top: 7px solid white;
- }
`;
const WorkspaceType = styled.p`
@@ -331,18 +332,3 @@ const MenuItem = styled(Menu.Item)`
}
}
`;
-
-const ProBadge = styled.p`
- border-radius: 2px;
- background-color: rgba(229, 229, 229, 0.1);
- color: #c5c5c5;
-
- width: 35px;
- height: 18px;
-
- text-align: center;
- line-height: 18px;
- font-size: 13px;
-
- margin: 0 0 0 8px;
-`;
diff --git a/packages/app/src/app/pages/Pro/upgrade/elements.ts b/packages/app/src/app/pages/Pro/components/elements.ts
similarity index 88%
rename from packages/app/src/app/pages/Pro/upgrade/elements.ts
rename to packages/app/src/app/pages/Pro/components/elements.ts
index 872efdefd4e..a6e25f1087b 100644
--- a/packages/app/src/app/pages/Pro/upgrade/elements.ts
+++ b/packages/app/src/app/pages/Pro/components/elements.ts
@@ -1,16 +1,8 @@
import { Button } from '@codesandbox/components';
-import styled, { createGlobalStyle, css } from 'styled-components';
-
-export const GlobalFonts = createGlobalStyle`
- @font-face {
- font-family: "TWKEverett";
- src: url("/static/fonts/TWKEverett-Medium-web.woff") format("woff"),
- url("/static/fonts/TWKEverett-Medium-web.ttf") format("ttf");
- }
-`;
+import styled, { css } from 'styled-components';
export const PlanTitle = styled.h1`
- font-family: 'TWKEverett', sans-serif;
+ font-family: 'Everett', sans-serif;
font-weight: 500;
letter-spacing: -0.018em;
transition: all 0.6s ease;
@@ -130,7 +122,7 @@ export const SwitchPlan = styled.button`
line-height: 42px;
margin-top: 18px;
margin-bottom: 4px;
- font-family: 'TWKEverett', sans-serif;
+ font-family: 'Everett', sans-serif;
span {
color: #434343;
diff --git a/packages/app/src/app/pages/Pro/index.tsx b/packages/app/src/app/pages/Pro/index.tsx
index cb8abc215ad..25f3f2f88dc 100644
--- a/packages/app/src/app/pages/Pro/index.tsx
+++ b/packages/app/src/app/pages/Pro/index.tsx
@@ -7,8 +7,8 @@ import {
import { useHistory } from 'react-router-dom';
import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
-import { ProLegacy } from './legacy';
-import { ProUpgrade } from './upgrade';
+import { ProLegacy } from './Legacy';
+import { ProUpgrade } from './Upgrade';
export const ProPage: React.FC = () => {
const { pageMounted } = useActions().pro;