From 93fe8e4d740c4b194b99a32cba2a13949a54370c Mon Sep 17 00:00:00 2001 From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com> Date: Thu, 4 Feb 2021 23:59:24 -0500 Subject: [PATCH 1/6] Removed selected styles for the days with .DayPicker-Day--outside class names --- client/components/common/ReactDayPicker/Styles.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/components/common/ReactDayPicker/Styles.jsx b/client/components/common/ReactDayPicker/Styles.jsx index 1fd1390a1..0c9e2495d 100644 --- a/client/components/common/ReactDayPicker/Styles.jsx +++ b/client/components/common/ReactDayPicker/Styles.jsx @@ -50,7 +50,7 @@ const Styles = ({ range }) => { color: #a8a8a8; } - /* Day cel hover */ + /* Day cell hover */ .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover { @@ -88,10 +88,10 @@ const Styles = ({ range }) => { left: 1.5rem; } - /*Rounded border with volume for selected start end days */ + /*Rounded border with volume for selected start and end days */ - .Range .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected:before, - .Range .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected:before { + .Range .DayPicker-Day.DayPicker-Day--start.DayPicker-Day--selected:not(.DayPicker-Day--outside):before, + .Range .DayPicker-Day.DayPicker-Day--end.DayPicker-Day--selected:not(.DayPicker-Day--outside):before { content: ""; position: absolute; border: 2px solid white; @@ -129,7 +129,7 @@ const Styles = ({ range }) => { } - /* Layout styling, Initial styling was table based. See doc: */ + /* Layout styling, Initial styling was table based. See docs: */ /* https://react-day-picker.js.org/examples/selected-range-enter */ .Range .DayPicker-Caption, From b59bbef85db7042737f55d8af9fa8724dabc2021 Mon Sep 17 00:00:00 2001 From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com> Date: Fri, 5 Feb 2021 00:02:23 -0500 Subject: [PATCH 2/6] Added displayName to static children of the selector box. Name prop was being uglified on production build. --- client/components/common/SelectorBox.jsx | 26 +++++++++++------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/client/components/common/SelectorBox.jsx b/client/components/common/SelectorBox.jsx index 9e79ec595..48ca1b01f 100644 --- a/client/components/common/SelectorBox.jsx +++ b/client/components/common/SelectorBox.jsx @@ -18,26 +18,19 @@ const useStyles = makeStyles(theme => ({ header: { backgroundColor: theme.palette.primary.dark, color: theme.palette.text.primary, - padding: 5, - paddingLeft: 10, - fontSize: '1rem', + padding: theme.gaps.xs, + paddingLeft: theme.gaps.sm, marginBottom: 2, - borderRadius: 5, + borderRadius: theme.borderRadius.sm, }, content: { - borderRadius: 5, + borderRadius: theme.borderRadius.sm, backgroundColor: theme.palette.primary.dark, - padding: '10px 10px', + padding: theme.gaps.sm, }, headerAction: { margin: 'auto', }, - headerTitle: { - marginLeft: 10, - fontSize: 20, - fontWeight: 600, - letterSpacing: '2px', - }, button: { padding: '0 0 0 5px', '&:hover': { @@ -74,7 +67,8 @@ const SelectorBox = ({ }; const renderDisplay = () => { - const element = children.find(child => child.type.name === 'Display'); + const element = children.find(child => child.type.displayName === 'Display'); + return ( ); }; + const renderCollapse = () => { - const element = children.find(child => child.type.name === 'Collapse'); + const element = children.find(child => child.type.displayName === 'Collapse'); return element; }; + return ( @@ -135,6 +131,7 @@ function Display({ children }) { return
{children}
; } +Display.displayName = "Display" Display.propTypes = { children: PropTypes.node, }; @@ -153,6 +150,7 @@ function Collapse({ children }) { ); } +Collapse.displayName = "Collapse" Collapse.propTypes = { children: PropTypes.node, }; From 698bf341ccf1e6b550bad23c90564945039e3103 Mon Sep 17 00:00:00 2001 From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com> Date: Fri, 5 Feb 2021 00:04:54 -0500 Subject: [PATCH 3/6] Assigned coordinates to the calendar wrapper on every render --- client/components/common/DatePicker/DatePicker.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx index d45a3a11a..02294192c 100644 --- a/client/components/common/DatePicker/DatePicker.jsx +++ b/client/components/common/DatePicker/DatePicker.jsx @@ -97,17 +97,16 @@ const DatePicker = ({ setSelectedDays(() => dates); }, [dates]); - useEffect(() => { + const getCoordinates = () => { if (ref.current) { const { left, top, height } = ref.current.getClientRects()[0]; const offsetFromSelectorDisplay = 2; - - setCoord(() => ({ + return { left, top: top + height + offsetFromSelectorDisplay, - })); + } } - }, []); + } const toggleCalendar = () => { setShowCalendar(prevState => !prevState); @@ -131,7 +130,7 @@ const DatePicker = ({ > -
+
{showCalendar ? ( Date: Fri, 5 Feb 2021 00:11:52 -0500 Subject: [PATCH 4/6] Removed coord state from date picker component --- client/components/common/DatePicker/DatePicker.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx index 02294192c..42fafa636 100644 --- a/client/components/common/DatePicker/DatePicker.jsx +++ b/client/components/common/DatePicker/DatePicker.jsx @@ -80,7 +80,6 @@ const renderSelectedDays = (dates, classes, range) => { const DatePicker = ({ dates, onSelect, open, onToggle, range, }) => { - const [coord, setCoord] = useState({}); const [selectedDays, setSelectedDays] = useState(() => dates); const [showCalendar, setShowCalendar] = useState(() => open); const classes = useStyles(); @@ -97,16 +96,17 @@ const DatePicker = ({ setSelectedDays(() => dates); }, [dates]); - const getCoordinates = () => { + const getCoordinates = () => { if (ref.current) { const { left, top, height } = ref.current.getClientRects()[0]; const offsetFromSelectorDisplay = 2; return { left, top: top + height + offsetFromSelectorDisplay, - } + }; } - } + return {} + }; const toggleCalendar = () => { setShowCalendar(prevState => !prevState); From 03c5d683ed89d3de9c6bc8421535dd729092e432 Mon Sep 17 00:00:00 2001 From: Rufat Aliyev <46456022+rufataliy@users.noreply.github.com> Date: Fri, 5 Feb 2021 00:13:35 -0500 Subject: [PATCH 5/6] Changed filter header title typograpy variant to h1 --- client/components/FilterMenu/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/client/components/FilterMenu/index.js b/client/components/FilterMenu/index.js index d579d29af..8d68e7697 100644 --- a/client/components/FilterMenu/index.js +++ b/client/components/FilterMenu/index.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'proptypes'; import { connect } from 'react-redux'; import { toggleMenu as reduxToggleMenu } from '@reducers/ui'; -import DateSelector from '@components/DateSelector'; +import DateSelector from '@components/DateSelector/DateSelector'; import Card from '@material-ui/core/Card'; import CardHeader from '@material-ui/core/CardHeader'; import CardContent from '@material-ui/core/CardContent'; @@ -33,11 +33,14 @@ const useStyles = makeStyles(theme => ({ margin: 'auto', }, headerTitle: { + ...theme.typography.h1, marginLeft: theme.gaps.xs, - fontSize: 20, - fontWeight: 600, letterSpacing: '2px', }, + headerContent: { + display: 'flex', + alignItems: 'center', + }, button: { padding: theme.gaps.xs, paddingRight: 0, @@ -63,13 +66,14 @@ const FilterMenu = ({ toggleMenu }) => { root: classes.header, action: classes.headerAction, }} + disableTypography title={( - <> +
- + FILTERS - +
)} action={( Date: Fri, 5 Feb 2021 00:15:13 -0500 Subject: [PATCH 6/6] Linted --- client/components/common/DatePicker/DatePicker.jsx | 2 +- client/components/common/SelectorBox.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/common/DatePicker/DatePicker.jsx b/client/components/common/DatePicker/DatePicker.jsx index 42fafa636..dfc5c5b26 100644 --- a/client/components/common/DatePicker/DatePicker.jsx +++ b/client/components/common/DatePicker/DatePicker.jsx @@ -105,7 +105,7 @@ const DatePicker = ({ top: top + height + offsetFromSelectorDisplay, }; } - return {} + return {}; }; const toggleCalendar = () => { diff --git a/client/components/common/SelectorBox.jsx b/client/components/common/SelectorBox.jsx index 48ca1b01f..88a836956 100644 --- a/client/components/common/SelectorBox.jsx +++ b/client/components/common/SelectorBox.jsx @@ -131,7 +131,7 @@ function Display({ children }) { return
{children}
; } -Display.displayName = "Display" +Display.displayName = 'Display'; Display.propTypes = { children: PropTypes.node, }; @@ -150,7 +150,7 @@ function Collapse({ children }) { ); } -Collapse.displayName = "Collapse" +Collapse.displayName = 'Collapse'; Collapse.propTypes = { children: PropTypes.node, };