user card tweak

src/components/user_card/user_card.js

@@ -57,7 +57,6 @@ export default {
     style () {
       return {
         backgroundImage: [
-          `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
           `url(${this.user.cover_photo})`
         ].join(', ')
       }

src/components/user_card/user_card.scss

@@ -35,12 +35,14 @@
     left: 0;
     right: 0;
     bottom: 0;
-    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-          linear-gradient(to top, white, white);
+    height: 200px;
+    overflow: clip;
+    background-position-y: center;
     // Autoprefixer seem to ignore this one, and also syntax is different
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
+    background-repeat-y: no-repeat;
     mask-size: 100% 60%;
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);
@@ -97,14 +99,14 @@
 .user-info {
   color: $fallback--lightText;
   color: var(--lightText, $fallback--lightText);
-  padding: 0 26px;
+  padding: 150px 26px 0; //qb: move below background
 
   .container {
     min-width: 0;
-    padding: 16px 0 6px;
+    padding: 16px 6px 6px;
     display: flex;
     align-items: flex-start;
-    max-height: 56px;
+    max-height: 92px;  //qb: for bigger avatar
 
     > * {
       min-width: 0;
@@ -116,8 +118,8 @@
       --_avatarShadowInset: var(--avatarShadowInset);
 
       flex: 1 0 100%;
-      width: 56px;
-      height: 56px;
+      width: 92px;
+      height: 92px;
       object-fit: cover;
     }
   }
@@ -167,6 +169,7 @@
   .user-summary {
     display: block;
     margin-left: 0.6em;
+    margin-top: 1.5em;
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;