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

Commit d29aa05

Browse files
priscilawebdevpriscilawebdev
authored
fix(styles): Updated dark colors (#455)
* ref(styles): updated dark colors * updated snaps
1 parent 1e1c088 commit d29aa05

File tree

14 files changed

+92
-70
lines changed

14 files changed

+92
-70
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ exports[`<App /> should display the Header component 1`] = `
77
88
.emotion-24 {
99
background-color: #4b5e40;
10+
color: #fff;
1011
min-height: 60px;
1112
display: -webkit-box;
1213
display: -webkit-flex;
@@ -731,6 +732,7 @@ exports[`<App /> should display the Loading component at the beginning 1`] = `
731732
732733
.emotion-24 {
733734
background-color: #4b5e40;
735+
color: #fff;
734736
min-height: 60px;
735737
display: -webkit-box;
736738
display: -webkit-flex;

‎src/components/ActionBar/ActionBarAction.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,14 @@ import { Theme } from '../../design-tokens/theme';
1212

1313
import downloadTarball from './download-tarball';
1414

15-
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
16-
backgroundColor: props.theme && props.theme.palette.primary.main,
17-
color: props.theme && props.theme.palette.white,
15+
export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(({ theme }) => ({
16+
backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
17+
color: theme?.palette.white,
1818
marginRight: 10,
19+
':hover': {
20+
color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
21+
background: theme?.palette.white,
22+
},
1923
}));
2024

2125
type ActionType = 'VISIT_HOMEPAGE' | 'OPEN_AN_ISSUE' | 'DOWNLOAD_TARBALL';

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ exports[`<ActionBar /> component should render the component in default state 1`
77
margin-right: 10px;
88
}
99
10+
.emotion-0:hover {
11+
color: #4b5e40;
12+
background: #fff;
13+
}
14+
1015
<div
1116
class="MuiBox-root MuiBox-root-2"
1217
>

‎src/components/DetailSidebar/DetailSidebarFundButton.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,6 @@ import { isURL } from '../../utils/url';
99
import { Theme } from '../../design-tokens/theme';
1010
import { DetailContext } from '../../pages/Version';
1111

12-
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
13-
marginTop: theme && theme.spacing(1),
14-
marginBottom: theme && theme.spacing(1),
15-
textDecoration: 'none',
16-
display: 'block',
17-
}));
18-
19-
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
20-
color: theme && theme.palette.orange,
21-
}));
22-
23-
const StyledFundStrong = styled('strong')({
24-
marginRight: 3,
25-
});
26-
2712
/* eslint-disable react/jsx-no-bind */
2813
const DetailSidebarFundButton: React.FC = () => {
2914
const detailContext = useContext(DetailContext);
@@ -46,3 +31,18 @@ const DetailSidebarFundButton: React.FC = () => {
4631
};
4732

4833
export default DetailSidebarFundButton;
34+
35+
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
36+
marginTop: theme?.spacing(1),
37+
marginBottom: theme?.spacing(1),
38+
textDecoration: 'none',
39+
display: 'block',
40+
}));
41+
42+
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
43+
color: theme?.palette.orange,
44+
}));
45+
46+
const StyledFundStrong = styled('strong')({
47+
marginRight: 3,
48+
});

‎src/components/Footer/styles.ts‎

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

66
export const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
7-
background: theme?.palette.type === 'dark' ? theme?.palette.primary.main : theme?.palette.snow,
7+
background: theme?.palette.type === 'light' ? theme?.palette.snow : theme?.palette.cyanBlue,
88
borderTop: `1px solid ${theme?.palette.greyGainsboro}`,
99
color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.nobel01,
1010
fontSize: '14px',
@@ -16,21 +16,21 @@ export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
1616
alignItems: 'center',
1717
justifyContent: 'flex-end',
1818
width: '100%',
19-
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
19+
[`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
2020
minWidth: 400,
2121
maxWidth: 800,
2222
margin: 'auto',
2323
justifyContent: 'space-between',
2424
},
25-
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
25+
[`@media (min-width: ${theme?.breakPoints.large}px)`]: {
2626
maxWidth: 1240,
2727
},
2828
}));
2929

3030
export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
3131
alignItems: 'center',
3232
display: 'none',
33-
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
33+
[`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
3434
display: 'flex',
3535
},
3636
}));
@@ -43,9 +43,9 @@ export const Earth = styled(Icon)({
4343
padding: '0 10px',
4444
});
4545

46-
export const Flags = styled('span')<{ theme?: Theme }>(props => ({
46+
export const Flags = styled('span')<{ theme?: Theme }>(({ theme }) => ({
4747
position: 'absolute',
48-
background: props.theme && props.theme.palette.greyAthens,
48+
background: theme?.palette.greyAthens,
4949
padding: '1px 4px',
5050
borderRadius: 3,
5151
height: 20,
@@ -60,7 +60,7 @@ export const Flags = styled('span')<{ theme?: Theme }>(props => ({
6060
left: -4,
6161
marginLeft: -5,
6262
border: '5px solid',
63-
borderColor: `${props.theme && props.theme.palette.greyAthens} transparent transparent transparent`,
63+
borderColor: `${theme?.palette.greyAthens} transparent transparent transparent`,
6464
transform: 'rotate(90deg)',
6565
},
6666
}));
@@ -75,8 +75,8 @@ export const ToolTip = styled('span')({
7575
},
7676
});
7777

78-
export const Love = styled('span')<{ theme?: Theme }>(props => ({
79-
color: props.theme && props.theme.palette.love,
78+
export const Love = styled('span')<{ theme?: Theme }>(({ theme }) => ({
79+
color: theme?.palette.love,
8080
padding: '0 5px',
8181
}));
8282

‎src/components/Header/HeaderMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const HeaderMenu: React.FC<Props> = ({
4747
vertical: 'top',
4848
horizontal: 'right',
4949
}}>
50-
<MenuItem disabled={true}>
50+
<MenuItem>
5151
<HeaderGreetings username={username} />
5252
</MenuItem>
5353
<MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `
44
.emotion-24 {
55
background-color: #4b5e40;
6+
color: #fff;
67
min-height: 60px;
78
display: -webkit-box;
89
display: -webkit-flex;
@@ -360,6 +361,7 @@ exports[`<Header /> component with logged in state should load the component in
360361
exports[`<Header /> component with logged in state should load the component in logged out state 1`] = `
361362
.emotion-24 {
362363
background-color: #4b5e40;
364+
color: #fff;
363365
min-height: 60px;
364366
display: -webkit-box;
365367
display: -webkit-flex;

‎src/components/Header/styles.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,12 @@ export const SearchWrapper = styled('div')({
5454
});
5555

5656
export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
57-
backgroundColor: theme && theme.palette.primary.main,
57+
backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
58+
color: theme?.palette.white,
5859
minHeight: 60,
5960
display: 'flex',
6061
justifyContent: 'center',
61-
[`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
62+
[`@media (min-width: ${theme?.breakPoints.medium}px)`]: css`
6263
${SearchWrapper} {
6364
display: flex;
6465
}
@@ -69,12 +70,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
6970
display: none;
7071
}
7172
`,
72-
[`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
73+
[`@media (min-width: ${theme?.breakPoints.large}px)`]: css`
7374
${InnerNavBar} {
7475
padding: 0 20px;
7576
}
7677
`,
77-
[`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
78+
[`@media (min-width: ${theme?.breakPoints.xlarge}px)`]: css`
7879
${InnerNavBar} {
7980
max-width: 1240px;
8081
width: 100%;
@@ -83,6 +84,6 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
8384
`,
8485
}));
8586

86-
export const StyledLink = styled(Link)<{ theme?: Theme }>(props => ({
87-
color: props.theme && props.theme.palette.white,
87+
export const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
88+
color: theme?.palette.white,
8889
}));

‎src/components/Icon/styles.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ interface CommonStyleProps {
2020
size: Breakpoint;
2121
pointer?: boolean;
2222
}
23+
2324
const commonStyle = ({ size = 'sm', pointer }: CommonStyleProps): object => ({
2425
display: 'inline-block',
2526
cursor: pointer ? 'pointer' : 'default',

‎src/components/LoginDialog/LoginDialogHeader.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,6 @@ import Avatar from '../../muiComponents/Avatar';
99
import Box from '../../muiComponents/Box';
1010
import IconButton from '../../muiComponents/IconButton';
1111
import { Theme } from '../../design-tokens/theme';
12-
13-
const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
14-
margin: theme.spacing(1),
15-
backgroundColor: theme.palette.primary.main,
16-
color: theme.palette.white,
17-
}));
18-
19-
const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
20-
position: 'absolute',
21-
right: theme.spacing() / 2,
22-
top: theme.spacing() / 2,
23-
color: theme.palette.grey[500],
24-
}));
25-
2612
interface Props {
2713
onClose?: () => void;
2814
}
@@ -46,3 +32,16 @@ const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
4632
};
4733

4834
export default LoginDialogHeader;
35+
36+
const StyledAvatar = styled(Avatar)<{ theme?: Theme }>(({ theme }) => ({
37+
margin: theme?.spacing(1),
38+
backgroundColor: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
39+
color: theme?.palette.white,
40+
}));
41+
42+
const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
43+
position: 'absolute',
44+
right: theme?.spacing() / 2,
45+
top: theme?.spacing() / 2,
46+
color: theme?.palette.grey[500],
47+
}));

0 commit comments

Comments
 (0)
⚡