streamline profile image api, update reset ui for all profile images to match avatar, remove unnecessary stuff

1 files changed, 34 insertions, 5 deletions

diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index b3dcf42c..e14cf054 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -13,8 +13,14 @@
     height: auto;
   }
 
-  .banner {
+  .banner-background-preview {
     max-width: 100%;
+    width: 300px;
+    position: relative;
+
+    img {
+      width: 100%;
+    }
   }
 
   .uploading {
@@ -26,18 +32,40 @@
     width: 100%;
   }
 
-  .bg {
-    max-width: 100%;
+  .current-avatar-container {
+    position: relative;
+    width: 150px;
+    height: 150px;
   }
 
   .current-avatar {
     display: block;
-    width: 150px;
-    height: 150px;
+    width: 100%;
+    height: 100%;
     border-radius: $fallback--avatarRadius;
     border-radius: var(--avatarRadius, $fallback--avatarRadius);
   }
 
+  .reset-button {
+    position: absolute;
+    top: 0.2em;
+    right: 0.2em;
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 0.7;
+    color: white;
+    width: 1.5em;
+    height: 1.5em;
+    text-align: center;
+    line-height: 1.5em;
+    font-size: 1.5em;
+    cursor: pointer;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .oauth-tokens {
     width: 100%;
 
@@ -86,6 +114,7 @@
     &>.emoji-input {
       flex: 1 1 auto;
       margin: 0 .2em .5em;
+      min-width: 0;
     }
 
     &>.icon-container {