diff --git a/src/pages/Home/Scene.js b/src/pages/Home/Scene.js index 7be420b..1b4bfa9 100644 --- a/src/pages/Home/Scene.js +++ b/src/pages/Home/Scene.js @@ -8,25 +8,14 @@ import {routes} from '../../constants'; import {BasicPageWrapper, forSmallScreens, forMobile} from '../common'; import WorkflowToggle from './WorkflowToggle'; -<<<<<<< HEAD -import {ReactComponent as CloudOffSvg} from '../../images/svg/icons/cloud_off.svg'; -import {ReactComponent as NotificationsActiveSvg} from '../../images/svg/icons/notifications_active.svg'; -import {ReactComponent as PriorityHighSvg} from '../../images/svg/icons/priority_high.svg'; -import {ReactComponent as TuneSvg} from '../../images/svg/icons/tune.svg'; -import {ReactComponent as SpeedSvg} from '../../images/svg/icons/speed.svg'; -import {ReactComponent as GpsFixedSvg} from '../../images/svg/icons/gps_fixed.svg'; -import {ReactComponent as WbIridescentSvg} from '../../images/svg/icons/wb_iridescent.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 {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'; import ItemPng from '../../images/screenshots/item.png'; import ItemTwoPng from '../../images/screenshots/item-2.png'; @@ -76,10 +65,9 @@ const Container = styled('div')` ${forSmallScreens(` padding-left: 2.5rem; padding-right: 2.5rem; - `)} - ${forMobile(` + `)} ${forMobile(` margin-bottom: 2.5rem; - `)} + `)}; `; const FlexItem = styled('div')` @@ -167,7 +155,7 @@ const HeroTitle = styled('h1')` ${forMobile(` font-size: 52px; line-height: 58px; - `)} + `)}; `; const HeroSubtitle = styled('h1')` @@ -184,7 +172,7 @@ const HeroSubtitle = styled('h1')` margin: 0 auto 32px; font-size: 20px; line-height: 24px; - `)} + `)}; `; const Title = styled('h1')` @@ -227,7 +215,7 @@ const HeroLeft = styled(FlexItem)` margin: 0 auto; width: 100%; text-align: center; - `)} + `)}; `; const HeroRight = styled(FlexItem)` @@ -235,7 +223,7 @@ const HeroRight = styled(FlexItem)` width: 50%; ${forMobile(` display: none; - `)} + `)}; `; const DotsBackground = styled('div')` @@ -244,12 +232,17 @@ const DotsBackground = styled('div')` width: 100%; margin-left: -60px; 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; ${forMobile(` width: 90%; margin: 0 auto; - `)} + `)}; `; const FooterImageContainer = styled('div')` @@ -258,11 +251,16 @@ const FooterImageContainer = styled('div')` width: 100%; text-align: center; 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; ${forMobile(` display: none; - `)} + `)}; `; const CompanyQuotesContainer = styled('div')` @@ -274,7 +272,7 @@ const CompanyQuotesContainer = styled('div')` flex-direction: column; max-width: 300px; margin: 0 auto; - `)} + `)}; `; const HorizontalFlexContainer = styled('div')` @@ -385,7 +383,7 @@ export default function Scene(props) { css={css` ${forMobile(` flex-direction: column; - `)} + `)}; `} > @@ -406,12 +404,12 @@ export default function Scene(props) { display: block; margin: 0 auto; width: 300px; - `)} + `)}; `} > @@ -456,7 +454,8 @@ export default function Scene(props) { - {`I've been using it for a bit and it's so useful, especially if you use GitHub for work.`} + {`I've been using it for a bit and it's so useful, especially if you use GitHub for work.`} @@ -593,15 +592,9 @@ export default function Scene(props) {

{'All of your notifications are processed in real time.'}

-<<<<<<< HEAD - -

{'Reasoning'}

-

{"We'll also tell you why you're getting each notification."}

-=======

{'Pinnable'}

{'Keep your important tasks at the top of your list.'}

->>>>>>> 26f9509e06a0d56d65238732438ba817e2b8063a
diff --git a/src/pages/NotificationsRedesign/redesign/FilterSearch.js b/src/pages/NotificationsRedesign/redesign/FilterSearch.js index e6b2d28..10cb47d 100644 --- a/src/pages/NotificationsRedesign/redesign/FilterSearch.js +++ b/src/pages/NotificationsRedesign/redesign/FilterSearch.js @@ -30,19 +30,22 @@ function TypedSpan({source, toString, options = {}}) { .join(' '); } - React.useEffect(() => { - const defaultOptions = { - strings: source.map(toString).map(clean), - startDelay: 100, - typeSpeed: 50, - backSpeed: 15, - backDelay: 3000, - loop: true, - ...options - }; - typed.current = new Typed(spanRef.current, defaultOptions); - return () => typed.current.destroy(); - }, [source]); + React.useEffect( + () => { + const defaultOptions = { + strings: source.map(toString).map(clean), + startDelay: 100, + typeSpeed: 50, + backSpeed: 15, + backDelay: 3000, + loop: true, + ...options + }; + typed.current = new Typed(spanRef.current, defaultOptions); + return () => typed.current.destroy(); + }, + [source] + ); return ( { - if (notifications.length >= 3) { - const examples = notifications.slice(0, 5); - setExampleNotifications(examples); - } - }, [view]); + React.useEffect( + () => { + if (notifications.length >= 3) { + const examples = notifications.slice(0, 5); + setExampleNotifications(examples); + } + }, + [view] + ); - React.useEffect(() => { - if (!activeQuery) { - setSearchInput(''); - setActiveFilter(null); - } - }, [activeQuery]); + React.useEffect( + () => { + if (!activeQuery) { + setSearchInput(''); + setActiveFilter(null); + } + }, + [activeQuery] + ); function smartSetSearchInput(input) { const {filter, text} = parseTextForFilter(input, activeFilter); @@ -269,7 +278,7 @@ export function FilterSearch({ return ( - + {activeFilter && } itemString.includes(word)); } } @@ -387,7 +398,9 @@ function DropdownSection({ ))} {title} - {`@${notification.repository}`} + {`@${ + notification.repository + }`} ); })} diff --git a/src/pages/NotificationsRedesign/redesign/Scene.js b/src/pages/NotificationsRedesign/redesign/Scene.js index eb273d5..4d47818 100644 --- a/src/pages/NotificationsRedesign/redesign/Scene.js +++ b/src/pages/NotificationsRedesign/redesign/Scene.js @@ -691,12 +691,12 @@ 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(