nickzuber/meteorite
1
1
Fork 0
mirror of https://github.com/nickzuber/meteorite.git synced 2024-08-16 15:00:26 +03:00
Code Issues Packages Projects Releases Wiki Activity

Finish dark mode

Browse Source
This commit is contained in:
Nicholas Zuber 2019-12-12 22:37:16 -05:00
parent 2bdcc179a7
commit eaa59451e6
2 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/NotificationsRedesign/redesign/Scene.js
View File

@ -354,25 +354,25 @@ export default function Scene ({
});
readStatistics = readStatistics.map(n => parseInt(n, 10));
// const lastWeekStats = readStatistics.slice(0, 7);
// const thisWeekStats = readStatistics.slice(7);
const lastWeekStats = readStatistics.slice(0, 7);
const thisWeekStats = readStatistics.slice(7);
// Faux stats for pretty screenshots.
const lastWeekStats = [4, 2, 7, 4, 5, 8, 1];
const thisWeekStats = [7, 8, 5, 6, 4, 9, 12];
// const lastWeekStats = [4, 2, 7, 4, 5, 8, 1];
// const thisWeekStats = [7, 8, 5, 6, 4, 9, 12];
const percentageDeltaToday = getPercentageDelta(counts.cur, counts.prev);
const highestRepoReadCount = Object.values(reposReadCounts).reduce((h, c) => Math.max(h, c), 0);
const colorOfRepoCount = createColorOfScore(0, highestRepoReadCount);
const data = [
{name: 'Sunday', cur: thisWeekStats[0], prev: lastWeekStats[0]},
// {name: 'Sunday', cur: thisWeekStats[0], prev: lastWeekStats[0]},
{name: 'Monday', cur: thisWeekStats[1], prev: lastWeekStats[1]},
{name: 'Tuesday', cur: thisWeekStats[2], prev: lastWeekStats[2]},
{name: 'Wednesday', cur: thisWeekStats[3], prev: lastWeekStats[3]},
{name: 'Thursday', cur: thisWeekStats[4], prev: lastWeekStats[4]},
{name: 'Friday', cur: thisWeekStats[5], prev: lastWeekStats[5]},
{name: 'Saturday', cur: thisWeekStats[6], prev: lastWeekStats[6]},
// {name: 'Saturday', cur: thisWeekStats[6], prev: lastWeekStats[6]},
];
// Global event listeners for things like the dropdowns & popups.
@ -625,6 +625,14 @@ export default function Scene ({
<h2>Reload notifications</h2>
<p>Manually fetch new notifications instead of waiting for the sync</p>
</optimized.div>
<optimized.div onClick={event => {
event.stopPropagation();
setDarkMode(mode => !mode);
setDropdownOpen(false);
}}>
<h2>{darkMode ? 'Disable' : 'Enable'} dark mode</h2>
<p>Turn {darkMode ? 'on' : 'off'} the dark mode theme for this page</p>
</optimized.div>
<optimized.div onClick={event => {
event.stopPropagation();
const response = window.confirm('Are you sure you want to mark all your notifications as read?');
@ -685,8 +693,12 @@ export default function Scene ({
{unreadCount > 0 && (
<span css={css`
transition: all 200ms ease;
background: ${view === View.UNREAD ? ThemeColor(darkMode) : '#bfc5d1'};
background: ${view === View.UNREAD
? ThemeColor(darkMode)
: darkMode ? DarkTheme.Gray : '#bfc5d1'
};
color: ${WHITE};
transition: background 200ms ease;
font-size: 9px;
margin: 0 6px;
padding: 2px 6px;
@ -708,8 +720,12 @@ export default function Scene ({
{readCount > 0 && (
<span css={css`
transition: all 200ms ease;
background: ${view === View.READ ? ThemeColor(darkMode) : '#bfc5d1'};
background: ${view === View.READ
? ThemeColor(darkMode)
: darkMode ? DarkTheme.Gray : '#bfc5d1'
};
color: ${WHITE};
transition: background 200ms ease;
font-size: 9px;
margin: 0 6px;
padding: 2px 6px;
@ -731,8 +747,12 @@ export default function Scene ({
{archivedCount > 0 && (
<span css={css`
transition: all 200ms ease;
background: ${view === View.ARCHIVED ? ThemeColor(darkMode) : '#bfc5d1'};
background: ${view === View.ARCHIVED
? ThemeColor(darkMode)
: darkMode ? DarkTheme.Gray : '#bfc5d1'
};
color: ${WHITE};
transition: background 200ms ease;
font-size: 9px;
margin: 0 6px;
padding: 2px 6px;
@ -905,7 +925,7 @@ export default function Scene ({
{/* Footer links */}
<Row css={css`
height: calc(100% - ${COLLAPSED_WIDTH});
background: #2f343e;
background: ${darkMode ? DarkTheme.Primary : '#2f343e'};
`}>
<MenuContainerItem expand={menuOpen}>
</MenuContainerItem>
@ -918,7 +938,7 @@ export default function Scene ({
span {
display: inline-block;
font-size: 11px;
color: #37352f52;
color: ${darkMode ? DarkTheme.Gray : '#37352f52'};
margin: 0 12px;
font-weight: 500;
}
@ -926,14 +946,14 @@ export default function Scene ({
display: inline-block;
text-decoration: underline;
font-size: 11px;
color: #37352f52;
color: ${darkMode ? DarkTheme.Gray : '#37352f52'};
margin: 0 12px;
font-weight: 500;
cursor: pointer;
text-underline-position: under;
transition: all 200ms ease;
&:hover {
color: #37352faa;
color: ${darkMode ? DarkTheme.Gray + 'aa' : '#37352f52'};
}
}
`}>

17
src/pages/NotificationsRedesign/redesign/ui/ui.js
View File

@ -416,7 +416,7 @@ export const InteractionSection = enhance(styled('ul')`
`);
export const InteractionMenu = enhance(styled('div')(p => `
height: ${p.show ? 345 : 0}px;
height: ${p.show ? (5 * 85 + 5) : 0}px;
opacity: ${p.show ? 1 : 0};
top: 32px;
left: 72px;
@ -804,9 +804,9 @@ export const NotificationIconWrapper = enhance(styled('div')`
transform: scale(.65);
`);
export const IconLink = enhance(styled('span')`
export const IconLink = enhance(styled('span')(p => `
position: relative;
cursor: ${props => props.disabled ? 'default' : 'pointer'};
cursor: ${p.disabled ? 'default' : 'pointer'};
display: inline-flex;
justify-content: center;
align-items: center;
@ -816,7 +816,10 @@ export const IconLink = enhance(styled('span')`
width: 40px;
transition: all 150ms ease;
i {
color: ${props => props.disabled ? '#bfc5d1' : 'inherit'};
color: ${p.disabled
? p.dark ? DarkTheme.Gray : '#bfc5d1'
: p.dark ? WHITE : 'inherit'
};
}
&:before {
content: "";
@ -832,12 +835,12 @@ export const IconLink = enhance(styled('span')`
transform: scale(0);
}
&:hover:before {
transform: ${props => props.disabled ? 'scale(0)' : 'scale(1)'};
transform: ${p.disabled ? 'scale(0)' : 'scale(1)'};
}
&:active:before {
background: ${props => props.disabled ? '#BFC5D122' : '#BFC5D144'};;
background: ${p.disabled ? '#BFC5D122' : '#BFC5D144'};
}
`);
`));
export const Divider = enhance(styled('div')`
position: relative;