Skip to content
This repository was archived by the owner on Jan 16, 2022. It is now read-only.

Commit 4d10a19

Browse files
priscilawebdevpriscilawebdev
committed
feat(style): added dark mode
1 parent 8c2800e commit 4d10a19

File tree

40 files changed

+350
-186
lines changed

40 files changed

+350
-186
lines changed

‎src/App/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import AppRoute, { history } from './AppRoute';
1919
import loadDayJSLocale from './load-dayjs-locale';
2020

2121
const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
22-
backgroundColor: theme && theme.palette.white,
22+
backgroundColor: theme?.palette.background.default,
2323
}));
2424

2525
const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({

‎src/App/__snapshots__/App.test.tsx.snap‎

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
exports[`<App /> should display the Header component 1`] = `
44
.emotion-78 {
5-
background-color: #fff;
5+
background-color: #1A202C;
66
}
77
88
.emotion-24 {
9-
background-color: #4b5e40;
9+
background-color: #253341;
1010
min-height: 60px;
1111
display: -webkit-box;
1212
display: -webkit-flex;
@@ -153,9 +153,9 @@ exports[`<App /> should display the Header component 1`] = `
153153
}
154154
155155
.emotion-76 {
156-
background: #f9f9f9;
156+
background: #253341;
157157
border-top: 1px solid #e3e3e3;
158-
color: #999999;
158+
color: #fff;
159159
font-size: 14px;
160160
padding: 20px;
161161
}
@@ -322,7 +322,7 @@ exports[`<App /> should display the Header component 1`] = `
322322
margin: 0 0 30px 0;
323323
border-radius: 25px;
324324
box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
325-
background: #f7f8f6;
325+
background: #000;
326326
}
327327
328328
.emotion-26 {
@@ -353,7 +353,7 @@ exports[`<App /> should display the Header component 1`] = `
353353
}
354354
355355
.emotion-30 {
356-
color: #4b5e40;
356+
color: #fff;
357357
}
358358
359359
<div
@@ -522,6 +522,33 @@ exports[`<App /> should display the Header component 1`] = `
522522
class="MuiTouchRipple-root"
523523
/>
524524
</button>
525+
<button
526+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
527+
tabindex="0"
528+
type="button"
529+
>
530+
<span
531+
class="MuiIconButton-label"
532+
>
533+
<svg
534+
aria-hidden="true"
535+
class="MuiSvgIcon-root"
536+
focusable="false"
537+
role="presentation"
538+
viewBox="0 0 24 24"
539+
>
540+
<path
541+
d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
542+
/>
543+
<path
544+
d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
545+
/>
546+
</svg>
547+
</span>
548+
<span
549+
class="MuiTouchRipple-root"
550+
/>
551+
</button>
525552
<button
526553
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
527554
data-testid="header--button-login"
@@ -702,11 +729,11 @@ exports[`<App /> should display the Header component 1`] = `
702729

703730
exports[`<App /> should display the Loading component at the beginning 1`] = `
704731
.emotion-68 {
705-
background-color: #fff;
732+
background-color: #1A202C;
706733
}
707734
708735
.emotion-24 {
709-
background-color: #4b5e40;
736+
background-color: #253341;
710737
min-height: 60px;
711738
display: -webkit-box;
712739
display: -webkit-flex;
@@ -853,9 +880,9 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
853880
}
854881
855882
.emotion-66 {
856-
background: #f9f9f9;
883+
background: #253341;
857884
border-top: 1px solid #e3e3e3;
858-
color: #999999;
885+
color: #fff;
859886
font-size: 14px;
860887
padding: 20px;
861888
}
@@ -1176,6 +1203,33 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
11761203
class="MuiTouchRipple-root"
11771204
/>
11781205
</button>
1206+
<button
1207+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
1208+
tabindex="0"
1209+
type="button"
1210+
>
1211+
<span
1212+
class="MuiIconButton-label"
1213+
>
1214+
<svg
1215+
aria-hidden="true"
1216+
class="MuiSvgIcon-root"
1217+
focusable="false"
1218+
role="presentation"
1219+
viewBox="0 0 24 24"
1220+
>
1221+
<path
1222+
d="M11.1 12.08c-2.33-4.51-.5-8.48.53-10.07C6.27 2.2 1.98 6.59 1.98 12c0 .14.02.28.02.42.62-.27 1.29-.42 2-.42 1.66 0 3.18.83 4.1 2.15 1.67.48 2.9 2.02 2.9 3.85 0 1.52-.87 2.83-2.12 3.51.98.32 2.03.5 3.11.5 3.5 0 6.58-1.8 8.37-4.52-2.36.23-6.98-.97-9.26-5.41z"
1223+
/>
1224+
<path
1225+
d="M7 16h-.18C6.4 14.84 5.3 14 4 14c-1.66 0-3 1.34-3 3s1.34 3 3 3h3c1.1 0 2-.9 2-2s-.9-2-2-2z"
1226+
/>
1227+
</svg>
1228+
</span>
1229+
<span
1230+
class="MuiTouchRipple-root"
1231+
/>
1232+
</button>
11791233
<button
11801234
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
11811235
data-testid="header--button-login"

‎src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`<ActionBar /> component should render the component in default state 1`] = `
44
.emotion-0 {
5-
background-color: #4b5e40;
5+
background-color: #253341;
66
color: #fff;
77
margin-right: 10px;
88
}

‎src/components/DetailContainer/DetailContainerTabs.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
44

55
import { default as MuiTabs } from '../../muiComponents/Tabs';
66
import Tab from '../../muiComponents/Tab';
7+
import { Theme } from '../../design-tokens/theme';
78

89
interface Props {
910
onChange: (event, newValue) => void;
@@ -14,12 +15,7 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
1415
const { t } = useTranslation();
1516

1617
return (
17-
<Tabs
18-
indicatorColor={'primary'}
19-
onChange={onChange}
20-
textColor={'primary'}
21-
value={tabPosition}
22-
variant={'fullWidth'}>
18+
<Tabs color={'primary'} indicatorColor={'primary'} onChange={onChange} value={tabPosition} variant={'fullWidth'}>
2319
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
2420
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
2521
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
@@ -30,6 +26,6 @@ const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
3026

3127
export default DetailContainerTabs;
3228

33-
const Tabs = styled(MuiTabs)({
29+
const Tabs = styled(MuiTabs)<{ theme?: Theme }>({
3430
marginBottom: 16,
3531
});

‎src/components/DetailContainer/__snapshots__/DetailContainer.test.tsx.snap‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ exports[`DetailContainer renders correctly 1`] = `
1010
>
1111
<div
1212
class="MuiTabs-root emotion-0 emotion-1"
13+
color="primary"
1314
>
1415
<div
1516
class="MuiTabs-scroller MuiTabs-fixed"
@@ -21,7 +22,7 @@ exports[`DetailContainer renders correctly 1`] = `
2122
>
2223
<button
2324
aria-selected="true"
24-
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
25+
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit Mui-selected MuiTab-fullWidth"
2526
data-testid="readme-tab"
2627
id="readme-tab"
2728
role="tab"
@@ -39,7 +40,7 @@ exports[`DetailContainer renders correctly 1`] = `
3940
</button>
4041
<button
4142
aria-selected="false"
42-
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
43+
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
4344
data-testid="dependencies-tab"
4445
id="dependencies-tab"
4546
role="tab"
@@ -57,7 +58,7 @@ exports[`DetailContainer renders correctly 1`] = `
5758
</button>
5859
<button
5960
aria-selected="false"
60-
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
61+
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
6162
data-testid="versions-tab"
6263
id="versions-tab"
6364
role="tab"
@@ -75,7 +76,7 @@ exports[`DetailContainer renders correctly 1`] = `
7576
</button>
7677
<button
7778
aria-selected="false"
78-
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
79+
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit MuiTab-fullWidth"
7980
data-testid="uplinks-tab"
8081
id="uplinks-tab"
8182
role="tab"

‎src/components/DetailSidebar/DetailSidebar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,6 @@ import { Theme } from '../../design-tokens/theme';
1515
import DetailSidebarTitle from './DetailSidebarTitle';
1616
import DetailSidebarFundButton from './DetailSidebarFundButton';
1717

18-
const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
19-
padding: theme.spacing(3, 2),
20-
}));
21-
2218
const DetailSidebar: React.FC = () => {
2319
const detailContext = useContext(DetailContext);
2420

@@ -50,3 +46,7 @@ const DetailSidebar: React.FC = () => {
5046
};
5147

5248
export default DetailSidebar;
49+
50+
const StyledPaper = styled(Paper)<{ theme?: Theme }>(({ theme }) => ({
51+
padding: theme?.spacing(3, 2),
52+
}));

‎src/components/DetailSidebar/DetailSidebarTitle.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,6 @@ interface Props {
1313
isLatest: boolean;
1414
}
1515

16-
const StyledHeading = styled(Heading)({
17-
fontSize: '1rem',
18-
fontWeight: 700,
19-
});
20-
21-
const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
22-
color: theme && theme.palette.text.secondary,
23-
}));
24-
2516
const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
2617
const { t } = useTranslation();
2718
return (
@@ -36,3 +27,12 @@ const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version
3627
};
3728

3829
export default DetailSidebarTitle;
30+
31+
const StyledHeading = styled(Heading)({
32+
fontSize: '1rem',
33+
fontWeight: 700,
34+
});
35+
36+
const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
37+
color: theme && theme.palette.text.secondary,
38+
}));

‎src/components/Developers/__snapshots__/Developers.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ exports[`test Developers should render the component for contributors with items
9393
margin="10px 0 10px 0"
9494
>
9595
<div
96-
className="MuiBox-root MuiBox-root-60 emotion-8 emotion-9"
96+
className="MuiBox-root MuiBox-root-91 emotion-8 emotion-9"
9797
>
9898
<ForwardRef(ToolTip)
9999
key="[email protected]"

‎src/components/Footer/__snapshots__/Footer.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
exports[`<Footer /> component should load the initial state of Footer component 1`] = `
44
.emotion-38 {
5-
background: #f9f9f9;
5+
background: #253341;
66
border-top: 1px solid #e3e3e3;
7-
color: #999999;
7+
color: #fff;
88
font-size: 14px;
99
padding: 20px;
1010
}

‎src/components/Footer/styles.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
33
import Icon from '../Icon/Icon';
44
import { Theme } from '../../design-tokens/theme';
55

6-
export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
7-
background: props.theme && props.theme.palette.snow,
8-
borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
9-
color: props.theme && props.theme.palette.nobel01,
6+
export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
7+
background: theme?.palette.type === 'dark' ? theme?.palette.primary.main : theme?.palette.snow,
8+
borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
9+
color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
1010
fontSize: '14px',
1111
padding: '20px',
1212
}));

0 commit comments

Comments
 (0)
⚡