feat(plugin-connections): CB-1822 CB-1824 style fixes

webapp/packages/core-blocks/src/Expand/EXPANDABLE_FORM_STYLES.ts

@@ -9,11 +9,11 @@
 import { css } from 'reshadow';
 
 export const EXPANDABLE_FORM_STYLES = css`
-  Disclosure:global([aria-expanded="true"]) {
-    margin-bottom: 10px;
-  }
   expand-label {
-    composes: theme-typography--body1 from global;
-    font-weight: 500;
+    composes: theme-typography--body2 from global;
+    font-weight: 400;
+    margin: 0;
+    text-transform: uppercase;
+    opacity: 0.9;
   }
 `;

webapp/packages/core-blocks/src/Expand/Expandable.tsx

@@ -47,6 +47,7 @@ const styles = css`
     width: 16px;
     height: 16px;
     transform: rotate(-90deg);
+    margin-right: 8px;
 
     &[|expanded] {
       transform: rotate(0deg);
@@ -75,7 +76,7 @@ export const Expandable = observer<Props, ExpandableState>(function Expandable({
         <expand-icon {...use({ expanded: disclosure.visible })}>
           <IconOrImage icon='arrow' />
         </expand-icon>
-        <expand-label>{label}</expand-label>
+        <expand-label as='h2'>{label}</expand-label>
       </Disclosure>
       <DisclosureContent {...disclosure}>
         <>{children}</>

webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx

@@ -216,7 +216,7 @@ export const SSH: TabContainerPanelComponent<IConnectionFormProps> = observer(fu
               {translate('connections_connection_edit_save_credentials')}
             </FieldCheckbox>
           )}
-          <Container>
+          <Container gap>
             <Expandable
               style={EXPANDABLE_FORM_STYLES}
               label={translate('connections_network_handler_ssh_tunnel_advanced_settings')}