name/bio/avatar/banner edit support

src/components/user_card/user_card.scss

@@ -26,7 +26,7 @@
     color: var(--lightText);
     display: block;
     line-height: 1.3;
-    padding: 0.6em;
+    padding: 0 0.6em;
     margin: 0 0.6em;
 
     img {
@@ -38,8 +38,6 @@
   }
 
   .user-card-bio {
-    margin: 0.6em;
-
     &, * {
       line-height: 1.5;
     }
@@ -201,6 +199,7 @@
       margin: -0.6em;
 
       &.save-profile-button,
+      &.reset-profile-button,
       &.edit-banner-button {
         width: auto;
       }
@@ -280,6 +279,14 @@
       .edit-button {
         width: 3em;
         text-align: center;
+
+        &:hover .icon {
+          color: var(--textFaint);
+        }
+
+        &:not(:hover) .icon {
+          color: var(--lightText);
+        }
       }
 
       .input,
@@ -391,6 +398,7 @@
     grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
     grid-gap: 0.6em;
     max-width: 98vw;
+    margin-bottom: 0.6em;
 
     .popover-trigger-button, .moderation-tools-button {
       width: 100%;
@@ -575,4 +583,25 @@
       aspect-ratio: unset;
     }
   }
+
+  &.-banner {
+    .images-container {
+      grid-template-rows: 20em 5em 20em;
+      grid-template-columns: 1fr;
+
+      > * {
+        flex: 1 0 10em;
+        width: 100%;
+        aspect-ratio: 3;
+      }
+    }
+
+    .separator {
+      min-height: 1.1em;
+      font-size: 500%;
+      justify-self: center;
+      flex: 0 1 5em;
+      aspect-ratio: unset;
+    }
+  }
 }