[ResponseOps][Cases] Design Review changes PR 1 (#194560)

Connected to #188187 ## Summary - Field names have been aligned on top to ensure consistency with the fields area on the right <img width="1495" alt="Screenshot 2024-10-01 at 14 30 38" src="https://github.com/user-attachments/assets/51578be1-6cd8-43e0-a800-61e562aa5d77"> - Custom field and template name text size has been reduced to align with the badge ![Screenshot 2024-10-01 at 14 34 15](https://github.com/user-attachments/assets/986f9426-640e-4158-8614-662672f4ca72) --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Oct 2, 2024 · 616c6e8 · 616c6e8
1 parent 49a0e9d
commit 616c6e8
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/custom_fields_list/index.tsx
@@ -69,7 +69,7 @@ const CustomFieldsListComponent: React.FC<Props> = (props) => {
                   <EuiFlexItem grow={true}>
                     <EuiFlexGroup alignItems="center" gutterSize="s">
                       <EuiFlexItem grow={false}>
-                        <EuiText>
+                        <EuiText size="s">
                           <h4>{customField.label}</h4>
                         </EuiText>
                       </EuiFlexItem>

diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.tsx
@@ -70,6 +70,7 @@ const CustomFieldsComponent: React.FC<Props> = ({
       title={<h3>{i18n.TITLE}</h3>}
       description={<p>{i18n.DESCRIPTION}</p>}
       data-test-subj="custom-fields-form-group"
+      css={{ alignItems: 'flex-start' }}
     >
       <EuiPanel paddingSize="s" color="subdued" hasBorder={false} hasShadow={false}>
         {customFields.length ? (

diff --git a/x-pack/plugins/cases/public/components/templates/index.tsx b/x-pack/plugins/cases/public/components/templates/index.tsx
@@ -82,6 +82,7 @@ const TemplatesComponent: React.FC<Props> = ({
       }
       description={<p>{i18n.TEMPLATE_DESCRIPTION}</p>}
       data-test-subj="templates-form-group"
+      css={{ alignItems: 'flex-start' }}
     >
       <EuiPanel paddingSize="s" color="subdued" hasBorder={false} hasShadow={false}>
         {templates.length ? (

diff --git a/x-pack/plugins/cases/public/components/templates/templates_list.tsx b/x-pack/plugins/cases/public/components/templates/templates_list.tsx
@@ -63,7 +63,7 @@ const TemplatesListComponent: React.FC<Props> = (props) => {
                   <EuiFlexItem grow={true}>
                     <EuiFlexGroup alignItems="center" gutterSize="s">
                       <EuiFlexItem grow={false}>
-                        <EuiText>
+                        <EuiText size="s">
                           <h4>
                             <TruncatedText text={template.name} />
                           </h4>