fix: slideshow filter content and style

dhis2 · Dec 18, 2024 · 524c937 · 524c937
1 parent 11e1f8c
commit 524c937
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/src/pages/view/SlideshowFiltersInfo.js b/src/pages/view/SlideshowFiltersInfo.js
@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { Layer, Popper } from '@dhis2/ui'
+import { Layer, Popper, IconFilter16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useMemo, useState, useRef } from 'react'
 import { useSelector } from 'react-redux'
@@ -50,7 +50,7 @@ export const SlideshowFiltersInfo = () => {
     let multipleFilters = true
     if (filters.length === 1 && filters[0].values.length === 1) {
         multipleFilters = false
-        filterMessage = i18n.t('{{name}} filter applied: {{filter}}', {
+        filterMessage = i18n.t('{{name}}: {{filter}}', {
             name: filters[0].name,
             filter: filters[0].values[0].name,
             nsSeparator: '>',
@@ -60,13 +60,17 @@ export const SlideshowFiltersInfo = () => {
     return (
         <>
             {!multipleFilters ? (
-                <span className={styles.singleFilterText}>{filterMessage}</span>
+                <span className={styles.singleFilterText}>
+                    <IconFilter16 />
+                    {filterMessage}
+                </span>
             ) : (
                 <button
                     ref={ref}
                     className={styles.filterButton}
                     onClick={() => setIsOpen(true)}
                 >
+                    <IconFilter16 />
                     {i18n.t('{{count}} filters active', {
                         count: totalFilterCount,
                         defaultValue: '{{count}} filter active',

diff --git a/src/pages/view/styles/SlideshowControlbar.module.css b/src/pages/view/styles/SlideshowControlbar.module.css
@@ -31,7 +31,7 @@
 }
 
 .container button {
-    color: white;
+    color: var(--colors-grey300);
     background-color: #171819;
     border-radius: 3px;
     border: none;
@@ -64,7 +64,7 @@
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-style: normal;
-    color: white;
+    color: var(--colors-grey300);
     font-size: 14px;
     margin: 0 8px;
     min-inline-size: 60px;

diff --git a/src/pages/view/styles/SlideshowFiltersInfo.module.css b/src/pages/view/styles/SlideshowFiltersInfo.module.css
@@ -1,37 +1,49 @@
 .filterButton {
-    padding: 4px;
     inline-size: auto;
-    border-radius: 3px;
-    color: black;
-    background-color: #f4f6f8;
+    display: flex;
+    align-items: center;
+    gap: var(--spacers-dp4);
+    font-size: 14px;
 }
 
 .singleFilterText {
-    padding: 4px;
+    display: flex;
+    gap: var(--spacers-dp4);
+    padding: 0px var(--spacers-dp8) 0 0;
+    font-size: 14px;
     inline-size: auto;
-    border-radius: 3px;
-    color: black;
-    background-color: #f4f6f8;
+    color: var(--colors-grey300);
 }
+
 .popover {
-    border: 1px solid var(--colors-grey400);
-    border-radius: 4px;
+    border: 1px solid #202124;
+    background-color: #171819;
+    border-radius: 6px;
     box-shadow: var(--elevations-e400);
-    padding: var(--spacers-dp8);
-    background-color: var(--colors-white);
+    padding: var(--spacers-dp12) var(--spacers-dp12) var(--spacers-dp16);
+    font-size: 13px;
+    color: var(--colors-grey300);
+    min-width: 200px;
+    max-width: 420px;
+    margin-block-end: var(--spacers-dp4);
 }
 
-.filterSection {
-    margin-block-end: var(--spacers-dp4);
+.filterSection:not(:last-of-type) {
+    margin-block-end: var(--spacers-dp12);
 }
 
 .filterSectionHeader {
-    margin: 0;
+    margin: 0 0 var(--spacers-dp4) 0;
+    font-weight: 500;
     padding: 0;
 }
 
 .filterSectionList {
     margin: 0;
     padding: 0;
     padding-inline-start: 18px;
+    list-style-type: circle;
+}
+.filterSectionList li:not(:last-of-type) {
+    margin-block-end: 2px;
 }