fix: dashboard filter clear button (#343)

dhis2 · Oct 2, 2019 · 7e681d5 · 7e681d5
1 parent 1d03334
commit 7e681d5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/components/ControlBar/ClearButton.js b/src/components/ControlBar/ClearButton.js
@@ -6,7 +6,9 @@ import classes from './styles/ClearButton.module.css';
 
 export const ClearButton = ({ onClear }) => (
     <button className={classes.button} onClick={onClear}>
-        <ClearIcon className={classes.icon} color="action" />
+        <span>
+            <ClearIcon className={classes.icon} color="action" />
+        </span>
     </button>
 );
 

diff --git a/src/components/ControlBar/styles/ClearButton.module.css b/src/components/ControlBar/styles/ClearButton.module.css
@@ -2,11 +2,14 @@
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    margin-left: 5px;
-    padding: 0px 5px;
-    vertical-align: text-bottom;
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
+}
+
+.button > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .button:focus {
@@ -16,5 +19,4 @@
 .icon {
     width: 16px;
     height: 16px;
-    margin-top: 4px;
 }
diff --git a/src/components/ControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/styles/DashboardsBar.module.css
@@ -4,6 +4,7 @@
     height: 36px;
     position: relative;
     top: 2px;
+    margin-right: 4px;
 }
 
 .rightControls {