Stowage/tutanota
2
0
Fork 0
mirror of https://github.com/tutao/tutanota.git synced 2025-10-19 07:53:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

pl,pr,plr

Browse source
This commit is contained in:
yoy 2025-10-17 15:06:50 +02:00
parent 8ea10c2901
commit b824e98d1c
119 changed files with 191 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/calendar-app/calendar/gui/day-selector/DaySelectorSidebar.ts
View file

@ -33,7 +33,7 @@ export class DaySelectorSidebar implements Component<DaySelectorSidebarAttrs> {
const disableHighlight = !isSameDay(vnode.attrs.selectedDate, this.currentDate) const disableHighlight = !isSameDay(vnode.attrs.selectedDate, this.currentDate)
return m( return m(
isDesktop() ? ".plr-m.mt-24" : ".plr-m.mt-8", isDesktop() ? ".plr-12.mt-24" : ".plr-12.mt-8",
m(".elevated-bg.pt-8.pb-12.border-radius.flex.flex-column", [ m(".elevated-bg.pt-8.pb-12.border-radius.flex.flex-column", [
this.renderPickerHeader(this.currentDate), this.renderPickerHeader(this.currentDate),
m(".flex-grow.overflow-hidden", [ m(".flex-grow.overflow-hidden", [

4
src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts
View file

@ -163,7 +163,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
const attendingOptions = createAttendingItems().filter((option) => option.selectable !== false) const attendingOptions = createAttendingItems().filter((option) => option.selectable !== false)
const attendingStatus = attendingOptions.find((option) => option.value === status) const attendingStatus = attendingOptions.find((option) => option.value === status)
return m(".flex.flex-column.pl-8.pr-vpad-s", [ return m(".flex.flex-column.pl-8.pr-8", [
m(Select<AttendingItem, CalendarAttendeeStatus>, { m(Select<AttendingItem, CalendarAttendeeStatus>, {
onchange: (option) => { onchange: (option) => {
if (option.selectable === false) return if (option.selectable === false) return
@ -219,7 +219,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("organizer_label")), m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("organizer_label")),
m(Card, { style: { padding: `0` } }, [ m(Card, { style: { padding: `0` } }, [
m(".flex.flex-column", [ m(".flex.flex-column", [
m(".flex.pl-8.pr-vpad-s", [ m(".flex.pl-8.pr-8", [
m(Select<OrganizerSelectItem, string>, { m(Select<OrganizerSelectItem, string>, {
classes: ["flex-grow", "button-min-height"], classes: ["flex-grow", "button-min-height"],
onchange: (option) => { onchange: (option) => {

4
src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts
View file

@ -322,7 +322,7 @@ export class CalendarEventEditView implements Component<CalendarEventEditViewAtt
options: stream(options), options: stream(options),
expanded: true, expanded: true,
selected, selected,
classes: ["button-min-height", "pl-8", "pr-vpad-s"], classes: ["button-min-height", "pl-8", "pr-8"],
renderOption: (option) => this.renderCalendarOptions(option, deepEqual(option.value, selected.value), false), renderOption: (option) => this.renderCalendarOptions(option, deepEqual(option.value, selected.value), false),
renderDisplay: (option) => this.renderCalendarOptions(option, false, true), renderDisplay: (option) => this.renderCalendarOptions(option, false, true),
ariaLabel: lang.get("calendar_label"), ariaLabel: lang.get("calendar_label"),
@ -334,7 +334,7 @@ export class CalendarEventEditView implements Component<CalendarEventEditViewAtt
private renderCalendarOptions(option: CalendarSelectItem, isSelected: boolean, isDisplay: boolean) { private renderCalendarOptions(option: CalendarSelectItem, isSelected: boolean, isDisplay: boolean) {
return m( return m(
".flex.items-center.gap-vpad-s.flex-grow.overflow-hidden", ".flex.items-center.gap-vpad-s.flex-grow.overflow-hidden",
{ class: `${isDisplay ? "" : "state-bg plr-button button-content dropdown-button pt-8 pb-8 button-min-height"}` }, { class: `${isDisplay ? "" : "state-bg plr-8 button-content dropdown-button pt-8 pb-8 button-min-height"}` },
[ [
m(".no-shrink", { m(".no-shrink", {
style: { style: {

4
src/calendar-app/calendar/gui/eventeditor-view/EventTimeEditor.ts
View file

@ -33,7 +33,7 @@ export class EventTimeEditor implements Component<EventTimeEditorAttrs> {
return m(".flex", [ return m(".flex", [
m(".flex.col.flex-grow.gap-vpad-s", [ m(".flex.col.flex-grow.gap-vpad-s", [
m(".flex.gap-vpad-s.items-center.pr-vpad-s", [ m(".flex.gap-vpad-s.items-center.pr-8", [
m(Icon, { m(Icon, {
icon: Icons.Time, icon: Icons.Time,
style: { style: {
@ -56,7 +56,7 @@ export class EventTimeEditor implements Component<EventTimeEditorAttrs> {
]), ]),
m(".flex.col.full-width.flex-grow.gap-vpad-s", { style: { paddingLeft: px(size.icon_24 + size.spacing_8) } }, [ m(".flex.col.full-width.flex-grow.gap-vpad-s", { style: { paddingLeft: px(size.icon_24 + size.spacing_8) } }, [
m(Divider, { color: theme.outline_variant }), m(Divider, { color: theme.outline_variant }),
m(".time-selection-grid.pr-vpad-s", [ m(".time-selection-grid.pr-8", [
m("", lang.get("dateFrom_label")), m("", lang.get("dateFrom_label")),
m( m(
`${isApp() ? "" : ".pl-32"}`, `${isApp() ? "" : ".pl-32"}`,

2
src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts
View file

@ -59,7 +59,7 @@ export class ContactPreviewView implements Component<ContactPreviewViewAttrs> {
private renderSectionIndicator(icon: AllIcons, style: Record<string, any> = {}): Children { private renderSectionIndicator(icon: AllIcons, style: Record<string, any> = {}): Children {
return m(Icon, { return m(Icon, {
icon, icon,
class: "pr", class: "pr-12",
size: IconSize.PX24, size: IconSize.PX24,
style: Object.assign( style: Object.assign(
{ {

4
src/calendar-app/calendar/search/CalendarSearchBarOverlay.ts
View file

@ -27,7 +27,7 @@ export class CalendarSearchBarOverlay implements Component<CalendarSearchBarOver
return m("ul.list.click.mail-list", [ return m("ul.list.click.mail-list", [
state.entities.map((result) => { state.entities.map((result) => {
return m( return m(
"li.plr-l.flex-v-center.", "li.plr-24.flex-v-center.",
{ {
style: { style: {
height: px(52), height: px(52),
@ -82,7 +82,7 @@ export class CalendarSearchBarOverlay implements Component<CalendarSearchBarOver
return indexInfo return indexInfo
? [m(".top.flex-center", infoText), m(".bottom.flex-center.small", indexInfo)] ? [m(".top.flex-center", infoText), m(".bottom.flex-center.small", indexInfo)]
: m("li.plr-l.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText)) : m("li.plr-24.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText))
} }
private renderCalendarEventResult(event: CalendarEvent): Children { private renderCalendarEventResult(event: CalendarEvent): Children {

2
src/calendar-app/calendar/search/view/CalendarSearchView.ts
View file

@ -484,7 +484,7 @@ export class CalendarSearchView extends BaseTopLevelView implements TopLevelView
} }
private renderFilterBar(): Children { private renderFilterBar(): Children {
return m(".flex.gap-vpad-s.pl-16.pr-vpad-m.pt-8.pb-8.scroll-x", this.renderCalendarFilterChips()) return m(".flex.gap-vpad-s.pl-16.pr-16.pt-8.pb-8.scroll-x", this.renderCalendarFilterChips())
} }
private async onCalendarDateRangeSelect() { private async onCalendarDateRangeSelect() {

4
src/calendar-app/calendar/settings/CalendarSettingsView.ts
View file

@ -157,7 +157,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
view: () => view: () =>
m(BackgroundColumnLayout, { m(BackgroundColumnLayout, {
backgroundColor: theme.surface_container, backgroundColor: theme.surface_container,
classes: this.isTabletView() ? "pr-m pl-8" : "", classes: this.isTabletView() ? "pr-16 pl-8" : "",
columnLayout: m( columnLayout: m(
".mlr-safe-inset.fill-absolute.content-bg.border-radius-top-left-m.border-radius-top-right-m", ".mlr-safe-inset.fill-absolute.content-bg.border-radius-top-left-m.border-radius-top-right-m",
{ {
@ -379,7 +379,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
return m( return m(
".flex.col.pl-16.pt-8.pb-8", ".flex.col.pl-16.pt-8.pb-8",
{ {
class: styles.isSingleColumnLayout() ? "pr-m" : "pr-vpad-s", class: styles.isSingleColumnLayout() ? "pr-16" : "pr-8",
}, },
[ [
m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText(title)), m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText(title)),

2
src/calendar-app/calendar/settings/GlobalSettingsViewer.ts
View file

@ -33,7 +33,7 @@ export class GlobalSettingsViewer implements UpdatableSettingsViewer {
} }
view(): Children { view(): Children {
return m("#global-settings.fill-absolute.scroll.plr-l", [ return m("#global-settings.fill-absolute.scroll.plr-24", [
m(AccountMaintenanceSettings, { m(AccountMaintenanceSettings, {
customerServerProperties: this.props, customerServerProperties: this.props,
setOnUpdateHandler: (fn: AccountMaintenanceUpdateNotifier) => { setOnUpdateHandler: (fn: AccountMaintenanceUpdateNotifier) => {

2
src/calendar-app/calendar/settings/NotificationSettingsViewer.ts
View file

@ -60,7 +60,7 @@ export class NotificationSettingsViewer implements UpdatableSettingsViewer {
}) })
.sort((l, r) => +r.attrs.current - +l.attrs.current) .sort((l, r) => +r.attrs.current - +l.attrs.current)
return m(".fill-absolute.scroll.plr-l.pb-48", [ return m(".fill-absolute.scroll.plr-24.pb-48", [
m(".flex.col", [ m(".flex.col", [
m(".flex-space-between.items-center.mt-32.mb-8", [m(".h4", lang.get("notificationSettings_action"))]), m(".flex-space-between.items-center.mt-32.mb-8", [m(".h4", lang.get("notificationSettings_action"))]),
m(NotificationTargetsList, { rowAdd: null, rows, onExpandedChange: this.expanded } satisfies NotificationTargetsListAttrs), m(NotificationTargetsList, { rowAdd: null, rows, onExpandedChange: this.expanded } satisfies NotificationTargetsListAttrs),

2
src/calendar-app/calendar/view/CalendarDesktopToolbar.ts
View file

@ -18,7 +18,7 @@ export class CalendarDesktopToolbar implements Component<CalendarDesktopToolbarA
view({ attrs }: Vnode<CalendarDesktopToolbarAttrs>): Children { view({ attrs }: Vnode<CalendarDesktopToolbarAttrs>): Children {
const { navConfig } = attrs const { navConfig } = attrs
return m( return m(
".flex.row.items-center.content-bg.border-radius-big.mlr-24.rel.pr.pl-16", ".flex.row.items-center.content-bg.border-radius-big.mlr-24.rel.pr-12.pl-16",
{ {
style: { style: {
marginLeft: `5px`, marginLeft: `5px`,

4
src/calendar-app/calendar/view/CalendarView.ts
View file

@ -1058,7 +1058,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
else showPlanUpgradeRequiredDialog(NewPaidPlans) else showPlanUpgradeRequiredDialog(NewPaidPlans)
} }
return m(".folder-row.flex-start.plr-button", [ return m(".folder-row.flex-start.plr-8", [
m(".flex.flex-grow.center-vertically.button-height", [ m(".flex.flex-grow.center-vertically.button-height", [
m(".calendar-checkbox", { m(".calendar-checkbox", {
role: "checkbox", role: "checkbox",
@ -1096,7 +1096,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
title: lastSyncStr, title: lastSyncStr,
icon: Icons.SyncProblem, icon: Icons.SyncProblem,
size: IconSize.PX24, size: IconSize.PX24,
class: "pr-s", class: "pr-4",
style: { style: {
fill: theme.on_surface_variant, fill: theme.on_surface_variant,
}, },

2
src/calendar-app/calendar/view/EventDetailsView.ts
View file

@ -21,7 +21,7 @@ export class EventDetailsView implements Component<EventDetailsViewAttrs> {
view({ attrs }: Vnode<EventDetailsViewAttrs>) { view({ attrs }: Vnode<EventDetailsViewAttrs>) {
this.model = attrs.eventPreviewModel this.model = attrs.eventPreviewModel
return m(".content-bg.border-radius-big.pl-24.pb-8.flex.pr", [ return m(".content-bg.border-radius-big.pl-24.pb-8.flex.pr-12", [
m( m(
".flex-grow.scroll.visible-scrollbar", ".flex-grow.scroll.visible-scrollbar",
{ {

4
src/calendar-app/calendar/view/MultiDayCalendarView.ts
View file

@ -332,7 +332,7 @@ export class MultiDayCalendarView implements Component<MultiDayCalendarViewAttrs
}, },
}, },
m( m(
".pl-4.pr-s.center.small.flex.flex-column.justify-center", ".pl-4.pr-4.center.small.flex.flex-column.justify-center",
{ {
style: { style: {
"line-height": isDesktopLayout ? px(layout_size.calendar_hour_height) : "unset", "line-height": isDesktopLayout ? px(layout_size.calendar_hour_height) : "unset",
@ -445,7 +445,7 @@ export class MultiDayCalendarView implements Component<MultiDayCalendarViewAttrs
// Set bottom padding in height, because it will be ignored in the style // Set bottom padding in height, because it will be ignored in the style
const height = mainPageEventsCount * CALENDAR_EVENT_HEIGHT + padding const height = mainPageEventsCount * CALENDAR_EVENT_HEIGHT + padding
return m( return m(
".calendar-long-events-header.flex-fixed.calendar-hour-margin.pr-l.rel", ".calendar-long-events-header.flex-fixed.calendar-hour-margin.pr-24.rel",
{ {
style: { style: {
marginLeft: layout_size.calendar_hour_width_mobile, marginLeft: layout_size.calendar_hour_width_mobile,

2
src/calendar-app/gui/SettingsNavButton.ts
View file

@ -30,7 +30,7 @@ export class SettingsNavButton implements Component<SettingsNavButtonAttrs> {
}) })
: null, : null,
onclick: attrs.click, onclick: attrs.click,
class: `flex justify-start full-width gap-vpad pl-16 pr-m items-center`, class: `flex justify-start full-width gap-vpad pl-16 pr-16 items-center`,
}, },
m(Icon, { m(Icon, {
icon: Icons.ArrowForward, icon: Icons.ArrowForward,

4
src/common/calendar/gui/CalendarImporter.ts
View file

@ -86,7 +86,7 @@ export function showEventsImportDialog(events: CalendarEvent[], okAction: (dialo
], ],
}), }),
/** variable-size child container that may be scrollable. */ /** variable-size child container that may be scrollable. */
m(".dialog-max-height.plr-s.pb-16.text-break.nav-bg", [ m(".dialog-max-height.plr-4.pb-16.text-break.nav-bg", [
m( m(
".flex.col.rel.mt-8", ".flex.col.rel.mt-8",
{ {
@ -179,7 +179,7 @@ export function calendarSelectionDialog(
], ],
}), }),
m(".dialog-max-height.plr-l.pt-16.pb-16.text-break.scroll", [ m(".dialog-max-height.plr-24.pt-16.pb-16.text-break.scroll", [
m(".text-break.selectable", lang.get("calendarImportSelection_label")), m(".text-break.selectable", lang.get("calendarImportSelection_label")),
m(DropDownSelector, { m(DropDownSelector, {
label: "calendar_label", label: "calendar_label",

2
src/common/calendar/gui/TimeView.ts
View file

@ -174,7 +174,7 @@ export class TimeView implements Component<TimeViewAttributes> {
}, },
times.map((time, index) => times.map((time, index) =>
m( m(
".flex.ptb-button-double.small.pr-vpad-s.border-right.rel.items-center", ".flex.ptb-16.small.pr-8.border-right.rel.items-center",
{ {
class: index !== times.length - 1 ? "after-as-border-bottom" : "", class: index !== times.length - 1 ? "after-as-border-bottom" : "",
}, },

2
src/common/desktop/mailimport/MailImporter.ts
View file

@ -41,7 +41,7 @@ export function folderSelectionDialog(indentedFolders: IndentedFolder[], okActio
], ],
}), }),
m(".dialog-max-height.plr-l.pt-16.pb-16.text-break.scroll", [ m(".dialog-max-height.plr-24.pt-16.pb-16.text-break.scroll", [
m(".text-break.selectable", lang.get("mailImportSelection_label")), m(".text-break.selectable", lang.get("mailImportSelection_label")),
m(DropDownSelector, { m(DropDownSelector, {
label: "mailFolder_label", label: "mailFolder_label",

4
src/common/gui/AttachmentBubble.ts
View file

@ -193,14 +193,14 @@ export class AttachmentDetailsPopup implements ModalComponent {
// It is somewhat harder as it looks different with mobile layout. // It is somewhat harder as it looks different with mobile layout.
const { remove, open, download, attachment, fileImport, type } = this.attrs const { remove, open, download, attachment, fileImport, type } = this.attrs
return m( return m(
".flex.mb-8.pr", ".flex.mb-8.pr-12",
{ {
oncreate: (vnode) => (this.domContent = vnode.dom as HTMLElement), oncreate: (vnode) => (this.domContent = vnode.dom as HTMLElement),
}, },
[ [
m(Icon, { m(Icon, {
icon: getAttachmentIcon(type), icon: getAttachmentIcon(type),
class: "pr-s flex items-center", class: "pr-4 flex items-center",
style: { style: {
fill: theme.on_surface, fill: theme.on_surface,
"background-color": "initial", "background-color": "initial",

2
src/common/gui/DesktopToolbars.ts
View file

@ -37,7 +37,7 @@ export const DesktopViewerToolbar = pureComponent((__, children) => {
}, },
}, },
m( m(
".flex.list-bg.pt-4.pb-4.plr-m", ".flex.list-bg.pt-4.pb-4.plr-12",
{ {
style: { style: {
"border-radius": `0 ${size.radius_8}px ${size.radius_8}px 0`, "border-radius": `0 ${size.radius_8}px ${size.radius_8}px 0`,

2
src/common/gui/FolderColumnView.ts
View file

@ -27,7 +27,7 @@ export class FolderColumnView implements Component<Attrs> {
private renderMainButton(attrs: Attrs): Children { private renderMainButton(attrs: Attrs): Children {
if (attrs.button) { if (attrs.button) {
return m(".plr-button-double.scrollbar-gutter-stable-or-fallback", m(MainCreateButton, { label: attrs.button.label, click: attrs.button.click })) return m(".plr-16.scrollbar-gutter-stable-or-fallback", m(MainCreateButton, { label: attrs.button.label, click: attrs.button.click }))
} else { } else {
return null return null
} }

2
src/common/gui/MobileActionBar.ts
View file

@ -18,7 +18,7 @@ export class MobileActionBar implements Component<MobileActionBarAttrs> {
const { attrs } = vnode const { attrs } = vnode
return m( return m(
".bottom-nav.bottom-action-bar.flex.items-center.plr-l", ".bottom-nav.bottom-action-bar.flex.items-center.plr-24",
{ {
style: { style: {
justifyContent: "space-around", justifyContent: "space-around",

2
src/common/gui/MobileBottomActionBar.ts
View file

@ -3,5 +3,5 @@ import m from "mithril"
/** A layout that is used instead of bottom navigation in some situations. */ /** A layout that is used instead of bottom navigation in some situations. */
export const MobileBottomActionBar = pureComponent((_, children) => { export const MobileBottomActionBar = pureComponent((_, children) => {
return m(".bottom-nav.flex.items-center.plr-l.justify-between", children) return m(".bottom-nav.flex.items-center.plr-24.justify-between", children)
}) })

2
src/common/gui/SelectableRowContainer.ts
View file

@ -20,7 +20,7 @@ export class SelectableRowContainer implements ClassComponent<SelectableRowConta
view({ attrs, children }: Vnode<SelectableRowContainerAttrs>) { view({ attrs, children }: Vnode<SelectableRowContainerAttrs>) {
return m( return m(
".flex.mb-4.border-radius.pt-12.pb-12.pl-12.pr.ml-8", ".flex.mb-4.border-radius.pt-12.pb-12.pl-12.pr-12.ml-8",
{ {
style: { style: {
paddingTop: "12px", paddingTop: "12px",

4
src/common/gui/SidebarSection.ts
View file

@ -29,8 +29,8 @@ export class SidebarSection implements Component<SidebarSectionAttrs> {
}, },
}, },
[ [
m(".folder-row.flex-space-between.plr-button.pt-8.button-height", [ m(".folder-row.flex-space-between.plr-8.pt-8.button-height", [
m("small.b.align-self-center.text-ellipsis.plr-button", lang.getTranslationText(name).toLocaleUpperCase()), m("small.b.align-self-center.text-ellipsis.plr-8", lang.getTranslationText(name).toLocaleUpperCase()),
button ?? null, button ?? null,
]), ]),
content, content,

2
src/common/gui/base/Badge.ts
View file

@ -5,6 +5,6 @@ type BadgeAttrs = {
} }
export default class Badge implements Component<BadgeAttrs> { export default class Badge implements Component<BadgeAttrs> {
view(vnode: Vnode<BadgeAttrs>): Children { view(vnode: Vnode<BadgeAttrs>): Children {
return m(".teamLabel.pl-4.pr-s.border-radius.no-wrap" + (vnode.attrs.classes || ""), vnode.children) return m(".teamLabel.pl-4.pr-4.border-radius.no-wrap" + (vnode.attrs.classes || ""), vnode.children)
} }
} }

2
src/common/gui/base/BaseSearchBar.ts
View file

@ -33,7 +33,7 @@ export class BaseSearchBar implements ClassComponent<BaseSearchBarAttrs> {
view({ attrs }: Vnode<BaseSearchBarAttrs>) { view({ attrs }: Vnode<BaseSearchBarAttrs>) {
return m( return m(
".flex-end.items-center.border-radius.plr-s.pt-4.pb-4.search-bar.flex-grow.click", ".flex-end.items-center.border-radius.plr-4.pt-4.pb-4.search-bar.flex-grow.click",
{ {
focused: String(this.isFocused), focused: String(this.isFocused),
...landmarkAttrs(AriaLandmarks.Search), ...landmarkAttrs(AriaLandmarks.Search),

2
src/common/gui/base/Button.ts
View file

@ -114,7 +114,7 @@ export class Button implements ClassComponent<ButtonAttrs> {
classes.push("b") classes.push("b")
} else { } else {
if (!inline) { if (!inline) {
classes.push("plr-button") classes.push("plr-8")
classes.push("button-content") classes.push("button-content")
} }
} }

18
src/common/gui/base/Dialog.ts
View file

@ -620,7 +620,7 @@ export class Dialog implements ModalComponent {
const dialog = new Dialog(DialogType.Alert, { const dialog = new Dialog(DialogType.Alert, {
view: () => view: () =>
m(".flex.flex-column.pl-24.pr-l.pb-8", [ m(".flex.flex-column.pl-24.pr-24.pb-8", [
m("#dialog-message.dialog-max-height.text-break.text-prewrap.selectable.scroll", getContent()), m("#dialog-message.dialog-max-height.text-break.text-prewrap.selectable.scroll", getContent()),
buttonAttrs.length === 0 buttonAttrs.length === 0
? null ? null
@ -688,7 +688,7 @@ export class Dialog implements ModalComponent {
middle: lang.makeTranslation("title", title()), middle: lang.makeTranslation("title", title()),
} }
saveDialog = new Dialog(DialogType.EditMedium, { saveDialog = new Dialog(DialogType.EditMedium, {
view: () => m("", [m(DialogHeaderBar, actionBarAttrs), m(".plr-l.pb-16.text-break", m(child))]), view: () => m("", [m(DialogHeaderBar, actionBarAttrs), m(".plr-24.pb-16.text-break", m(child))]),
}) })
.setCloseHandler(closeAction) .setCloseHandler(closeAction)
.show() .show()
@ -709,7 +709,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(DialogType.EditMedium, { dialog = new Dialog(DialogType.EditMedium, {
view: () => view: () =>
m( m(
".plr-l", ".plr-24",
m(ImageWithOptionsDialog, { m(ImageWithOptionsDialog, {
image: `${window.tutao.appState.prefixWithoutFile}/images/update/update_needed_illu_${ image: `${window.tutao.appState.prefixWithoutFile}/images/update/update_needed_illu_${
client.isCalendarApp() ? "calendar" : "mail" client.isCalendarApp() ? "calendar" : "mail"
@ -813,7 +813,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(DialogType.EditMedium, { dialog = new Dialog(DialogType.EditMedium, {
view: () => view: () =>
m( m(
".plr-2l", ".plr-48",
m(ImageWithOptionsDialog, { m(ImageWithOptionsDialog, {
image: `${window.tutao.appState.prefixWithoutFile}/images/newsletter-unsubscribe/unsubscribe_${success ? "success" : "failure"}_${getUnsubscribeImageSuffix(theme.themeId)}.svg`, image: `${window.tutao.appState.prefixWithoutFile}/images/newsletter-unsubscribe/unsubscribe_${success ? "success" : "failure"}_${getUnsubscribeImageSuffix(theme.themeId)}.svg`,
titleText: success ? "unsubscribeSuccessful_title" : "unsubscribeFailed_title", titleText: success ? "unsubscribeSuccessful_title" : "unsubscribeFailed_title",
@ -918,7 +918,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(type, { dialog = new Dialog(type, {
view: () => [ view: () => [
m(DialogHeaderBar, actionBarAttrs), m(DialogHeaderBar, actionBarAttrs),
m(".dialog-max-height.plr-l.pb-16.text-break.scroll", ["function" === typeof child ? child() : m(child)]), m(".dialog-max-height.plr-24.pb-16.text-break.scroll", ["function" === typeof child ? child() : m(child)]),
], ],
}).setCloseHandler(doCancel) }).setCloseHandler(doCancel)
dialog.addShortcut({ dialog.addShortcut({
@ -1066,7 +1066,7 @@ export class Dialog implements ModalComponent {
static largeDialog(headerBarAttrs: DialogHeaderBarAttrs, child: Component): Dialog { static largeDialog(headerBarAttrs: DialogHeaderBarAttrs, child: Component): Dialog {
return new Dialog(DialogType.EditLarge, { return new Dialog(DialogType.EditLarge, {
view: () => { view: () => {
return m("", [m(DialogHeaderBar, headerBarAttrs), m(".dialog-container.scroll", m(".fill-absolute.plr-l", m(child)))]) return m("", [m(DialogHeaderBar, headerBarAttrs), m(".dialog-container.scroll", m(".fill-absolute.plr-24", m(child)))])
}, },
}) })
} }
@ -1078,7 +1078,7 @@ export class Dialog implements ModalComponent {
/** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */ /** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */
headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs), headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs),
/** variable-size child container that may be scrollable. */ /** variable-size child container that may be scrollable. */
m(".dialog-container.scroll.hide-outline", m(".fill-absolute.plr-l", m(child, childAttrs))), m(".dialog-container.scroll.hide-outline", m(".fill-absolute.plr-24", m(child, childAttrs))),
]), ]),
}) })
} }
@ -1095,7 +1095,7 @@ export class Dialog implements ModalComponent {
/** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */ /** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */
headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs), headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs),
/** variable-size child container that may be scrollable. */ /** variable-size child container that may be scrollable. */
m(".scroll.hide-outline.plr-l.flex-grow", { style: { "overflow-x": "hidden" } }, m(child, childAttrs)), m(".scroll.hide-outline.plr-24.flex-grow", { style: { "overflow-x": "hidden" } }, m(child, childAttrs)),
]), ]),
}) })
} }
@ -1106,7 +1106,7 @@ export class Dialog implements ModalComponent {
/** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */ /** fixed-height header with a title, left and right buttons that's fixed to the top of the dialog's area */
headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs), headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs),
/** variable-size child container that may be scrollable. */ /** variable-size child container that may be scrollable. */
m(".scroll.hide-outline.plr-l", child()), m(".scroll.hide-outline.plr-24", child()),
], ],
}) })
} }

2
src/common/gui/base/DialogHeaderBar.ts
View file

@ -30,7 +30,7 @@ export class DialogHeaderBar implements Component<DialogHeaderBarAttrs> {
) )
let columnClass = a.middle ? ".flex-third.overflow-hidden" : ".flex-half.overflow-hidden" let columnClass = a.middle ? ".flex-third.overflow-hidden" : ".flex-half.overflow-hidden"
return m( return m(
".dialog-header.plr-l.flex-space-between.dialog-header-line-height", ".dialog-header.plr-24.flex-space-between.dialog-header-line-height",
{ {
oncreate: ({ dom }) => { oncreate: ({ dom }) => {
if (a.create) a.create(dom as HTMLElement) if (a.create) a.create(dom as HTMLElement)

2
src/common/gui/base/DialogInjectionRight.ts
View file

@ -23,7 +23,7 @@ export class DialogInjectionRight<T extends object> implements Component<DialogI
if (attrs.visible()) { if (attrs.visible()) {
return m(".flex-grow-shrink-auto.flex-transition.ml-8.rel.dialog.dialog-width-m.elevated-bg.dropdown-shadow.border-radius", [ return m(".flex-grow-shrink-auto.flex-transition.ml-8.rel.dialog.dialog-width-m.elevated-bg.dropdown-shadow.border-radius", [
m(DialogHeaderBar, resolveMaybeLazy(attrs.headerAttrs)), m(DialogHeaderBar, resolveMaybeLazy(attrs.headerAttrs)),
m(".dialog-container.scroll.plr-l", m(component, componentAttrs)), m(".dialog-container.scroll.plr-24", m(component, componentAttrs)),
]) ])
} else { } else {
return m(".flex-hide.flex-transition.rel", { return m(".flex-hide.flex-transition.rel", {

2
src/common/gui/base/Dropdown.ts
View file

@ -137,7 +137,7 @@ export class Dropdown implements ModalComponent {
const inputField = () => { const inputField = () => {
return this.isFilterable return this.isFilterable
? m( ? m(
"input.input.dropdown-bar.elevated-bg.doNotClose.button-height.button-min-height.pr-s", "input.input.dropdown-bar.elevated-bg.doNotClose.button-height.button-min-height.pr-4",
{ {
placeholder: lang.get("typeToFilter_label"), placeholder: lang.get("typeToFilter_label"),
oncreate: (vnode) => { oncreate: (vnode) => {

4
src/common/gui/base/FilterChip.ts
View file

@ -26,9 +26,9 @@ export class FilterChip implements Component<FilterChipAttrs> {
selectors += ".pl-16" selectors += ".pl-16"
} }
if (chevron) { if (chevron) {
selectors += ".pr-vpad-s" selectors += ".pr-8"
} else { } else {
selectors += ".pr-vpad-m" selectors += ".pr-16"
} }
const contentColor = selected ? theme.on_secondary_container : theme.on_surface const contentColor = selected ? theme.on_secondary_container : theme.on_surface

2
src/common/gui/base/GuiUtils.ts
View file

@ -221,7 +221,7 @@ export function renderTwoColumnsIfFits(left: Children, right: Children): Childre
if (client.isMobileDevice()) { if (client.isMobileDevice()) {
return m(".flex.col", [m(".flex", left), m(".flex", right)]) return m(".flex.col", [m(".flex", left), m(".flex", right)])
} else { } else {
return m(".flex", [m(".flex.flex-half.pr-s", left), m(".flex.flex-half.pl-4", right)]) return m(".flex", [m(".flex.flex-half.pr-4", left), m(".flex.flex-half.pl-4", right)])
} }
} }

2
src/common/gui/base/InfoBanner.ts
View file

@ -43,7 +43,7 @@ export class InfoBanner implements Component<InfoBannerAttrs> {
} }
: undefined : undefined
return m( return m(
".center-vertically.border-bottom.pr-s.pl-12.border-radius.mt-4", ".center-vertically.border-bottom.pr-4.pl-12.border-radius.mt-4",
{ {
style: { style: {
border: `solid 2px ${type === BannerType.Warning ? theme.warning : theme.outline}`, border: `solid 2px ${type === BannerType.Warning ? theme.warning : theme.outline}`,

4
src/common/gui/base/List.ts
View file

@ -492,7 +492,7 @@ export class List<T, VH extends ViewHolder<T>> implements ClassComponent<ListAtt
private renderConnectionLostIndicator(): Children { private renderConnectionLostIndicator(): Children {
return m( return m(
".plr-l.flex-center.items-center", ".plr-24.flex-center.items-center",
{ {
style: { style: {
height: px(component_size.list_row_height), height: px(component_size.list_row_height),
@ -544,7 +544,7 @@ export class List<T, VH extends ViewHolder<T>> implements ClassComponent<ListAtt
} }
return [ return [
m( m(
".swipe-spacer.flex.items-center.justify-end.pr-l.blue", ".swipe-spacer.flex.items-center.justify-end.pr-24.blue",
{ {
oncreate: (vnode) => (this.domSwipeSpacerLeft = vnode.dom as HTMLElement), oncreate: (vnode) => (this.domSwipeSpacerLeft = vnode.dom as HTMLElement),
tabindex: TabIndex.Programmatic, tabindex: TabIndex.Programmatic,

2
src/common/gui/base/MultiSelectionBar.ts
View file

@ -10,7 +10,7 @@ interface MultiSelectionBarAttrs {
export class MultiSelectionBar { export class MultiSelectionBar {
view(vnode: Vnode<MultiSelectionBarAttrs>): Children { view(vnode: Vnode<MultiSelectionBarAttrs>): Children {
return m( return m(
".flex.items-center.justify-between.pl-4.pr-s", ".flex.items-center.justify-between.pl-4.pr-4",
{ {
style: { style: {
height: "100%", height: "100%",

2
src/common/gui/base/NavBar.ts
View file

@ -10,7 +10,7 @@ export class NavBar implements Component<Attrs> {
return m( return m(
"nav.nav-bar.flex-end", "nav.nav-bar.flex-end",
landmarkAttrs(AriaLandmarks.Navigation, "top"), landmarkAttrs(AriaLandmarks.Navigation, "top"),
(children as Array<Child>).map((child) => m(".plr-nav-button", child)), (children as Array<Child>).map((child) => m(".plr-8", child)),
) )
} }
} }

2
src/common/gui/base/NavButton.ts
View file

@ -83,7 +83,7 @@ export class NavButton implements Component<NavButtonAttrs> {
_getNavButtonClass(a: NavButtonAttrs): string { _getNavButtonClass(a: NavButtonAttrs): string {
return ( return (
"a.nav-button.noselect.items-center.click.plr-button.no-text-decoration.button-height.border-radius" + "a.nav-button.noselect.items-center.click.plr-8.no-text-decoration.button-height.border-radius" +
(a.vertical ? ".col" : "") + (a.vertical ? ".col" : "") +
(!a.centred ? ".flex-start" : ".flex-center") + (!a.centred ? ".flex-start" : ".flex-center") +
(a.disableHoverBackground ? "" : ".state-bg") + (a.disableHoverBackground ? "" : ".state-bg") +

2
src/common/gui/base/RadioSelector.ts
View file

@ -42,7 +42,7 @@ export class RadioSelector<T> implements Component<RadioSelectorAttrs<T>> {
// The wrapper is needed because <input> is self-closing and will not take the label as a child // The wrapper is needed because <input> is self-closing and will not take the label as a child
return m( return m(
".state-bg.border.border-radius.flex.items-center.mb-16.pl-24.pr", ".state-bg.border.border-radius.flex.items-center.mb-16.pl-24.pr-12",
{ {
// Make the option the same size as a button if a description is not given // Make the option the same size as a button if a description is not given
class: "button-min-width button-min-height" + attrClasses, class: "button-min-width button-min-height" + attrClasses,

2
src/common/gui/base/SidebarSectionRow.ts
View file

@ -68,7 +68,7 @@ export class SidebarSectionRow implements Component<SidebarSectionRowAttrs> {
[ [
// we render icon on our own to be able to override the color and to control the padding // we render icon on our own to be able to override the color and to control the padding
m( m(
".button-height.flex.items-center.plr-button", ".button-height.flex.items-center.plr-8",
m(Icon, { m(Icon, {
icon: attrs.icon, icon: attrs.icon,
size: IconSize.PX24, size: IconSize.PX24,

6
src/common/gui/base/Table.ts
View file

@ -123,7 +123,7 @@ export class Table implements Component<TableAttrs> {
"", "",
{ class: useHelpButton ? "flex items-center height-100p full-width" : "" }, { class: useHelpButton ? "flex items-center height-100p full-width" : "" },
m( m(
".text-ellipsis.pr.pt-8" + ".text-ellipsis.pr-12.pt-8" +
(bold ? ".b" : "") + (bold ? ".b" : "") +
(cellTextData.click ? ".click" : "" + (cellTextData.mainStyle ? cellTextData.mainStyle : "")) + (cellTextData.click ? ".click" : "" + (cellTextData.mainStyle ? cellTextData.mainStyle : "")) +
(columnAlignments[index] ? ".right" : ""), (columnAlignments[index] ? ".right" : ""),
@ -146,7 +146,7 @@ export class Table implements Component<TableAttrs> {
} else { } else {
cells = lineAttrs.cells.map((text, index) => cells = lineAttrs.cells.map((text, index) =>
m( m(
"td.text-ellipsis.pr.pt-8.pb-8." + columnWidths[index] + (bold ? ".b" : "") + (columnAlignments[index] ? ".right" : ""), "td.text-ellipsis.pr-12.pt-8.pb-8." + columnWidths[index] + (bold ? ".b" : "") + (columnAlignments[index] ? ".right" : ""),
{ {
title: text, // show the text as tooltip, so ellipsed lines can be shown title: text, // show the text as tooltip, so ellipsed lines can be shown
}, },
@ -182,7 +182,7 @@ export class Table implements Component<TableAttrs> {
return m(InfoIcon, { text: info.join("\n") }) return m(InfoIcon, { text: info.join("\n") })
} else { } else {
return m( return m(
".small.text-ellipsis.pr" + (cellTextData.click ? ".click" : ""), ".small.text-ellipsis.pr-12" + (cellTextData.click ? ".click" : ""),
{ {
onclick: cellTextData.click onclick: cellTextData.click
? (event: MouseEvent) => { ? (event: MouseEvent) => {

2
src/common/gui/base/TextDisplayArea.ts
View file

@ -17,7 +17,7 @@ export class TextDisplayArea implements Component<TextDisplayAreaAttrs> {
view(vnode: Vnode<TextDisplayAreaAttrs>): Children { view(vnode: Vnode<TextDisplayAreaAttrs>): Children {
return m(".flex.flex-grow.flex-column.text.pt-16", [ return m(".flex.flex-grow.flex-column.text.pt-16", [
m( m(
"label.text-ellipsis.noselect.z1.i.pr-s", "label.text-ellipsis.noselect.z1.i.pr-4",
{ {
style: { style: {
fontSize: px(font_size.small), fontSize: px(font_size.small),

2
src/common/gui/base/TextField.ts
View file

@ -125,7 +125,7 @@ export class TextField implements ClassComponent<TextFieldAttrs> {
}, },
[ [
m( m(
"label.abs.text-ellipsis.noselect.z1.i.pr-s", "label.abs.text-ellipsis.noselect.z1.i.pr-4",
{ {
"aria-hidden": "true", "aria-hidden": "true",
class: this.active ? "content-accent-fg" : "" + " " + getOperatingClasses(a.disabled), class: this.active ? "content-accent-fg" : "" + " " + getOperatingClasses(a.disabled),

2
src/common/gui/base/WizardDialog.ts
View file

@ -147,7 +147,7 @@ class WizardDialog<T> implements Component<WizardDialogAttrs<T>> {
a.currentPage && a.currentPage.attrs.hideAllPagingButtons a.currentPage && a.currentPage.attrs.hideAllPagingButtons
? null ? null
: m( : m(
"nav#wizard-paging.flex-space-around.center-vertically.mb-8.plr-2l", "nav#wizard-paging.flex-space-around.center-vertically.mb-8.plr-48",
{ {
"aria-label": "Breadcrumb", "aria-label": "Breadcrumb",
}, },

2
src/common/gui/base/buttons/BubbleButton.ts
View file

@ -22,7 +22,7 @@ export function usingMobileBubbleButton() {
} }
export function bubbleButtonPadding(): string { export function bubbleButtonPadding(): string {
return usingMobileBubbleButton() ? "plr-button-double" : "plr-button" return usingMobileBubbleButton() ? "plr-16" : "plr-8"
} }
/** /**

4
src/common/gui/base/buttons/LoginButton.ts
View file

@ -45,9 +45,9 @@ export class LoginButton implements Component<LoginButtonAttrs> {
} }
if (attrs.type === LoginButtonType.FlexWidth) { if (attrs.type === LoginButtonType.FlexWidth) {
classes.push("plr-2l") classes.push("plr-48")
} else { } else {
classes.push("full-width plr-button") classes.push("full-width plr-8")
} }
return classes return classes

2
src/common/gui/base/buttons/OutlineButton.ts
View file

@ -42,7 +42,7 @@ export class OutlineButton implements ClassComponent<OutlineButtonAttrs> {
"button-content", "button-content",
"border-accent", "border-accent",
"border-radius", "border-radius",
"plr-button", "plr-8",
"limit-width", "limit-width",
"noselect", "noselect",
"bg-transparent", "bg-transparent",

4
src/common/gui/base/buttons/RowButton.ts
View file

@ -29,7 +29,7 @@ export class RowButton implements Component<RowButtonAttrs> {
return m(BaseButton, { return m(BaseButton, {
label: attrs.label, label: attrs.label,
text: m( text: m(
".plr-button.text-ellipsis", ".plr-8.text-ellipsis",
{ {
style: { color }, style: { color },
// When the label doesn't match content, screen readers read both // When the label doesn't match content, screen readers read both
@ -51,7 +51,7 @@ export class RowButton implements Component<RowButtonAttrs> {
: attrs.icon === "none" : attrs.icon === "none"
? m(".icon-24.mr-8") ? m(".icon-24.mr-8")
: null, : null,
class: "flex items-center state-bg button-content plr-button " + attrs.class, class: "flex items-center state-bg button-content plr-8 " + attrs.class,
style: { style: {
...attrs.style, ...attrs.style,
color, color,

4
src/common/gui/base/colorPicker/ColorPickerView.ts
View file

@ -73,7 +73,7 @@ export class ColorPickerView implements Component<ColorPickerViewAttrs> {
return m(".color-picker", [ return m(".color-picker", [
this.renderHuePicker(attrs.onselect), this.renderHuePicker(attrs.onselect),
m( m(
".flex.wrap.full-width.items-center.justify-between.p0.plr-s", ".flex.wrap.full-width.items-center.justify-between.p0.plr-4",
{ {
style: { style: {
rowGap: px(size.spacing_4), rowGap: px(size.spacing_4),
@ -87,7 +87,7 @@ export class ColorPickerView implements Component<ColorPickerViewAttrs> {
selectedColor: attrs.value, selectedColor: attrs.value,
onselect: attrs.onselect, onselect: attrs.onselect,
// add right divider to first color option // add right divider to first color option
className: i === 0 ? ".pr-vpad-s.mr-4" : undefined, className: i === 0 ? ".pr-8.mr-4" : undefined,
style: style:
i === 0 i === 0
? { ? {

2
src/common/gui/cards.ts
View file

@ -5,5 +5,5 @@ export function responsiveCardHMargin() {
} }
export function responsiveCardHPadding() { export function responsiveCardHPadding() {
return styles.isSingleColumnLayout() ? "plr-8" : "plr-l" return styles.isSingleColumnLayout() ? "plr-8" : "plr-24"
} }

2
src/common/gui/dialogs/SelectCredentialsEncryptionModeDialog.ts
View file

@ -55,7 +55,7 @@ class CredentialEncryptionMethodDialog {
}) })
: null, : null,
m(SelectCredentialsEncryptionModeView, { m(SelectCredentialsEncryptionModeView, {
class: "scroll pt-16 plr-l height-100p", class: "scroll pt-16 plr-24 height-100p",
error: this.error, error: this.error,
onConfirm: (mode) => this.onModeSelected(mode), onConfirm: (mode) => this.onModeSelected(mode),
supportedModes: this.supportedModes, supportedModes: this.supportedModes,

2
src/common/gui/editor/HtmlEditor.ts
View file

@ -65,7 +65,7 @@ export class HtmlEditor implements Component {
const getPlaceholder = () => const getPlaceholder = () =>
!this.active && this.isEmpty() !this.active && this.isEmpty()
? m( ? m(
".abs.text-ellipsis.noselect.z1.i.pr-s", ".abs.text-ellipsis.noselect.z1.i.pr-4",
{ {
oncreate: (vnode) => (this.placeholderDomElement = vnode.dom as HTMLElement), oncreate: (vnode) => (this.placeholderDomElement = vnode.dom as HTMLElement),
onclick: () => onclick: () =>

54
src/common/gui/main-styles.ts
View file

@ -487,24 +487,21 @@ styles.registerStyle("main", () => {
".pl-32": { ".pl-32": {
"padding-left": px(size.spacing_32), "padding-left": px(size.spacing_32),
}, },
".pr": { ".pr-12": {
"padding-right": px(size.spacing_12), "padding-right": px(size.spacing_12),
}, },
".pr-s": { ".pr-4": {
"padding-right": px(size.spacing_4), "padding-right": px(size.spacing_4),
}, },
".pr-vpad-s": { ".pr-8": {
"padding-right": px(size.spacing_8), "padding-right": px(size.spacing_8),
}, },
".pr-vpad-m": { ".pr-16": {
"padding-right": px(size.spacing_16), "padding-right": px(size.spacing_16),
}, },
".pr-vpad-l": { ".pr-32": {
"padding-right": px(size.spacing_32), "padding-right": px(size.spacing_32),
}, },
".pr-m": {
"padding-right": px(size.spacing_16),
},
".plr": { ".plr": {
"padding-left": px(size.spacing_12), "padding-left": px(size.spacing_12),
"padding-right": px(size.spacing_12), "padding-right": px(size.spacing_12),
@ -513,54 +510,37 @@ styles.registerStyle("main", () => {
"padding-left": px(size.spacing_8), "padding-left": px(size.spacing_8),
"padding-right": px(size.spacing_8), "padding-right": px(size.spacing_8),
}, },
".plr-vpad": { ".plr-16": {
"padding-left": px(size.spacing_16), "padding-left": px(size.spacing_16),
"padding-right": px(size.spacing_16), "padding-right": px(size.spacing_16),
}, },
".plr-s": { ".plr-4": {
"padding-left": px(size.spacing_4), "padding-left": px(size.spacing_4),
"padding-right": px(size.spacing_4), "padding-right": px(size.spacing_4),
}, },
".plr-sm": { ".plr-12": {
"padding-left": px(6),
"padding-right": px(6),
},
".plr-m": {
"padding-left": px(size.spacing_12), "padding-left": px(size.spacing_12),
"padding-right": px(size.spacing_12), "padding-right": px(size.spacing_12),
}, },
// p-l will be overwritten in media query mobile ".plr-24": {
".plr-l": {
"padding-left": px(size.spacing_24), "padding-left": px(size.spacing_24),
"padding-right": px(size.spacing_24), "padding-right": px(size.spacing_24),
}, },
".plr-2l": { ".plr-48": {
"padding-left": px(size.spacing_24 * 2), "padding-left": px(size.spacing_48),
"padding-right": px(size.spacing_24 * 2), "padding-right": px(size.spacing_48),
}, },
".ptb-button-double": { ".ptb-16": {
"padding-top": px(size.spacing_8 * 2), "padding-top": px(size.spacing_16),
"padding-bottom": px(size.spacing_8 * 2), "padding-bottom": px(size.spacing_16),
}, },
".pl-24": { ".pl-24": {
"padding-left": px(size.spacing_24), "padding-left": px(size.spacing_24),
}, },
".pr-l": { ".pr-24": {
"padding-right": px(size.spacing_24), "padding-right": px(size.spacing_24),
}, },
".plr-button": { ".pl-8": {
"padding-left": px(size.spacing_8),
"padding-right": px(size.spacing_8),
},
".plr-button-double": {
"padding-left": px(size.spacing_8 * 2),
"padding-right": px(size.spacing_8 * 2),
},
".plr-nav-button": {
"padding-left": px(size.spacing_8),
"padding-right": px(size.spacing_8),
},
".pl-button": {
"padding-left": px(size.spacing_8), "padding-left": px(size.spacing_8),
}, },
".mt-negative-8": { ".mt-negative-8": {

4
src/common/login/LoginView.ts
View file

@ -98,7 +98,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
m( m(
".flex-grow.flex-center.scroll", ".flex-grow.flex-center.scroll",
m( m(
".flex.col.flex-grow-shrink-auto.max-width-m.plr-l." + (styles.isSingleColumnLayout() ? "pt-16" : "pt-32"), ".flex.col.flex-grow-shrink-auto.max-width-m.plr-24." + (styles.isSingleColumnLayout() ? "pt-16" : "pt-32"),
{ {
...landmarkAttrs(AriaLandmarks.Main, isApp() || isDesktop() ? lang.get("addAccount_action") : lang.get("login_label")), ...landmarkAttrs(AriaLandmarks.Main, isApp() || isDesktop() ? lang.get("addAccount_action") : lang.get("login_label")),
oncreate: (vnode) => { oncreate: (vnode) => {
@ -109,7 +109,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
m( m(
".content-bg.border-radius-big.pb-16", ".content-bg.border-radius-big.pb-16",
{ {
class: styles.isSingleColumnLayout() ? "plr-l" : "plr-2l", class: styles.isSingleColumnLayout() ? "plr-24" : "plr-48",
}, },
this._renderFormForDisplayMode(), this._renderFormForDisplayMode(),
this.renderMoreOptions(), this.renderMoreOptions(),

2
src/common/misc/news/NewsList.ts
View file

@ -31,7 +31,7 @@ export class NewsList implements Component<NewsListAttrs> {
const newsListItem = vnode.attrs.liveNewsListItems[liveNewsId.newsItemName] const newsListItem = vnode.attrs.liveNewsListItems[liveNewsId.newsItemName]
return m( return m(
".pt-16.pl-24.pr-l.flex.fill.border-grey.left.list-border-bottom", ".pt-16.pl-24.pr-24.flex.fill.border-grey.left.list-border-bottom",
{ key: liveNewsId.newsItemId }, { key: liveNewsId.newsItemId },
newsListItem.render(liveNewsId, vnode.attrs.dialog), newsListItem.render(liveNewsId, vnode.attrs.dialog),
) )

2
src/common/native/main/SelectAppLockMethodDialog.ts
View file

@ -39,7 +39,7 @@ class AppLockMethodDialog {
return m("", [ return m("", [
null, null,
m(SelectAppLockMethodView, { m(SelectAppLockMethodView, {
class: "scroll pt-16 plr-l height-100p", class: "scroll pt-16 plr-24 height-100p",
error: this.error, error: this.error,
onConfirm: (mode) => this.onMethodSelected(mode), onConfirm: (mode) => this.onMethodSelected(mode),
supportedModes: this.supportedModes, supportedModes: this.supportedModes,

2
src/common/settings/AffiliateKpisViewer.ts
View file

@ -17,7 +17,7 @@ export class AffiliateKpisViewer implements UpdatableSettingsDetailsViewer {
return m( return m(
ListColumnWrapper, ListColumnWrapper,
m( m(
".flex.flex-column.fill-absolute.plr-l", ".flex.flex-column.fill-absolute.plr-24",
m("h4.mt-32", "KPIs"), m("h4.mt-32", "KPIs"),
m( m(
".overflow-auto.pt-8", ".overflow-auto.pt-8",

2
src/common/settings/AffiliateSettingsViewer.ts
View file

@ -48,7 +48,7 @@ export class AffiliateSettingsViewer implements UpdatableSettingsViewer {
return m( return m(
ListColumnWrapper, ListColumnWrapper,
m( m(
"section.fill-absolute.scroll.plr-l", "section.fill-absolute.scroll.plr-24",
m("h4.mt-32", lang.get("affiliateSettings_label")), m("h4.mt-32", lang.get("affiliateSettings_label")),
m(TextField, { m(TextField, {
isReadOnly: true, isReadOnly: true,

2
src/common/settings/AppearanceSettingsViewer.ts
View file

@ -126,7 +126,7 @@ export class AppearanceSettingsViewer implements UpdatableSettingsViewer {
locator.entityClient.update(userSettingsGroupRoot).catch(ofClass(LockedError, noOp)) locator.entityClient.update(userSettingsGroupRoot).catch(ofClass(LockedError, noOp))
}, },
} }
return m(".fill-absolute.scroll.plr-l.pb-48", [ return m(".fill-absolute.scroll.plr-24.pb-48", [
m(".h4.mt-32", lang.get("settingsForDevice_label")), m(".h4.mt-32", lang.get("settingsForDevice_label")),
m(DropDownSelector, languageDropDownAttrs), m(DropDownSelector, languageDropDownAttrs),
this._renderThemeSelector(), this._renderThemeSelector(),

2
src/common/settings/IdentifierRow.ts
View file

@ -51,7 +51,7 @@ export class IdentifierRow implements Component<IdentifierRowAttrs> {
private renderIdentifier({ identifier, formatIdentifier }: IdentifierRowAttrs): Children { private renderIdentifier({ identifier, formatIdentifier }: IdentifierRowAttrs): Children {
const identifierText = formatIdentifier const identifierText = formatIdentifier
? neverNull(identifier.match(/.{2}/g)).map((el, i) => m("span.pr-s" + (i % 2 === 0 ? ".b" : ""), el)) ? neverNull(identifier.match(/.{2}/g)).map((el, i) => m("span.pr-4" + (i % 2 === 0 ? ".b" : ""), el))
: identifier : identifier
return m(".text-break.small.monospace.mt-negative-8.selectable", identifierText) return m(".text-break.small.monospace.mt-negative-8.selectable", identifierText)
} }

2
src/common/settings/ReferralSettingsViewer.ts
View file

@ -15,7 +15,7 @@ export class ReferralSettingsViewer implements UpdatableSettingsViewer {
} }
view(): Children { view(): Children {
return m(".mt-32.plr-l.pb-48", m(ReferralLinkViewer, { referralLink: this.referralLink })) return m(".mt-32.plr-24.pb-48", m(ReferralLinkViewer, { referralLink: this.referralLink }))
} }
async entityEventsReceived(updates: ReadonlyArray<EntityUpdateData>): Promise<void> { async entityEventsReceived(updates: ReadonlyArray<EntityUpdateData>): Promise<void> {

2
src/common/settings/SettingsFolderRow.ts
View file

@ -14,7 +14,7 @@ export class SettingsFolderRow implements Component<SettingsFolderRowAttrs> {
view(vnode: Vnode<SettingsFolderRowAttrs>): Children { view(vnode: Vnode<SettingsFolderRowAttrs>): Children {
const { mainButtonAttrs, extraButton } = vnode.attrs const { mainButtonAttrs, extraButton } = vnode.attrs
const isSelected = isNavButtonSelected(mainButtonAttrs) const isSelected = isNavButtonSelected(mainButtonAttrs)
const selector = `.folder-row.flex-start.pl-button.pr-m${isSelected ? ".row-selected" : ""}` const selector = `.folder-row.flex-start.pl-8.pr-16${isSelected ? ".row-selected" : ""}`
return m(selector, [m(NavButton, mainButtonAttrs), extraButton && isSelected ? extraButton : null]) return m(selector, [m(NavButton, mainButtonAttrs), extraButton && isSelected ? extraButton : null])
} }
} }

2
src/common/settings/UserListView.ts
View file

@ -94,7 +94,7 @@ export class UserListView implements UpdatableSettingsViewer {
ListColumnWrapper, ListColumnWrapper,
{ {
headerContent: m( headerContent: m(
".flex.flex-space-between.center-vertically.plr-l", ".flex.flex-space-between.center-vertically.plr-24",
m(BaseSearchBar, { m(BaseSearchBar, {
text: this.searchQuery, text: this.searchQuery,
onInput: (text) => this.updateQuery(text), onInput: (text) => this.updateQuery(text),

2
src/common/settings/UserViewer.ts
View file

@ -111,7 +111,7 @@ export class UserViewer implements UpdatableSettingsDetailsViewer {
injectionsRight: () => [m(IconButton, changePasswordButtonAttrs)], injectionsRight: () => [m(IconButton, changePasswordButtonAttrs)],
isReadOnly: true, isReadOnly: true,
} as const } as const
return m("#user-viewer.fill-absolute.scroll.plr-l.pb-floating", [ return m("#user-viewer.fill-absolute.scroll.plr-24.pb-floating", [
m(".h4.mt-32", lang.get("userSettings_label")), m(".h4.mt-32", lang.get("userSettings_label")),
m("", [ m("", [
m(TextField, { m(TextField, {

2
src/common/settings/groups/GroupDetailsView.ts
View file

@ -33,7 +33,7 @@ export class GroupDetailsView implements UpdatableSettingsDetailsViewer {
} }
renderView(): Children { renderView(): Children {
return m("#user-viewer.fill-absolute.scroll.plr-l", [this.renderHeader(), this.renderCommonInfo(), this.renderMailGroupInfo()]) return m("#user-viewer.fill-absolute.scroll.plr-24", [this.renderHeader(), this.renderCommonInfo(), this.renderMailGroupInfo()])
} }
/** /**

2
src/common/settings/keymanagement/KeyManagementSettingsViewer.ts
View file

@ -113,7 +113,7 @@ export class KeyManagementSettingsViewer implements UpdatableSettingsViewer {
return m("", [ return m("", [
m( m(
".fill-absolute.scroll.plr-l.pb-48", ".fill-absolute.scroll.plr-24.pb-48",
{ {
style: { style: {
backgroundColor: theme.surface_container, backgroundColor: theme.surface_container,

2
src/common/settings/login/LoginSettingsViewer.ts
View file

@ -156,7 +156,7 @@ export class LoginSettingsViewer implements UpdatableSettingsViewer {
if (locator.logins.isUserLoggedIn()) { if (locator.logins.isUserLoggedIn()) {
const user = locator.logins.getUserController() const user = locator.logins.getUserController()
return m("", [ return m("", [
m("#user-settings.fill-absolute.scroll.plr-l.pb-48", [ m("#user-settings.fill-absolute.scroll.plr-24.pb-48", [
m(".h4.mt-32", lang.get("loginCredentials_label")), m(".h4.mt-32", lang.get("loginCredentials_label")),
this.renderName(user.userGroupInfo), this.renderName(user.userGroupInfo),
m(TextField, mailAddressAttrs), m(TextField, mailAddressAttrs),

4
src/common/settings/login/RecoverCodeDialog.ts
View file

@ -101,9 +101,9 @@ export class RecoverCodeField {
showMessage showMessage
? image ? image
? m(".flex-space-around.flex-wrap", [ ? m(".flex-space-around.flex-wrap", [
m(".flex-grow-shrink-half.plr-l.flex-center.align-self-center", this.renderRecoveryText()), m(".flex-grow-shrink-half.plr-24.flex-center.align-self-center", this.renderRecoveryText()),
m( m(
".flex-grow-shrink-half.plr-l.flex-center.align-self-center", ".flex-grow-shrink-half.plr-24.flex-center.align-self-center",
m("img.pt-16.bg-white.pt-16.pb-16", { m("img.pt-16.bg-white.pt-16.pb-16", {
src: image.src, src: image.src,
alt: lang.getTranslationText(image.alt), alt: lang.getTranslationText(image.alt),

4
src/common/settings/whitelabel/CustomColorEditorPreview.ts
View file

@ -129,7 +129,7 @@ export class CustomColorEditorPreview implements Component {
}, },
[ [
m( m(
".list-row.pl-12.pr-l.odd-row", ".list-row.pl-12.pr-24.odd-row",
{ {
oncreate: (vnode) => { oncreate: (vnode) => {
this._mailRow.domElement = vnode.dom as HTMLElement this._mailRow.domElement = vnode.dom as HTMLElement
@ -139,7 +139,7 @@ export class CustomColorEditorPreview implements Component {
this._mailRow.render(), this._mailRow.render(),
), ),
m( m(
".list-row.pl-12.pr-l", ".list-row.pl-12.pr-24",
{ {
oncreate: (vnode) => { oncreate: (vnode) => {
this._mailRow2.domElement = vnode.dom as HTMLElement this._mailRow2.domElement = vnode.dom as HTMLElement

2
src/common/settings/whitelabel/WhitelabelBrandingDomainSettings.ts
View file

@ -124,7 +124,7 @@ export class WhitelabelBrandingDomainSettings implements Component<WhitelabelBra
return () => return () =>
m( m(
".flex", ".flex",
components.map((c) => m(".pr-s", c)), components.map((c) => m(".pr-4", c)),
) )
} }

2
src/common/settings/whitelabel/WhitelabelSettingsViewer.ts
View file

@ -89,7 +89,7 @@ export class WhitelabelSettingsViewer implements UpdatableSettingsViewer {
const brandingDomainConfig = this._renderBrandingDomainConfig() const brandingDomainConfig = this._renderBrandingDomainConfig()
return m( return m(
"#global-settings.fill-absolute.scroll.plr-l", "#global-settings.fill-absolute.scroll.plr-24",
brandingDomainConfig brandingDomainConfig
? [ ? [
m(".h4.mt-32", lang.get("whitelabel_label")), m(".h4.mt-32", lang.get("whitelabel_label")),

2
src/common/sharing/view/GroupInvitationFolderRow.ts
View file

@ -18,7 +18,7 @@ export class GroupInvitationFolderRow implements Component<GroupInvitationFolder
view(vnode: Vnode<GroupInvitationFolderRowAttrs>): Children { view(vnode: Vnode<GroupInvitationFolderRowAttrs>): Children {
const { invitation, icon } = vnode.attrs const { invitation, icon } = vnode.attrs
return [ return [
m(".folder-row.flex-start.plr-l", [ m(".folder-row.flex-start.plr-24", [
m( m(
".flex-v-center.flex-grow.button-height", ".flex-v-center.flex-grow.button-height",
{ {

4
src/common/subscription/InvoiceAndPaymentDataPage.ts
View file

@ -182,7 +182,7 @@ export class InvoiceAndPaymentDataPage implements WizardPageN<UpgradeSubscriptio
}), }),
m(".flex-space-around.flex-wrap.pt-16", [ m(".flex-space-around.flex-wrap.pt-16", [
m( m(
".flex-grow-shrink-half.plr-l", ".flex-grow-shrink-half.plr-24",
{ {
style: { style: {
minWidth: "260px", minWidth: "260px",
@ -191,7 +191,7 @@ export class InvoiceAndPaymentDataPage implements WizardPageN<UpgradeSubscriptio
m(neverNull(this._invoiceDataInput)), m(neverNull(this._invoiceDataInput)),
), ),
m( m(
".flex-grow-shrink-half.plr-l", ".flex-grow-shrink-half.plr-24",
{ {
style: { style: {
minWidth: "260px", minWidth: "260px",

4
src/common/subscription/PaymentViewer.ts
View file

@ -86,7 +86,7 @@ export class PaymentViewer implements UpdatableSettingsViewer {
view(): Children { view(): Children {
return m( return m(
"#invoicing-settings.fill-absolute.scroll.plr-l", "#invoicing-settings.fill-absolute.scroll.plr-24",
{ {
role: "group", role: "group",
}, },
@ -535,7 +535,7 @@ function showPayConfirmDialog(price: number): Promise<boolean> {
view: (): Children => [ view: (): Children => [
m(DialogHeaderBar, actionBarAttrs), m(DialogHeaderBar, actionBarAttrs),
m( m(
".plr-l.pb-16", ".plr-24.pb-16",
m("", [ m("", [
m(".pt-16", lang.get("invoicePayConfirm_msg")), m(".pt-16", lang.get("invoicePayConfirm_msg")),
m(TextField, { m(TextField, {

2
src/common/subscription/SetupLeavingUserSurveyPage.ts
View file

@ -17,7 +17,7 @@ export class SetupLeavingUserSurveyPage implements Component<SetupLeavingUserSur
view(vnode: Vnode<SetupLeavingUserSurveyPageAttrs>): Children { view(vnode: Vnode<SetupLeavingUserSurveyPageAttrs>): Children {
return m("#leaving-user-survey-dialog.pt-16.flex-center", [ return m("#leaving-user-survey-dialog.pt-16.flex-center", [
m( m(
".flex.flex-column.max-width-m.pt-16.pb-16.plr-l", ".flex.flex-column.max-width-m.pt-16.pb-16.plr-24",
{ {
style: { style: {
minHeight: styles.isDesktopLayout() ? "850px" : "", minHeight: styles.isDesktopLayout() ? "850px" : "",

2
src/common/subscription/SignupForm.ts
View file

@ -182,7 +182,7 @@ export class SignupForm implements Component<SignupFormAttrs> {
return m( return m(
"#signup-account-dialog.flex-center", "#signup-account-dialog.flex-center",
m(".flex-grow-shrink-auto.max-width-m.pt-16.pb-16.plr-l", [ m(".flex-grow-shrink-auto.max-width-m.pt-16.pb-16.plr-24", [
a.readonly a.readonly
? m(TextField, { ? m(TextField, {
label: "mailAddress_label", label: "mailAddress_label",

2
src/common/subscription/SubscriptionViewer.ts
View file

@ -135,7 +135,7 @@ export class SubscriptionViewer implements UpdatableSettingsViewer {
this._giftCardsExpanded = stream<boolean>(false) this._giftCardsExpanded = stream<boolean>(false)
this.view = (): Children => { this.view = (): Children => {
return m("#subscription-settings.fill-absolute.scroll.plr-l", [ return m("#subscription-settings.fill-absolute.scroll.plr-24", [
m(".h4.mt-32", lang.get("currentlyBooked_label")), m(".h4.mt-32", lang.get("currentlyBooked_label")),
m(TextField, { m(TextField, {
label: "subscription_label", label: "subscription_label",

2
src/common/subscription/UpgradeConfirmSubscriptionPage.ts
View file

@ -133,7 +133,7 @@ export class UpgradeConfirmSubscriptionPage implements WizardPageN<UpgradeSubscr
return [ return [
m(".center.h4.pt-16", lang.get("upgradeConfirm_msg")), m(".center.h4.pt-16", lang.get("upgradeConfirm_msg")),
m(".pt-16.pb-16.plr-l", [ m(".pt-16.pb-16.plr-24", [
m(TextField, { m(TextField, {
label: "subscription_label", label: "subscription_label",
value: getDisplayNameOfPlanType(attrs.data.targetPlanType), value: getDisplayNameOfPlanType(attrs.data.targetPlanType),

2
src/common/subscription/UpgradeCongratulationsPage.ts
View file

@ -21,7 +21,7 @@ export class UpgradeCongratulationsPage implements WizardPageN<UpgradeSubscripti
return [ return [
m(".center.h4.pt-16", lang.get("accountCreationCongratulation_msg")), m(".center.h4.pt-16", lang.get("accountCreationCongratulation_msg")),
newAccountData newAccountData
? m(".plr-l", [ ? m(".plr-24", [
m(RecoverCodeField, { m(RecoverCodeField, {
showMessage: true, showMessage: true,
recoverCode: newAccountData.recoverCode, recoverCode: newAccountData.recoverCode,

2
src/common/subscription/captcha/CaptchaDialog.ts
View file

@ -180,7 +180,7 @@ function renderDialogContent(actionBarAttrs: DialogHeaderBarAttrs, viewModel: Ca
return [ return [
m(DialogHeaderBar, actionBarAttrs), m(DialogHeaderBar, actionBarAttrs),
m( m(
".pt-16.plr-l.pb-16.flex.col#captcha_wrapper", ".pt-16.plr-24.pb-16.flex.col#captcha_wrapper",
{ {
style: { style: {
flex: "1 1 auto", flex: "1 1 auto",

14
src/common/subscription/giftcards/RedeemGiftCardWizard.ts
View file

@ -264,7 +264,7 @@ class GiftCardCredentialsPage implements WizardPageN<RedeemGiftCardModel> {
return [ return [
m( m(
".flex-grow.flex-center.scroll", ".flex-grow.flex-center.scroll",
m(".flex-grow-shrink-auto.max-width-s.pt-16.plr-l", [this.renderLoginForm(model), this.renderCredentialsSelector(model)]), m(".flex-grow-shrink-auto.max-width-s.pt-16.plr-24", [this.renderLoginForm(model), this.renderCredentialsSelector(model)]),
), ),
] ]
} }
@ -380,7 +380,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
return m("", [ return m("", [
mapNullable(model.newAccountData?.recoverCode, (code) => mapNullable(model.newAccountData?.recoverCode, (code) =>
m( m(
".pt-32.plr-l", ".pt-32.plr-24",
m(RecoverCodeField, { m(RecoverCodeField, {
showMessage: true, showMessage: true,
recoverCode: code, recoverCode: code,
@ -450,10 +450,10 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
private renderInfoForFreeAccounts(model: RedeemGiftCardModel): Children { private renderInfoForFreeAccounts(model: RedeemGiftCardModel): Children {
return [ return [
m(".pt-32.plr-l", `${lang.get("giftCardUpgradeNotifyRevolutionary_msg")} ${this.getCreditOrDebitMessage(model)}`), m(".pt-32.plr-24", `${lang.get("giftCardUpgradeNotifyRevolutionary_msg")} ${this.getCreditOrDebitMessage(model)}`),
m(".center.h4.pt-16", lang.get("upgradeConfirm_msg")), m(".center.h4.pt-16", lang.get("upgradeConfirm_msg")),
m(".flex-space-around.flex-wrap", [ m(".flex-space-around.flex-wrap", [
m(".flex-grow-shrink-half.plr-l", [ m(".flex-grow-shrink-half.plr-24", [
m(TextField, { m(TextField, {
label: "subscription_label", label: "subscription_label",
value: "Revolutionary", value: "Revolutionary",
@ -476,7 +476,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
}), }),
]), ]),
m( m(
".flex-grow-shrink-half.plr-l.flex-center.items-end", ".flex-grow-shrink-half.plr-24.flex-center.items-end",
m("img[src=" + HabReminderImage + "].pt-16.bg-white.border-radius", { m("img[src=" + HabReminderImage + "].pt-16.bg-white.border-radius", {
style: { style: {
width: "200px", width: "200px",
@ -490,13 +490,13 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
private renderInfoForPaidAccounts(model: RedeemGiftCardModel): Children { private renderInfoForPaidAccounts(model: RedeemGiftCardModel): Children {
return [ return [
m( m(
".pt-32.plr-l.flex-center", ".pt-32.plr-24.flex-center",
`${lang.get("giftCardCreditNotify_msg", { `${lang.get("giftCardCreditNotify_msg", {
"{credit}": formatPrice(Number(model.giftCardInfo.value), true), "{credit}": formatPrice(Number(model.giftCardInfo.value), true),
})} ${lang.get("creditUsageOptions_msg")}`, })} ${lang.get("creditUsageOptions_msg")}`,
), ),
m( m(
".flex-grow-shrink-half.plr-l.flex-center.items-end", ".flex-grow-shrink-half.plr-24.flex-center.items-end",
m("img[src=" + HabReminderImage + "].pt-16.bg-white.border-radius", { m("img[src=" + HabReminderImage + "].pt-16.bg-white.border-radius", {
style: { style: {
width: "200px", width: "200px",

2
src/common/support/pages/EmailSupportUnavailablePage.ts
View file

@ -59,7 +59,7 @@ export class EmailSupportUnavailablePage implements Component<EmailSupportUnavai
m(BaseButton, { m(BaseButton, {
label: "upgrade_action", label: "upgrade_action",
text: lang.get("upgrade_action"), text: lang.get("upgrade_action"),
class: `button-content border-radius accent-bg center plr-button flash full-width`, class: `button-content border-radius accent-bg center plr-8 flash full-width`,
onclick: async () => { onclick: async () => {
await showUpgradeDialog() await showUpgradeDialog()

2
src/common/termination/TerminationView.ts
View file

@ -61,7 +61,7 @@ export class TerminationView extends BaseTopLevelView implements TopLevelView<Te
;(vnode.dom as HTMLElement).focus() ;(vnode.dom as HTMLElement).focus()
}, },
}, },
m(".flex.col.pt-16.plr-l.content-bg.border-radius-big", [ m(".flex.col.pt-16.plr-24.content-bg.border-radius-big", [
this.model.acceptedTerminationRequest this.model.acceptedTerminationRequest
? this.renderTerminationInfo(this.model.mailAddress, this.model.acceptedTerminationRequest) ? this.renderTerminationInfo(this.model.mailAddress, this.model.acceptedTerminationRequest)
: this.renderTerminationForm(), : this.renderTerminationForm(),

4
src/mail-app/contacts/view/ContactListEntryViewer.ts
View file

@ -29,7 +29,7 @@ export class ContactListEntryViewer implements Component<ContactListEntryViewerA
backgroundColor: theme.surface, backgroundColor: theme.surface,
}, },
}, },
m(".plr-l.pt-16.pb-16.mlr-safe-inset", m(".h2.selectable.text-break", attrs.entry.emailAddress)), m(".plr-24.pt-16.pb-16.mlr-safe-inset", m(".h2.selectable.text-break", attrs.entry.emailAddress)),
), ),
m(".mt-32"), m(".mt-32"),
attrs.contacts.length >= 1 attrs.contacts.length >= 1
@ -50,7 +50,7 @@ export class ContactListEntryViewer implements Component<ContactListEntryViewerA
}, },
}, },
m( m(
".plr-l.pt-16.pb-16.mlr-safe-inset", ".plr-24.pt-16.pb-16.mlr-safe-inset",
lang.get("noContactFound_msg"), lang.get("noContactFound_msg"),
m(Button, { m(Button, {
label: "createContact_action", label: "createContact_action",

6
src/mail-app/contacts/view/ContactViewer.ts
View file

@ -79,7 +79,7 @@ export class ContactViewer implements ClassComponent<ContactViewerAttrs> {
const phoneticName = this.contactPhoneticName(attrs.contact) const phoneticName = this.contactPhoneticName(attrs.contact)
return m(".plr-l.pb-floating.mlr-safe-inset", [ return m(".plr-24.pb-floating.mlr-safe-inset", [
m("", [ m("", [
m( m(
".flex-space-between.flex-wrap.mt-12", ".flex-space-between.flex-wrap.mt-12",
@ -199,7 +199,7 @@ export class ContactViewer implements ClassComponent<ContactViewerAttrs> {
private renderJobInformation(contact: Contact): Children { private renderJobInformation(contact: Contact): Children {
const spacerFunction = () => const spacerFunction = () =>
m( m(
"span.plr-s", "span.plr-4",
{ {
style: { style: {
fontWeight: "900", fontWeight: "900",
@ -221,7 +221,7 @@ export class ContactViewer implements ClassComponent<ContactViewerAttrs> {
private renderPronounsInfo(contact: Contact): Children { private renderPronounsInfo(contact: Contact): Children {
const spacerFunction = () => const spacerFunction = () =>
m( m(
"span.plr-s", "span.plr-4",
{ {
style: { style: {
fontWeight: "900", fontWeight: "900",

6
src/mail-app/gui/EventBannerSkeleton.ts
View file

@ -24,7 +24,7 @@ export const EventBannerSkeleton = pureComponent(() =>
}, },
}, },
[ [
m(".flex.flex-column.center.items-center.pr-vpad-l.pl-32.pb-16.pt-16.justify-center.skeleton-bg-1.gap-vpad-xs.fill-grid-column", [ m(".flex.flex-column.center.items-center.pr-32.pl-32.pb-16.pt-16.justify-center.skeleton-bg-1.gap-vpad-xs.fill-grid-column", [
m(Skeleton, { m(Skeleton, {
style: { style: {
width: "25px", width: "25px",
@ -47,7 +47,7 @@ export const EventBannerSkeleton = pureComponent(() =>
}, },
}), }),
]), ]),
m(".flex.flex-column.pr-vpad-l.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs", [ m(".flex.flex-column.pr-32.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs", [
m(Skeleton, { m(Skeleton, {
style: { style: {
width: "75%", width: "75%",
@ -68,7 +68,7 @@ export const EventBannerSkeleton = pureComponent(() =>
}), }),
]), ]),
m( m(
".flex.flex-column.pr-vpad-l.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs.skeleton-border-1", ".flex.flex-column.pr-32.pl-32.pb-16.pt-16.skeleton-bg-2.gap-vpad-xs.skeleton-border-1",
{ {
class: styles.isSingleColumnLayout() ? "border-sm border-left-none border-right-none border-bottom-none" : "border-left-sm", class: styles.isSingleColumnLayout() ? "border-sm border-left-none border-right-none border-bottom-none" : "border-left-sm",
}, },

8
src/mail-app/gui/date/EventBannerImpl.ts
View file

@ -145,7 +145,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
m( m(
".flex.flex-column.center.items-center.pb-16.pt-16.justify-center.fill-grid-column", ".flex.flex-column.center.items-center.pb-16.pt-16.justify-center.fill-grid-column",
{ {
class: styles.isSingleColumnLayout() ? "plr-vpad" : "pr-vpad-l pl-32", class: styles.isSingleColumnLayout() ? "plr-16" : "pr-32 pl-32",
style: { style: {
"background-color": theme.surface_container_high, "background-color": theme.surface_container_high,
color: theme.on_surface_variant, color: theme.on_surface_variant,
@ -158,7 +158,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
], ],
), ),
/* Invite Column */ /* Invite Column */
m(".flex.flex-column.plr-vpad.pb-16.pt-16.justify-start", [ m(".flex.flex-column.plr-16.pb-16.pt-16.justify-start", [
m(".flex", [ m(".flex", [
m(Icon, { m(Icon, {
icon: BootIcons.Calendar, icon: BootIcons.Calendar,
@ -180,7 +180,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
/* Time Overview */ /* Time Overview */
!recipientIsOrganizer !recipientIsOrganizer
? m( ? m(
".flex.flex-column.plr-vpad.pb-16.pt-16.justify-start", ".flex.flex-column.plr-16.pb-16.pt-16.justify-start",
{ {
class: styles.isSingleColumnLayout() ? "border-sm border-left-none border-right-none border-bottom-none" : "border-left-sm", class: styles.isSingleColumnLayout() ? "border-sm border-left-none border-right-none border-bottom-none" : "border-left-sm",
style: { style: {
@ -250,7 +250,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
: null, : null,
isNotEmpty(allDayEvents) isNotEmpty(allDayEvents)
? m( ? m(
"span.border-radius.pt-4.pb-4.plr-sm.text-break", "span.border-radius.pt-4.pb-4.plr-8.text-break",
{ style: { color: theme.on_warning_container, "background-color": theme.warning_container } }, { style: { color: theme.on_warning_container, "background-color": theme.warning_container } },
[ [
m("strong", allDayEvents.length === 1 ? `1 ${lang.get("allDay_label").toLowerCase()}: ` : `${allDayEvents.length} `), m("strong", allDayEvents.length === 1 ? `1 ${lang.get("allDay_label").toLowerCase()}: ` : `${allDayEvents.length} `),

2
src/mail-app/knowledgebase/view/KnowledgeBaseDialogContent.ts
View file

@ -81,7 +81,7 @@ export class KnowledgeBaseDialogContent implements Component<KnowledgebaseDialog
return m(".flex.mt-8.wrap", [ return m(".flex.mt-8.wrap", [
matchedKeywords.length > 0 ? m(".small.full-width", lang.get("matchingKeywords_label")) : null, matchedKeywords.length > 0 ? m(".small.full-width", lang.get("matchingKeywords_label")) : null,
matchedKeywords.map((keyword) => { matchedKeywords.map((keyword) => {
return m(".keyword-bubble-no-padding.plr-button.pl-4.pr-s.border-radius.no-wrap.mr-8.min-content", keyword) return m(".keyword-bubble-no-padding.plr-8.pl-4.pr-4.border-radius.no-wrap.mr-8.min-content", keyword)
}), }),
]) ])
} }

2
src/mail-app/knowledgebase/view/KnowledgeBaseListEntry.ts
View file

@ -24,7 +24,7 @@ export class KnowledgeBaseListEntry implements Component<KnowledgebaseListEntryA
m(".text-ellipsis.mb-4.b", title), m(".text-ellipsis.mb-4.b", title),
m(".flex.badge-line-height.text-ellipsis", [ m(".flex.badge-line-height.text-ellipsis", [
keywords.map((keyword) => { keywords.map((keyword) => {
return m("small.teamLabel.pl-4.pr-s.border-radius.no-wrap.small.mr-8.min-content", keyword.keyword) return m("small.teamLabel.pl-4.pr-4.border-radius.no-wrap.small.mr-8.min-content", keyword.keyword)
}), }),
]), ]),
], ],

2
src/mail-app/mail/view/CollapsedMailView.ts
View file

@ -70,7 +70,7 @@ export class CollapsedMailView implements Component<CollapsedMailViewAttrs> {
private renderUnreadDot(): Children { private renderUnreadDot(): Children {
return m( return m(
".flex.flex-no-grow.no-shrink.pr-s", ".flex.flex-no-grow.no-shrink.pr-4",
{ {
"data-testid": "unread-indicator", "data-testid": "unread-indicator",
}, },

2
src/mail-app/mail/view/EditFoldersDialog.ts
View file

@ -104,7 +104,7 @@ export class EditFoldersDialog implements ModalComponent {
}, },
[ [
m( m(
".plr-button.mt-16.mb-16", ".plr-8.mt-16.mb-16",
m(LoginButton, { m(LoginButton, {
label: "done_action", label: "done_action",
onclick: () => this.close(), onclick: () => this.close(),

4
src/mail-app/mail/view/ExternalLoginView.ts
View file

@ -220,7 +220,7 @@ export class ExternalLoginView extends BaseTopLevelView implements TopLevelView<
view({ attrs }: Vnode<ExternalLoginViewAttrs>): Children { view({ attrs }: Vnode<ExternalLoginViewAttrs>): Children {
return m(".main-view.flex.col.nav-bg", [ return m(".main-view.flex.col.nav-bg", [
m(LoginScreenHeader), m(LoginScreenHeader),
m(".flex-grow.flex.col.items-center.scroll", m(".flex-grow-shrink-auto.flex.col.max-width-m.pt-16.pb-16.plr-l", this.renderContent())), m(".flex-grow.flex.col.items-center.scroll", m(".flex-grow-shrink-auto.flex.col.max-width-m.pt-16.pb-16.plr-24", this.renderContent())),
]) ])
} }
@ -231,7 +231,7 @@ export class ExternalLoginView extends BaseTopLevelView implements TopLevelView<
return m("p.center", m(MessageBox, {}, lang.getTranslationText(this.viewModel.errorMessageId))) return m("p.center", m(MessageBox, {}, lang.getTranslationText(this.viewModel.errorMessageId)))
} else { } else {
return [ return [
m(".flex.col.content-bg.border-radius-big.plr-2l.mt-16", [ m(".flex.col.content-bg.border-radius-big.plr-48.mt-16", [
this.viewModel.showAutoLoginButton ? this.renderAutoLoginButton() : this.renderForm(), this.viewModel.showAutoLoginButton ? this.renderAutoLoginButton() : this.renderForm(),
m("p.center.statusTextColor.mt-4.mb-8", m("small", lang.getTranslationText(this.viewModel.helpText), [])), m("p.center.statusTextColor.mt-4.mb-8", m("small", lang.getTranslationText(this.viewModel.helpText), [])),
]), ]),

2
src/mail-app/mail/view/LabelsPopup.ts
View file

@ -106,7 +106,7 @@ export class LabelsPopup implements ModalComponent {
m(BaseButton, { m(BaseButton, {
label: "apply_action", label: "apply_action",
text: lang.get("apply_action"), text: lang.get("apply_action"),
class: "limit-width noselect bg-transparent button-height text-ellipsis content-accent-fg flex items-center plr-button button-content justify-center border-top state-bg", class: "limit-width noselect bg-transparent button-height text-ellipsis content-accent-fg flex items-center plr-8 button-content justify-center border-top state-bg",
onclick: () => { onclick: () => {
this.applyLabels() this.applyLabels()
}, },

2
src/mail-app/mail/view/MailListView.ts
View file

@ -393,7 +393,7 @@ export class MailListView implements Component<MailListViewAttrs> {
return m(".flex.col", [ return m(".flex.col", [
this.showingSpamOrTrash this.showingSpamOrTrash
? [ ? [
m(".flex.flex-column.plr-l", [ m(".flex.flex-column.plr-24", [
m(".small.flex-grow.pt-16", lang.get("storageDeletion_msg")), m(".small.flex-grow.pt-16", lang.get("storageDeletion_msg")),
m(".mr-negative-8.align-self-end", m(Button, purgeButtonAttrs)), m(".mr-negative-8.align-self-end", m(Button, purgeButtonAttrs)),
]), ]),

4
src/mail-app/mail/view/MailViewerHeader.ts
View file

@ -270,7 +270,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
private renderUnreadDot(): Children { private renderUnreadDot(): Children {
return m( return m(
".flex.flex-no-grow.no-shrink.pr-s", ".flex.flex-no-grow.no-shrink.pr-4",
{ {
"data-testid": "unread-indicator", "data-testid": "unread-indicator",
style: { style: {
@ -538,7 +538,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
// Show a loading symbol if we are loading attachments // Show a loading symbol if we are loading attachments
if (viewModel.isLoadingAttachments() && !viewModel.isConnectionLost()) { if (viewModel.isLoadingAttachments() && !viewModel.isConnectionLost()) {
return m(".flex." + responsiveCardHMargin(), [ return m(".flex." + responsiveCardHMargin(), [
m(".flex-v-center.pl-button", progressIcon()), m(".flex-v-center.pl-8", progressIcon()),
m(".small.flex-v-center.plr.button-height", lang.get("loading_msg")), m(".small.flex-v-center.plr.button-height", lang.get("loading_msg")),
]) ])
} else { } else {

2
src/mail-app/mail/view/MailViewerUtils.ts
View file

@ -494,7 +494,7 @@ async function showUnsubscribeDialog(nextUnsubscribeActions: Array<UnsubscribeAc
[ [
dialogHeaderBarAttrs.noHeader ? null : m(DialogHeaderBar, dialogHeaderBarAttrs), dialogHeaderBarAttrs.noHeader ? null : m(DialogHeaderBar, dialogHeaderBarAttrs),
m( m(
".scroll.hide-outline.plr-l.flex-grow", ".scroll.hide-outline.plr-24.flex-grow",
{ style: { "overflow-x": "hidden" } }, { style: { "overflow-x": "hidden" } },
m( m(
ContentWithOptionsDialog, ContentWithOptionsDialog,

2
src/mail-app/mail/view/MobileMailActionBar.ts
View file

@ -31,7 +31,7 @@ export class MobileMailActionBar implements Component<MobileMailActionBarAttrs>
const { attrs } = vnode const { attrs } = vnode
return m( return m(
".bottom-nav.bottom-action-bar.flex.items-center.plr-l.justify-between", ".bottom-nav.bottom-action-bar.flex.items-center.plr-24.justify-between",
{ {
oncreate: (vnode) => { oncreate: (vnode) => {
this.dom = vnode.dom as HTMLElement this.dom = vnode.dom as HTMLElement

2
src/mail-app/mail/view/MultiItemViewer.ts
View file

@ -49,7 +49,7 @@ export class MultiItemViewer<T> implements Component<MultiItemViewerAttrs<T>> {
stopLoadAll() stopLoadAll()
}, },
}), }),
m(".flex.items-center.plr-button", progressIcon()), m(".flex.items-center.plr-8", progressIcon()),
]) ])
: selectedEntities.length === 0 : selectedEntities.length === 0
? null ? null

8
src/mail-app/search/SearchBarOverlay.ts
View file

@ -49,7 +49,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
m("ul.list.click.mail-list", [ m("ul.list.click.mail-list", [
state.entities.map((result) => { state.entities.map((result) => {
return m( return m(
"li.plr-l.flex-v-center.", "li.plr-24.flex-v-center.",
{ {
style: { style: {
height: px(52), height: px(52),
@ -93,7 +93,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
_renderProgress(state: SearchBarState): Children { _renderProgress(state: SearchBarState): Children {
return m(".flex.col.rel", [ return m(".flex.col.rel", [
m( m(
".plr-l.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8", ".plr-24.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8",
{ {
style: { style: {
height: px(52), height: px(52),
@ -146,7 +146,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
return m(".flex.rel", [ return m(".flex.rel", [
m( m(
".plr-l.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8", ".plr-24.pt-8.pb-8.flex.items-center.flex-space-between.mr-negative-8",
{ {
style: { style: {
height: px(52), height: px(52),
@ -214,7 +214,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
return indexInfo return indexInfo
? [m(".top.flex-center", infoText), m(".bottom.flex-center.small", indexInfo)] ? [m(".top.flex-center", infoText), m(".bottom.flex-center.small", indexInfo)]
: m("li.plr-l.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText)) : m("li.plr-24.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText))
} }
private renderContactResult(contact: Contact): Children { private renderContactResult(contact: Contact): Children {

Some files were not shown because too many files have changed in this diff Show more