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

Fix bad merge

Browse Source
This commit is contained in:
Nicholas Zuber 2020-11-02 18:43:19 -05:00
parent b59a579e07
commit 1bae149082
3 changed files with 80 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/Home/Scene.js
View File

@ -8,25 +8,14 @@ import {routes} from '../../constants';
import {BasicPageWrapper, forSmallScreens, forMobile} from '../common'; import {BasicPageWrapper, forSmallScreens, forMobile} from '../common';
import WorkflowToggle from './WorkflowToggle'; import WorkflowToggle from './WorkflowToggle';
<<<<<<< HEAD import {ReactComponent as ServerlessSvg} from '../../images/svg/icons/cloud_off.svg';
import {ReactComponent as CloudOffSvg} from '../../images/svg/icons/cloud_off.svg'; import {ReactComponent as DesktopNotificationsSvg} from '../../images/svg/icons/notifications_active.svg';
import {ReactComponent as NotificationsActiveSvg} from '../../images/svg/icons/notifications_active.svg'; import {ReactComponent as AutoSortingSvg} from '../../images/svg/icons/smart_button.svg';
import {ReactComponent as PriorityHighSvg} from '../../images/svg/icons/priority_high.svg'; import {ReactComponent as FilterNoiseSvg} from '../../images/svg/icons/tune.svg';
import {ReactComponent as TuneSvg} from '../../images/svg/icons/tune.svg'; import {ReactComponent as UndoActionsSvg} from '../../images/svg/icons/rule.svg';
import {ReactComponent as SpeedSvg} from '../../images/svg/icons/speed.svg'; import {ReactComponent as LiveUpdatesSvg} from '../../images/svg/icons/gps_fixed.svg';
import {ReactComponent as GpsFixedSvg} from '../../images/svg/icons/gps_fixed.svg'; import {ReactComponent as PinnedNotificationsSvg} from '../../images/svg/icons/push_pin.svg';
import {ReactComponent as WbIridescentSvg} from '../../images/svg/icons/wb_iridescent.svg'; import {ReactComponent as StatisticsSvg} from '../../images/svg/icons/insights.svg';
import {ReactComponent as TimelineSvg} from '../../images/svg/icons/timeline.svg';
=======
import {ReactComponent as ServerlessSvg} from '../../images/svg/icons/cloud_off.svg'
import {ReactComponent as DesktopNotificationsSvg} from '../../images/svg/icons/notifications_active.svg'
import {ReactComponent as AutoSortingSvg} from '../../images/svg/icons/smart_button.svg'
import {ReactComponent as FilterNoiseSvg} from '../../images/svg/icons/tune.svg'
import {ReactComponent as UndoActionsSvg} from '../../images/svg/icons/rule.svg'
import {ReactComponent as LiveUpdatesSvg} from '../../images/svg/icons/gps_fixed.svg'
import {ReactComponent as PinnedNotificationsSvg} from '../../images/svg/icons/push_pin.svg'
import {ReactComponent as StatisticsSvg} from '../../images/svg/icons/insights.svg'
>>>>>>> 26f9509e06a0d56d65238732438ba817e2b8063a
import ItemPng from '../../images/screenshots/item.png'; import ItemPng from '../../images/screenshots/item.png';
import ItemTwoPng from '../../images/screenshots/item-2.png'; import ItemTwoPng from '../../images/screenshots/item-2.png';
@ -76,10 +65,9 @@ const Container = styled('div')`
${forSmallScreens(` ${forSmallScreens(`
padding-left: 2.5rem; padding-left: 2.5rem;
padding-right: 2.5rem; padding-right: 2.5rem;
`)} `)} ${forMobile(`
${forMobile(`
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
`)} `)};
`; `;
const FlexItem = styled('div')` const FlexItem = styled('div')`
@ -167,7 +155,7 @@ const HeroTitle = styled('h1')`
${forMobile(` ${forMobile(`
font-size: 52px; font-size: 52px;
line-height: 58px; line-height: 58px;
`)} `)};
`; `;
const HeroSubtitle = styled('h1')` const HeroSubtitle = styled('h1')`
@ -184,7 +172,7 @@ const HeroSubtitle = styled('h1')`
margin: 0 auto 32px; margin: 0 auto 32px;
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
`)} `)};
`; `;
const Title = styled('h1')` const Title = styled('h1')`
@ -227,7 +215,7 @@ const HeroLeft = styled(FlexItem)`
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
text-align: center; text-align: center;
`)} `)};
`; `;
const HeroRight = styled(FlexItem)` const HeroRight = styled(FlexItem)`
@ -235,7 +223,7 @@ const HeroRight = styled(FlexItem)`
width: 50%; width: 50%;
${forMobile(` ${forMobile(`
display: none; display: none;
`)} `)};
`; `;
const DotsBackground = styled('div')` const DotsBackground = styled('div')`
@ -244,12 +232,17 @@ const DotsBackground = styled('div')`
width: 100%; width: 100%;
margin-left: -60px; margin-left: -60px;
background: radial-gradient(transparent 50%, #fffefd), background: radial-gradient(transparent 50%, #fffefd),
\url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKElEQVQoU2NkIBIwEqmOgQ4KX715/x/mHDERQbiNGFZTXyGuUKC+rwHAcQwLu0IifQAAAABJRU5ErkJggg==) \url(
data: image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs +
9aaaakeleqvqou2nkibiweqmogq4kx715 / x/mHDERQbiNGFZTXyGuUKC +
rwHAcQwLu0IifQAAAABJRU5ErkJggg==
)
repeat; repeat;
${forMobile(` ${forMobile(`
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
`)} `)};
`; `;
const FooterImageContainer = styled('div')` const FooterImageContainer = styled('div')`
@ -258,11 +251,16 @@ const FooterImageContainer = styled('div')`
width: 100%; width: 100%;
text-align: center; text-align: center;
background: radial-gradient(transparent 50%, ${ALT_BACKGROUND_COLOR}), background: radial-gradient(transparent 50%, ${ALT_BACKGROUND_COLOR}),
\url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKElEQVQoU2NkIBIwEqmOgQ4KX715/x/mHDERQbiNGFZTXyGuUKC+rwHAcQwLu0IifQAAAABJRU5ErkJggg==) \url(
data: image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs +
9aaaakeleqvqou2nkibiweqmogq4kx715 / x/mHDERQbiNGFZTXyGuUKC +
rwHAcQwLu0IifQAAAABJRU5ErkJggg==
)
repeat; repeat;
${forMobile(` ${forMobile(`
display: none; display: none;
`)} `)};
`; `;
const CompanyQuotesContainer = styled('div')` const CompanyQuotesContainer = styled('div')`
@ -274,7 +272,7 @@ const CompanyQuotesContainer = styled('div')`
flex-direction: column; flex-direction: column;
max-width: 300px; max-width: 300px;
margin: 0 auto; margin: 0 auto;
`)} `)};
`; `;
const HorizontalFlexContainer = styled('div')` const HorizontalFlexContainer = styled('div')`
@ -385,7 +383,7 @@ export default function Scene(props) {
css={css` css={css`
${forMobile(` ${forMobile(`
flex-direction: column; flex-direction: column;
`)} `)};
`} `}
> >
<HeroLeft> <HeroLeft>
@ -406,12 +404,12 @@ export default function Scene(props) {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 300px; width: 300px;
`)} `)};
`} `}
> >
<HeroButton <HeroButton
css={css` css={css`
${forMobile(`margin-bottom: 12px;`)} ${forMobile(`margin-bottom: 12px;`)};
`} `}
to={routes.LOGIN} to={routes.LOGIN}
> >
@ -456,7 +454,8 @@ export default function Scene(props) {
</CompanyPerson> </CompanyPerson>
</HorizontalListItem> </HorizontalListItem>
<HorizontalListItem> <HorizontalListItem>
<Quote>{`I've been using it for a bit and it's so useful, especially if you use GitHub for work.`}</Quote> <Quote
>{`I've been using it for a bit and it's so useful, especially if you use GitHub for work.`}</Quote>
<CompanyPerson> <CompanyPerson>
<img src={RobinLogo} /> <img src={RobinLogo} />
<span> <span>
@ -593,15 +592,9 @@ export default function Scene(props) {
<p>{'All of your notifications are processed in real time.'}</p> <p>{'All of your notifications are processed in real time.'}</p>
</FeatureItem> </FeatureItem>
<FeatureItem color={'#fd9446'}> <FeatureItem color={'#fd9446'}>
<<<<<<< HEAD
<WbIridescentSvg />
<h3>{'Reasoning'}</h3>
<p>{"We'll also tell you why you're getting each notification."}</p>
=======
<PinnedNotificationsSvg /> <PinnedNotificationsSvg />
<h3>{'Pinnable'}</h3> <h3>{'Pinnable'}</h3>
<p>{'Keep your important tasks at the top of your list.'}</p> <p>{'Keep your important tasks at the top of your list.'}</p>
>>>>>>> 26f9509e06a0d56d65238732438ba817e2b8063a
</FeatureItem> </FeatureItem>
<FeatureItem color={'#fc46fd'}> <FeatureItem color={'#fc46fd'}>
<StatisticsSvg /> <StatisticsSvg />

71
src/pages/NotificationsRedesign/redesign/FilterSearch.js
View File

@ -30,19 +30,22 @@ function TypedSpan({source, toString, options = {}}) {
.join(' '); .join(' ');
} }
React.useEffect(() => { React.useEffect(
const defaultOptions = { () => {
strings: source.map(toString).map(clean), const defaultOptions = {
startDelay: 100, strings: source.map(toString).map(clean),
typeSpeed: 50, startDelay: 100,
backSpeed: 15, typeSpeed: 50,
backDelay: 3000, backSpeed: 15,
loop: true, backDelay: 3000,
...options loop: true,
}; ...options
typed.current = new Typed(spanRef.current, defaultOptions); };
return () => typed.current.destroy(); typed.current = new Typed(spanRef.current, defaultOptions);
}, [source]); return () => typed.current.destroy();
},
[source]
);
return ( return (
<span <span
@ -218,19 +221,25 @@ export function FilterSearch({
} }
]); ]);
React.useEffect(() => { React.useEffect(
if (notifications.length >= 3) { () => {
const examples = notifications.slice(0, 5); if (notifications.length >= 3) {
setExampleNotifications(examples); const examples = notifications.slice(0, 5);
} setExampleNotifications(examples);
}, [view]); }
},
[view]
);
React.useEffect(() => { React.useEffect(
if (!activeQuery) { () => {
setSearchInput(''); if (!activeQuery) {
setActiveFilter(null); setSearchInput('');
} setActiveFilter(null);
}, [activeQuery]); }
},
[activeQuery]
);
function smartSetSearchInput(input) { function smartSetSearchInput(input) {
const {filter, text} = parseTextForFilter(input, activeFilter); const {filter, text} = parseTextForFilter(input, activeFilter);
@ -269,7 +278,7 @@ export function FilterSearch({
return ( return (
<SearchField innerRef={containerRef}> <SearchField innerRef={containerRef}>
<i className="fas fa-search"></i> <i className="fas fa-search" />
{activeFilter && <FilterTagInline type={activeFilter} />} {activeFilter && <FilterTagInline type={activeFilter} />}
<EnhancedSearchInput <EnhancedSearchInput
innerRef={searchRef} innerRef={searchRef}
@ -285,7 +294,7 @@ export function FilterSearch({
` `
padding-left: 42px; padding-left: 42px;
width: 298px; width: 298px;
`} `};
`} `}
/> />
<DropdownSection <DropdownSection
@ -350,7 +359,9 @@ function DropdownSection({
} }
default: default:
const words = query.split(' '); const words = query.split(' ');
const itemString = `${item.name} ${item.repository}`.toLowerCase(); const itemString = `${item.name} ${
item.repository
}`.toLowerCase();
return words.every(word => itemString.includes(word)); return words.every(word => itemString.includes(word));
} }
} }
@ -387,7 +398,9 @@ function DropdownSection({
))} ))}
{title} {title}
</SuggestionTitle> </SuggestionTitle>
<SuggestionRepo>{`@${notification.repository}`}</SuggestionRepo> <SuggestionRepo>{`@${
notification.repository
}`}</SuggestionRepo>
</Suggestion> </Suggestion>
); );
})} })}

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

@ -691,12 +691,12 @@ function Scene({
}; };
readStatistics = readStatistics.map(n => parseInt(n, 10)); readStatistics = readStatistics.map(n => parseInt(n, 10));
const lastWeekStats = readStatistics.slice(0, 7); // const lastWeekStats = readStatistics.slice(0, 7);
const thisWeekStats = readStatistics.slice(7); // const thisWeekStats = readStatistics.slice(7);
// Faux stats for pretty screenshots. // Faux stats for pretty screenshots.
// const lastWeekStats = [4, 2, 7, 4, 5, 8, 1]; const lastWeekStats = [4, 2, 7, 4, 5, 8, 1];
// const thisWeekStats = [7, 8, 5, 6, 4, 9, 12]; const thisWeekStats = [7, 8, 5, 6, 4, 9, 12];
const percentageDeltaToday = getPercentageDelta(counts.cur, counts.prev); const percentageDeltaToday = getPercentageDelta(counts.cur, counts.prev);
const highestRepoReadCount = Object.values(reposReadCounts).reduce( const highestRepoReadCount = Object.values(reposReadCounts).reduce(