Updating design of Feed Card (#9918)

* .

* resposniveness

* tags

app/assets/stylesheets/components/comments.scss

@@ -2,6 +2,7 @@
 
 .crayons-comment {
   font-size: var(--fs-s);
+  padding: var(--su-2) var(--su-3);
 
   &__meta {
     display: flex;
@@ -14,18 +15,17 @@
   }
 
   &__body {
-    margin-top: calc(var(--su-1) * -1);
     padding-left: var(--su-7);
-    padding-bottom: var(--su-2);
     max-height: 310px;
     overflow: hidden;
+    position: relative;
 
     a:hover {
       text-decoration: underline; //todo: default for all in-content links
     }
 
     p {
-      margin: var(--su-1) auto;
+      margin-bottom: var(--su-1);
     }
 
     * {
@@ -42,15 +42,19 @@
       margin: var(--su-1) auto;
       font-size: 90%; // little adjustment for feed comments since default monospace font looks really tiny there.
     }
-  }
 
-  &__footer {
-    box-shadow: 0px 0px var(--su-2) var(--su-2) var(--story-comments-bg);
-    z-index: 5;
-    position: relative;
+    &::after {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(transparent 250px, var(--story-comments-bg));
+    }
   }
 
   & + & {
-    margin-top: var(--su-4);
+    margin-top: var(--su-1);
   }
 }

app/assets/stylesheets/components/stories.scss

@@ -169,10 +169,18 @@
   &__comments {
     cursor: default;
     background: var(--story-comments-bg);
-    padding: var(--story-padding);
-    padding-top: var(--su-4);
-    border-radius: 0 0 var(--radius) var(--radius);
-    margin-top: calc(var(--su-1) * -1);
+    border-radius: var(--radius);
+    position: relative;
+    bottom: var(--su-2);
+    margin: var(--su-2);
+    margin-bottom: 0;
+    padding: var(--su-2) 0;
+
+    @media (min-width: $breakpoint-s) {
+      bottom: var(--su-3);
+      margin: var(--su-3);
+      margin-bottom: 0;
+    }
 
     &__headline {
       font-weight: var(--fw-bold);
@@ -186,6 +194,7 @@
       padding-left: calc(var(--su-6) + var(--su-4));
       z-index: 6;
       position: relative;
+      margin-top: var(--su-1);
     }
   }
 

app/assets/stylesheets/components/tags.scss

@@ -1,21 +1,19 @@
 @import '../config/import';
 
 .crayons-tag {
-  font-family: var(--ff-monospace);
   font-size: var(--fs-xs);
   color: var(--tag-color);
-  line-height: var(--lh-tight);
+  line-height: 1.3;
   border-radius: var(--radius);
   padding: var(--su-1);
   display: inline-block;
-  letter-spacing: -0.05em;
 
   @media (min-width: $breakpoint-s) {
     font-size: var(--fs-s);
   }
 
   &__prefix {
-    opacity: 0.5;
+    opacity: 0.4;
     font-weight: normal;
   }
 

app/assets/stylesheets/config/_colors.scss

@@ -207,7 +207,7 @@
   --tab-pill-color-current: var(--base-inverted);
 
   // Tags
-  --tag-color: var(--base-70);
+  --tag-color: var(--base-60);
   --tag-color-hover: var(--base-100);
 
   // Story

app/javascript/articles/components/CommentListItem.jsx

@@ -10,7 +10,7 @@ function userProfilePage(username) {
 
 export const CommentListItem = ({ comment }) => (
   <div
-    className="crayons-comment pl-2 cursor-pointer"
+    className="crayons-comment cursor-pointer"
     role="presentation"
     onClick={(_event) => {
       if (_event.which > 1 || _event.metaKey || _event.ctrlKey) {
@@ -52,7 +52,6 @@ export const CommentListItem = ({ comment }) => (
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: comment.safe_processed_html }}
     />
-    <div className="crayons-comment__footer" />
   </div>
 );
 

app/javascript/articles/components/CommentsList.jsx

@@ -16,9 +16,10 @@ function moreCommentsButton(comments, articlePath, totalCount) {
     button = (
       <div className="crayons-story__comments__actions">
         <Button
-          variant="secondary"
+          variant="ghost"
           size="s"
           tagName="a"
+          className="-ml-2"
           url={linkToCommentsSection(articlePath)}
           data-testid="see-all-comments"
         >