style: minor UI tweaks

elastic · Aug 23, 2024 · 0fb22f6 · 0fb22f6
1 parent b6f4754
commit 0fb22f6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 60 deletions.
diff --git a/...ges/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx b/...ges/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx
@@ -121,7 +121,7 @@ export function Assignment({
           css={
             !disableDelete
               ? css`
-                  color: ${euiThemeVars.euiTextSubduedColor};
+                  color: ${euiThemeVars.euiTextColor};
                   transition: ${euiThemeVars.euiAnimSpeedFast} ease-in-out;
                   transition-property: color;
                   &:hover,

diff --git a/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx b/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_picker.tsx
@@ -7,14 +7,7 @@
  */
 
 import React, { useState } from 'react';
-import {
-  EuiButtonEmpty,
-  EuiPopoverTitle,
-  EuiTab,
-  EuiTabs,
-  EuiTitle,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiPopoverTitle, EuiTab, EuiTabs, EuiHorizontalRule } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ColorMapping } from '../../config';
 import { getPalette } from '../../palettes';
@@ -56,22 +49,14 @@ export function ColorPicker({
       >
         <EuiTabs size="m" expand>
           <EuiTab onClick={() => setTab('palette')} isSelected={tab === 'palette'}>
-            <EuiTitle size="xxxs">
-              <span>
-                {i18n.translate('coloring.colorMapping.colorPicker.paletteTabLabel', {
-                  defaultMessage: 'Colors',
-                })}
-              </span>
-            </EuiTitle>
+            {i18n.translate('coloring.colorMapping.colorPicker.paletteTabLabel', {
+              defaultMessage: 'Colors',
+            })}
           </EuiTab>
           <EuiTab onClick={() => setTab('custom')} isSelected={tab === 'custom'}>
-            <EuiTitle size="xxxs">
-              <span>
-                {i18n.translate('coloring.colorMapping.colorPicker.customTabLabel', {
-                  defaultMessage: 'Custom',
-                })}
-              </span>
-            </EuiTitle>
+            {i18n.translate('coloring.colorMapping.colorPicker.customTabLabel', {
+              defaultMessage: 'Custom',
+            })}
           </EuiTab>
         </EuiTabs>
       </EuiPopoverTitle>

diff --git a/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_swatch.tsx b/...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_swatch.tsx
@@ -124,15 +124,14 @@ export const ColorSwatch = ({
             css={css`
               &::after {
                 content: '';
-                width: 0;
-                height: 0;
-                border-left: 3px solid transparent;
-                border-right: 3px solid transparent;
-                border-top: 4px solid ${colorIsDark ? 'white' : 'black'};
-                margin: 0;
-                bottom: 2px;
+                color: ${colorIsDark ? 'white' : 'black'};
+                // custom arrowDown svg
+                background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjQiIHZpZXdCb3g9IjAgMCA3IDQiPgogIDxwYXRoIGQ9Ik0uMTQ2LjE0N2EuNS41IDAgMCAxIC43MDggMEwzLjUgMi43OTQgNi4xNDYuMTQ3YS41LjUgMCAxIDEgLjcwOC43MDhsLTMgM2EuNS41IDAgMCAxLS43MDggMGwtMy0zYS41LjUgMCAwIDEgMC0uNzA4WiIvPgo8L3N2Zz4K');
+                height: 4px;
+                width: 7px;
+                bottom: 6px;
+                right: 4px;
                 position: absolute;
-                right: 2px;
               }
             `}
           />

diff --git a/...n-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx b/...n-coloring/src/shared_components/color_mapping/components/color_picker/palette_colors.tsx
@@ -12,7 +12,7 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiIcon,
-  EuiText,
+  EuiTitle,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -50,13 +50,13 @@ export function PaletteColors({
     <>
       <EuiFlexGroup direction="column" style={{ padding: 8 }}>
         <EuiFlexItem>
-          <EuiText size="s">
-            <strong>
+          <EuiTitle size="xxxs">
+            <h6>
               {i18n.translate('coloring.colorMapping.colorPicker.paletteColorsLabel', {
                 defaultMessage: 'Palette colors',
               })}
-            </strong>
-          </EuiText>
+            </h6>
+          </EuiTitle>
           <EuiFlexGroup
             direction="row"
             gutterSize="s"
@@ -84,22 +84,25 @@ export function PaletteColors({
       <EuiHorizontalRule margin="xs" />
       <EuiFlexGroup style={{ padding: 8, paddingTop: 0 }}>
         <EuiFlexItem>
-          <EuiText size="s">
-            <strong>
+          <EuiTitle size="xxxs">
+            <h6>
               {i18n.translate('coloring.colorMapping.colorPicker.themeAwareColorsLabel', {
                 defaultMessage: 'Neutral colors',
               })}
-            </strong>
-            <EuiToolTip
-              position="bottom"
-              content={i18n.translate('coloring.colorMapping.colorPicker.themeAwareColorsTooltip', {
-                defaultMessage:
-                  'The provided neutral colors are theme-aware and will change appropriately when switching between light and dark themes.',
-              })}
-            >
-              <EuiIcon tabIndex={0} type="questionInCircle" />
-            </EuiToolTip>
-          </EuiText>
+              <EuiToolTip
+                position="bottom"
+                content={i18n.translate(
+                  'coloring.colorMapping.colorPicker.themeAwareColorsTooltip',
+                  {
+                    defaultMessage:
+                      'The provided neutral colors are theme-aware and will change appropriately when switching between light and dark themes.',
+                  }
+                )}
+              >
+                <EuiIcon tabIndex={0} type="questionInCircle" />
+              </EuiToolTip>
+            </h6>
+          </EuiTitle>
           <EuiFlexGroup
             direction="row"
             gutterSize="s"

diff --git a/...ages/kbn-coloring/src/shared_components/color_mapping/components/container/assigments.tsx b/...ages/kbn-coloring/src/shared_components/color_mapping/components/container/assigments.tsx
@@ -149,7 +149,7 @@ export function AssignmentsConfig({
   return (
     <EuiPanel
       color="subdued"
-      borderRadius="none"
+      borderRadius="m"
       hasShadow={false}
       paddingSize="none"
       css={css`
@@ -227,13 +227,14 @@ export function AssignmentsConfig({
         </EuiFlexGroup>
       </div>
       {assignments.length > 0 && <EuiHorizontalRule margin="none" />}
-      <div
-        css={css`
-          padding: ${euiThemeVars.euiPanelPaddingModifiers.paddingSmall};
-          overflow: hidden;
-        `}
-      >
-        {assignments.length > 0 && (
+
+      {assignments.length > 0 && (
+        <div
+          css={css`
+            padding: ${euiThemeVars.euiPanelPaddingModifiers.paddingSmall};
+            overflow: hidden;
+          `}
+        >
           <EuiFlexGroup
             direction="row"
             alignItems="center"
@@ -308,7 +309,9 @@ export function AssignmentsConfig({
                         setShowOtherActions(false);
                         dispatch(removeAllAssignments());
                       }}
-                      color="danger"
+                      css={css`
+                        color: ${euiThemeVars.euiColorDanger};
+                      `}
                     >
                       {i18n.translate(
                         'coloring.colorMapping.container.clearAllAssignmentsButtonLabel',
@@ -322,8 +325,8 @@ export function AssignmentsConfig({
               </EuiPopover>
             )}
           </EuiFlexGroup>
-        )}
-      </div>
+        </div>
+      )}
     </EuiPanel>
   );
 }