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)
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", [
this.renderPickerHeader(this.currentDate),
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 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>, {
onchange: (option) => {
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(Card, { style: { padding: `0` } }, [
m(".flex.flex-column", [
m(".flex.pl-8.pr-vpad-s", [
m(".flex.pl-8.pr-8", [
m(Select<OrganizerSelectItem, string>, {
classes: ["flex-grow", "button-min-height"],
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),
expanded: true,
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),
renderDisplay: (option) => this.renderCalendarOptions(option, false, true),
ariaLabel: lang.get("calendar_label"),
@ -334,7 +334,7 @@ export class CalendarEventEditView implements Component<CalendarEventEditViewAtt
private renderCalendarOptions(option: CalendarSelectItem, isSelected: boolean, isDisplay: boolean) {
return m(
".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", {
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", [
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, {
icon: Icons.Time,
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(Divider, { color: theme.outline_variant }),
m(".time-selection-grid.pr-vpad-s", [
m(".time-selection-grid.pr-8", [
m("", lang.get("dateFrom_label")),
m(
`${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 {
return m(Icon, {
icon,
class: "pr",
class: "pr-12",
size: IconSize.PX24,
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", [
state.entities.map((result) => {
return m(
"li.plr-l.flex-v-center.",
"li.plr-24.flex-v-center.",
{
style: {
height: px(52),
@ -82,7 +82,7 @@ export class CalendarSearchBarOverlay implements Component<CalendarSearchBarOver
return 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 {

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 {
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() {

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

@ -157,7 +157,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
view: () =>
m(BackgroundColumnLayout, {
backgroundColor: theme.surface_container,
classes: this.isTabletView() ? "pr-m pl-8" : "",
classes: this.isTabletView() ? "pr-16 pl-8" : "",
columnLayout: 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(
".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)),

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

@ -33,7 +33,7 @@ export class GlobalSettingsViewer implements UpdatableSettingsViewer {
}
view(): Children {
return m("#global-settings.fill-absolute.scroll.plr-l", [
return m("#global-settings.fill-absolute.scroll.plr-24", [
m(AccountMaintenanceSettings, {
customerServerProperties: this.props,
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)
return m(".fill-absolute.scroll.plr-l.pb-48", [
return m(".fill-absolute.scroll.plr-24.pb-48", [
m(".flex.col", [
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),

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 {
const { navConfig } = attrs
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: {
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)
}
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(".calendar-checkbox", {
role: "checkbox",
@ -1096,7 +1096,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
title: lastSyncStr,
icon: Icons.SyncProblem,
size: IconSize.PX24,
class: "pr-s",
class: "pr-4",
style: {
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>) {
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(
".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(
".pl-4.pr-s.center.small.flex.flex-column.justify-center",
".pl-4.pr-4.center.small.flex.flex-column.justify-center",
{
style: {
"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
const height = mainPageEventsCount * CALENDAR_EVENT_HEIGHT + padding
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: {
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,
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, {
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. */
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(
".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(DropDownSelector, {
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) =>
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" : "",
},

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(DropDownSelector, {
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.
const { remove, open, download, attachment, fileImport, type } = this.attrs
return m(
".flex.mb-8.pr",
".flex.mb-8.pr-12",
{
oncreate: (vnode) => (this.domContent = vnode.dom as HTMLElement),
},
[
m(Icon, {
icon: getAttachmentIcon(type),
class: "pr-s flex items-center",
class: "pr-4 flex items-center",
style: {
fill: theme.on_surface,
"background-color": "initial",

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

@ -37,7 +37,7 @@ export const DesktopViewerToolbar = pureComponent((__, children) => {
},
},
m(
".flex.list-bg.pt-4.pb-4.plr-m",
".flex.list-bg.pt-4.pb-4.plr-12",
{
style: {
"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 {
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 {
return null
}

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

@ -18,7 +18,7 @@ export class MobileActionBar implements Component<MobileActionBarAttrs> {
const { attrs } = vnode
return m(
".bottom-nav.bottom-action-bar.flex.items-center.plr-l",
".bottom-nav.bottom-action-bar.flex.items-center.plr-24",
{
style: {
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. */
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>) {
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: {
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("small.b.align-self-center.text-ellipsis.plr-button", lang.getTranslationText(name).toLocaleUpperCase()),
m(".folder-row.flex-space-between.plr-8.pt-8.button-height", [
m("small.b.align-self-center.text-ellipsis.plr-8", lang.getTranslationText(name).toLocaleUpperCase()),
button ?? null,
]),
content,

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

@ -5,6 +5,6 @@ type BadgeAttrs = {
}
export default class Badge implements Component<BadgeAttrs> {
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>) {
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),
...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")
} else {
if (!inline) {
classes.push("plr-button")
classes.push("plr-8")
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, {
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()),
buttonAttrs.length === 0
? null
@ -688,7 +688,7 @@ export class Dialog implements ModalComponent {
middle: lang.makeTranslation("title", title()),
}
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)
.show()
@ -709,7 +709,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(DialogType.EditMedium, {
view: () =>
m(
".plr-l",
".plr-24",
m(ImageWithOptionsDialog, {
image: `${window.tutao.appState.prefixWithoutFile}/images/update/update_needed_illu_${
client.isCalendarApp() ? "calendar" : "mail"
@ -813,7 +813,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(DialogType.EditMedium, {
view: () =>
m(
".plr-2l",
".plr-48",
m(ImageWithOptionsDialog, {
image: `${window.tutao.appState.prefixWithoutFile}/images/newsletter-unsubscribe/unsubscribe_${success ? "success" : "failure"}_${getUnsubscribeImageSuffix(theme.themeId)}.svg`,
titleText: success ? "unsubscribeSuccessful_title" : "unsubscribeFailed_title",
@ -918,7 +918,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(type, {
view: () => [
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)
dialog.addShortcut({
@ -1066,7 +1066,7 @@ export class Dialog implements ModalComponent {
static largeDialog(headerBarAttrs: DialogHeaderBarAttrs, child: Component): Dialog {
return new Dialog(DialogType.EditLarge, {
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 */
headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs),
/** 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 */
headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs),
/** 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 */
headerBarAttrs.noHeader ? null : m(DialogHeaderBar, headerBarAttrs),
/** 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"
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 }) => {
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()) {
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(".dialog-container.scroll.plr-l", m(component, componentAttrs)),
m(".dialog-container.scroll.plr-24", m(component, componentAttrs)),
])
} else {
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 = () => {
return this.isFilterable
? 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"),
oncreate: (vnode) => {

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

@ -26,9 +26,9 @@ export class FilterChip implements Component<FilterChipAttrs> {
selectors += ".pl-16"
}
if (chevron) {
selectors += ".pr-vpad-s"
selectors += ".pr-8"
} else {
selectors += ".pr-vpad-m"
selectors += ".pr-16"
}
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()) {
return m(".flex.col", [m(".flex", left), m(".flex", right)])
} 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
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: {
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 {
return m(
".plr-l.flex-center.items-center",
".plr-24.flex-center.items-center",
{
style: {
height: px(component_size.list_row_height),
@ -544,7 +544,7 @@ export class List<T, VH extends ViewHolder<T>> implements ClassComponent<ListAtt
}
return [
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),
tabindex: TabIndex.Programmatic,

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

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

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

@ -10,7 +10,7 @@ export class NavBar implements Component<Attrs> {
return m(
"nav.nav-bar.flex-end",
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 {
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.centred ? ".flex-start" : ".flex-center") +
(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
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
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
m(
".button-height.flex.items-center.plr-button",
".button-height.flex.items-center.plr-8",
m(Icon, {
icon: attrs.icon,
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" : "" },
m(
".text-ellipsis.pr.pt-8" +
".text-ellipsis.pr-12.pt-8" +
(bold ? ".b" : "") +
(cellTextData.click ? ".click" : "" + (cellTextData.mainStyle ? cellTextData.mainStyle : "")) +
(columnAlignments[index] ? ".right" : ""),
@ -146,7 +146,7 @@ export class Table implements Component<TableAttrs> {
} else {
cells = lineAttrs.cells.map((text, index) =>
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
},
@ -182,7 +182,7 @@ export class Table implements Component<TableAttrs> {
return m(InfoIcon, { text: info.join("\n") })
} else {
return m(
".small.text-ellipsis.pr" + (cellTextData.click ? ".click" : ""),
".small.text-ellipsis.pr-12" + (cellTextData.click ? ".click" : ""),
{
onclick: cellTextData.click
? (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 {
return m(".flex.flex-grow.flex-column.text.pt-16", [
m(
"label.text-ellipsis.noselect.z1.i.pr-s",
"label.text-ellipsis.noselect.z1.i.pr-4",
{
style: {
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(
"label.abs.text-ellipsis.noselect.z1.i.pr-s",
"label.abs.text-ellipsis.noselect.z1.i.pr-4",
{
"aria-hidden": "true",
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
? null
: 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",
},

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

@ -22,7 +22,7 @@ export function usingMobileBubbleButton() {
}
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) {
classes.push("plr-2l")
classes.push("plr-48")
} else {
classes.push("full-width plr-button")
classes.push("full-width plr-8")
}
return classes

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

@ -42,7 +42,7 @@ export class OutlineButton implements ClassComponent<OutlineButtonAttrs> {
"button-content",
"border-accent",
"border-radius",
"plr-button",
"plr-8",
"limit-width",
"noselect",
"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, {
label: attrs.label,
text: m(
".plr-button.text-ellipsis",
".plr-8.text-ellipsis",
{
style: { color },
// When the label doesn't match content, screen readers read both
@ -51,7 +51,7 @@ export class RowButton implements Component<RowButtonAttrs> {
: attrs.icon === "none"
? m(".icon-24.mr-8")
: 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: {
...attrs.style,
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", [
this.renderHuePicker(attrs.onselect),
m(
".flex.wrap.full-width.items-center.justify-between.p0.plr-s",
".flex.wrap.full-width.items-center.justify-between.p0.plr-4",
{
style: {
rowGap: px(size.spacing_4),
@ -87,7 +87,7 @@ export class ColorPickerView implements Component<ColorPickerViewAttrs> {
selectedColor: attrs.value,
onselect: attrs.onselect,
// 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:
i === 0
? {

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

@ -5,5 +5,5 @@ export function responsiveCardHMargin() {
}
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,
m(SelectCredentialsEncryptionModeView, {
class: "scroll pt-16 plr-l height-100p",
class: "scroll pt-16 plr-24 height-100p",
error: this.error,
onConfirm: (mode) => this.onModeSelected(mode),
supportedModes: this.supportedModes,

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

@ -65,7 +65,7 @@ export class HtmlEditor implements Component {
const getPlaceholder = () =>
!this.active && this.isEmpty()
? 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),
onclick: () =>

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

@ -487,24 +487,21 @@ styles.registerStyle("main", () => {
".pl-32": {
"padding-left": px(size.spacing_32),
},
".pr": {
".pr-12": {
"padding-right": px(size.spacing_12),
},
".pr-s": {
".pr-4": {
"padding-right": px(size.spacing_4),
},
".pr-vpad-s": {
".pr-8": {
"padding-right": px(size.spacing_8),
},
".pr-vpad-m": {
".pr-16": {
"padding-right": px(size.spacing_16),
},
".pr-vpad-l": {
".pr-32": {
"padding-right": px(size.spacing_32),
},
".pr-m": {
"padding-right": px(size.spacing_16),
},
".plr": {
"padding-left": px(size.spacing_12),
"padding-right": px(size.spacing_12),
@ -513,54 +510,37 @@ styles.registerStyle("main", () => {
"padding-left": px(size.spacing_8),
"padding-right": px(size.spacing_8),
},
".plr-vpad": {
".plr-16": {
"padding-left": px(size.spacing_16),
"padding-right": px(size.spacing_16),
},
".plr-s": {
".plr-4": {
"padding-left": px(size.spacing_4),
"padding-right": px(size.spacing_4),
},
".plr-sm": {
"padding-left": px(6),
"padding-right": px(6),
},
".plr-m": {
".plr-12": {
"padding-left": px(size.spacing_12),
"padding-right": px(size.spacing_12),
},
// p-l will be overwritten in media query mobile
".plr-l": {
".plr-24": {
"padding-left": px(size.spacing_24),
"padding-right": px(size.spacing_24),
},
".plr-2l": {
"padding-left": px(size.spacing_24 * 2),
"padding-right": px(size.spacing_24 * 2),
".plr-48": {
"padding-left": px(size.spacing_48),
"padding-right": px(size.spacing_48),
},
".ptb-button-double": {
"padding-top": px(size.spacing_8 * 2),
"padding-bottom": px(size.spacing_8 * 2),
".ptb-16": {
"padding-top": px(size.spacing_16),
"padding-bottom": px(size.spacing_16),
},
".pl-24": {
"padding-left": px(size.spacing_24),
},
".pr-l": {
".pr-24": {
"padding-right": px(size.spacing_24),
},
".plr-button": {
"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": {
".pl-8": {
"padding-left": px(size.spacing_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(
".flex-grow.flex-center.scroll",
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")),
oncreate: (vnode) => {
@ -109,7 +109,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
m(
".content-bg.border-radius-big.pb-16",
{
class: styles.isSingleColumnLayout() ? "plr-l" : "plr-2l",
class: styles.isSingleColumnLayout() ? "plr-24" : "plr-48",
},
this._renderFormForDisplayMode(),
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]
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 },
newsListItem.render(liveNewsId, vnode.attrs.dialog),
)

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

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

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

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

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

@ -48,7 +48,7 @@ export class AffiliateSettingsViewer implements UpdatableSettingsViewer {
return m(
ListColumnWrapper,
m(
"section.fill-absolute.scroll.plr-l",
"section.fill-absolute.scroll.plr-24",
m("h4.mt-32", lang.get("affiliateSettings_label")),
m(TextField, {
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))
},
}
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(DropDownSelector, languageDropDownAttrs),
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 {
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
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 {
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> {

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

@ -14,7 +14,7 @@ export class SettingsFolderRow implements Component<SettingsFolderRowAttrs> {
view(vnode: Vnode<SettingsFolderRowAttrs>): Children {
const { mainButtonAttrs, extraButton } = vnode.attrs
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])
}
}

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

@ -94,7 +94,7 @@ export class UserListView implements UpdatableSettingsViewer {
ListColumnWrapper,
{
headerContent: m(
".flex.flex-space-between.center-vertically.plr-l",
".flex.flex-space-between.center-vertically.plr-24",
m(BaseSearchBar, {
text: this.searchQuery,
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)],
isReadOnly: true,
} 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("", [
m(TextField, {

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

@ -33,7 +33,7 @@ export class GroupDetailsView implements UpdatableSettingsDetailsViewer {
}
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("", [
m(
".fill-absolute.scroll.plr-l.pb-48",
".fill-absolute.scroll.plr-24.pb-48",
{
style: {
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()) {
const user = locator.logins.getUserController()
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")),
this.renderName(user.userGroupInfo),
m(TextField, mailAddressAttrs),

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

@ -101,9 +101,9 @@ export class RecoverCodeField {
showMessage
? image
? 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(
".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", {
src: image.src,
alt: lang.getTranslationText(image.alt),

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

@ -129,7 +129,7 @@ export class CustomColorEditorPreview implements Component {
},
[
m(
".list-row.pl-12.pr-l.odd-row",
".list-row.pl-12.pr-24.odd-row",
{
oncreate: (vnode) => {
this._mailRow.domElement = vnode.dom as HTMLElement
@ -139,7 +139,7 @@ export class CustomColorEditorPreview implements Component {
this._mailRow.render(),
),
m(
".list-row.pl-12.pr-l",
".list-row.pl-12.pr-24",
{
oncreate: (vnode) => {
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 () =>
m(
".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()
return m(
"#global-settings.fill-absolute.scroll.plr-l",
"#global-settings.fill-absolute.scroll.plr-24",
brandingDomainConfig
? [
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 {
const { invitation, icon } = vnode.attrs
return [
m(".folder-row.flex-start.plr-l", [
m(".folder-row.flex-start.plr-24", [
m(
".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-grow-shrink-half.plr-l",
".flex-grow-shrink-half.plr-24",
{
style: {
minWidth: "260px",
@ -191,7 +191,7 @@ export class InvoiceAndPaymentDataPage implements WizardPageN<UpgradeSubscriptio
m(neverNull(this._invoiceDataInput)),
),
m(
".flex-grow-shrink-half.plr-l",
".flex-grow-shrink-half.plr-24",
{
style: {
minWidth: "260px",

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

@ -86,7 +86,7 @@ export class PaymentViewer implements UpdatableSettingsViewer {
view(): Children {
return m(
"#invoicing-settings.fill-absolute.scroll.plr-l",
"#invoicing-settings.fill-absolute.scroll.plr-24",
{
role: "group",
},
@ -535,7 +535,7 @@ function showPayConfirmDialog(price: number): Promise<boolean> {
view: (): Children => [
m(DialogHeaderBar, actionBarAttrs),
m(
".plr-l.pb-16",
".plr-24.pb-16",
m("", [
m(".pt-16", lang.get("invoicePayConfirm_msg")),
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 {
return m("#leaving-user-survey-dialog.pt-16.flex-center", [
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: {
minHeight: styles.isDesktopLayout() ? "850px" : "",

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

@ -182,7 +182,7 @@ export class SignupForm implements Component<SignupFormAttrs> {
return m(
"#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
? m(TextField, {
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.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(TextField, {
label: "subscription_label",

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

@ -133,7 +133,7 @@ export class UpgradeConfirmSubscriptionPage implements WizardPageN<UpgradeSubscr
return [
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, {
label: "subscription_label",
value: getDisplayNameOfPlanType(attrs.data.targetPlanType),

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

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

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

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

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

@ -264,7 +264,7 @@ class GiftCardCredentialsPage implements WizardPageN<RedeemGiftCardModel> {
return [
m(
".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("", [
mapNullable(model.newAccountData?.recoverCode, (code) =>
m(
".pt-32.plr-l",
".pt-32.plr-24",
m(RecoverCodeField, {
showMessage: true,
recoverCode: code,
@ -450,10 +450,10 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
private renderInfoForFreeAccounts(model: RedeemGiftCardModel): Children {
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(".flex-space-around.flex-wrap", [
m(".flex-grow-shrink-half.plr-l", [
m(".flex-grow-shrink-half.plr-24", [
m(TextField, {
label: "subscription_label",
value: "Revolutionary",
@ -476,7 +476,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
}),
]),
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", {
style: {
width: "200px",
@ -490,13 +490,13 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
private renderInfoForPaidAccounts(model: RedeemGiftCardModel): Children {
return [
m(
".pt-32.plr-l.flex-center",
".pt-32.plr-24.flex-center",
`${lang.get("giftCardCreditNotify_msg", {
"{credit}": formatPrice(Number(model.giftCardInfo.value), true),
})} ${lang.get("creditUsageOptions_msg")}`,
),
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", {
style: {
width: "200px",

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

@ -59,7 +59,7 @@ export class EmailSupportUnavailablePage implements Component<EmailSupportUnavai
m(BaseButton, {
label: "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 () => {
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()
},
},
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.renderTerminationInfo(this.model.mailAddress, this.model.acceptedTerminationRequest)
: 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,
},
},
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"),
attrs.contacts.length >= 1
@ -50,7 +50,7 @@ export class ContactListEntryViewer implements Component<ContactListEntryViewerA
},
},
m(
".plr-l.pt-16.pb-16.mlr-safe-inset",
".plr-24.pt-16.pb-16.mlr-safe-inset",
lang.get("noContactFound_msg"),
m(Button, {
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)
return m(".plr-l.pb-floating.mlr-safe-inset", [
return m(".plr-24.pb-floating.mlr-safe-inset", [
m("", [
m(
".flex-space-between.flex-wrap.mt-12",
@ -199,7 +199,7 @@ export class ContactViewer implements ClassComponent<ContactViewerAttrs> {
private renderJobInformation(contact: Contact): Children {
const spacerFunction = () =>
m(
"span.plr-s",
"span.plr-4",
{
style: {
fontWeight: "900",
@ -221,7 +221,7 @@ export class ContactViewer implements ClassComponent<ContactViewerAttrs> {
private renderPronounsInfo(contact: Contact): Children {
const spacerFunction = () =>
m(
"span.plr-s",
"span.plr-4",
{
style: {
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, {
style: {
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, {
style: {
width: "75%",
@ -68,7 +68,7 @@ export const EventBannerSkeleton = pureComponent(() =>
}),
]),
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",
},

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

@ -145,7 +145,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
m(
".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: {
"background-color": theme.surface_container_high,
color: theme.on_surface_variant,
@ -158,7 +158,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
],
),
/* 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(Icon, {
icon: BootIcons.Calendar,
@ -180,7 +180,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
/* Time Overview */
!recipientIsOrganizer
? 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",
style: {
@ -250,7 +250,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
: null,
isNotEmpty(allDayEvents)
? 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 } },
[
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", [
matchedKeywords.length > 0 ? m(".small.full-width", lang.get("matchingKeywords_label")) : null,
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(".flex.badge-line-height.text-ellipsis", [
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 {
return m(
".flex.flex-no-grow.no-shrink.pr-s",
".flex.flex-no-grow.no-shrink.pr-4",
{
"data-testid": "unread-indicator",
},

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

@ -104,7 +104,7 @@ export class EditFoldersDialog implements ModalComponent {
},
[
m(
".plr-button.mt-16.mb-16",
".plr-8.mt-16.mb-16",
m(LoginButton, {
label: "done_action",
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 {
return m(".main-view.flex.col.nav-bg", [
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)))
} else {
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(),
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, {
label: "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: () => {
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", [
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(".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 {
return m(
".flex.flex-no-grow.no-shrink.pr-s",
".flex.flex-no-grow.no-shrink.pr-4",
{
"data-testid": "unread-indicator",
style: {
@ -538,7 +538,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
// Show a loading symbol if we are loading attachments
if (viewModel.isLoadingAttachments() && !viewModel.isConnectionLost()) {
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")),
])
} 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),
m(
".scroll.hide-outline.plr-l.flex-grow",
".scroll.hide-outline.plr-24.flex-grow",
{ style: { "overflow-x": "hidden" } },
m(
ContentWithOptionsDialog,

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

@ -31,7 +31,7 @@ export class MobileMailActionBar implements Component<MobileMailActionBarAttrs>
const { attrs } = vnode
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) => {
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()
},
}),
m(".flex.items-center.plr-button", progressIcon()),
m(".flex.items-center.plr-8", progressIcon()),
])
: selectedEntities.length === 0
? 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", [
state.entities.map((result) => {
return m(
"li.plr-l.flex-v-center.",
"li.plr-24.flex-v-center.",
{
style: {
height: px(52),
@ -93,7 +93,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
_renderProgress(state: SearchBarState): Children {
return m(".flex.col.rel", [
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: {
height: px(52),
@ -146,7 +146,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
return m(".flex.rel", [
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: {
height: px(52),
@ -214,7 +214,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
return 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 {

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