Updated RoomPopup layout (#5365)

packages/theme/styles/_lumia-colors.scss

@@ -107,6 +107,8 @@
 
   --love-active-call-color-1: #5190EC;
   --love-active-call-color-2: #F47758;
+  --love-active-call-transform: scaleY(0.25) scaleX(0.4);
+  --love-active-call-filter: blur(17px);
 }
 
 /* Light Theme */
@@ -187,4 +189,6 @@
 
   --love-active-call-color-1: #205DC2;
   --love-active-call-color-2: #e34748;
+  --love-active-call-filter: blur(10px);
+  --love-active-call-transform: scaleY(0.3) scaleX(0.42);
 }

packages/theme/styles/love.scss

@@ -157,4 +157,5 @@
   &.medium.cropped .scroller-container {
     max-height: 22.5rem;
   }
+  .slot.hoverable:hover > .avatar-container { opacity: .35; }
 }

packages/ui/src/components/ButtonBase.svelte

@@ -17,7 +17,7 @@
   import { AnySvelteComponent, ButtonBaseKind, ButtonBaseSize, ButtonBaseType, IconSize, LabelAndProps } from '../types'
   import { tooltip as tp } from '../tooltips'
   import { registerFocus } from '../focus'
-  import { ComponentType } from 'svelte'
+  import { ComponentType, onMount } from 'svelte'
   import Spinner from './Spinner.svelte'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
@@ -34,6 +34,7 @@
   export let loading: boolean = false
   export let pressed: boolean = false
   export let hasMenu: boolean = false
+  export let autoFocus: boolean = false
   export let type: ButtonBaseType
   export let inheritColor: boolean = false
   export let inheritFont: boolean = false
@@ -53,6 +54,13 @@
     element?.focus()
   }
 
+  onMount(() => {
+    if (autoFocus && element) {
+      element.focus()
+      autoFocus = false
+    }
+  })
+
   // Focusable control with index
   export let focusIndex = -1
   const { idx, focusManager } = registerFocus(focusIndex, {

packages/ui/src/components/ModernButton.svelte

@@ -19,6 +19,7 @@
   export let disabled: boolean = false
   export let loading: boolean = false
   export let hasMenu: boolean = false
+  export let autoFocus: boolean = false
   export let inheritFont: boolean = false
   export let focusIndex = -1
   export let tooltip: LabelAndProps | undefined = undefined
@@ -39,6 +40,7 @@
   {inheritFont}
   {focusIndex}
   {tooltip}
+  {autoFocus}
   on:click
 >
   <slot />

plugins/view-assets/lang/en.json

@@ -67,6 +67,7 @@
     "View": "View",
     "MarkupEditor": "Edit of rich content field",
     "List": "List",
+    "Grid": "Grid",
     "Timeline": "Timeline",
     "Select": "Select",
     "NoGrouping": "No grouping",

plugins/view-assets/lang/es.json

@@ -64,6 +64,7 @@
     "View": "Vista",
     "MarkupEditor": "Edición del campo de contenido enriquecido",
     "List": "Lista",
+    "Grid": "Cuadrícula",
     "Timeline": "Cronología",
     "Select": "Seleccionar",
     "NoGrouping": "Sin agrupación",

plugins/view-assets/lang/pt.json

@@ -64,6 +64,7 @@
     "View": "Ver",
     "MarkupEditor": "Edição de campo de conteúdo enriquecido",
     "List": "Lista",
+    "Grid": "Grade",
     "Timeline": "Linha temporal",
     "Select": "Seleccionar",
     "NoGrouping": "Sem agrupamento",

plugins/view-assets/lang/ru.json

@@ -64,6 +64,7 @@
     "View": "Вид",
     "MarkupEditor": "Изменение форматированного поля",
     "List": "Список",
+    "Grid": "Сетка",
     "Timeline": "Временная шкала",
     "Select": "Выбрать",
     "NoGrouping": "Нет группировки",

plugins/view/src/index.ts

@@ -174,6 +174,7 @@ const view = plugin(viewId, {
     SelectToMove: '' as IntlString,
     Cancel: '' as IntlString,
     List: '' as IntlString,
+    Grid: '' as IntlString,
     AddSavedView: '' as IntlString,
     Timeline: '' as IntlString,
     Public: '' as IntlString,