superdesk-ui-framework 3.0.1-beta.22 → 3.0.1-beta.24

package/dist/react/MultiSelect.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 import { PropsList, Prop } from '../../../app-typescript';
-import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
+import { MultiSelect } from '../../../app-typescript';
 
 interface IColor {
     name: string;
@@ -56,7 +56,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
-                
+
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
@@ -110,7 +110,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     showSelectAll
                                     optionLabel='name'
                                     itemTemplate={(option) => {
-                                        if (option) {  
+                                        if (option) {
                                             return (
                                                 <div style={{display: 'flex', alignItems: 'center'}}>
                                                     <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
@@ -147,7 +147,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                             showSelectAll
                             optionLabel='name'
                             itemTemplate={(option) => {
-                                if (option) {  
+                                if (option) {
                                     return (
                                         <div style={{display: 'flex', alignItems: 'center'}}>
                                             <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
@@ -194,7 +194,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     <Prop name='selectedItemTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
                     <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
                 </PropsList>
-  
+
             </section>
         )
     }

package/dist/superdesk-ui.bundle.css

@@ -41932,7 +41932,7 @@ a.text-link {
   width: 32rem;
   max-height: 100%; }
   .editor-popup__main.editor-popup__main--floating {
-    background-color: #fff;
+    background-color: var(--color-dropdown-menu-Bg);
     z-index: 2;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.1); }
 
@@ -41987,16 +41987,16 @@ a.text-link {
   padding-top: 0; }
 
 .editor-popup__secondary-content {
-  background-color: rgba(123, 123, 123, 0.1);
-  border-top: 1px solid rgba(123, 123, 123, 0.2); }
+  background-color: rgba(106, 120, 138, 0.05);
+  border-top: 1px solid var(--sd-colour-line--light); }
 
 .comment-box__reply-item {
-  border-bottom: 1px solid rgba(123, 123, 123, 0.2); }
+  border-bottom: 1px solid var(--sd-colour-line--light); }
 
 .comment-box__input {
   padding: 0.4rem;
-  border-radius: var(--b-radius--x-small);
-  border: 1px solid rgba(123, 123, 123, 0.4);
+  border-radius: var(--b-radius--small);
+  border: 1px solid var(--sd-colour-line--light);
   height: 2.8rem;
   resize: none; }
 
@@ -42004,14 +42004,18 @@ a.text-link {
   display: none;
   padding-top: 1rem; }
   .comment-box__reply-toolbar--active {
-    display: block; }
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--gap--small); }
 
 .comment-box__button-toolbar {
   margin-top: 1.2rem;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start; }
+  justify-content: flex-start;
+  gap: var(--gap--small); }
   .comment-box__button-toolbar--right {
     justify-content: flex-end; }
   .comment-box__button-toolbar--small {