Merge branch 'feature/theming2' into shigusegubu

* feature/theming2:
  fallback for some weird case on my phone
  todo
  missing string
  some more themes, fixes
  localization strings, fixes
  making inset shadows work on avatars again
  fix retweeter avatar not getting proper shadow
  avatars shadows, also allows drop-shadow use

src/components/notifications/notifications.scss

@@ -56,8 +56,8 @@
     line-height: 0;
 
     &.better-shadow {
-      box-shadow: none;
-      filter: drop-shadow(var(--avatarStatusShadowFilter))
+      box-shadow: var(--avatarStatusShadowInset);
+      filter: var(--avatarStatusShadowFilter)
     }
 
     &.animated::before {

src/components/shadow_control/shadow_control.js

@@ -14,6 +14,7 @@ export default {
   data () {
     return {
       selectedId: 0,
+      // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
       cValue: this.value || this.fallback || []
     }
   },

src/components/status/status.vue

@@ -469,8 +469,8 @@
   border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 
   &.better-shadow {
-    box-shadow: none;
-    filter: drop-shadow(var(--avatarStatusShadowFilter))
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
   }
 }
 
@@ -484,8 +484,8 @@
   position: relative;
 
   &.better-shadow {
-    box-shadow: none;
-    filter: drop-shadow(var(--avatarStatusShadowFilter))
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
   }
 
   img {

src/components/style_switcher/style_switcher.js

@@ -497,10 +497,9 @@ export default {
         this.textColorLocal = rgb2hex(colors.fg)
       }
 
+      this.clearV1()
       const keys = new Set(version !== 1 ? Object.keys(colors) : [])
       if (version === 1 || version === 'l1') {
-        // V1 ignores the rest
-        this.clearV1()
         keys
           .add('bg')
           .add('link')

src/components/style_switcher/style_switcher.scss

@@ -49,7 +49,7 @@
       }
 
       &:not([type=number]):not([type=text]) {
-        align-self: center;
+        align-self: flex-start;
       }
     }
   }
@@ -113,6 +113,7 @@
     p {
       flex: 1;
       margin: 0;
+      margin-right: .5em;
     }
 
     margin-bottom: 1em;
@@ -134,6 +135,12 @@
     display: flex;
     justify-content: center;
     align-items: baseline;
+    flex-wrap: wrap;
+
+    .presets,
+    .import-export {
+      margin-bottom: .5em;
+    }
 
     .import-export {
       display: flex;
@@ -148,7 +155,7 @@
     flex-wrap: wrap;
     margin-top: .5em;
     span {
-      margin: 0 .5em;
+      margin: 0 .5em .5em;
     }
   }
 
@@ -204,8 +211,8 @@
         flex: 0 auto;
         margin-left: 28px;
         font-size: 12px;
-        width: 20px;
-        height: 20px;
+        min-width: 20px;
+        min-height: 20px;
         line-height: 20px;
         border-radius: $fallback--avatarAltRadius;
         border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);

src/components/style_switcher/style_switcher.vue

@@ -2,7 +2,7 @@
 <div class="style-switcher">
   <div class="presets-container">
     <div class="save-load">
-      <div>
+      <div class="presets">
         {{$t('settings.presets')}}
         <label for="preset-switcher" class='select'>
           <select id="preset-switcher" v-model="selected" class="preset-switcher">
@@ -83,7 +83,7 @@
           </div>
           <div class="content">
             <h4>
-              Content
+              {{$t('settings.style.preview.content')}}
             </h4>
 
             <i18n path="settings.style.preview.text">
@@ -224,7 +224,7 @@
         </div>
         <div class="color-item">
           <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
-          <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
+          <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/>
           <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
         </div>
         <div class="color-item">
@@ -282,12 +282,15 @@
           <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
             <code>filter: drop-shadow()</code>
           </i18n>
-          <i18n path="settings.style.shadows.filter_hint.text" tag="p">
+          <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
             <code>drop-shadow</code>
             <code>spread-radius</code>
             <code>inset</code>
           </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.inset_ignored')}}</p>
+          <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
+            <code>box-shadow</code>
+          </i18n>
           <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
         </div>
       </div>

src/components/user_card_content/user_card_content.vue

@@ -160,8 +160,8 @@
       object-fit: cover;
 
       &.better-shadow {
-        box-shadow: none;
-        filter: drop-shadow(var(--avatarStatusShadowFilter))
+        box-shadow: var(--avatarShadowInset);
+        filter: var(--avatarShadowFilter)
       }
 
       &.animated::before {