@capillarytech/creatives-library 8.0.340-0 → 8.0.340-beta.0

package/v2Components/CustomerSearchSection/_customerSearch.scss

@@ -3,7 +3,8 @@
 .customer-search-section {
   margin-top: $CAP_SPACE_08;
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  flex-flow: column nowrap;
   gap: $CAP_SPACE_04;
   padding: 0;
   position: relative;

package/v2Components/CustomerSearchSection/index.js

@@ -183,9 +183,9 @@ const CustomerSearchSection = ({
   };
 
   return (
-    <CapRow className="customer-search-section">
+    <CapRow useLegacy className="customer-search-section">
       <div ref={searchContainerRef}>
-        <CapRow className="search-container">
+        <CapRow useLegacy className="search-container">
           {selectedCustomer ? (
             <SelectedCustomerView
               customer={selectedCustomer}
@@ -203,7 +203,7 @@ const CustomerSearchSection = ({
             />
           )}
           {showDropdown && !selectedCustomer && (
-            <CapRow className="search-dropdown-container">
+            <CapRow useLegacy className="search-dropdown-container">
               <CapRow type="flex" justify="center" align="middle">
                 {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
                   <CapCard className="validation-card">
@@ -214,7 +214,7 @@ const CustomerSearchSection = ({
                 )}
                 {(isSearchingCustomer) && (
                   <CapCard className="validation-card">
-                    <CapRow className="spin-card-align">
+                    <CapRow useLegacy className="spin-card-align">
                       <CapSpin />
                     </CapRow>
                   </CapCard>
@@ -232,12 +232,12 @@ const CustomerSearchSection = ({
                               className="search-results-height link-result"
                               title={(
                                 <>
-                                  <CapRow type="flex" align="middle" gutter={16}>
+                                  <CapRow type="flex" align="middle" gap={16}>
                                     <CapColumn data-testid="namingIcon">
                                       <CapRow className="customer-common-profile">{getNamingIcon(d?.name)}</CapRow>
                                     </CapColumn>
                                     <CapColumn>
-                                      <CapRow type="flex" gutter={12}>
+                                      <CapRow type="flex" gap={12}>
                                         <CapColumn data-testid="searchResultName">
                                           <CapHeading className="search-text" type="h4">
                                             {d?.name}
@@ -279,7 +279,7 @@ const SearchInput = ({
   disabled,
   placeholder,
 }) => (
-  <CapRow className="search-input-container">
+  <CapRow useLegacy className="search-input-container">
     <CapInput
       value={value}
       onChange={onChange}
@@ -290,7 +290,7 @@ const SearchInput = ({
       autoComplete="off"
     />
     {error && (
-      <CapRow className="search-error">
+      <CapRow useLegacy className="search-error">
         <CapAlert
           message={error}
           type="error"
@@ -304,7 +304,7 @@ const SearchInput = ({
 
 const SelectedCustomerView = ({ customer, onClear, showIdentifiers }) => (
   <div className="selected-customer-view">
-    <CapRow type="flex" align="middle" gutter={8}>
+    <CapRow type="flex" align="middle" gap={8}>
       <CapColumn>
         <CapRow className="customer-common-profile">{getNamingIcon(customer?.name)}</CapRow>
       </CapColumn>

package/v2Components/EmailMobilePreview/index.js

@@ -89,7 +89,7 @@ class EmailMobilePreview extends React.Component {
                   <div className="email-preview-container">
                     {enableShowAllDevices && (
                       <CapButton
-                        type="flat"
+                        type="link"
                         onClick={this.onClickShowInAllDevices}
                       >
                         View in all devices

package/v2Components/ErrorInfoNote/index.js

@@ -94,7 +94,7 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
   };
 
   return (
-    <CapRow className="error-info-note__content">
+    <CapRow useLegacy className="error-info-note__content">
       {issues.map((issue, index) => {
         const { severity, message } = issue;
         const key = `${message}-${index}`;
@@ -114,10 +114,11 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
 
         return (
           <CapRow
+            useLegacy
             key={key}
             className={`error-info-note__item error-info-note__item--${severity || 'error'}`}
           >
-            <CapRow className="error-info-note__item-content">
+            <CapRow useLegacy className="error-info-note__item-content">
               <CapLabelInline type="label2" className="error-info-note__item-message">
                 {displayMessage}
               </CapLabelInline>
@@ -149,7 +150,7 @@ const TabContent = ({ issues, onErrorClick, intl }) => {
             {onErrorClick && (
               <CapTooltip title={intl?.formatMessage ? intl.formatMessage(messages.navigateToError) : 'Go to error location'}>
                 <CapButton
-                  type="flat"
+                  type="link"
                   className="error-info-note__item-navigate"
                   onClick={(e) => handleNavigateClick({ ...issue, line, column: char }, e)}
                   aria-label={intl?.formatMessage ? intl.formatMessage(messages.navigateToError) : 'Go to error location'}
@@ -348,7 +349,7 @@ export const ErrorInfoNote = (props) => {
   }
 
   return (
-    <CapRow className="error-container error-container--tabs">
+    <CapRow useLegacy className="error-container error-container--tabs">
       <CapRow className="error-info-note__header">
         <CapTab
           activeKey={activeKey || (tabPanes[0]?.key)}
@@ -356,10 +357,10 @@ export const ErrorInfoNote = (props) => {
           panes={tabPanes}
           className="error-info-note__tabs"
         />
-        <CapRow className="error-info-note__actions">
+        <CapRow useLegacy className="error-info-note__actions">
           {hasLiquidErrors && (
             <CapButton
-              type="flat"
+              type="link"
               className="error-info-note__liquid-doc"
               onClick={handleLiquidDocClick}
             >
@@ -369,7 +370,7 @@ export const ErrorInfoNote = (props) => {
           )}
           <CapTooltip title={intl?.formatMessage ? intl.formatMessage(messages.closePanel) : 'Close validation panel'}>
             <CapButton
-              type="flat"
+              type="link"
               className="error-info-note__close"
               onClick={handleClose}
               aria-label={intl?.formatMessage ? intl.formatMessage(messages.closePanel) : 'Close validation panel'}
@@ -393,6 +394,7 @@ const ErrorSection = ({
   <>
     {title && (
       <CapRow
+        useLegacy
         className={`error-header ${
           !liquidError ? 'standard-error-header' : ''
         }`}
@@ -404,7 +406,7 @@ const ErrorSection = ({
         <>
           {liquidError && (
             <CapButton
-              type="flat"
+              type="link"
               className="add-btn"
               onClick={() => window.open(LIQUID_DOC_URL, '_blank')}
             >
@@ -416,13 +418,13 @@ const ErrorSection = ({
       </CapRow>
     )}
     {platformLabel && (
-      <CapRow className="error-header-sub-title">
+      <CapRow useLegacy className="error-header-sub-title">
         <CapLabel type="label2">{platformLabel}</CapLabel>
       </CapRow>
     )}
-    <CapRow className="error-list-legacy">
+    <CapRow useLegacy className="error-list-legacy">
       {(errors || []).map((error) => (
-        <CapRow key={`${error}`} className="error-list-legacy__item">
+        <CapRow useLegacy key={`${error}`} className="error-list-legacy__item">
           <CapLabel type="label2" className="cap-list-v2-error-item">
             <CapLabel type="label2">{error}</CapLabel>
           </CapLabel>

package/v2Components/ErrorInfoNote/style.scss

@@ -252,7 +252,7 @@
   justify-content: space-between;
   font-weight: $FONT_WEIGHT_MEDIUM;
 
-  .ant-btn.cap-button-v2.flat-btn {
+  .ant-btn.cap-button-v2.ant-btn-link {
     display: flex;
     margin-left: auto;
     background-color: inherit;

package/v2Components/FormBuilder/_formBuilder.scss

@@ -20,6 +20,7 @@
   bottom: 4px !important;
 }
 
+/* TODO: cap-react-ui-library class removed — review this override */
 .cap-input {
   .error-message {
     margin-left: initial !important;

package/v2Components/FormBuilder/index.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { Tabs, Table, Modal} from 'antd';
+import { Table, Modal} from 'antd';
 import { connect } from 'react-redux';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
@@ -24,6 +24,7 @@ import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
 import CapTable from '@capillarytech/cap-ui-library/CapTable';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
@@ -64,7 +65,6 @@ import { isEmailUnsubscribeTagOptional, isAiContentBotDisabled } from '../../uti
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
 import { getChannelData, hasPersonalizationTags, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
-const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
 const {CapRadioGroup} = CapRadio;
@@ -3158,7 +3158,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           break;
       }
       row.push(
-        <CapRow>
+        <CapRow useLegacy>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -3207,7 +3207,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       cols.push(<CapColumn style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</CapColumn>);
       return true;
     });
-    const row = (<CapRow style={section.rowStyle ? section.rowStyle : {}}>
+    const row = (<CapRow useLegacy style={section.rowStyle ? section.rowStyle : {}}>
       {
         _.forEach(cols, (value) => {
           if (value) {
@@ -3320,7 +3320,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       return (
         <CapButton
           className="dragger-button"
-          type="flat"
+          type="link"
           style={{top: 0, position: 'absolute', right: 0, color: FONT_COLOR_05 }}
           onClick={this.onReUpload}
         >
@@ -3329,7 +3329,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       );
     }
     return (
-      <CapButton disabled={val.disabled ? val.disabled : false} type="flat" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? FONT_COLOR_04 : FONT_COLOR_05}`}}>
+      <CapButton disabled={val.disabled ? val.disabled : false} type="link" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? FONT_COLOR_04 : FONT_COLOR_05}`}}>
         {val.label}
       </CapButton>
     );
@@ -4034,7 +4034,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         return true;
       });
       const row = (
-        <CapRow style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+        <CapRow useLegacy style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -4076,7 +4076,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       });
       const row = (
-        <CapRow>
+        <CapRow useLegacy>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -4159,31 +4159,30 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
           const isPaneSupported = typeof pane.isSupported === "boolean" ? pane.isSupported : true; // pane.isSupported field exists only in mpush schema, in other channels it is not
           if (isPaneSupported) {
-            renderedPanes.push(
-              <TabPane
-                forceRender
-                tab={
-                  <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
-                    { this.state.translationLang !== 'ja-JP' && (
-                    _.forEach(renderedContentSections, (value) => {
-                      if (value) {
-                        return value;
-                      }
-                      return value;
-                    }))
-                    }
-                  </div>
-                }
-                key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
-                {
-                  _.forEach(renderedSections, (value) => {
+            renderedPanes.push({
+              forceRender: true,
+              tab: (
+                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+                  { this.state.translationLang !== 'ja-JP' && (
+                  _.forEach(renderedContentSections, (value) => {
                     if (value) {
                       return value;
                     }
                     return value;
-                  })
-                }
-              </TabPane>);
+                  }))
+                  }
+                </div>
+              ),
+              key: paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index,
+              content: (
+                _.forEach(renderedSections, (value) => {
+                  if (value) {
+                    return value;
+                  }
+                  return value;
+                })
+              ),
+            });
             paneIndex += 1;
           }
         });
@@ -4196,7 +4195,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           activeTabKey = stateTabKey;
         }
         return (
-          <Tabs
+          <CapTab
             className={`cap-tabs-${container.id}`}
             activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
@@ -4210,16 +4209,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 }
                 return value;
               })
-            }>
-            {
-            _.forEach(renderedPanes, (value) => {
-              if (value) {
-                return value;
-              }
-              return value;
-            })
             }
-          </Tabs>
+            panes={renderedPanes}
+          />
         );
 
       default:
@@ -4273,7 +4265,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
     return (
       <CapSpin spinning={Boolean((this.isLiquidFlowSupportedByChannel() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
-      <CapRow>
+      <CapRow useLegacy>
         {this.props.schema && this.renderForm()}
         <SlideBox
           header={

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -609,7 +609,7 @@ const HTMLEditor = forwardRef(({
   // Loading state
   if (!content || !layout) {
     return (
-      <CapRow className="html-editor-loading">
+      <CapRow useLegacy className="html-editor-loading">
         <CapSpin size="large" tip={intl.formatMessage(messages.initializing)} />
       </CapRow>
     );
@@ -633,7 +633,7 @@ const HTMLEditor = forwardRef(({
           />
         ) : (
           /* InApp variant: Device Toggle + Toolbar combined */
-          <CapRow className="html-editor__header">
+          <CapRow useLegacy className="html-editor__header">
             <DeviceToggle
               activeDevice={activeDevice}
               onDeviceChange={switchDevice}
@@ -652,7 +652,7 @@ const HTMLEditor = forwardRef(({
         )}
 
         {/* Main Content Area - Split Container */}
-        <CapRow className="html-editor-content">
+        <CapRow useLegacy className="html-editor-content">
           <SplitContainer className="html-editor-split-container">
             {/* Code Editor Pane */}
             <CodeEditorPane
@@ -691,7 +691,7 @@ const HTMLEditor = forwardRef(({
           width="93vw"
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
+          <CapRow useLegacy className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -130,7 +130,8 @@
     overflow: hidden;
     background-color: $CAP_WHITE;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
   }
 
   // Split container - integrated design

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -274,7 +274,7 @@ const CodeEditorPaneComponent = ({
         <div className="codemirror-wrapper">
           <div ref={editorRef} className="codemirror-editor" />
           {/* Floating Add Label Button */}
-          <CapRow className="code-editor-pane__actions">
+          <CapRow useLegacy className="code-editor-pane__actions">
             <TagList
               key="html-editor-taglist"
               label={intl.formatMessage(messages.addLabel)}

package/v2Components/HtmlEditor/components/DeviceToggle/_deviceToggle.scss

@@ -41,7 +41,7 @@
     transition: all 0.2s ease-in-out;
 
     // Override any Cap UI button styles with high specificity
-    &.cap-button,
+    &.cap-button-v2,
     &.ant-btn,
     &.cap-button-primary,
     &.cap-button-success,
@@ -94,7 +94,7 @@
       }
 
       // Override Cap UI styles for active state with high specificity
-      &.cap-button,
+      &.cap-button-v2,
       &.ant-btn,
       &.cap-button-primary,
       &.cap-button-success,

package/v2Components/HtmlEditor/components/DeviceToggle/index.js

@@ -51,7 +51,7 @@ const DeviceToggle = ({
   return (
     <CapRow className={`device-toggle ${className}`}>
       {/* Device Tabs */}
-      <CapRow className="device-toggle__tabs">
+      <CapRow useLegacy className="device-toggle__tabs">
         {/* Android Tab */}
         <CapButton
           type={activeDevice === DEVICE_TYPES.ANDROID ? "primary" : "default"}
@@ -78,7 +78,7 @@ const DeviceToggle = ({
       </CapRow>
 
       {/* Content Sync Checkbox */}
-      <CapRow className="device-toggle__sync">
+      <CapRow useLegacy className="device-toggle__sync">
         <CapCheckbox
           checked={keepContentSame}
           onChange={handleCheckboxChange}

package/v2Components/HtmlEditor/components/EditorToolbar/PreviewModeGroup.js

@@ -35,7 +35,7 @@ const PreviewModeGroup = ({
   return (
     <div className="preview-mode-group">
       <CapButton
-        type="flat"
+        type="link"
         onClick={() => onChange(DESKTOP)}
         disabled={disabled}
         className={value === DESKTOP ? 'preview-mode-group__btn preview-mode-group__btn--active' : 'preview-mode-group__btn'}
@@ -45,7 +45,7 @@ const PreviewModeGroup = ({
         <CapIcon type="desktop" size="m" />
       </CapButton>
       <CapButton
-        type="flat"
+        type="link"
         onClick={() => onChange(MOBILE)}
         disabled={disabled}
         className={value === MOBILE ? 'preview-mode-group__btn preview-mode-group__btn--active' : 'preview-mode-group__btn'}

package/v2Components/HtmlEditor/components/EditorToolbar/index.js

@@ -61,7 +61,7 @@ const EditorToolbar = ({
     <Header className={`editor-toolbar ${className}`}>
       {/* Left Section - Title (conditional) */}
       {showTitle && (
-        <CapRow className="editor-toolbar__left">
+        <CapRow useLegacy className="editor-toolbar__left">
           <Text strong className="editor-toolbar__title">
             {variant === HTML_EDITOR_VARIANTS.INAPP
               ? intl.formatMessage(messages.inAppEditor)
@@ -95,7 +95,7 @@ const EditorToolbar = ({
       )}
 
       {/* Right Section - Actions */}
-      <CapRow className="editor-toolbar__right">
+      <CapRow useLegacy className="editor-toolbar__right">
         {showFullscreenButton && (
           <CapButton
             type="text"

package/v2Components/HtmlEditor/components/InAppPreviewPane/index.js

@@ -153,6 +153,7 @@ const InAppPreviewPane = ({
       onTouchMove={handleTouchMove}
     >
       <CapRow
+        useLegacy
         ref={deviceContainerRef}
         className={getDeviceContainerClasses()}
       >

package/v2Components/HtmlEditor/components/PreviewPane/index.js

@@ -183,14 +183,14 @@ const PreviewPane = ({
   // Render Email preview for Email variant
   return (
     <div className={`preview-pane ${className}`}>
-      <CapRow className="preview-pane__mode-controls">
+      <CapRow useLegacy className="preview-pane__mode-controls">
         <PreviewModeGroup
           value={viewMode}
           onChange={setViewMode}
         />
       </CapRow>
 
-      <CapRow className="preview-pane__content">
+      <CapRow useLegacy className="preview-pane__content">
         {iframeContent ? renderDeviceFrame() : renderEmptyState()}
       </CapRow>
     </div>

package/v2Components/HtmlEditor/components/SplitContainer/SplitContainer.js

@@ -235,7 +235,7 @@ const SplitContainer = ({
       className={containerClasses}
       style={containerStyle}
     >
-      <CapRow className="split-container__panel split-container__panel--first">
+      <CapRow useLegacy className="split-container__panel split-container__panel--first">
         {children?.[0]}
       </CapRow>
 
@@ -256,7 +256,7 @@ const SplitContainer = ({
         </div>
       </div>
 
-      <CapRow className="split-container__panel split-container__panel--second">
+      <CapRow useLegacy className="split-container__panel split-container__panel--second">
         {children?.[1]}
       </CapRow>
     </div>

package/v2Components/HtmlEditor/components/SplitContainer/_splitContainer.scss

@@ -47,7 +47,8 @@
   &__panel {
     overflow: hidden;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
+    flex-flow: column nowrap;
     position: relative;
     min-width: 0; // Prevent flex items from overflowing
     min-height: 0;

package/v2Components/HtmlEditor/components/ValidationPanel/index.js

@@ -14,12 +14,9 @@ import Empty from 'antd/lib/empty';
 import Spin from 'antd/lib/spin';
 
 // Import icons individually
-import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
-import WarningOutlined from '@ant-design/icons/WarningOutlined';
-import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
+// TODO: ShieldOutlined, BugOutlined, EyeInvisibleOutlined have no direct CapIcon equivalent — kept for follow-up
 import ShieldOutlined from '@ant-design/icons/ShieldOutlined';
 import BugOutlined from '@ant-design/icons/BugOutlined';
-import CodeOutlined from '@ant-design/icons/CodeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 
@@ -90,15 +87,15 @@ const ValidationPanel = ({
   const getSourceIcon = (source) => {
     switch (source) {
       case 'htmlhint':
-        return <CodeOutlined />;
+        return <CapIcon type="code" outlined />;
       case 'css-validator':
-        return <CodeOutlined />;
+        return <CapIcon type="code" outlined />;
       case 'security':
         return <ShieldOutlined />;
       case 'custom':
         return <BugOutlined />;
       default:
-        return <InfoCircleOutlined />;
+        return <CapIcon type="info" outlined />;
     }
   };
 
@@ -213,13 +210,13 @@ const ValidationPanel = ({
     <div className="validation-panel">
       <div className="validation-panel__summary">
         <div className="validation-panel__summary-item">
-          <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
+          <CapIcon type="exclamation-circle" outlined style={{ color: '#ff4d4f' }} />
           <span>{validation?.summary?.totalErrors || 0}</span>
           <FormattedMessage {...messages.errors} />
         </div>
 
         <div className="validation-panel__summary-item">
-          <WarningOutlined style={{ color: '#faad14' }} />
+          <CapIcon type="warning" outlined style={{ color: '#faad14' }} />
           <span>{validation?.summary?.totalWarnings || 0}</span>
           <FormattedMessage {...messages.warnings} />
         </div>

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -247,14 +247,14 @@ const ValidationTabs = ({
 
   return (
     <div className={`validation-tabs ${isCollapsed ? 'validation-tabs--collapsed' : ''} ${className || ''}`}>
-      <CapRow className="validation-tabs__header">
+      <CapRow useLegacy className="validation-tabs__header">
         <StyledCapTab
           className="validation-tabs__tabs"
           activeKey={activeKey || (tabPanes[0]?.key)}
           onChange={setActiveKey}
           panes={tabPanes}
         />
-        <CapRow className="validation-tabs__actions">
+        <CapRow useLegacy className="validation-tabs__actions">
           <CapTooltip title={collapseLabel}>
             <button
               type="button"

package/v2Components/NavigationBar/index.js

@@ -35,7 +35,13 @@ const CapWrapper = styled.div`
   background-color: #ffffff;
   width: 100%;
   display: flex;
-  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'}
+  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'};
+  .sidebar-container {
+    margin-right: 10px;
+  }
+  .ant-collapse {
+    background-color: #ffffff;
+  }
 `;
 
 const ComponentWrapper = styled.div`