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

package/v2Containers/MobilePushNew/index.scss

@@ -67,14 +67,16 @@
 
 .input-group {
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  flex-flow: column nowrap;
   gap: $CAP_SPACE_16;
 }
 
 .creatives-mpush-title,
 .creatives-mpush-message {
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
+  flex-flow: column nowrap;
   gap: $CAP_SPACE_08;
 }
 
@@ -122,8 +124,9 @@
   background: #fafafa;
 }
 
+/* TODO: cap-react-ui-library class removed — review this override */
 .button-form .cap-input,
-.button-form .cap-select {
+.button-form .cap-select-v2 {
   margin-bottom: $CAP_SPACE_16;
 }
 
@@ -329,9 +332,9 @@
   }
 }
 
-.note-message-container {
-  display: flex;
-  align-items: center;
+.note-message-container.cap-row-vertical {
+  flex-direction: row !important;
+  flex-wrap: nowrap;
 }
 
 .save-section {

package/v2Containers/Rcs/index.js

@@ -16,6 +16,7 @@ import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import ConfigProvider from 'antd/lib/config-provider';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
@@ -1144,7 +1145,7 @@ const splitTemplateVarString = (str) => {
             ) : (
               <CapButton
                 data-testid="suffix-button"
-                type="flat"
+                type="link"
                 isAddBtn
                 onClick={onTitleAddVar}
                 disabled={!!templateTitleError}
@@ -1183,7 +1184,7 @@ const splitTemplateVarString = (str) => {
   )}
 
 {/* Template Message */}
-       <CapRow id="rcs-template-message-label">
+       <CapRow useLegacy id="rcs-template-message-label">
          <CapHeader
             title={(
               <CapRow type="flex">
@@ -1206,7 +1207,7 @@ const splitTemplateVarString = (str) => {
               ) : (
                 <CapButton
                   data-testid="suffix-button"
-                  type="flat"
+                  type="link"
                   isAddBtn
                   onClick={onMessageAddVar}
                   disabled={templateDescError && templateDesc}
@@ -1217,7 +1218,7 @@ const splitTemplateVarString = (str) => {
             }
           />
         </CapRow>
-        <CapRow className="rcs-create-template-message-input">
+        <CapRow useLegacy className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
             {(isEditFlow || !isFullMode)
               ? renderedRCSEditMessage(splitTemplateVarString(templateDesc), MESSAGE_TEXT)
@@ -2276,7 +2277,7 @@ const splitTemplateVarString = (str) => {
 
     return (
       <>
-        {templateStatus !== '' && (<CapRow className="template-status-container">
+        {templateStatus !== '' && (<CapRow useLegacy className="template-status-container">
           <CapLabel type="label2">
             {formatMessage(messages.templateStatusLabel)}
           </CapLabel>
@@ -2308,25 +2309,29 @@ const splitTemplateVarString = (str) => {
               />
             )}
             {renderLabel('templateTypeLabel')}
-            <CapRadioGroup
-              id="select-rcs-template-type"
-              options={TEMPLATE_TYPE_OPTIONS}
-              onChange={onTemplateTypeChange}
-              value={templateType}
-              disabled={(isEditFlow || !isFullMode)}
-            />
+            <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+              <CapRadioGroup
+                id="select-rcs-template-type"
+                options={TEMPLATE_TYPE_OPTIONS}
+                onChange={onTemplateTypeChange}
+                value={templateType}
+                disabled={(isEditFlow || !isFullMode)}
+              />
+            </ConfigProvider>
 
             {/* Show media only for rich_card or carousel */}
             {(templateType === contentType.rich_card || templateType === contentType.carousel) && (
               <>
                 {renderLabel('mediaLabel')}
-                  <CapRadioGroup
-                    options={mediaRadioOptions || []}
-                    value={templateMediaType}
-                    onChange={onTemplateMediaTypeChange}
-                    disabled={(isEditFlow || !isFullMode)}
-                    className="rcs-radio"
-                  />
+                  <ConfigProvider theme={{ components: { Radio: { radioSize: 20, dotSize: 8 } } }}>
+                    <CapRadioGroup
+                      options={mediaRadioOptions || []}
+                      value={templateMediaType}
+                      onChange={onTemplateMediaTypeChange}
+                      disabled={(isEditFlow || !isFullMode)}
+                      className="rcs-radio"
+                    />
+                  </ConfigProvider>
                 <div className="rcs-container-image">
                   {getMediaBasedComponent()}
                 </div>

package/v2Containers/Rcs/index.scss

@@ -44,13 +44,6 @@
     margin-right: 50px;
   }
 
-  .ant-radio-inner::after{
-    top: 3px;
-    left: 3px;
-  }
-  .ant-radio-inner{
-    border: 1px solid #d9d9d9;
-  }
   .ant-radio-checked .ant-radio-inner{
     border: 1px solid #47af46;
   }

package/v2Containers/Sms/Create/_smsCreate.scss

@@ -1,13 +1,20 @@
-.creatives-sms-footer{
-  display: inline-flex;
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+.cap-row-v2.ant-row-legacy.creatives-sms-footer {
+  display: flex !important;
 }
 .tag-container{
   .add-label{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
     button{
       float: right;
       top: 8px;
       z-index: 100;
       padding: unset !important;;
+      color: map-get($CAP_SECONDARY, base);
     }
   }
 }