feat(css): styles for quote replies

* Remove padding from popup to make the button more sleek

* Reduce the default margin/padding on blockquotes to make nested quotes
look neater.

* Change text color within blockquotes to be a muted gray.

Author: palkerecsenyi

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/elements/button.overrides

@@ -76,3 +76,20 @@
     }
   }
 }
+
+.ui.button.text-only {
+  padding: @verticalPadding @textOnlyHorizontalPadding;
+  transform: translateX(-@textOnlyHorizontalPadding);
+
+  &:not(:hover):not(:active):not(:focus) {
+    background: none;
+  }
+
+  &:hover:not(:active), &:focus:not(:active) {
+    background-color: @backgroundColor;
+  }
+
+  &:active {
+    background-color: @hoverBackgroundColor;
+  }
+}

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/elements/button.variables

@@ -3,3 +3,4 @@
 ***********************************************/
 
 @searchButtonColor: #fb8273;
+@textOnlyHorizontalPadding: 0.5rem;

invenio_app_rdm/theme/assets/semantic-ui/less/invenio_app_rdm/theme/views/feed.overrides

@@ -8,7 +8,7 @@
     position: relative;
     padding: @defaultPadding 0;
 
-    &::before {
+    &:not(.reply)::before {
       position: absolute;
       top: 0;
       bottom: 0;
@@ -27,11 +27,20 @@
       padding-top: 0;
     }
 
+    &.reply {
+      padding: 0;
+      margin-top: 1rem;
+
+      .requests-avatar-container {
+        margin-top: 0;
+      }
+    }
   }
 
   .requests-avatar-container {
     padding-right: 0.5em;
     margin-top: 1rem;
+    position: relative;
 
     @media screen and (max-width: @largestMobileScreen) {
       margin-top: 0;
@@ -41,6 +50,26 @@
       max-height: 40px;
       width: auto;
     }
+
+    &.has-line::before {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      bottom: 0;
+      // Half the width of the avatar minus the width of the line
+      left: calc(1em - 1px);
+      width: 1px;
+      background-color: @borderColor;
+      // Full height of the comment + the margin of the next comment
+      height: calc(100% + 1rem);
+
+      @media screen and (max-width: @largestMobileScreen) {
+        & {
+          display: none;
+        }
+      }
+    }
   }
 
   .requests-event-inner-container {
@@ -78,6 +107,16 @@
 
     .text {
       width: auto;
+
+      &.extra blockquote {
+        margin-left: 0.5rem;
+        padding-left: 0.75rem;
+        color: @mutedTextColor;
+
+        & > blockquote {
+          margin-left: 0;
+        }
+      }
     }
 
     &.requests-action-event {
@@ -89,6 +128,12 @@
         margin-right: 0.5 * @defaultMargin;
       }
     }
+
+    &.requests-reply-event {
+      border: none;
+      padding: 0;
+      margin-left: 0.5rem;
+    }
   }
 
   .requests-action-event-icon {
@@ -99,6 +144,61 @@
       background-color: @white;
     }
   }
+
+  .requests-comment-fake-reply {
+    display: flex;
+    align-items: center;
+
+    .requests-avatar-container {
+      margin-top: 0;
+    }
+  }
+
+  .requests-reply-count {
+    background-color: @primaryColor;
+    color: white;
+    padding: 2px 4px;
+    border-radius: @defaultBorderRadius;
+    font-weight: normal;
+    // Default font Helvetica has non-standard metrics so doesn't look middle-aligned on Firefox
+    font-family: sans-serif;
+    font-size: 0.75rem;
+  }
+
+  .requests-reply-caret {
+    margin-left: 2px !important;
+    // The button styles add a right margin when the `right` class is added, despite that just being
+    // part of the icon name.
+    margin-right: 0 !important;
+  }
+
+  .requests-reply-load-more {
+    // Width of avatar + padding on right-side of avatar + margin on left-side of main content
+    margin-left: calc(2em + 1.25em + 0.5rem);
+
+    &::before {
+      content: "";
+      position: absolute;
+      display: block;
+      top: 0;
+      bottom: 0;
+      // Margin on left-side of main content, padding on right-side of avatar, quarter of avatar width, width of line
+      left: calc(-0.5rem - 1.5em - 1px);
+      width: 1px;
+      background-color: @borderColor;
+      // Full height of the comment + the margin of the next comment
+      height: calc(100% + 1rem);
+    }
+
+    @media screen and (max-width: @largestMobileScreen) {
+      & {
+        margin-left: 0;
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 .ui.feed {
@@ -160,6 +260,7 @@
     border-left: @extraTextPointer;
     font-size: @extraTextFontSize;
     line-height: @extraTextLineHeight;
+
   }
 
   /*--------------
@@ -233,4 +334,11 @@
   }
 }
 
+.ui.popup.requests-event-body-popup {
+  padding: 0;
+  border: none;
 
+  .ui.button {
+    margin: 0;
+  }
+}