Skip to content

Commit f3f5d5d

Browse files
CompuIvesCompuIves
authored
Add more explore documentation (codesandbox#1387)
* Add more explore documentation * Update packages/homepage/content/docs/4-explore.md Co-Authored-By: CompuIves <[email protected]> * Update packages/homepage/content/docs/4-explore.md Co-Authored-By: CompuIves <[email protected]> * Updates * Change header behaviour * Cleanup * Fix header responsiveness * Remove title from new sandbox * Add explore page link to header * Fix notifications bar * grammar * Grammar updates
1 parent c3d24d4 commit f3f5d5d

File tree

27 files changed

+232
-143
lines changed

27 files changed

+232
-143
lines changed

‎packages/app/src/app/components/Overlay/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ class OverlayComponent extends React.Component {
5959
};
6060

6161
render() {
62-
const { children, Overlay } = this.props;
62+
const { children, Overlay, noHeightAnimation } = this.props;
6363

6464
const isOpen = this.isOpen();
6565

@@ -73,17 +73,17 @@ class OverlayComponent extends React.Component {
7373
<Transition
7474
items={isOpen}
7575
from={{
76-
height: 0,
77-
opacity: 1,
76+
height: noHeightAnimation ? undefined : 0,
77+
opacity: 0.6,
7878
position: 'absolute',
7979
top: 'calc(100% + 1rem)',
8080
right: 0,
8181
zIndex: 10,
8282
overflow: 'hidden',
8383
boxShadow: '0 3px 3px rgba(0, 0, 0, 0.3)',
8484
}}
85-
enter={{ height: 'auto', opacity: 1 }}
86-
leave={{ height: 0, opacity: 0 }}
85+
enter={{ height: noHeightAnimation ? undefined : 'auto', opacity: 1 }}
86+
leave={{ height: noHeightAnimation ? undefined : 0, opacity: 0 }}
8787
native
8888
config={config.fast}
8989
>

‎packages/app/src/app/pages/Dashboard/Sidebar/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class Sidebar extends React.Component {
4242
block
4343
value={store.dashboard.filters.search}
4444
onChange={this.handleSearchChange}
45-
placeholder="Search Sandboxes"
45+
placeholder="Search my sandboxes"
4646
/>
4747
</InputWrapper>
4848

‎packages/app/src/app/pages/Dashboard/elements.js‎

Lines changed: 37 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import styled, { css } from 'styled-components';
2+
import Logo from 'common/components/Logo';
23

34
export const Container = styled.div`
45
height: 100%;
@@ -7,19 +8,48 @@ export const Container = styled.div`
78
color: rgba(255, 255, 255, 0.8);
89
`;
910

10-
export const LoggedInContainer = styled.div`
11+
export const Centered = styled.div`
12+
display: flex;
1113
height: 100vh;
14+
width: 100vw;
15+
align-items: center;
16+
justify-content: center;
17+
`;
18+
19+
export const OffsettedLogo = styled(Logo)`
20+
margin-top: -110px;
21+
margin-bottom: 30px;
22+
color: white;
23+
24+
background-color: ${props => props.theme.background4};
25+
width: 75px;
26+
height: 75px;
27+
28+
padding: 1rem;
29+
border-radius: 8px;
30+
`;
31+
32+
export const LoggedInContainer = styled.div`
1233
display: flex;
1334
justify-content: center;
1435
align-items: center;
15-
font-size: 2rem;
1636
flex-direction: column;
37+
38+
width: 300px;
39+
margin: 0 auto;
40+
41+
padding: 4rem;
42+
border-radius: 4px;
43+
background-color: ${props => props.theme.background};
1744
`;
1845

1946
export const LoggedInTitle = styled.div`
47+
font-size: 1.5rem;
48+
color: ${props => props.theme.new.title};
2049
font-weight: 600;
2150
margin-bottom: 2rem;
22-
color: rgba(255, 255, 255, 0.6);
51+
font-family: Poppins -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
52+
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
2353
`;
2454

2555
export const LoggedInSubTitle = styled.div`
@@ -30,9 +60,10 @@ export const LoggedInSubTitle = styled.div`
3060

3161
export const NavigationContainer = styled.div`
3262
position: absolute;
33-
left: 1rem;
34-
top: 1rem;
35-
right: 1rem;
63+
left: 0;
64+
top: 0;
65+
right: 0;
66+
padding: 1rem;
3667
`;
3768

3869
export const ShowSidebarButton = styled.button`

‎packages/app/src/app/pages/Dashboard/index.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ import SidebarContents from './Sidebar';
1313
import Content from './Content';
1414
import {
1515
Container,
16+
Centered,
1617
Content as ContentContainer,
1718
LoggedInContainer,
1819
LoggedInTitle,
19-
LoggedInSubTitle,
2020
Sidebar,
2121
NavigationContainer,
2222
ShowSidebarButton,
23+
OffsettedLogo,
2324
} from './elements';
2425

2526
class Dashboard extends React.Component {
@@ -77,13 +78,14 @@ class Dashboard extends React.Component {
7778
if (!hasLogIn) {
7879
DashboardContent = (
7980
<Container>
80-
<LoggedInContainer>
81-
<LoggedInTitle>Uh oh!</LoggedInTitle>
82-
<LoggedInSubTitle>
83-
You need to be signed in to access this page.
84-
</LoggedInSubTitle>
85-
<SignInButton style={{ fontSize: '1rem' }} />
86-
</LoggedInContainer>
81+
<Centered>
82+
<LoggedInContainer>
83+
<OffsettedLogo />
84+
<LoggedInTitle>Sign in to CodeSandbox</LoggedInTitle>
85+
86+
<SignInButton big style={{ fontSize: '1rem' }} />
87+
</LoggedInContainer>
88+
</Centered>
8789
</Container>
8890
);
8991
}

‎packages/app/src/app/pages/NewSandbox/index.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Navigation from 'app/pages/common/Navigation';
66
import MaxWidth from 'common/components/flex/MaxWidth';
77
import Centered from 'common/components/flex/Centered';
88
import Margin from 'common/components/spacing/Margin';
9-
import Title from 'app/components/Title';
109
import history from 'app/utils/history';
1110
import { sandboxUrl } from 'common/utils/url-generator';
1211

@@ -27,10 +26,9 @@ class NewSandboxComponent extends React.PureComponent {
2726
<Margin style={{ height: '100%' }} vertical={1.5} horizontal={1.5}>
2827
<Navigation title="New Sandbox" />
2928

30-
<Margin top={9}>
29+
<Margin top={5}>
3130
<Centered horizontal vertical>
32-
<Title>New Sandbox</Title>
33-
<Margin style={{ maxWidth: '100%', width: 950 }} top={2}>
31+
<Margin style={{ maxWidth: '100%', width: 900 }} top={2}>
3432
<NewSandboxModal
3533
createSandbox={this.createSandbox}
3634
width={950}

‎packages/app/src/app/pages/common/Navigation/Notifications/elements.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,27 +47,29 @@ export const NotificationContainer = styled.div`
4747
4848
border-left: 2px solid transparent;
4949
50+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
51+
5052
${props =>
5153
props.read
5254
? css`
53-
border-color: rgba(0, 0, 0, 0.3);
55+
border-left-color: rgba(0, 0, 0, 0.3);
5456
opacity: 0.6;
5557
`
5658
: css`
57-
border-color: ${props.theme.secondary.clearer(0.2)()};
59+
border-left-color: ${props.theme.secondary.clearer(0.2)()};
5860
5961
&:hover {
60-
border-color: ${props.theme.secondary()};
62+
border-left-color: ${props.theme.secondary()};
6163
}
6264
`};
6365
6466
${props =>
6567
props.success &&
6668
css`
67-
border-color: ${props.theme.green.clearer(0.2)()};
69+
border-left-color: ${props.theme.green.clearer(0.2)()};
6870
6971
&:hover {
70-
border-color: ${props.theme.green()};
72+
border-left-color: ${props.theme.green()};
7173
}
7274
`};
7375
`;

‎packages/app/src/app/pages/common/Navigation/Notifications/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const VIEW_QUERY = gql`
1818
me {
1919
notifications(
2020
limit: 20
21-
orderBy: { field: "insertedAt", direction: DESC }
21+
orderBy: { field: "insertedAt", direction: ASC }
2222
) {
2323
id
2424
type
@@ -78,8 +78,7 @@ export default props => (
7878
if (data.me.notifications.length === 0) {
7979
return (
8080
<NoNotifications>
81-
You don
82-
{"'"}t have any notifications
81+
You don{"'"}t have any notifications
8382
</NoNotifications>
8483
);
8584
}

‎packages/app/src/app/pages/common/Navigation/elements.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ export const LogoWithBorder = styled(Logo)`
99

1010
export const Border = styled.hr`
1111
display: inline-block;
12-
height: 28px;
12+
height: 22px;
1313
border: none;
1414
border-right: 1px solid rgba(255, 255, 255, 0.4);
1515
`;
1616

1717
export const Title = styled.h1`
1818
margin-left: 1rem;
19-
font-size: 1.2rem;
19+
font-size: 1.125rem;
2020
color: white;
2121
font-weight: 300;
2222
`;

‎packages/app/src/app/pages/common/Navigation/index.js‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import * as React from 'react';
22
import { inject, observer } from 'mobx-react';
33
import { Link } from 'react-router-dom';
44
import Media from 'react-media';
5-
import { patronUrl, searchUrl } from 'common/utils/url-generator';
5+
import { patronUrl, searchUrl, exploreUrl } from 'common/utils/url-generator';
66

77
import SearchIcon from 'react-icons/lib/go/search';
88
import PlusIcon from 'react-icons/lib/go/plus';
99
import BellIcon from 'react-icons/lib/md/notifications';
10+
import FlameIcon from 'react-icons/lib/go/flame';
1011
import Row from 'common/components/flex/Row';
1112
import Tooltip from 'common/components/Tooltip';
1213
import PatronBadge from '-!svg-react-loader!common/utils/badges/svg/patron-4.svg'; // eslint-disable-line import/no-webpack-loader-syntax
@@ -34,7 +35,7 @@ function Navigation({ signals, store, title, searchNoInput }) {
3435
<Row justifyContent="space-between">
3536
<TitleWrapper>
3637
<a href="/?from-app=1">
37-
<LogoWithBorder height={40} width={40} />
38+
<LogoWithBorder height={35} width={35} />
3839
</a>
3940
<Border width={1} size={500} />
4041
<Title>{title}</Title>
@@ -56,6 +57,15 @@ function Navigation({ signals, store, title, searchNoInput }) {
5657
}
5758
</Media>
5859
</Action>
60+
61+
<Action>
62+
<Tooltip position="bottom" title="Explore Sandboxes">
63+
<a style={{ color: 'white' }} href={exploreUrl()}>
64+
<FlameIcon />
65+
</a>
66+
</Tooltip>
67+
</Action>
68+
5969
{!isPatron && (
6070
<Action>
6171
<Tooltip position="bottom" title="Support CodeSandbox">
@@ -66,26 +76,14 @@ function Navigation({ signals, store, title, searchNoInput }) {
6676
</Action>
6777
)}
6878

69-
<Action
70-
style={{ fontSize: '1.125rem' }}
71-
onClick={() =>
72-
signals.modalOpened({
73-
modal: 'newSandbox',
74-
})
75-
}
76-
>
77-
<Tooltip position="bottom" title="New Sandbox">
78-
<PlusIcon height={35} />
79-
</Tooltip>
80-
</Action>
81-
8279
{user && (
8380
<OverlayComponent
8481
isOpen={store.userNotifications.notificationsOpened}
8582
Overlay={Notifications}
8683
onOpen={signals.userNotifications.notificationsOpened}
8784
onClose={signals.userNotifications.notificationsClosed}
8885
event="Notifications"
86+
noHeightAnimation
8987
>
9088
{open => (
9189
<Action
@@ -100,6 +98,19 @@ function Navigation({ signals, store, title, searchNoInput }) {
10098
)}
10199
</OverlayComponent>
102100
)}
101+
102+
<Action
103+
style={{ fontSize: '1.125rem' }}
104+
onClick={() =>
105+
signals.modalOpened({
106+
modal: 'newSandbox',
107+
})
108+
}
109+
>
110+
<Tooltip position="bottom" title="New Sandbox">
111+
<PlusIcon height={35} />
112+
</Tooltip>
113+
</Action>
103114
</Actions>
104115

105116
{isLoggedIn ? <UserMenu /> : <SignInButton />}

‎packages/app/src/app/pages/common/UserMenu/Menu/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ExitIcon from 'react-icons/lib/md/exit-to-app';
66
import FolderIcon from 'react-icons/lib/md/folder';
77
import SettingsIcon from 'react-icons/lib/md/settings';
88
import BookIcon from 'react-icons/lib/md/library-books';
9+
910
import {
1011
profileUrl,
1112
patronUrl,

0 commit comments

Comments
 (0)