fix: adjust modal form, radio card styles

dhis2 · Jan 17, 2025 · 5260b5f · 5260b5f
1 parent a67aa4e
commit 5260b5f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/components/DashboardsBar/CreateDashboardButton/styles/DashboardTypeRadio.module.css b/src/components/DashboardsBar/CreateDashboardButton/styles/DashboardTypeRadio.module.css
@@ -7,7 +7,8 @@
     border-radius: 6px;
     padding: var(--spacers-dp16);
     cursor: pointer;
-    transition: 0.3s all ease;
+    transition: 0.2s ease;
+    transition-property: background-color, border-color;
 }
 
 .container.checked {
@@ -20,9 +21,9 @@
     border-color: var(--colors-grey500);
 }
 
-.container:focus-within {
-    outline: 2px solid #007bff;
-    outline-offset: -2px;
+.container:has(:focus-visible) {
+    outline: 3px solid var(--colors-blue600);
+    outline-offset: -3px;
 }
 
 .container .content {

diff --git a/src/components/SupersetEmbeddedDashboardFields.js b/src/components/SupersetEmbeddedDashboardFields.js
@@ -64,13 +64,15 @@ export const SupersetEmbeddedDashboardFields = ({
             <fieldset className={styles.options}>
                 <legend>{i18n.t('Options')}</legend>
                 <CheckboxField
+                    dense
                     label={i18n.t('Show chart controls on dashboard items')}
                     onChange={onChange}
                     checked={values.showChartControls}
                     disabled={submitting}
                     name={fieldNames.showChartControls}
                 />
                 <CheckboxField
+                    dense
                     label={i18n.t('Show filters')}
                     onChange={onChange}
                     checked={values.showFilters}

diff --git a/src/components/styles/SupersetEmbeddedDashboardFields.module.css b/src/components/styles/SupersetEmbeddedDashboardFields.module.css
@@ -1,11 +1,11 @@
 .textField {
-    margin-bottom: var(--spacers-dp16);
+    margin-bottom: var(--spacers-dp12);
 }
 .options {
     all: unset;
-    margin-bottom: var(--spacers-dp8);
 }
 .options legend {
+    font-size: 14px;
     font-weight: 500;
-    margin-bottom: var(--spacers-dp8);
+    margin-bottom: var(--spacers-dp4);
 }