diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts new file mode 100644 index 00000000000..4ea52e23a78 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/elements.ts @@ -0,0 +1,79 @@ +import styled, { + StyledComponent, + StyledComponentInnerOtherProps, +} from 'styled-components'; +import css from '@styled-system/css'; + +export const Container = styled.div( + css({ + '.tippy-content': { + width: '200px', + backgroundColor: 'grays.500', + border: '1px solid', + borderColor: 'grays.600', + padding: 4, + borderRadius: 'medium', + whiteSpace: 'normal', + }, + }) +); + +export const Element = styled.div<{ + margin?: number; + marginX?: number; + marginBottom?: number; +}>(props => + css({ + margin: props.margin || null, + marginX: props.marginX || null, + marginBottom: props.marginBottom || null, + }) +); + +export const Text = styled(Element)<{ + color?: string; + size?: string; + align?: string; +}>(props => + css({ + color: props.color || 'white', + fontSize: props.size || 'inherit', + textAlign: props.align || 'left', + }) +); + +export const Link = styled.a( + css({ + color: 'blues.300', + textDecoration: 'none', + }) +); + +export const Select = styled(Element).attrs({ as: 'select' })(({ theme }) => + css({ + width: '100%', + backgroundColor: 'grays.800', + color: 'white', + borderColor: 'grays.600', + padding: 2, + height: 24, + boxSizing: 'border-box', + fontFamily: 'body', + transition: 'background', + transitionDuration: theme.speeds[2], + ':hover': { + backgroundColor: 'grays.700', + }, + ':disabled': { + opacity: 0.5, + cursor: 'not-allowed', + ':hover': { + backgroundColor: 'grays.800', + }, + }, + }) +) as StyledComponent< + 'select', + any, + StyledComponentInnerOtherProps +>; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx new file mode 100644 index 00000000000..695d179812c --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/icons.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +export const Public = () => ( + + + +); + +export const Unlisted = () => ( + + + +); + +export const Private = () => ( + + + +); diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx new file mode 100644 index 00000000000..fbde8ad6287 --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/PrivacyTooltip/index.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { useOvermind } from 'app/overmind'; +import { ThemeProvider } from 'styled-components'; +import Tooltip from '@codesandbox/common/lib/components/Tooltip'; +import theme from '@codesandbox/common/lib/design-language/theme'; +import { Container, Text, Link, Select } from './elements'; +import * as Icons from './icons'; + +export const PrivacyTooltip = () => { + const { + actions: { + workspace: { sandboxPrivacyChanged }, + }, + state: { + user, + editor: { + currentSandbox: { privacy }, + }, + }, + } = useOvermind(); + + const config = { + 0: { + description: 'Everyone can see this Sandbox', + icon: , + }, + 1: { + description: + 'Only people with a private link are able to see this Sandbox', + icon: , + }, + 2: { + description: 'Only you can see this Sandbox.', + icon: , + }, + }; + + const onChange = event => { + const value = event.target.value; + sandboxPrivacyChanged(Number(value) as 0 | 1 | 2); + }; + + return ( + + + + + {user && user.subscription ? ( + 'Adjust privacy settings.' + ) : ( + <> + You can change privacy of a sandbox as a Pro. +
+ Upgrade to Pro + + )} + + + + + {config[privacy].description} + + + } + > + {config[privacy].icon} + + + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx index 9454f24c972..74b1f3de430 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx @@ -11,8 +11,8 @@ import React, { useState, } from 'react'; import { useSpring, animated } from 'react-spring'; - import { useOvermind } from 'app/overmind'; +import { PrivacyTooltip } from '../PrivacyTooltip'; import { Container, @@ -109,7 +109,6 @@ export const SandboxName: FunctionComponent = () => { )} - {updatingName ? (
{ )} + {owned && !updatingName ? : null} + {currentSandbox.customTemplate ? ( { right: 0, bottom: bottomOffset, height: statusBar ? 'auto' : 'calc(100% - 3.5rem)', - zIndex: 999999, + zIndex: 9, }} >