comments and ratings: small changes following mB redesign

adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap

@@ -82,6 +82,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                       class="fa fa-chevron-up"
                     />
                     10
+                    <span
+                      class="rating__label"
+                    >
+                      Likes
+                    </span>
                   </button>
                   <button
                     aria-label="Click to vote down"
@@ -93,6 +98,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                       class="fa fa-chevron-down"
                     />
                     2
+                    <span
+                      class="rating__label"
+                    >
+                      Dislikes
+                    </span>
                   </button>
                 </div>
                 <div
@@ -346,6 +356,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                     class="fa fa-chevron-up"
                   />
                   10
+                  <span
+                    class="rating__label"
+                  >
+                    Likes
+                  </span>
                 </button>
                 <button
                   aria-label="Click to vote down"
@@ -357,6 +372,11 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                     class="fa fa-chevron-down"
                   />
                   2
+                  <span
+                    class="rating__label"
+                  >
+                    Dislikes
+                  </span>
                 </button>
               </div>
               <div
@@ -672,6 +692,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                       class="fa fa-chevron-up"
                     />
                     10
+                    <span
+                      class="rating__label"
+                    >
+                      Likes
+                    </span>
                   </button>
                   <button
                     aria-label="Click to vote down"
@@ -683,6 +708,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                       class="fa fa-chevron-down"
                     />
                     2
+                    <span
+                      class="rating__label"
+                    >
+                      Dislikes
+                    </span>
                   </button>
                 </div>
                 <div
@@ -941,6 +971,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                     class="fa fa-chevron-up"
                   />
                   10
+                  <span
+                    class="rating__label"
+                  >
+                    Likes
+                  </span>
                 </button>
                 <button
                   aria-label="Click to vote down"
@@ -952,6 +987,11 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                     class="fa fa-chevron-down"
                   />
                   2
+                  <span
+                    class="rating__label"
+                  >
+                    Dislikes
+                  </span>
                 </button>
               </div>
               <div

adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment_box.jest.jsx.snap

@@ -9,7 +9,9 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
         <div
           class="a4-comments__commentbox__form"
         >
-          <div>
+          <div
+            class="a4-comments__alert"
+          >
             Only invited users can actively participate.
           </div>
         </div>
@@ -133,7 +135,7 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
           </div>
         </div>
         <ul
-          class="u-list-reset"
+          class="u-list-reset a4-comments"
         />
         <div
           class="d-none"
@@ -156,7 +158,9 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
       <div
         class="a4-comments__commentbox__form"
       >
-        <div>
+        <div
+          class="a4-comments__alert"
+        >
           Only invited users can actively participate.
         </div>
       </div>
@@ -280,7 +284,7 @@ exports[`CommentBox Component comments are fetched and loading spinners is hidde
         </div>
       </div>
       <ul
-        class="u-list-reset"
+        class="u-list-reset a4-comments"
       />
       <div
         class="d-none"

adhocracy4/comments_async/static/comments_async/comment_form.jsx

@@ -233,13 +233,13 @@ export default class CommentForm extends React.Component {
       )
     } else if (!this.props.projectIsPublic) {
       return (
-        <div>
+        <div className="a4-comments__alert">
           {translated.onlyInvited}
         </div>
       )
     } else {
       return (
-        <div>
+        <div className="a4-comments__alert">
           {translated.notAllowedComment}
         </div>
       )

adhocracy4/comments_async/static/comments_async/comment_list.jsx

@@ -4,7 +4,7 @@ import Comment from './comment'
 
 const CommentList = (props) => {
   return (
-    <ul className="u-list-reset">
+    <ul className="u-list-reset a4-comments">
       {
         props.comments.map((comment, index) => {
           return (

adhocracy4/comments_async/static/comments_async/comment_manage_dropdown.jsx

@@ -18,16 +18,22 @@ const CommentManageDropdown = (props) => {
       >
         <i className="fas fa-ellipsis-h" aria-hidden="true" />
       </button>
-      <div className="dropdown-menu dropdown-menu-end">
-        {props.has_changing_permission && [
-          <button key="1" className="dropdown-item" type="button" onClick={props.handleToggleEdit}>{translated.edit}</button>,
-          <div className="divider" key="2" />
-        ]}
-        {props.has_deleting_permission && [
-          <a key="3" className="dropdown-item" href={'#comment_delete_' + props.id} data-bs-toggle="modal">{translated.delete}</a>,
-          <div className="divider" key="4" />
-        ]}
-      </div>
+      <ul className="dropdown-menu dropdown-menu-end">
+        {props.has_changing_permission && (
+          <li className="dropdown-item">
+            <button type="button" onClick={props.handleToggleEdit}>
+              {translated.edit}
+            </button>
+          </li>
+        )}
+        {props.has_deleting_permission && (
+          <li className="dropdown-item">
+            <a href={'#comment_delete_' + props.id} data-bs-toggle="modal">
+              {translated.delete}
+            </a>
+          </li>
+        )}
+      </ul>
     </div>
   )
 }

adhocracy4/ratings/static/ratings/react_ratings.jsx

@@ -7,7 +7,9 @@ import config from '../../../static/config'
 
 const translations = {
   upvote: django.gettext('Click to vote up'),
-  downvote: django.gettext('Click to vote down')
+  downvote: django.gettext('Click to vote down'),
+  likes: django.gettext('Likes'),
+  dislikes: django.gettext('Dislikes')
 }
 
 class RatingBox extends React.Component {
@@ -133,6 +135,7 @@ class RatingBox extends React.Component {
         >
           <i className="fa fa-chevron-up" aria-hidden="true" />
           {this.state.positiveRatings}
+          <span className="rating__label">{translations.likes}</span>
         </button>
         <button
           aria-label={translations.downvote}
@@ -142,6 +145,7 @@ class RatingBox extends React.Component {
         >
           <i className="fa fa-chevron-down" aria-hidden="true" />
           {this.state.negativeRatings}
+          <span className="rating__label">{translations.dislikes}</span>
         </button>
       </div>
     )