Change design of metadata underneath posts in web UI (#29585)

app/javascript/styles/mastodon/components.scss

@@ -1659,15 +1659,35 @@ body > [data-popper-placement] {
 }
 
 .detailed-status__meta {
-  margin-top: 16px;
+  margin-top: 24px;
   color: $dark-text-color;
   font-size: 14px;
   line-height: 18px;
 
+  &__line {
+    border-bottom: 1px solid var(--background-border-color);
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+
   .icon {
-    width: 15px;
-    height: 15px;
-    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+  }
+
+  .animated-number {
+    color: $secondary-text-color;
   }
 }
 
@@ -1711,19 +1731,6 @@ body > [data-popper-placement] {
   color: inherit;
   text-decoration: none;
   gap: 6px;
-  position: relative;
-  top: 0.145em;
-
-  .icon {
-    top: 0;
-  }
-}
-
-.detailed-status__favorites,
-.detailed-status__reblogs {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 18px;
 }
 
 .domain {
@@ -2292,6 +2299,10 @@ a.account__display-name {
       outline: 1px dotted;
     }
 
+    &:hover {
+      text-decoration: underline;
+    }
+
     .icon {
       width: 15px;
       height: 15px;