Add Pro buttons (codesandbox#3172)

* Add Pro buttons

* WIP

* Apply new icons

* Redirect to pricing if you're no subscribed user

* Remove unncessary dependency

Author: CompuIves

packages/app/src/app/pages/Patron/index.tsx

@@ -21,8 +21,9 @@ const Patron: React.FC = () => {
   }
   // don't send them away before authentication
   if (hasLoadedApp && user) {
-    if (
-      !user.subscription || // if no subscription, get pro
+    if (!user.subscription) {
+      location.href = '/pricing'; // if no subscription, to pricing with you!
+    } else if (
       user.subscription.plan !== 'patron' // if subscription but not patron, go to pro
     ) {
       location.href = '/pro';

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons/GetIconURL.js

@@ -1,9 +1,9 @@
-import folderSvg from '@codesandbox/common/lib/components/icons/folder.svg';
-import folderOpenSvg from '@codesandbox/common/lib/components/icons/folder-open.svg';
-import fileSvg from '@codesandbox/common/lib/components/icons/file.svg';
-import imageSvg from '@codesandbox/common/lib/components/icons/image.svg';
-import codesandboxSvg from '@codesandbox/common/lib/components/icons/codesandbox.svg';
-import nowSvg from '@codesandbox/common/lib/components/icons/now.svg';
+import folderSvg from '@codesandbox/common/lib/icons/folder.svg';
+import folderOpenSvg from '@codesandbox/common/lib/icons/folder-open.svg';
+import fileSvg from '@codesandbox/common/lib/icons/file.svg';
+import imageSvg from '@codesandbox/common/lib/icons/image.svg';
+import codesandboxSvg from '@codesandbox/common/lib/icons/codesandbox.svg';
+import nowSvg from '@codesandbox/common/lib/icons/now.svg';
 
 function imageExists(url) {
   return new Promise((resolve, reject) => {

packages/app/src/app/pages/common/UserMenu/Menu/ProIcon.tsx

@@ -0,0 +1,22 @@
+// TODO; move this to a dynamic version used in the pro page
+import React from 'react';
+import IconBase from 'react-icons/lib/IconBase';
+
+export const ProIcon = props => (
+  <IconBase viewBox="0 0 58 26" {...props}>
+    <rect
+      x="1.20896"
+      y="1.20896"
+      width="55.3731"
+      height="23.7313"
+      rx="2.37313"
+      fill="#535BCF"
+      stroke="#151515"
+      strokeWidth="1.58209"
+    />
+    <path
+      d="M15.6856 19.5822H18.3616V15.4786H20.6111C23.5219 15.4786 25.2153 13.742 25.2153 11.2144C25.2153 8.69911 23.5528 6.92544 20.6791 6.92544H15.6856V19.5822ZM18.3616 13.3341V9.11317H20.1662C21.7112 9.11317 22.459 9.95366 22.459 11.2144C22.459 12.4689 21.7112 13.3341 20.1785 13.3341H18.3616ZM26.9039 19.5822H29.5366V14.2117C29.5366 13.0437 30.3895 12.2403 31.5513 12.2403C31.916 12.2403 32.4165 12.3021 32.6637 12.3824V10.0464C32.4289 9.99074 32.1014 9.95366 31.8356 9.95366C30.7726 9.95366 29.9013 10.5717 29.5552 11.7459H29.4563V10.0896H26.9039V19.5822ZM37.872 19.7676C40.7519 19.7676 42.5441 17.7961 42.5441 14.873C42.5441 11.9313 40.7519 9.96602 37.872 9.96602C34.9921 9.96602 33.1999 11.9313 33.1999 14.873C33.1999 17.7961 34.9921 19.7676 37.872 19.7676ZM37.8843 17.7281C36.5556 17.7281 35.8758 16.5107 35.8758 14.8544C35.8758 13.1982 36.5556 11.9745 37.8843 11.9745C39.1883 11.9745 39.8681 13.1982 39.8681 14.8544C39.8681 16.5107 39.1883 17.7281 37.8843 17.7281Z"
+      fill="white"
+    />
+  </IconBase>
+);

packages/app/src/app/pages/common/UserMenu/Menu/elements.tsx

@@ -6,41 +6,48 @@ import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   ${({ theme }) => css`
-    background-color: ${theme.background4};
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75);
+    background-color: #151515;
+    box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.12),
+      0px 8px 16px rgba(0, 0, 0, 0.24);
 
     ${delayEffect(0)};
 
-    min-width: 200px;
+    min-width: 225px;
+    padding: 1rem 0;
+    border-radius: 4px;
 
     z-index: 20;
   `};
 `;
 
 const StyledMenu = styled(Link)<{ href?: string; to?: string }>`
   ${({ theme }) => css`
+    font-family: 'Inter', 'Roboto', sans-serif;
+    font-weight: 400;
     transition: 0.3s ease all;
     display: flex;
     align-items: center;
-    font-size: 0.875rem;
-    padding: 0.5rem 1rem;
+    font-size: 13px;
+    padding: 0.25rem 1rem;
 
     text-decoration: none;
 
-    color: rgba(255, 255, 255, 0.8);
+    color: #999;
     border: 0;
     outline: 0 !important;
     box-sizing: border-box;
-    border-left: 2px solid transparent;
     background-color: transparent;
     width: 100%;
 
     cursor: pointer;
 
+    svg {
+      color: white;
+    }
+
     &:focus {
-      border-color: ${theme.secondary};
       color: white;
-      background-color: ${theme.secondary.clearer(0.9)};
+      background-color: #242424;
       outline: 0;
     }
   `};
@@ -66,13 +73,16 @@ export const Icon = styled.span`
   margin-right: 0.75rem;
   display: inline-flex;
   align-items: center;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
 `;
 
 export const Separator = styled(MenuSeparator)`
   ${({ theme }) => css`
     height: 1px;
     width: 100%;
-    margin: 0.5rem 0;
+    margin: 0.25rem 0;
 
     background-color: ${theme.background};
     border: 0;

packages/app/src/app/pages/common/UserMenu/Menu/index.tsx

@@ -1,24 +1,25 @@
 import React, { useEffect } from 'react';
 
-import UserIcon from 'react-icons/lib/ti/user';
-import ExitIcon from 'react-icons/lib/md/exit-to-app';
-import FolderIcon from 'react-icons/lib/md/folder';
-import SettingsIcon from 'react-icons/lib/md/settings';
-import SearchIcon from 'react-icons/lib/go/search';
-import BookIcon from 'react-icons/lib/md/library-books';
-
 import {
   profileUrl,
   patronUrl,
   curatorUrl,
   dashboardUrl,
   searchUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
-import PatronBadge from '@codesandbox/common/lib/utils/badges/PatronBadge';
+
 import track from '@codesandbox/common/lib/utils/analytics';
 import { MenuItem, Menu as ReakitMenu, MenuStateReturn } from 'reakit/Menu';
-// @ts-ignore
-import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
+import { DocumentationIcon } from '@codesandbox/common/lib/components/icons/Documentation';
+import { SearchIcon } from '@codesandbox/common/lib/components/icons/Search';
+import { FolderIcon } from '@codesandbox/common/lib/components/icons/Folder';
+import { CogIcon } from '@codesandbox/common/lib/components/icons/Cog';
+import { UserIcon } from '@codesandbox/common/lib/components/icons/User';
+import { ExitIcon } from '@codesandbox/common/lib/components/icons/Exit';
+import { ChatIcon } from '@codesandbox/common/lib/components/icons/Chat';
+import { PatronIcon } from '@codesandbox/common/lib/components/icons/Patron';
+import { DashboardIcon } from '@codesandbox/common/lib/components/icons/Dashboard';
+import { CuratorIcon } from '@codesandbox/common/lib/components/icons/Curator';
 
 import {
   Container,
@@ -28,7 +29,7 @@ import {
   ItemA,
   ItemButton,
 } from './elements';
-import { FeedbackIcon } from './FeedbackIcon';
+import { ProIcon } from './ProIcon';
 
 interface Props {
   username: string;
@@ -39,6 +40,8 @@ interface Props {
   signOut: () => void;
   menuProps: MenuStateReturn;
   showPatron: boolean;
+  showManageSubscription: boolean;
+  showBecomePro: boolean;
 }
 
 export const Menu = ({
@@ -50,6 +53,8 @@ export const Menu = ({
   signOut,
   menuProps,
   showPatron,
+  showManageSubscription,
+  showBecomePro,
 }: Props) => {
   useEffect(() => {
     if (menuProps.visible) {
@@ -71,14 +76,14 @@ export const Menu = ({
 
         <MenuItem {...menuProps} to={dashboardUrl()} as={ItemLink}>
           <Icon>
-            <InfoIcon />
+            <DashboardIcon />
           </Icon>
           Dashboard
         </MenuItem>
 
         <MenuItem {...menuProps} href="/docs" as={ItemA}>
           <Icon>
-            <BookIcon />
+            <DocumentationIcon />
           </Icon>
           Documentation
         </MenuItem>
@@ -93,9 +98,7 @@ export const Menu = ({
         {curator && (
           <MenuItem {...menuProps} to={curatorUrl()} as={ItemLink}>
             <Icon>
-              <span style={{ width: 14 }} role="img" aria-label="Star">
-                ✨
-              </span>
+              <CuratorIcon />
             </Icon>
             Curator Dashboard
           </MenuItem>
@@ -104,17 +107,32 @@ export const Menu = ({
         {showPatron && (
           <MenuItem {...menuProps} to={patronUrl()} as={ItemLink}>
             <Icon>
-              <PatronBadge
-                style={{ width: 24, margin: '-6px -5px' }}
-                size={24}
-              />
+              <PatronIcon />
             </Icon>
             Patron Page
           </MenuItem>
         )}
 
+        {showBecomePro && (
+          <MenuItem {...menuProps} as={ItemA} href="/pricing">
+            <Icon>
+              <ProIcon />
+            </Icon>
+            Upgrade to Pro
+          </MenuItem>
+        )}
+
         <Separator {...menuProps} />
 
+        {showManageSubscription && (
+          <MenuItem {...menuProps} as={ItemA} href="/pro">
+            <Icon>
+              <ProIcon />
+            </Icon>
+            Manage Subscription
+          </MenuItem>
+        )}
+
         <MenuItem
           {...menuProps}
           as={ItemButton}
@@ -128,7 +146,7 @@ export const Menu = ({
 
         <MenuItem {...menuProps} as={ItemButton} onClick={openPreferences}>
           <Icon>
-            <SettingsIcon />
+            <CogIcon />
           </Icon>
           Preferences
         </MenuItem>
@@ -137,7 +155,7 @@ export const Menu = ({
 
         <MenuItem {...menuProps} as={ItemButton} onClick={openFeedback}>
           <Icon>
-            <FeedbackIcon />
+            <ChatIcon />
           </Icon>
           Submit Feedback
         </MenuItem>

packages/app/src/app/pages/common/UserMenu/index.tsx

@@ -44,6 +44,10 @@ export const UserMenu: FunctionComponent = () => {
         openFeedback={() => modalOpened({ modal: 'feedback' })}
         menuProps={menu}
         showPatron={user.subscription && user.subscription.plan === 'patron'}
+        showManageSubscription={
+          user.subscription && user.subscription.plan === 'pro'
+        }
+        showBecomePro={!user.subscription}
       />
     </Relative>
   );

packages/common/src/components/icons/Chat.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import IconBase from 'react-icons/IconBase';
+
+export const ChatIcon = props => (
+  <IconBase fill="none" viewBox="0 0 24 24" {...props}>
+    <g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
+      <path d="m3.00015 10.9353c-.0001-.0135-.00015-.027-.00015-.0406 0-2.87766 2.33283-5.2105 5.21053-5.2105 2.87767 0 5.21057 2.33284 5.21057 5.2105 0 2.8777-2.3328 5.2105-5.21042 5.2106h-5.21053z" />
+      <path
+        d="m12.1553 15.6235c1.3526-1.1296 2.2131-2.8287 2.2131-4.7287 0-.6412-.098-1.25959-.2799-1.84088.6513-.33712 1.3907-.52755 2.1746-.52755 2.6161 0 4.7369 2.12073 4.7369 4.73683l-.0001.0223v4.7145h-4.7144l-.0224.0001c-1.7566 0-3.29-.9563-4.1078-2.3766z"
+        fillOpacity=".4"
+      />
+    </g>
+  </IconBase>
+);

packages/common/src/components/icons/Cog.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import IconBase from 'react-icons/IconBase';
+
+export const CogIcon = props => (
+  <IconBase fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      clipRule="evenodd"
+      d="m13.0028 4h-2.4615l-.3702 1.48071c-.60683.16989-1.17922.42223-1.70433.74419l-1.25338-.75203-1.74056 1.74057.75204 1.2534c-.36472.59489-.6401 1.25046-.80748 1.94806l-1.41739.3543v2.4616l1.41741.3543c.16737.6976.44276 1.3532.80748 1.9481l-.75204 1.2534 1.74056 1.7406 1.2534-.7521c.59489.3647 1.25047.6401 1.94809.8075l.3543 1.4174h2.4616l.3543-1.4174c.6976-.1674 1.3532-.4428 1.9481-.8075l1.2534.752 1.7405-1.7405-.752-1.2534c.3647-.5949.6401-1.2505.8075-1.9481l1.4174-.3543v-2.4616l-1.4174-.3543c-.1674-.69762-.4427-1.35321-.8075-1.9481l.7521-1.25338-1.7406-1.74057-1.2534.75202c-.663-.40649-1.4014-.70202-2.1893-.86072zm-1.0028 11.4286c1.8936 0 3.4286-1.5351 3.4286-3.4286 0-1.8936-1.535-3.42858-3.4286-3.42858-1.8935 0-3.42856 1.53498-3.42856 3.42858 0 1.8935 1.53506 3.4286 3.42856 3.4286z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </IconBase>
+);

packages/common/src/components/icons/Curator.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import IconBase from 'react-icons/IconBase';
+
+export const CuratorIcon = props => (
+  <IconBase fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      d="m11.2374 7.49606c.0925 0 .1495-.05696.1637-.14951.2137-1.17486.2065-1.18909 1.4383-1.43119.0855-.01424.1496-.0712.1496-.17089 0-.09255-.0641-.14952-.1567-.16376-1.2247-.23496-1.1962-.25633-1.4312-1.43118-.0142-.09256-.0712-.14953-.1637-.14953-.0926 0-.1495.05697-.1638.14953-.235 1.16061-.1994 1.18197-1.43829 1.43118-.09256.01424-.14952.07121-.14952.16376 0 .09969.05696.15665.15665.17089 1.23176.2421 1.21756.25633 1.43116 1.43119.0143.09255.0712.14951.1638.14951zm-3.45337 4.98424c.14241 0 .25633-.0997.27058-.2421.24921-1.8869.30617-1.894 2.27139-2.26427.1353-.02135.2421-.12104.2421-.27056 0-.14241-.1068-.24922-.2421-.27058-1.95811-.27057-2.02218-.32753-2.27139-2.25001-.01425-.14953-.12105-.24922-.27058-.24922s-.2492.09969-.27056.25633c-.22785 1.87977-.32042 1.87977-2.27138 2.2429-.13528.02848-.24209.12817-.24209.27058 0 .15664.10681.24921.27769.27056 1.92248.30617 2.00793.36317 2.23578 2.24997.02136.1567.12103.2564.27056.2564zm4.93437 7.8679c.2065 0 .3631-.1495.3916-.3631.5198-3.8592 1.0609-4.4645 4.8774-4.8846.2279-.0284.3773-.1922.3773-.3987s-.1494-.3703-.3773-.3987c-3.7951-.4415-4.3362-1.0111-4.8774-4.88456-.0285-.2136-.1851-.36313-.3916-.36313s-.356.14953-.3916.36313c-.5127 3.85926-1.0609 4.46446-4.87742 4.88456-.22073.0284-.37738.1922-.37738.3987s.15665.3703.37738.3987c3.78802.5056 4.31492 1.0111 4.87742 4.8846.0356.2136.1922.3631.3916.3631z"
+      fill="currentColor"
+    />
+  </IconBase>
+);

packages/common/src/components/icons/Dashboard.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import IconBase from 'react-icons/IconBase';
+
+export const DashboardIcon = props => (
+  <IconBase fill="none" viewBox="0 0 24 24" {...props}>
+    <path
+      clipRule="evenodd"
+      d="m4 3c-.55228 0-1 .44771-1 1v7.8999c0 .5523.44771 1 1 1h6.0999c.5523 0 1-.4477 1-1v-7.8999c0-.55228-.4477-1-1-1zm9.9 0c-.5523 0-1 .44771-1 1v4.29994c0 .55228.4477 1 1 1h6.0999c.5523 0 1-.44772 1-1v-4.29994c0-.55228-.4477-1-1-1zm-1 9.0999c0-.5522.4477-1 1-1h6.0999c.5523 0 1 .4478 1 1v7.8999c0 .5523-.4477 1-1 1h-6.0999c-.5523 0-1-.4477-1-1zm-8.9 2.5999c-.55228 0-1 .4477-1 1v4.2999c0 .5523.44771 1 1 1h6.0999c.5523 0 1-.4477 1-1v-4.2999c0-.5523-.4477-1-1-1z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </IconBase>
+);