Authoring: Revert the apearnce and styles of the Editor fields to the…

… way they looked before refactoring (#4510)

package.json

@@ -122,7 +122,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.2",
+    "superdesk-ui-framework": "^3.1.3",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",

scripts/apps/authoring-react/authoring-section/authoring-section-field.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {IAuthoringFieldV2, IAuthoringSectionTheme, IFieldsData} from 'superdesk-api';
+import {IAuthoringFieldV2, IAuthoringSectionTheme, IAuthoringSectionClassNames, IFieldsData} from 'superdesk-api';
 import {getField} from 'apps/fields';
 import {getFieldContainer} from './get-field-container';
 import {IPropsAuthoringSection} from './authoring-section';

scripts/apps/authoring-react/authoring-section/authoring-section.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {IAuthoringSectionTheme, IFieldsV2, IVocabularyItem} from 'superdesk-api';
+import {IAuthoringSectionTheme, IAuthoringSectionClassNames, IFieldsV2, IVocabularyItem} from 'superdesk-api';
 import {Map} from 'immutable';
 import {IAuthoringValidationErrors, IToggledFields} from '../authoring-react';
 import {AuthoringSectionField} from './authoring-section-field';

scripts/apps/authoring-react/authoring-section/get-field-container.tsx

@@ -26,10 +26,10 @@ export function getFieldContainer(
 
     class HeaderLayout extends React.PureComponent<IEditorComponentContainerProps> {
         render() {
-            const {miniToolbar} = this.props;
+            const {miniToolbar, sectionClassNames} = this.props;
 
             return (
-                <div>
+                <div className={sectionClassNames?.header}>
                     <div
                         style={{
                             display: 'flex',
@@ -87,10 +87,10 @@ export function getFieldContainer(
 
     class ContentLayout extends React.PureComponent<IEditorComponentContainerProps> {
         render() {
-            const {miniToolbar} = this.props;
+            const {miniToolbar, sectionClassNames} = this.props;
 
             return (
-                <div>
+                <div className={sectionClassNames?.content}>
                     <div
                         style={{
                             display: 'flex',

scripts/apps/authoring-react/fields/editor3/editor.tsx

@@ -407,7 +407,7 @@ export class Editor extends React.PureComponent<IProps, IState> {
         const HelperComponent = this.props.config.helperComponent;
 
         return (
-            <Container miniToolbar={miniToolbar}>
+            <Container miniToolbar={miniToolbar} sectionClassNames={{header: 'sd-input-style'}}>
                 {
                     HelperComponent != null && (
                         <HelperComponent

scripts/apps/authoring-react/toolbar/proofreading.scss

@@ -83,7 +83,6 @@
 .proofreading-panel-content__text-field--abstract {
     font-weight: 400;
     min-height: 9.2rem;
-    font-style: italic;
 }
 
 .proofreading-panel-content__text-field--body {

scripts/apps/authoring/styles/authoring.scss

@@ -722,10 +722,12 @@ $authoring-toolbar-spacing: 10px;
 .char-count-base {
     font-size: 11px;
     font-style: italic;
-    color: $grayLight;
+    color: var(--sd-editor-colour__txt);
+    opacity: 0.6;
 
     &.error {
         color: $red;
+        opacity: 1;
     }
 }
 

scripts/apps/authoring/styles/themes.scss

@@ -373,6 +373,15 @@ body, html {
         }
     }
 
+    .headline .public-DraftEditor-content {
+        font-weight: 500;
+        line-height: 1.2;
+    }
+
+    .abstract .public-DraftEditor-content {
+        font-weight: 400;
+    }
+
     .field__select:hover {
         -moz-appearance: menulist-button;
         -webkit-appearance: menulist-button;

scripts/core/editor3/components/Editor3Component.tsx

@@ -565,12 +565,6 @@ export class Editor3Component extends React.Component<IPropsEditor3Component, IS
 
         const cx = classNames({
             'Editor3-root Editor3-editor': true,
-            /**
-                There is global theming and article-edit specific one.
-                When inside article-edit we always pass a theme,
-                otherwise we want to use Editor3-single-line-style for global theme styling.
-            */
-            'Editor3-single-line-style': this.props.singleLine === true || this.props.uiTheme == null,
             'no-toolbar': !showToolbar,
             'read-only': readOnly,
             'unstyled__block--invisibles': this.props.invisibles,

scripts/core/editor3/directive.tsx

@@ -424,7 +424,7 @@ class Editor3Directive {
 
                     const getTemplateForHeader = () => {
                         return (
-                            <div style={{display: 'flex'}}>
+                            <div style={{display: 'flex'}} className="sd-input-style">
                                 <div className="authoring-header__item-label">
                                     {fieldName}
                                     {this.required && (

scripts/core/editor3/styles.scss

@@ -94,7 +94,6 @@ $editor-styleButton-size: 			3rem;
 			right: auto;
 			z-index: 10;
 			box-shadow: 0px 1px 5px rgba(0,0,0,0.4);
-			background-color: var(--sd-editor-colour__float-toolbar-bg);
 			.link-toolbar.empty {
 				display: none;
 			}
@@ -403,9 +402,10 @@ $editor-styleButton-size: 			3rem;
 .Editor3-editor {
 	cursor: text;
 	font-size: 16px;
-	line-height: 140%;
+	line-height: 1.4;
     word-break: break-word;
 	border: 1px solid var(--sd-editor-colour__controls-border);
+	border-radius: var(--b-radius--medium);
 }
 
 .Editor3-editor-single-line {
@@ -543,6 +543,7 @@ $editor-styleButton-size: 			3rem;
 	background-color: $editor-neutral-bg;
 	border-block-end: 1px solid;
 	border-bottom-color: $editor-neutral-border;
+	border-radius: var(--b-radius--medium) var(--b-radius--medium) 0 0;
 	line-height: 100% !important;
 
 	&.disabled {
@@ -851,10 +852,6 @@ $editor-styleButton-size: 			3rem;
 // Theme specific overrides
 
 .sd-editor--theme-turquoise, .sd-editor--theme-military {
-	.Editor3-controls, .item-association {
-		background-color: rgba(0, 0, 0, 0.03);
-		border-bottom-color: rgba(0, 0, 0, 0.1);
-	}
 	.Editor3-root, .item-association {
 		border-color: rgba(0, 0, 0, 0.1);
 	}
@@ -934,7 +931,7 @@ $editor-styleButton-size: 			3rem;
 	background-color: #f8f8f8;
 }
 
-.Editor3-single-line-style {
+.sd-input-style .Editor3-root {
 	background: var(--color-input-bg);
 	color: var(--color-text);
 	border: none;

scripts/core/superdesk-api.d.ts

@@ -3411,6 +3411,7 @@ declare module 'superdesk-api' {
          * (it will be rendered in different DOM locations depending if field is in header or content section)
          */
         miniToolbar?: JSX.Element;
+        sectionClassNames?: IAuthoringSectionClassNames;
     }
 
     export interface IEditorComponentProps<IValue, IConfig, IEditorPreferences> {
@@ -3497,6 +3498,11 @@ declare module 'superdesk-api' {
         };
     }
 
+    export interface IAuthoringSectionClassNames {
+        header?: string;
+        content?: string;
+    }
+
     export interface ICommonFieldConfig {
         readOnly?: boolean;
         required?: boolean;

styles/sass/forms.scss

@@ -374,7 +374,7 @@ textarea[readonly] {
 .sd-required {
     font-size: 11px;
     font-style: italic;
-    color: $grayDark;
+    color: var(--sd-editor-colour__txt);
 }