Merge branch 'master' into federation_merge_from_master_2

[lemmy.git] / ui / src / components / comment-node.tsx

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index ca828a45838afc1324596c31a6008cb44d757ae4..155efe8e0f66ac88df350a65328991195c35d372 100644 (file)
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -132,7 +132,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       >
         <div
           id={`comment-${node.comment.id}`}
-          className={`details comment-node border-top border-light ${
+          className={`details comment-node border-top border-light py-2 ${
             this.isCommentNew ? 'mark' : ''
           }`}
           style={
@@ -148,7 +148,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               'ml-2'
             }`}
           >
-            <div class="d-flex flex-wrap align-items-center mb-1 mt-1 text-muted small">
+            <div class="d-flex flex-wrap align-items-center text-muted small">
               <span class="mr-2">
                 <UserListing
                   user={{
@@ -297,25 +297,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           )}
                         </button>
                       )}
-                      <button
-                        class="btn btn-link btn-animate text-muted"
-                        onClick={linkEvent(this, this.handleSaveCommentClick)}
-                        data-tippy-content={
-                          node.comment.saved ? i18n.t('unsave') : i18n.t('save')
-                        }
-                      >
-                        {this.state.saveLoading ? (
-                          this.loadingIcon
-                        ) : (
-                          <svg
-                            class={`icon icon-inline ${
-                              node.comment.saved && 'text-warning'
-                            }`}
-                          >
-                            <use xlinkHref="#icon-star"></use>
-                          </svg>
-                        )}
-                      </button>
                       <button
                         class="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
@@ -351,6 +332,30 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                             </button>
                           )}
                           {!this.props.showContext && this.linkBtn}
+                          <button
+                            class="btn btn-link btn-animate text-muted"
+                            onClick={linkEvent(
+                              this,
+                              this.handleSaveCommentClick
+                            )}
+                            data-tippy-content={
+                              node.comment.saved
+                                ? i18n.t('unsave')
+                                : i18n.t('save')
+                            }
+                          >
+                            {this.state.saveLoading ? (
+                              this.loadingIcon
+                            ) : (
+                              <svg
+                                class={`icon icon-inline ${
+                                  node.comment.saved && 'text-warning'
+                                }`}
+                              >
+                                <use xlinkHref="#icon-star"></use>
+                              </svg>
+                            )}
+                          </button>
                           <button
                             className="btn btn-link btn-animate text-muted"
                             onClick={linkEvent(this, this.handleViewSource)}