From 59de80639f72a06dc0bbb6542beb3933a65b64c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 11:34:41 +0300
Subject: [PATCH] small updates

---
 .../settings_modal/tabs/profile_tab.vue       | 115 +++---------------
 src/components/user_card/user_card.scss       |   8 +-
 src/components/user_card/user_card.vue        |  11 +-
 src/i18n/en.json                              |   2 +
 4 files changed, 34 insertions(+), 102 deletions(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index ae896e78d..25a3f5482 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="profile-tab">
-    <div class="setting-item">
-      <UserCard
-        :user-id="user.id"
-        :editable="true"
-        :switcher="false"
-        rounded="top"
-      />
-      <p>{{ $t('settings.name') }}</p>
-      <p v-if="role === 'admin' || role === 'moderator'">
+    <UserCard
+      :user-id="user.id"
+      :editable="true"
+      :switcher="false"
+      rounded="top"
+    >
+      <template v-if="role === 'admin' || role === 'moderator'">
+      <h4>{{ $t('settings.show_labels') }}</h4>
+      <p class="user-card-setting">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">
             {{ $t('settings.show_admin_badge') }}
@@ -18,7 +18,9 @@
           </template>
         </Checkbox>
       </p>
-      <p>
+      </template>
+      <h4>{{ $t('settings.user_type') }}</h4>
+      <p class="user-card-setting">
         <label>
           {{ $t('settings.actor_type') }}
           <Select v-model="actorType">
@@ -30,13 +32,15 @@
               {{ $t('settings.actor_type_' + option) }}
             </option>
           </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
         </label>
       </p>
-      <div v-if="groupActorAvailable">
-        <small>
-          {{ $t('settings.actor_type_description') }}
-        </small>
-      </div>
+    </UserCard>
+    <div class="setting-item">
       <p>
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
@@ -52,87 +56,6 @@
         {{ $t('settings.save') }}
       </button>
     </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.avatar') }}</h2>
-      <p class="visibility-notice">
-        {{ $t('settings.avatar_size_instruction') }}
-      </p>
-      <div class="current-avatar-container">
-        <img
-          :src="user.profile_image_url_original"
-          class="current-avatar"
-        >
-        <button
-          v-if="!isDefaultAvatar && pickAvatarBtnVisible"
-          :title="$t('settings.reset_avatar')"
-          class="button-unstyled reset-button"
-          @click="resetAvatar"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_avatar') }}</p>
-      <button
-        v-show="pickAvatarBtnVisible"
-        id="pick-avatar"
-        class="button-default btn"
-        type="button"
-      >
-        {{ $t('settings.upload_a_photo') }}
-      </button>
-      <image-cropper
-        trigger="#pick-avatar"
-        :submit-handler="submitAvatar"
-        @open="pickAvatarBtnVisible=false"
-        @close="pickAvatarBtnVisible=true"
-      />
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.profile_banner') }}</h2>
-      <div class="banner-background-preview">
-        <img :src="user.cover_photo">
-        <button
-          v-if="!isDefaultBanner"
-          class="button-unstyled reset-button"
-          :title="$t('settings.reset_profile_banner')"
-          @click="resetBanner"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_profile_banner') }}</p>
-      <img
-        v-if="bannerPreview"
-        class="banner-background-preview"
-        :src="bannerPreview"
-      >
-      <div>
-        <input
-          type="file"
-          class="input"
-          @change="uploadFile('banner', $event)"
-        >
-      </div>
-      <FAIcon
-        v-if="bannerUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
-      <button
-        v-else-if="bannerPreview"
-        class="btn button-default"
-        @click="submitBanner(banner)"
-      >
-        {{ $t('settings.save') }}
-      </button>
-    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index dee45ab23..af4fd9608 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,8 +21,8 @@
     padding-bottom: 0;
   }
 
+  &-setting,
   &-bio {
-    text-align: center;
     color: var(--lightText);
     display: block;
     line-height: 1.3;
@@ -38,6 +38,12 @@
   }
 
   .user-card-bio {
+    text-align: center;
+
+    &.input {
+      margin: 0 1em;
+    }
+
     &, * {
       line-height: 1.5;
     }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6d856d285..a85455d86 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -592,21 +592,22 @@
           v-else-if="editable"
           class="birthday"
         >
+          <div>
+            <Checkbox v-model="showBirthday">
+              {{ $t('settings.birthday.show_birthday') }}
+            </Checkbox>
+          </div>
           <FAIcon
             class="fa-old-padding"
             icon="birthday-cake"
           />
+          {{ $t('settings.birthday.label') }}
           <input
             id="birthday"
             v-model="newBirthday"
             type="date"
             class="input birthday-input"
           >
-          <div>
-            <Checkbox v-model="showBirthday">
-              {{ $t('settings.birthday.show_birthday') }}
-            </Checkbox>
-          </div>
         </div>
       </template>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index fc57403e7..ba109f903 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -492,6 +492,8 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
+    "user_type": "User type",
+    "show_labels": "User labels",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",