Skip to content

Commit d325b72

Browse files
SaraVieiraSaraVieira
authored
New activity bar Icons (codesandbox#3464)
* create new folder * try * new activity bar * add polçyfill
1 parent 8f4024d commit d325b72

File tree

10 files changed

+390
-92
lines changed

10 files changed

+390
-92
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/Navigation.tsx‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,24 @@ import Tooltip, {
99
SingletonTooltip,
1010
} from '@codesandbox/common/lib/components/Tooltip';
1111
import { TippyProps } from '@tippy.js/react';
12-
import ConfigurationIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/cog.svg';
13-
// @ts-ignore
14-
// eslint-disable-next-line import/no-unresolved
15-
import FilesIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/file-activity-bar.svg';
16-
// @ts-ignore
17-
// eslint-disable-next-line import/no-unresolved
18-
import GitHubIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/github.svg';
19-
// @ts-ignore
20-
// eslint-disable-next-line import/no-unresolved
21-
import LiveIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/live.svg';
22-
// @ts-ignore
23-
// eslint-disable-next-line import/no-unresolved
24-
import RocketIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/rocket.svg';
25-
// @ts-ignore
26-
// eslint-disable-next-line import/no-unresolved
27-
import InfoIcon from '-!svg-react-loader!@codesandbox/common/lib/icons/sandbox.svg';
28-
// @ts-ignore
29-
// eslint-disable-next-line import/no-unresolved
30-
12+
import {
13+
DeployIcon,
14+
ExplorerIcon,
15+
ServerIcon,
16+
GithubIcon,
17+
InfoIcon,
18+
LiveIcon,
19+
SettingsIcon,
20+
} from './icons';
3121
import { Container, IconContainer, Separator } from './elements';
32-
import ServerIcon from './ServerIcon';
3322

3423
const IDS_TO_ICONS = {
3524
project: InfoIcon,
3625
'project-summary': InfoIcon,
37-
files: FilesIcon,
38-
github: GitHubIcon,
39-
deploy: RocketIcon,
40-
config: ConfigurationIcon,
26+
files: ExplorerIcon,
27+
github: GithubIcon,
28+
deploy: DeployIcon,
29+
config: SettingsIcon,
4130
live: LiveIcon,
4231
more: PlusIcon,
4332
server: ServerIcon,
@@ -68,6 +57,8 @@ const IconComponent: FunctionComponent<IconProps> = ({
6857
return (
6958
<Tooltip content={name} singleton={singleton}>
7059
<IconContainer
60+
justify="center"
61+
align="center"
7162
isDisabled={isDisabled}
7263
selected={selected}
7364
as="button"
@@ -96,14 +87,17 @@ export const Navigation: FunctionComponent<Props> = ({
9687
bottomOffset,
9788
}) => {
9889
const { state } = useOvermind();
99-
10090
const shownItems = getWorkspaceItems(state);
10191
const disabledItems = getDisabledItems(state);
10292

10393
return (
10494
<Container
95+
align="center"
96+
direction="vertical"
97+
gap={4}
10598
topOffset={topOffset}
10699
bottomOffset={bottomOffset}
100+
// @ts-ignore
107101
as="nav"
108102
aria-label="Sandbox Navigation"
109103
>

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts‎

Lines changed: 34 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled, { css } from 'styled-components';
2+
import { Stack } from '@codesandbox/components';
23

3-
export const Container = styled.div`
4+
export const Container = styled(Stack)`
45
${({
56
topOffset,
67
bottomOffset,
@@ -14,66 +15,53 @@ export const Container = styled.div`
1415
top: ${topOffset}px;
1516
bottom: ${bottomOffset}px;
1617
left: 0;
17-
display: flex;
18-
flex-direction: column;
19-
width: 3.5rem;
20-
border-right: 1px solid ${theme['activityBar.border'] || 'transparent'};
21-
flex: 0 0 3.5rem;
18+
padding: ${theme.space[2]}px;
19+
border-right: 1px solid ${theme.colors.activityBar.border};
2220
height: 100%;
23-
color: ${theme[`activityBar.inactiveForeground`] ||
24-
css`rgba(255, 255, 255, 0.5)`};
21+
color: ${theme.colors.mutedForeground};
2522
font-size: 1.4rem;
26-
align-items: center;
27-
background-color: ${theme[`activityBar.background`] || css`inherit`};
23+
background-color: ${theme.colors.activityBar.background};
2824
`}
2925
`;
3026

31-
export const IconContainer = styled.div<{
27+
export const IconContainer = styled(Stack)<{
3228
selected: boolean;
3329
isDisabled: boolean;
34-
}>`
35-
display: flex;
36-
justify-content: center;
37-
align-items: center;
38-
transition: 0.3s ease all;
39-
height: 3.5rem;
40-
width: 3.5rem;
41-
font-size: 1.875rem;
42-
color: ${props =>
43-
props.theme[`activityBar.inactiveForeground`] ||
44-
css`rgba(255, 255, 255, 0.5)`};
45-
cursor: pointer;
46-
background: transparent;
47-
border: 0;
48-
appearance: none;
49-
outline: 0;
30+
}>(
31+
props => css`
32+
transition: ${props.theme.speeds[1]}ms ease all;
33+
height: ${props.theme.space[9]}px;
34+
width: ${props.theme.space[10]}px;
35+
color: ${props.theme.colors.activityBar.inactiveForeground};
36+
cursor: pointer;
37+
background: transparent;
38+
border: 0;
39+
border-radius: ${props.theme.radii.small}px;
40+
box-sizing: border-box;
41+
padding: 0;
5042
51-
&:hover {
52-
color: ${props => props.theme[`activityBar.foreground`] || css`white`};
53-
}
43+
&:hover {
44+
background: ${props.theme.colors.activityBar.hoverBackground};
45+
}
5446
55-
${props =>
56-
props.selected &&
57-
css`
58-
color: ${props.theme[`activityBar.foreground`] || css`white`};
59-
`};
47+
${props.selected &&
48+
css`
49+
color: ${props.theme.colors.activityBar.selected};
50+
`};
6051
61-
${props =>
62-
props.isDisabled &&
63-
!props.selected &&
64-
css`
65-
opacity: 0.4;
66-
`}
67-
`;
52+
${props.isDisabled &&
53+
!props.selected &&
54+
css`
55+
opacity: 0.4;
56+
`}
57+
`
58+
);
6859

6960
export const Separator = styled.hr`
7061
width: calc(100% - 20px);
7162
height: 1px;
72-
background-color: ${props =>
73-
props.theme.light ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255,255,255,0.1)'};
74-
63+
background-color: ${props => props.theme.colors.sideBar.border};
7564
margin: 0.25rem 0;
76-
7765
outline: none;
7866
border: none;
7967
`;

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/icons.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
3+
export const CommentsIcon = props => (
4+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
5+
<g fillRule="evenodd" clipRule="evenodd">
6+
<path fill="currentColor" d="M10 14a6 6 0 116 6h-6z" />
7+
<path
8+
fill="#343434"
9+
d="M19.697 19.945a5.265 5.265 0 005.04 3.74H30V18.42a5.263 5.263 0 00-7.021-4.962 6.996 6.996 0 01-3.281 6.486z"
10+
/>
11+
</g>
12+
</svg>
13+
);
14+
15+
export const DeployIcon = props => (
16+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
17+
<path
18+
fill="currentColor"
19+
fillRule="evenodd"
20+
d="M22.467 9.728l-3.287 3.287c-.275.275-.726.257-1.091.124-2.2-.804-6.089 3.174-6.089 3.174l1.579 1.579 2.23-1.505-.651 1.505 3.157 3.157 1.483-.672-1.483 2.251 1.58 1.579s3.96-3.908 3.152-6.11c-.135-.366-.152-.817.123-1.092l3.287-3.287c1.285-1.285 2.368-4.263 1.332-5.3s-4.037.025-5.322 1.31zM12.56 22.486a.607.607 0 00.785.785c1.072-.393 2.877-1.326 2.877-1.326l-2.336-2.337s-.933 1.806-1.326 2.878z"
21+
clipRule="evenodd"
22+
/>
23+
</svg>
24+
);
25+
26+
export const ExplorerIcon = props => (
27+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
28+
<path
29+
fill="currentColor"
30+
fillRule="evenodd"
31+
d="M13 7a1 1 0 011-1h7v6h6v13a1 1 0 01-1 1H14a1 1 0 01-1-1zm9-1l5 5h-5z"
32+
clipRule="evenodd"
33+
/>
34+
</svg>
35+
);
36+
37+
export const ServerIcon = props => (
38+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
39+
<path
40+
fill="currentColor"
41+
fillRule="evenodd"
42+
d="M10.922 7a.922.922 0 00-.922.922v3.156c0 .51.413.922.922.922h18.156c.51 0 .922-.413.922-.922V7.922A.922.922 0 0029.078 7zm.578 1a.5.5 0 000 1h7a.5.5 0 000-1zm-.578 5a.922.922 0 00-.922.922v3.156c0 .51.413.922.922.922h18.156c.51 0 .922-.413.922-.922v-3.156a.922.922 0 00-.922-.922zm.846.857a.5.5 0 100 1h7a.5.5 0 100-1zM10 19.922c0-.51.413-.922.922-.922h18.156c.51 0 .922.413.922.922v3.156c0 .51-.413.922-.922.922H10.922a.922.922 0 01-.922-.922zm1 .578a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5z"
43+
clipRule="evenodd"
44+
/>
45+
</svg>
46+
);
47+
48+
export const GithubIcon = props => (
49+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
50+
<path
51+
fill="currentColor"
52+
d="M17.242 26.224c-.08 0-.169-.008-.267-.026l.04-.446h.396a.39.39 0 00.159-.086.426.426 0 00.125-.241.561.561 0 00.008-.1c0-.242-.003-.468-.006-.771l-.013-1.25c-3.617.668-4.466-1.893-4.5-2.003-.579-1.467-1.371-1.84-1.373-1.841l-.03-.017c-1.826-1.254.21-1.231.217-1.231h.014c1.426.099 2.188 1.424 2.23 1.498.434.749.968 1.117 1.499 1.269.77.22 1.544-.005 2.002-.197.063-.379.167-.706.297-.984.088-.187.188-.352.295-.495-1.382-.196-2.768-.597-3.85-1.514-1.203-1.017-2.019-2.652-2.023-5.314a5.683 5.683 0 01.359-2.036c.23-.607.564-1.152.98-1.634a4.422 4.422 0 01-.227-1.154c-.044-.645.025-1.487.402-2.453l.009-.018s.164-.141.396-.154c.153-.008.385 0 .697.063.608.123 1.54.462 2.826 1.325a12.308 12.308 0 011.563-.317 13.052 13.052 0 013.492-.005c.532.071 1.057.175 1.566.312 2.581-1.744 3.772-1.362 3.776-1.361l.104.031.04.102c.382.966.454 1.806.412 2.45a4.438 4.438 0 01-.223 1.155c.418.48.753 1.023.984 1.63.235.614.363 1.293.364 2.037.004 2.669-.808 4.306-2.009 5.323-1.081.916-2.467 1.317-3.852 1.513.163.213.309.476.423.789.153.42.25.934.251 1.54.002 1.082-.004 2.208-.009 2.953l-.002.748c0 .034.003.07.01.108.018.09.057.176.125.237.037.034.084.061.143.08l.42-.002.042.446c-.1.02-.194.029-.282.03-.086 0-.165-.01-.237-.025l-7.532.013c-.071.015-.148.023-.23.023z"
53+
/>
54+
</svg>
55+
);
56+
57+
export const InfoIcon = props => (
58+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
59+
<path
60+
fill="currentColor"
61+
d="M20.54 25a.681.681 0 00.158-.074l6.174-3.69c.734-.438 1.128-.885 1.128-2.084v-6.444c0-.248-.016-.447-.063-.629l-7.397 4.434zm-8.477-12.921l7.397 4.434V25a.514.514 0 01-.15-.074l-6.182-3.69c-.726-.438-1.128-.885-1.128-2.084v-6.444c0-.248.016-.447.063-.629zM20.004 7c.443 0 .9.143 1.359.406l.068.04 5.567 3.326c.155.088.284.177.394.282l.04.04-7.428 4.426-7.436-4.425c.11-.109.233-.198.378-.286l.063-.037 4.07-2.442h.002l1.488-.883c.434-.262.868-.415 1.296-.443l.071-.003z"
62+
/>
63+
</svg>
64+
);
65+
66+
export const LiveIcon = props => (
67+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
68+
<g fillRule="evenodd" clipRule="evenodd">
69+
<path
70+
fill="#343434"
71+
d="M15.222 19.113c2.193 0 3.976-2.108 4.023-4.533a.981.981 0 00.178-.48.92.92 0 00-.202-.698c-.114-2.225-.684-4.592-3.033-4.876l-.027-.003c-.681-.083-2.23-.27-2.548.665-2.144-.26-2.41 2.012-2.425 3.889-.248.153-.378.513-.297.886a.944.944 0 00.308.528c.005 2.463 1.804 4.622 4.023 4.622zm1.142 7.94v-.041c0-2.049 0-4.18 2.092-5.494-1.288-2.15-12.89-1.578-9.993 5.535z"
72+
/>
73+
<path
74+
fill="currentColor"
75+
d="M30.348 13.247c0 1.05-.374 2.087-.816 2.878-.1.179.08.482.262.786.199.333.398.667.226.839-.47.47-1.582.414-2.482.347-.59.517-1.303.819-2.07.819-.861 0-1.654-.382-2.284-1.022l-.514.24c-1.337-.177-2.162-2.377-1.844-4.914.319-2.537 1.66-4.45 2.997-4.272.307.065.584.15.835.251.575-.474 1.257-.75 1.988-.75 2.045 0 3.702 2.148 3.702 4.798zM18.602 26.85h13.36s.965-6.448-6.76-6.617c-7.726-.168-6.6 6.617-6.6 6.617z"
76+
/>
77+
</g>
78+
</svg>
79+
);
80+
export const SettingsIcon = props => (
81+
<svg width={40} height={32} fill="none" viewBox="0 0 40 32" {...props}>
82+
<path
83+
fill="currentColor"
84+
fillRule="evenodd"
85+
d="M21.253 6h-3.076l-.463 1.85a8.413 8.413 0 00-2.13.931l-1.567-.94-2.176 2.176.94 1.567a8.414 8.414 0 00-1.01 2.435L10 14.462v3.077l1.772.442c.209.872.553 1.692 1.01 2.435l-.94 1.567 2.175 2.176 1.566-.94c.744.456 1.564.8 2.436 1.01L18.46 26h3.077l.443-1.772a8.411 8.411 0 002.435-1.01l1.567.94 2.176-2.175-.94-1.567c.456-.743.8-1.563 1.01-2.435L30 17.538v-3.077l-1.772-.442a8.411 8.411 0 00-1.01-2.436l.94-1.566-2.175-2.176-1.567.94a8.408 8.408 0 00-2.736-1.076zM20 20.286a4.286 4.286 0 100-8.572 4.286 4.286 0 000 8.572z"
86+
clipRule="evenodd"
87+
/>
88+
</svg>
89+
);

0 commit comments

Comments
 (0)