Style comments sidebar for editor context

Use borders instead of shadows for threads and allow
the new topic button to be restyled via className prop.
Review components use CSS custom properties so the editor
can override appearance without direct CSS coupling.

REDMINE-21261

Author: tf

entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.js

@@ -20,7 +20,8 @@ export const ContentElementCommentsView = Marionette.ItemView.extend({
     ReactDOM.render(
       <ReviewStateProvider initialState={session.state}>
         <ThreadList subjectType="ContentElement"
-                    subjectId={this.model.get('permaId')} />
+                    subjectId={this.model.get('permaId')}
+                    newTopicButtonClassName={styles.newTopicButton} />
       </ReviewStateProvider>,
       this.$el.find(`.${styles.container}`)[0]
     );

entry_types/scrolled/package/src/editor/views/ContentElementCommentsView.module.css

@@ -1,2 +1,14 @@
 .container {
+  position: relative;
+  padding-top: space(4);
+  --review-thread-box-shadow: none;
+  --review-thread-border: 1px solid var(--ui-on-surface-color-lightest);
+}
+
+.newTopicButton {
+  composes: secondaryIconButton from './buttons.module.css';
+  display: flex !important;
+  position: absolute;
+  right: 0;
+  bottom: 100%;
 }

entry_types/scrolled/package/src/review/NewThreadForm.module.css

@@ -5,7 +5,8 @@
   padding: space(3);
   background: var(--ui-surface-color);
   border-radius: rounded(lg);
-  box-shadow: var(--ui-box-shadow);
+  box-shadow: var(--review-thread-box-shadow, var(--ui-box-shadow));
+  border: var(--review-thread-border, none);
 }
 
 .input {

entry_types/scrolled/package/src/review/Thread.module.css

@@ -6,7 +6,8 @@
   padding: space(3);
   background: var(--ui-surface-color);
   border-radius: rounded(lg);
-  box-shadow: var(--ui-box-shadow);
+  box-shadow: var(--review-thread-box-shadow, var(--ui-box-shadow));
+  border: var(--review-thread-border, none);
 }
 
 .chevronButton {

entry_types/scrolled/package/src/review/ThreadList.js

@@ -9,7 +9,7 @@ import {NewThreadForm} from './NewThreadForm';
 import NewTopicIcon from './images/newTopic.svg';
 import styles from './ThreadList.module.css';
 
-export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp, reversed, onDismiss}) {
+export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp, reversed, onDismiss, newTopicButtonClassName}) {
   const {t} = useI18n({locale: 'ui'});
   const threads = useCommentThreads(subjectType, subjectId);
   const [expandedThreadId, setExpandedThreadId] = useState(null);
@@ -24,7 +24,8 @@ export function ThreadList({subjectType, subjectId, showNewForm: showNewFormProp
     <div className={styles.container}>
       {!showNewForm &&
         <button className={classNames(styles.newTopicButton,
-                                          {[styles.reversed]: reversed})}
+                                      newTopicButtonClassName,
+                                      {[styles.reversed]: reversed})}
                 onClick={() => setFormToggled(true)}
                 aria-label={t('pageflow_scrolled.review.new_topic')}>
           <NewTopicIcon />

entry_types/scrolled/package/src/review/ThreadList.module.css

@@ -16,7 +16,7 @@
   background: var(--ui-surface-color);
   border: 0;
   border-radius: rounded();
-  box-shadow: var(--ui-box-shadow);
+  box-shadow: var(--review-thread-box-shadow, var(--ui-box-shadow));
   padding: space(1.5) space(2);
   cursor: pointer;
 }