From 313a32052bb8b62bb81a29053dc3f88bde305087 Mon Sep 17 00:00:00 2001 From: eduardo aleixo Date: Thu, 5 Aug 2021 21:19:11 -0300 Subject: [PATCH] Improvement/dpr style (#315) * improve the Date Range Picker aesthetics/UX --- .eslintrc | 7 +++- webapp/javascript/components/CheckIcon.jsx | 27 ++++++++++++ .../components/CustomDatePicker.jsx | 17 ++++---- .../javascript/components/DateRangePicker.jsx | 40 ++++++++++-------- webapp/sass/components/button.scss | 37 +++++++++++++++++ webapp/sass/components/daterangepicker.scss | 41 +++++++++++++++++++ webapp/sass/profile.scss | 21 +--------- 7 files changed, 141 insertions(+), 49 deletions(-) create mode 100644 webapp/javascript/components/CheckIcon.jsx create mode 100644 webapp/sass/components/button.scss diff --git a/.eslintrc b/.eslintrc index b01ac537e7..71fc9399f4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,7 +19,12 @@ "react/jsx-one-expression-per-line": ["warn"], "jsx-a11y/mouse-events-have-key-events": ["warn"], "jsx-a11y/click-events-have-key-events": ["warn"], - "jsx-a11y/no-static-element-interactions": ["warn"] + "jsx-a11y/no-static-element-interactions": ["warn"], + "jsx-a11y/label-has-associated-control": [ "error", { + "required": { + "some": [ "nesting", "id" ] + } + }] }, "env": { "browser": true, diff --git a/webapp/javascript/components/CheckIcon.jsx b/webapp/javascript/components/CheckIcon.jsx new file mode 100644 index 0000000000..0ce231056f --- /dev/null +++ b/webapp/javascript/components/CheckIcon.jsx @@ -0,0 +1,27 @@ +import React from "react"; + +// https://www.svgrepo.com/vectors/check/ +export default function CheckIcon() { + return ( + + + + + + ); +} diff --git a/webapp/javascript/components/CustomDatePicker.jsx b/webapp/javascript/components/CustomDatePicker.jsx index df41035dda..b1f2364465 100644 --- a/webapp/javascript/components/CustomDatePicker.jsx +++ b/webapp/javascript/components/CustomDatePicker.jsx @@ -36,11 +36,12 @@ function CustomDatePicker({ setRange, dispatch, setDateRange }) { }, [from, until]); return ( -
+

Custom Date Range

-
-

From:

+
+ { setSelectedDate({ ...selectedDate, from: date }); @@ -52,8 +53,9 @@ function CustomDatePicker({ setRange, dispatch, setDateRange }) { />
-

Until:

+ { setSelectedDate({ ...selectedDate, until: date }); @@ -69,13 +71,8 @@ function CustomDatePicker({ setRange, dispatch, setDateRange }) { {warning &&

Warning: invalid date Range

}
-

Quick Presets

-
- {defaultPresets.map((arr, i) => ( -
- {arr.map((x) => ( - - ))} -
- ))} +
+

Quick Presets

+
+ {defaultPresets.map((arr, i) => ( +
+ {arr.map((x) => ( + + ))} +
+ ))} +