Merge pull request #599 from quentin-keep-going/fix/issue-309

Article filter dialog improvements

Author: MrOrz

components/ListPageControls/BaseFilterOption.tsx

@@ -24,7 +24,11 @@ const useStyles = makeStyles(theme => ({
 
     // Hide border color when not chip and not selected
     borderColor: ({ chip, selected }: StyleProps) =>
-      !chip && !selected ? `transparent` : '',
+      !chip && !selected
+        ? `transparent`
+        : selected
+        ? theme.palette.primary[400]
+        : '',
   },
   /* Chip label */
   label: {

components/ListPageControls/Filters.js

@@ -6,6 +6,7 @@ import Fab from '@material-ui/core/Fab';
 import Dialog from '@material-ui/core/Dialog';
 import FilterListIcon from '@material-ui/icons/FilterList';
 import CloseIcon from '@material-ui/icons/Close';
+import Button from '@material-ui/core/Button';
 
 import cx from 'clsx';
 
@@ -41,6 +42,14 @@ const useStyles = makeStyles(theme => ({
     top: 10,
     color: theme.palette.secondary[100],
   },
+  dialogBottom: {
+    paddingBottom: theme.spacing(3),
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  btnSubmitFilter: {
+    borderRadius: 30,
+  },
 }));
 
 /**
@@ -79,6 +88,16 @@ function Filters({ className, children }) {
           className={classes.closeIcon}
           onClick={() => setFiltersShow(false)}
         />
+        <div className={classes.dialogBottom}>
+          <Button
+            className={classes.btnSubmitFilter}
+            type="submit"
+            data-ga="Submit filters button"
+            color="primary"
+            variant="contained"
+            onClick={() => setFiltersShow(false)}
+          >{t`Submit`}</Button>
+        </div>
       </Dialog>
     </>
   );

components/ReportPage/__snapshots__/ActionButton.stories.storyshot

@@ -9,7 +9,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
   }
 >
   <button
-    className="MuiButtonBase-root-319 MuiButton-root-292 MuiButton-outlined-297 makeStyles-button"
+    className="MuiButtonBase-root-321 MuiButton-root-294 MuiButton-outlined-299 makeStyles-button"
     disabled={false}
     onBlur={[Function]}
     onDragLeave={[Function]}
@@ -31,13 +31,13 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
     type="button"
   >
     <span
-      className="MuiButton-label-293"
+      className="MuiButton-label-295"
     >
       Action button text
       <Arrow>
         <svg
           aria-hidden={true}
-          className="MuiSvgIcon-root-320"
+          className="MuiSvgIcon-root-322"
           focusable="false"
           viewBox="0 0 14 27"
         >
@@ -51,7 +51,7 @@ exports[`Storyshots ReportPage/ActionButton Default 1`] = `
       </Arrow>
     </span>
     <span
-      className="MuiTouchRipple-root-329"
+      className="MuiTouchRipple-root-331"
     >
       <TransitionGroup
         childFactory={[Function]}

i18n/zh_TW.po

@@ -128,6 +128,7 @@ msgstr "刪除"
 
 #: components/ArticleCategories/DownVoteDialog.js:99
 #: components/CreateReplyRequestForm/CreateReplyRequestForm.js:138
+#: components/ListPageControls/Filters.js:88
 #: components/NewReplySection/ReplyForm/Submit.js:28
 #: components/ProfilePage/EditAvatarDialog.js:241
 #: components/ProfilePage/EditProfileDialog.js:98