Merge remote-tracking branch 'origin/develop' into customizable-post-actions

changelog.d/muted_user_en_translation.skip

@@ -0,0 +1 @@
+Added missing EN translation key for status.muted_user

package.json

@@ -16,7 +16,7 @@
     "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.21.5",
+    "@babel/runtime": "7.26.0",
     "@chenfengyuan/vue-qrcode": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "6.4.0",
     "@fortawesome/free-regular-svg-icons": "6.4.0",
@@ -24,7 +24,7 @@
     "@fortawesome/vue-fontawesome": "3.0.3",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.8.21",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
     "body-scroll-lock": "3.1.5",
@@ -37,11 +37,11 @@
     "localforage": "1.10.0",
     "pako": "^2.1.0",
     "parse-link-header": "2.0.0",
-    "phoenix": "1.7.7",
+    "phoenix": "1.7.18",
-    "punycode.js": "2.3.0",
+    "punycode.js": "2.3.1",
-    "qrcode": "1.5.3",
+    "qrcode": "1.5.4",
     "querystring-es3": "0.2.1",
-    "url": "0.11.0",
+    "url": "0.11.4",
     "utf8": "3.0.0",
     "vue": "3.2.45",
     "vue-i18n": "10",
@@ -51,18 +51,18 @@
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.21.8",
+    "@babel/core": "7.26.0",
-    "@babel/eslint-parser": "7.21.8",
+    "@babel/eslint-parser": "7.26.5",
-    "@babel/plugin-transform-runtime": "7.21.4",
+    "@babel/plugin-transform-runtime": "7.25.9",
-    "@babel/preset-env": "7.21.5",
+    "@babel/preset-env": "7.26.0",
-    "@babel/register": "7.21.0",
+    "@babel/register": "7.25.9",
     "@intlify/vue-i18n-loader": "5.0.1",
     "@ungap/event-target": "0.2.4",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.2.2",
+    "@vue/babel-plugin-jsx": "1.2.5",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
-    "autoprefixer": "10.4.19",
+    "autoprefixer": "10.4.20",
     "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.7",
@@ -70,7 +70,7 @@
     "chromedriver": "108.0.0",
     "connect-history-api-fallback": "2.0.0",
     "copy-webpack-plugin": "11.0.0",
-    "cross-spawn": "7.0.3",
+    "cross-spawn": "7.0.6",
     "css-loader": "6.10.0",
     "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
@@ -83,14 +83,14 @@
     "eslint-plugin-vue": "9.9.0",
     "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
-    "express": "4.18.2",
+    "express": "4.21.2",
-    "function-bind": "1.1.1",
+    "function-bind": "1.1.2",
     "html-webpack-plugin": "5.5.1",
-    "http-proxy-middleware": "2.0.6",
+    "http-proxy-middleware": "2.0.7",
     "iso-639-1": "2.1.15",
     "json-loader": "0.5.7",
     "karma": "6.4.4",
-    "karma-coverage": "2.2.0",
+    "karma-coverage": "2.2.1",
     "karma-firefox-launcher": "2.1.3",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
@@ -110,7 +110,7 @@
     "postcss-scss": "^4.0.6",
     "sass": "1.60.0",
     "sass-loader": "13.2.2",
-    "selenium-server": "2.53.1",
+    "selenium-server": "3.141.59",
     "semver": "7.3.8",
     "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",

src/components/button.style.js

@@ -35,11 +35,11 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
-        '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
         '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
-        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
-        '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
+        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
       }
     },
     {
@@ -78,28 +78,28 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--inheritedBackground,-14.2',
+        background: '--accent,-24.2',
         shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--inheritedBackground,-14.2',
+        background: '--accent,-24.2',
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonPressedBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonDefaultBevel']
       }
     },

src/components/chat_message/chat_message.js

@@ -66,7 +66,6 @@ const ChatMessage = {
       return this.message.attachments.length > 0
     },
     ...mapState({
-      betterShadow: state => state.interface.browserSupport.cssFilter,
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),

src/components/chat_message/chat_message.vue

@@ -20,7 +20,6 @@
         >
           <UserAvatar
             :compact="true"
-            :better-shadow="betterShadow"
             :user="author"
           />
         </UserPopover>

src/components/dialog_modal/dialog_modal.js

@@ -8,6 +8,11 @@ const DialogModal = {
       default: () => {},
       type: Function
     }
+  },
+  computed: {
+    mobileCenter () {
+      return this.$store.getters.mergedConfig.modalMobileCenter
+    }
   }
 }
 

src/components/dialog_modal/dialog_modal.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="dialog-container"
-    :class="{ 'dark-overlay': darkOverlay }"
+    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -79,6 +79,7 @@
     padding: 0.5em;
     border-top: 1px solid var(--border);
     display: grid;
+    justify-content: end;
     grid-gap: 0.5em;
     grid-template-columns: min-content;
     grid-auto-columns: min-content;
@@ -99,6 +100,10 @@
     justify-content: stretch;
     align-items: end;
     justify-items: stretch;
+
+    &.-center-mobile {
+      align-items: center;
+    }
   }
 
   .dialog-modal.panel {

src/components/draft/draft.vue

@@ -64,12 +64,12 @@
     <div v-if="editing">
       <PostStatusForm
         v-if="draft.type !== 'edit'"
-        :disable-draft="true"
+        :hide-draft="true"
         v-bind="postStatusFormProps"
       />
       <EditStatusForm
         v-else
-        :disable-draft="true"
+        :hide-draft="true"
         :params="postStatusFormProps"
       />
     </div>

src/components/edit_status_modal/edit_status_modal.vue

@@ -15,6 +15,7 @@
         class="panel-body"
         :params="params"
         @posted="doCloseModal"
+        @draft-done="doCloseModal"
         @can-close="doCloseModal"
       />
     </div>

src/components/emoji_reactions/emoji_reactions.vue

@@ -99,11 +99,6 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-
-        &.-picked-reaction {
-          border: 1px solid var(--accent);
-          margin-right: -1px;
-        }
       }
     }
   }
@@ -154,10 +149,6 @@
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent);
-      margin-left: -1px; // offset the border, can't use inset shadows either
-      margin-right: -1px;
-
       .svg-inline--fa {
         color: var(--accent);
       }

src/components/font_control/font_control.vue

@@ -5,18 +5,22 @@
       :for="manualEntry ? name : name + '-font-switcher'"
       class="label"
     >
-      {{ label }}
+      {{ $t('settings.style.themes3.font.label', { label }) }}
     </label>
     {{ ' ' }}
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
+      class="font-checkbox"
       :id="name + '-o'"
       :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
       {{ $t('settings.style.themes3.define') }}
     </Checkbox>
-    <p v-if="modelValue?.family">
+    <div
+      v-if="modelValue?.family"
+      class="font-input"
+    >
       <label
         v-if="manualEntry"
         :id="name + '-label'"
@@ -122,7 +126,7 @@
           </optgroup>
         </Select>
       </span>
-    </p>
+    </div>
   </div>
 </template>
 
@@ -134,6 +138,15 @@
     min-width: 20em;
     max-width: 20em;
   }
+
+  .font-input {
+    margin-left: 2em;
+    margin-top: 0.5em;
+  }
+
+  .font-checkbox {
+    margin-left: 1em;
+  }
 }
 
 .invalid-tooltip {

src/components/input.style.js

@@ -18,7 +18,7 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15',
         '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
         '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }

src/components/notification/notification.js

@@ -43,7 +43,6 @@ const Notification = {
   data () {
     return {
       statusExpanded: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       unmuted: false,
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false

src/components/notification/notification.vue

@@ -48,7 +48,6 @@
           <UserAvatar
             class="post-avatar"
             :compact="true"
-            :better-shadow="betterShadow"
             :user="notification.from_profile"
           />
         </UserPopover>

src/components/panel.style.js

@@ -38,12 +38,20 @@ export default {
         roundness: 3,
         blur: '5px',
         shadow: [{
-          x: 1,
+          x: 0,
-          y: 1,
+          y: 0,
-          blur: 4,
+          blur: 3,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.5
+        },
+        {
+          x: 0,
+          y: 4,
+          blur: 6,
+          spread: 3,
+          color: '#000000',
+          alpha: 0.3
         }]
       }
     }

src/components/panel_header.style.js

@@ -17,7 +17,23 @@ export default {
       directives: {
         backgroundNoCssColor: 'yes',
         background: '--fg',
-        shadow: []
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 1,
+          blur: 0,
+          spread: 0,
+          color: '#ffffff',
+          alpha: 0.2,
+          inset: true
+        }]
       }
     }
   ]

src/components/post_status_form/post_status_form.js

@@ -101,6 +101,8 @@ const PostStatusForm = {
     'disableSubmit',
     'disablePreview',
     'disableDraft',
+    'hideDraft',
+    'closeable',
     'placeholder',
     'maxHeight',
     'postHandler',
@@ -115,6 +117,7 @@ const PostStatusForm = {
   ],
   emits: [
     'posted',
+    'draft-done',
     'resize',
     'mediaplay',
     'mediapause',
@@ -232,6 +235,9 @@ const PostStatusForm = {
     showAllScopes () {
       return !this.mergedConfig.minimalScopesMode
     },
+    hideExtraActions () {
+      return this.disableDraft || this.hideDraft
+    },
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
@@ -353,10 +359,12 @@ const PostStatusForm = {
       }
     },
     safeToSaveDraft () {
-      return this.newStatus.status ||
+      return (
+        this.newStatus.status ||
         this.newStatus.spoilerText ||
         this.newStatus.files?.length ||
         this.newStatus.hasPoll
+      ) && this.saveable
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
@@ -760,12 +768,20 @@ const PostStatusForm = {
                 this.newStatus.id = id
               }
               this.saveable = false
+              if (!this.shouldAutoSaveDraft) {
+                this.clearStatus()
+                this.$emit('draft-done')
+              }
             })
         } else if (this.newStatus.id) {
           // There is a draft, but there is nothing in it, clear it
           return this.abandonDraft()
             .then(() => {
               this.saveable = false
+              if (!this.shouldAutoSaveDraft) {
+                this.clearStatus()
+                this.$emit('draft-done')
+              }
             })
         }
       }
@@ -773,7 +789,7 @@ const PostStatusForm = {
     },
     maybeAutoSaveDraft () {
       if (this.shouldAutoSaveDraft) {
-        this.saveDraft()
+        this.saveDraft(false)
       }
     },
     abandonDraft () {

src/components/post_status_form/post_status_form.vue

@@ -316,13 +316,12 @@
             </template>
           </button>
           <Popover
-            v-if="!disableDraft"
+            v-if="!hideExtraActions"
             class="more-post-actions"
             :normal-button="true"
             trigger="click"
             placement="bottom"
             :offset="{ y: 5 }"
-            :bound-to="{ x: 'container' }"
           >
             <template #trigger>
               <FAIcon
@@ -336,15 +335,20 @@
                 role="menu"
               >
                 <button
-                  v-if="!disableDraft"
                   class="menu-item dropdown-item"
+                  v-if="!hideDraft || !disableDraft"
                   role="menu"
-                  :disabled="!safeToSaveDraft"
+                  :disabled="!safeToSaveDraft && saveable"
                   :class="{ disabled: !safeToSaveDraft }"
                   @click.prevent="saveDraft"
                   @click="close"
                 >
-                  {{ $t('post_status.save_to_drafts_button') }}
+                  <template v-if="closeable">
+                    {{ $t('post_status.save_to_drafts_and_close_button') }}
+                  </template>
+                  <template v-else>
+                    {{ $t('post_status.save_to_drafts_button') }}
+                  </template>
                 </button>
               </div>
             </template>

src/components/post_status_modal/post_status_modal.vue

@@ -14,7 +14,9 @@
       <PostStatusForm
         class="panel-body"
         v-bind="params"
+        :closeable="true"
         @posted="resetAndClose"
+        @draft-done="resetAndClose"
       />
     </div>
   </Modal>

src/components/settings_modal/tabs/appearance_tab.vue

@@ -57,7 +57,7 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
+          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
           :disabled="switchInProgress"
         >
@@ -206,51 +206,6 @@
             </small>
           </div>
         </li>
-        <li>
-          <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-          <ul class="setting-list">
-            <li>
-              <FontControl
-                :model-value="mergedConfig.theme3hacks.fonts.interface"
-                name="ui"
-                :label="$t('settings.style.fonts.components.interface')"
-                :fallback="{ family: 'sans-serif' }"
-                no-inherit="1"
-                @update:modelValue="v => updateFont('interface', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.input"
-                name="input"
-                :fallback="{ family: 'inherit' }"
-                :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => updateFont('input', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.post"
-                name="post"
-                :fallback="{ family: 'inherit' }"
-                :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => updateFont('post', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.monospace"
-                name="postCode"
-                :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.monospace')"
-                @update:modelValue="v => updateFont('monospace', v)"
-              />
-            </li>
-          </ul>
-        </li>
         <li>
           <UnitSetting
             path="emojiSize"
@@ -284,6 +239,47 @@
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
         </li>
+        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="{ family: 'sans-serif' }"
+            no-inherit="1"
+            @update:modelValue="v => updateFont('interface', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.input"
+            name="input"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.input')"
+            @update:modelValue="v => updateFont('input', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.post"
+            name="post"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.post')"
+            @update:modelValue="v => updateFont('post', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            name="postCode"
+            :fallback="{ family: 'monospace' }"
+            :label="$t('settings.style.fonts.components.monospace')"
+            @update:modelValue="v => updateFont('monospace', v)"
+          />
+        </li>
         <h3>{{ $t('settings.columns') }}</h3>
         <li>
           <UnitSetting
@@ -345,6 +341,11 @@
     <div class="setting-item">
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
+        <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="forcedRoundness"

src/components/status/status.js

@@ -408,9 +408,6 @@ const Status = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
-    betterShadow () {
-      return this.$store.state.interface.browserSupport.cssFilter
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     },

src/components/top_bar.style.js

@@ -16,11 +16,19 @@ export default {
         background: '--fg',
         shadow: [{
           x: 0,
-          y: 0,
+          y: 1,
           blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 2,
+          blur: 7,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.3
         }]
       }
     },

src/components/user_avatar/avatar.style.js

@@ -11,10 +11,10 @@ export default {
         shadow: [{
           x: 0,
           y: 1,
-          blur: 8,
+          blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.7
+          alpha: 0.2
         }]
       }
     }

src/components/user_avatar/user_avatar.js

@@ -15,14 +15,14 @@ library.add(
 const UserAvatar = {
   props: [
     'user',
-    'betterShadow',
     'compact',
     'showActorTypeIndicator'
   ],
   data () {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
+      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   components: {

src/components/user_card/user_card.js

@@ -48,7 +48,6 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       showingConfirmMute: false,
       muteExpiryAmount: 0,
       muteExpiryUnit: 'minutes'

src/components/user_card/user_card.vue

@@ -16,10 +16,7 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar
+            <UserAvatar :user="user" />
-              :better-shadow="betterShadow"
-              :user="user"
-            />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -30,7 +27,6 @@
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
-            :better-shadow="betterShadow"
             :user="user"
             @click="avatarAction"
           />
@@ -38,10 +34,7 @@
             v-else
             :to="userProfileLink(user)"
           >
-            <UserAvatar
+            <UserAvatar :user="user" />
-              :better-shadow="betterShadow"
-              :user="user"
-            />
           </router-link>
           <div class="user-summary">
             <div class="top-line">

src/i18n/en.json

@@ -321,7 +321,8 @@
     "auto_save_nothing_new": "Nothing new to save.",
     "auto_save_saved": "Saved.",
     "auto_save_saving": "Saving...",
-    "save_to_drafts_button": "Save to drafts"
+    "save_to_drafts_button": "Save to drafts",
+    "save_to_drafts_and_close_button": "Save to drafts and close"
   },
   "registration": {
     "bio_optional": "Bio (optional)",
@@ -381,6 +382,7 @@
     "actor_type_Person": "a normal user",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",
+    "mobile_center_dialog": "Vertically center dialogs on mobile",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
@@ -867,7 +869,8 @@
           "lookup_local_fonts": "Load list of fonts installed on this computer",
           "enter_manually": "Enter font name family manually",
           "entry": "Enter {fontFamily}",
-          "select": "Select font"
+          "select": "Select font",
+          "label": "{label} font"
         }
       },
       "interface_font_user_override": "Override theme/browser font used",
@@ -1250,6 +1253,7 @@
     "external_source": "External source",
     "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more words",
     "multi_reason_mute": "{main} | {main} + one more reason | {main} + {numReasonsMore} more reasons",
+    "muted_user": "User muted",
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
     "sensitive_muted": "Muting sensitive content",

src/main.js

@@ -131,6 +131,9 @@ const persistedStateOptions = {
         bookmarkFolders: bookmarkFoldersModule
       },
       plugins,
+      options: {
+        devtools: process.env.NODE_ENV !== 'production'
+      },
       strict: false // Socket modifies itself, let's ignore this for now.
       // strict: process.env.NODE_ENV !== 'production'
     })

src/modules/config.js

@@ -142,6 +142,7 @@ export const defaultState = {
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
+  modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,

src/modules/instance.js

@@ -82,6 +82,7 @@ const defaultState = {
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
   modalOnRemoveUserFromFollowers: false,
+  modalMobileCenter: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',

src/services/theme_data/theme3_slot_functions.js

@@ -81,9 +81,27 @@ export const colorFunctions = {
       return alphaBlend(background, amount, foreground)
     }
   },
+  boost: {
+    argsNeeded: 2,
+    documentation: 'If given color is dark makes it darker, if color is light - makes it lighter',
+    args: [
+      'color: source color',
+      'amount: how much darken/brighten the color'
+    ],
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [colorArg, amountArg] = args
+
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
+      const amount = Number(amountArg)
+
+      const isLight = relativeLuminance(color) < 0.5
+      const mod = isLight ? -1 : 1
+      return brightness(amount * mod, color).rgb
+    }
+  },
   mod: {
     argsNeeded: 2,
-    documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.',
+    documentation: 'Old function that increases or decreases brightness depending if background color is dark or light. Advised against using it as it might give unexpected results.',
     args: [
       'color: source color',
       'amount: how much darken/brighten the color'
@@ -109,6 +127,7 @@ export const shadowFunctions = {
     args: [
       'color: border color',
       'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
+      'width: border width (thickness)',
       '[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
       '[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
     ],

static/styles/Redmond DX.iss

@@ -94,7 +94,7 @@ Button:toggled:pressed {
 }
 
 Input {
-  background: $mod(--bg -80);
+  background: $boost(--bg 20);
   shadow: --defaultInputBevel;
   roundness: 0
 }