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

pt, pb

Browse source
This commit is contained in:
yoy 2025-10-10 15:35:46 +02:00
parent 95918bfab1
commit d89484d961
136 changed files with 244 additions and 253 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -48,7 +48,7 @@ function sourceUrlInputField(urlStream: Stream<string>, errorMessageStream: Stre
if (urlStream().trim() === "") helperMessage = "E.g: https://tuta.com/ics/example.ics"
else if (isNotNull(errorMessage) && errorMessage !== DEFAULT_ERROR) helperMessage = errorMessage
return m(TextField, {
class: `pt-16 pb ${helperMessage.length ? "" : "mb-small-line-height"}`,
class: `pt-16 pb-16 ${helperMessage.length ? "" : "mb-small-line-height"}`,
value: urlStream(),
oninput: (url: string, inputElement: HTMLInputElement) => {
const assertionResult = checkURLString(url)

4
src/calendar-app/calendar/gui/RemindersEditor.ts
View file

@ -185,7 +185,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
"button.items-center.flex-grow",
{
tabIndex: isDisplay ? TabIndex.Programmatic : undefined,
class: isDisplay ? `flex ${hasAlarms ? "text-fade" : ""}` : "state-bg button-content button-min-height dropdown-button pt-s pb-s",
class: isDisplay ? `flex ${hasAlarms ? "text-fade" : ""}` : "state-bg button-content button-min-height dropdown-button pt-8 pb-8",
},
option.text,
)
@ -201,7 +201,7 @@ export class RemindersEditor implements Component<RemindersEditorAttrs> {
child: {
view: () => {
const unitItems = createCustomRepeatRuleUnitValues() ?? []
return m(".flex full-width pt-s", [
return m(".flex full-width pt-8", [
m(TextField, {
type: TextFieldType.Number,
min: 0,

4
src/calendar-app/calendar/gui/day-selector/DaySelectorPopup.ts
View file

@ -42,7 +42,7 @@ export class DaySelectorPopup implements ModalComponent {
view(): Children {
return m(
".abs.elevated-bg.plr.pt-s.pb-m.border-radius.dropdown-shadow.flex.flex-column",
".abs.elevated-bg.plr.pt-8.pb-12.border-radius.dropdown-shadow.flex.flex-column",
{
style: {
opacity: "0",
@ -88,7 +88,7 @@ export class DaySelectorPopup implements ModalComponent {
}
private renderPickerHeader(date: Date): Children {
return m(".flex.flex-space-between.pb-s.items-center", [
return m(".flex.flex-space-between.pb-8.items-center", [
m(
".b",
{

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

@ -34,7 +34,7 @@ export class DaySelectorSidebar implements Component<DaySelectorSidebarAttrs> {
return m(
isDesktop() ? ".plr-m.mt-24" : ".plr-m.mt-8",
m(".elevated-bg.pt-s.pb-m.border-radius.flex.flex-column", [
m(".elevated-bg.pt-8.pb-12.border-radius.flex.flex-column", [
this.renderPickerHeader(this.currentDate),
m(".flex-grow.overflow-hidden", [
m(DaySelector, {
@ -59,7 +59,7 @@ export class DaySelectorSidebar implements Component<DaySelectorSidebarAttrs> {
}
private renderPickerHeader(date: Date): Children {
return m(".flex.flex-space-between.pb.items-center.mlr-4", [
return m(".flex.flex-space-between.pb-16.items-center.mlr-4", [
renderSwitchMonthArrowIcon(false, 24, () => this.onMonthChange(false)),
m(
".b.mlr-4",

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

@ -49,7 +49,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
const { whoModel } = attrs.model.editModels
const organizer = whoModel.organizer
return [
m(".flex-grow.flex.flex-column.gap-vpad.pb.pt-16.fit-height", { style: { width: px(attrs.width) } }, [
m(".flex-grow.flex.flex-column.gap-vpad.pb-16.pt-16.fit-height", { style: { width: px(attrs.width) } }, [
this.renderOrganizer(attrs.model, organizer),
m(".flex.flex-column.gap-vpad-s", [
m("small.uppercase.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("guests_label")),
@ -175,7 +175,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
ariaLabel: lang.get("attending_label"),
renderOption: (option) =>
m(
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-s.pb-s.button-min-height",
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-8.pb-8.button-min-height",
{
class: option.selectable === false ? `no-hover` : "",
style: { color: option.value === status ? theme.primary : undefined },
@ -216,7 +216,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
const selected = options.find((option) => option.address === address) ?? options[0]
return m(".flex.col", [
m("small.uppercase.pb-s.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(".flex.flex-column", [
m(".flex.pl-vpad-s.pr-vpad-s", [
@ -233,7 +233,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
ariaLabel: lang.get("organizer_label"),
renderOption: (option) =>
m(
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-s.pb-s.button-min-height",
"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-8.pb-8.button-min-height",
{ style: { color: selected.address === option.address ? theme.primary : undefined } },
option.address,
),

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

@ -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-s pb-s button-min-height"}` },
{ class: `${isDisplay ? "" : "state-bg plr-button button-content dropdown-button pt-8 pb-8 button-min-height"}` },
[
m(".no-shrink", {
style: {
@ -438,7 +438,7 @@ export class CalendarEventEditView implements Component<CalendarEventEditViewAtt
private renderMainPage(vnode: Vnode<CalendarEventEditViewAttrs>): Children {
return m(
".pb.pt-16.flex.col.gap-vpad.fit-height.box-content",
".pb-16.pt-16.flex.col.gap-vpad.fit-height.box-content",
{
style: {
// The date picker dialogs have position: fixed, and they are fixed relative to the most recent ancestor with

12
src/calendar-app/calendar/gui/eventeditor-view/RepeatRuleEditor.ts
View file

@ -86,7 +86,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
view({ attrs }: Vnode<RepeatRuleEditorAttrs>): Children {
return m(
".pb.pt-16.flex.col.gap-vpad.fit-height",
".pb-16.pt-16.flex.col.gap-vpad.fit-height",
{
class: this.repeatRuleType !== null ? "box-content" : "",
style: {
@ -96,7 +96,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
[
this.hasUnsupportedRules ? this.renderUnsupportedAdvancedRulesWarning() : null,
m(".flex.col", [
m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText("frequency_title")),
m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText("frequency_title")),
m(
Card,
{
@ -137,7 +137,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
}
return m(".flex.col", [
m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("calendarRepeatStopCondition_label")),
m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("calendarRepeatStopCondition_label")),
m(
Card,
{
@ -169,7 +169,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
}
return m(".flex.col", [
m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("interval_title")),
m("small.uppercase.pb-8.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("interval_title")),
m(
Card,
{
@ -293,7 +293,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
{
...(option.value === this.repeatInterval ? { "aria-selected": "true" } : {}),
class:
"state-bg button-content dropdown-button pt-s pb-s button-min-height" +
"state-bg button-content dropdown-button pt-8 pb-8 button-min-height" +
(option.value === this.repeatInterval ? "content-accent-fg row-selected icon-accent" : ""),
},
option.name,
@ -399,7 +399,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
{
...(option.value === this.repeatOccurrences ? { "aria-selected": "true" } : {}),
class:
"state-bg button-content dropdown-button pt-s pb-s button-min-height" +
"state-bg button-content dropdown-button pt-8 pb-8 button-min-height" +
(option.value === this.repeatOccurrences ? "content-accent-fg row-selected icon-accent" : ""),
},
option.name,

2
src/calendar-app/calendar/gui/eventeditor-view/WeekRepetitionSelector.ts
View file

@ -63,7 +63,7 @@ export class WeekRepetitionSelector implements Component<WeekRepetitionSelectorA
m(
"button.items-center.flex-grow",
{
class: "state-bg button-content dropdown-button pt-s pb-s button-min-height",
class: "state-bg button-content dropdown-button pt-8 pb-8 button-min-height",
},
option.name,
),

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

@ -51,7 +51,7 @@ export class ContactEventPopup implements ModalComponent {
view(): Children {
return m(
".abs.elevated-bg.plr.pb.border-radius.dropdown-shadow.flex.flex-column",
".abs.elevated-bg.plr.pb-16.border-radius.dropdown-shadow.flex.flex-column",
{
style: {
// minus margin, need to apply it now to not overflow later

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

@ -111,7 +111,7 @@ export class CalendarEventPopup implements ModalComponent {
view(): Children {
return m(
".abs.elevated-bg.plr.pb.border-radius.dropdown-shadow.flex.flex-column",
".abs.elevated-bg.plr.pb-16.border-radius.dropdown-shadow.flex.flex-column",
{
style: {
// minus margin, need to apply it now to not overflow later

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

@ -48,7 +48,7 @@ export class ContactPreviewView implements Component<ContactPreviewViewAttrs> {
private renderRow(headerIcon: AllIcons, children: Children, isAlignedLeft?: boolean): Children {
return m(
".flex.pb-s",
".flex.pb-8",
{
class: isAlignedLeft ? "items-start" : "items-center",
},
@ -72,7 +72,7 @@ export class ContactPreviewView implements Component<ContactPreviewViewAttrs> {
}
private renderActions(contact: Contact): Children {
return m(".flex.pb-s", m(ActionButtons, contact))
return m(".flex.pb-8", m(ActionButtons, contact))
}
}

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

@ -202,7 +202,7 @@ export class EventPreviewView implements Component<EventPreviewViewAttrs> {
): Children {
if (attendees.length === 0 || participation == null || event._ownerGroup == null) return null
return m("", [
m(".flex.pb-s", [
m(".flex.pb-8", [
this.renderSectionIndicator(BootIcons.Contacts),
m(".flex.flex-column", [
m(".small", lang.get("invitedToEvent_msg")),

4
src/calendar-app/calendar/gui/pickers/DatePicker.ts
View file

@ -213,7 +213,7 @@ export class DatePicker implements Component<DatePickerAttrs> {
// We would like to show the date being typed in the dropdown
const dropdownDate = this.parseDate(this.inputText) ?? date ?? new Date()
return m(
".content-bg.z3.menu-shadow.plr.pb-s",
".content-bg.z3.menu-shadow.plr.pb-8",
{
"aria-modal": "true",
"aria-label": lang.get(label),
@ -410,7 +410,7 @@ export class VisualDatePicker implements Component<VisualDatePickerAttrs> {
private renderPickerHeader(vnode: Vnode<VisualDatePickerAttrs>, date: Date): Children {
const size = this.getElementWidth(vnode.attrs)
return m(".flex.flex-space-between.pt-s.pb-s.items-center", [
return m(".flex.flex-space-between.pt-8.pb-8.items-center", [
renderSwitchMonthArrowIcon(false, size, () => this.onPrevMonthSelected()),
m(
".b",

2
src/calendar-app/calendar/gui/pickers/GuestPicker.ts
View file

@ -77,7 +77,7 @@ export class GuestPicker implements ClassComponent<GuestPickerAttrs> {
})
const secondRow = option.value.type === "recipient" ? option.value.value.address : option.value.value.name
return m(
"button.pt-s.pb-s.click.content-hover.state-bg.button-min-height.flex.col",
"button.pt-8.pb-8.click.content-hover.state-bg.button-min-height.flex.col",
{
style: {
"padding-left": px(size.spacing_24),

2
src/calendar-app/calendar/gui/pickers/TimePicker.ts
View file

@ -125,7 +125,7 @@ export class TimePicker implements Component<TimePickerAttrs> {
{
...(isTarget ? { "data-target": "true" } : {}),
...(isSelected ? { "aria-selected": "true" } : {}),
class: "state-bg button-content dropdown-button pt-s pb-s button-min-height" + (isSelected ? "content-accent-fg row-selected icon-accent" : ""),
class: "state-bg button-content dropdown-button pt-8 pb-8 button-min-height" + (isSelected ? "content-accent-fg row-selected icon-accent" : ""),
},
option.name,
)

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

@ -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-s.pb-s.items-center.flex-center", m(".flex-center", infoText))
: m("li.plr-l.pt-8.pb-8.items-center.flex-center", m(".flex-center", infoText))
}
private renderCalendarEventResult(event: CalendarEvent): Children {

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

@ -269,7 +269,7 @@ export class CalendarSearchView extends BaseTopLevelView implements TopLevelView
private renderEventDetails(selectedEvent: CalendarEvent) {
return m(
".height-100p.overflow-y-scroll.mb-32.fill-absolute.pb-l",
".height-100p.overflow-y-scroll.mb-32.fill-absolute.pb-32",
m(
".border-radius-big.flex.col.flex-grow.content-bg",
{
@ -484,7 +484,7 @@ export class CalendarSearchView extends BaseTopLevelView implements TopLevelView
}
private renderFilterBar(): Children {
return m(".flex.gap-vpad-s.pl-vpad-m.pr-vpad-m.pt-s.pb-s.scroll-x", this.renderCalendarFilterChips())
return m(".flex.gap-vpad-s.pl-vpad-m.pr-vpad-m.pt-8.pb-8.scroll-x", this.renderCalendarFilterChips())
}
private async onCalendarDateRangeSelect() {

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

@ -202,7 +202,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
const safeArea = isIOSApp() ? getSafeAreaInsetBottom() : 0
return m(
".pb.pt-l.flex-no-shrink.flex.col.justify-end.items-center.gap-vpad",
".pb-16.pt-32.flex-no-shrink.flex.col.justify-end.items-center.gap-vpad",
{
style: {
paddingBottom: safeArea > 0 ? px(safeArea) : px(size.spacing_16),
@ -211,7 +211,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
[
// Support button
m(BaseButton, {
class: "flash flex justify-center center-vertically pt-s pb-s plr border-radius",
class: "flash flex justify-center center-vertically pt-8 pb-8 plr border-radius",
style: {
marginInline: "auto",
border: `1px solid ${theme.outline}`,
@ -377,12 +377,12 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
}
return m(
".flex.col.pl-vpad-m.pt-s.pb-s",
".flex.col.pl-vpad-m.pt-8.pb-8",
{
class: styles.isSingleColumnLayout() ? "pr-m" : "pr-vpad-s",
},
[
m("small.uppercase.pb-s.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)),
m(
".flex.col.border-radius-m.list-bg",
folders

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-xl", [
return m(".fill-absolute.scroll.plr-l.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/CalendarAgendaItemView.ts
View file

@ -27,7 +27,7 @@ export class CalendarAgendaItemView implements Component<CalendarAgendaItemViewA
const eventTitle = getDisplayEventTitle(attrs.event.summary)
return m(
".flex.items-center.click.plr.border-radius.pt-s.pb-s.rel.limit-width.full-width",
".flex.items-center.click.plr.border-radius.pt-8.pb-8.rel.limit-width.full-width",
{
// Implement the background color via JavaScript on Desktop, so we can react to `attrs.selected`
class: styles.isDesktopLayout() ? "hide-outline" : "state-bg",

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

@ -123,7 +123,7 @@ export class CalendarAgendaView implements Component<CalendarAgendaViewAttrs> {
: m(
"",
m(
".header-bg.pb-s.overflow-hidden",
".header-bg.pb-8.overflow-hidden",
{
style: {
"margin-left": px(layout_size.calendar_hour_width_mobile),
@ -211,7 +211,7 @@ export class CalendarAgendaView implements Component<CalendarAgendaViewAttrs> {
})
} else {
return m(
".pt-s.flex.mb-8.col.overflow-y-scroll.height-100p",
".pt-8.flex.mb-8.col.overflow-y-scroll.height-100p",
{
style: { marginLeft: px(layout_size.calendar_hour_width_mobile) },
oncreate: (vnode: VnodeDOM) => {

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

@ -28,7 +28,7 @@ export class CalendarDesktopToolbar implements Component<CalendarDesktopToolbarA
[
m("h1", navConfig.title),
m(".flex.items-center.justify-center.flex-grow.height-100p", this.renderViewSelector(attrs)),
m(".flex.pt-xs.pb-xs", [
m(".flex.pt-4.pb-4", [
navConfig.back ?? m(".button-width-fixed"),
m(
".flex",

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

@ -165,7 +165,7 @@ export class CalendarMonthView implements Component<CalendarMonthAttrs>, ClassCo
},
[
m(
".flex.pt-s.pb-m",
".flex.pt-8.pb-12",
{
class: weekdayDaysClasses,
},

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

@ -596,7 +596,7 @@ export class CalendarView extends BaseTopLevelView implements TopLevelView<Calen
}
return m(
".height-100p.overflow-y-scroll.mb-32.fill-absolute.pb-l",
".height-100p.overflow-y-scroll.mb-32.fill-absolute.pb-32",
m(
".border-radius-big.flex.col.flex-grow.content-bg",
{

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-l.pb-s.flex.pr", [
return m(".content-bg.border-radius-big.pl-l.pb-8.flex.pr", [
m(
".flex-grow.scroll.visible-scrollbar",
{

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

@ -183,7 +183,7 @@ export class MultiDayCalendarView implements Component<MultiDayCalendarViewAttrs
private renderDateSelector(attrs: MultiDayCalendarViewAttrs, isDayView: boolean): Children {
return m("", [
m(
".header-bg.pb-s.overflow-hidden",
".header-bg.pb-8.overflow-hidden",
{
style: {
"margin-left": px(layout_size.calendar_hour_width_mobile),
@ -462,7 +462,7 @@ export class MultiDayCalendarView implements Component<MultiDayCalendarViewAttrs
private renderHeaderDesktop(attrs: MultiDayCalendarViewAttrs, thisPageEvents: EventsOnDays, mainPageEvents: EventsOnDays): Children {
const { daysInPeriod, onDateSelected, onEventClicked, onEventKeyDown, groupColors, temporaryEvents } = attrs
// `scrollbar-gutter-stable-or-fallback` is needed because the scroll bar brings the calendar body out of line with the header
return m(".calendar-long-events-header.flex-fixed.content-bg.pt-s.scrollbar-gutter-stable-or-fallback", [
return m(".calendar-long-events-header.flex-fixed.content-bg.pt-8.scrollbar-gutter-stable-or-fallback", [
this.renderDayNamesRow(thisPageEvents.days, attrs.weekIndicator, onDateSelected, attrs.selectedDate, false, attrs.getEventsOnDays),
m(".content-bg", [
m(
@ -496,7 +496,7 @@ export class MultiDayCalendarView implements Component<MultiDayCalendarViewAttrs
private renderShortWeekHeader(attrs: MultiDayCalendarViewAttrs, thisPageEvents: EventsOnDays, mainPageEvents: EventsOnDays): Children {
const { daysInPeriod, onDateSelected, onEventClicked, onEventKeyDown, groupColors, temporaryEvents } = attrs
return m("flex-fixed.pt-s.scrollbar-gutter-stable-or-fallback", [
return m("flex-fixed.pt-8.scrollbar-gutter-stable-or-fallback", [
this.renderDayNamesRow(thisPageEvents.days, null, (day, _) => onDateSelected(day), attrs.selectedDate, true, attrs.getEventsOnDays),
m(".calendar-hour-margin.mb-8", [
this.renderLongEventsSection(thisPageEvents, mainPageEvents, groupColors, onEventClicked, onEventKeyDown, temporaryEvents, false),

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.text-break.nav-bg", [
m(".dialog-max-height.plr-s.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.text-break.scroll", [
m(".dialog-max-height.plr-l.pt-16.pb-16.text-break.scroll", [
m(".text-break.selectable", lang.get("calendarImportSelection_label")),
m(DropDownSelector, {
label: "calendar_label",

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.text-break.scroll", [
m(".dialog-max-height.plr-l.pt-16.pb-16.text-break.scroll", [
m(".text-break.selectable", lang.get("mailImportSelection_label")),
m(DropDownSelector, {
label: "mailFolder_label",

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

@ -6,7 +6,7 @@ import { responsiveCardHMargin } from "./cards.js"
/** Toolbar layout that is used in the second/list column. */
export const DesktopListToolbar = pureComponent((__, children) => {
return m(
".flex.pt-xs.pb-xs.items-center.list-bg",
".flex.pt-4.pb-4.items-center.list-bg",
{
style: {
"border-radius": `${size.radius_8}px 0 0 ${size.radius_8}px`,
@ -37,7 +37,7 @@ export const DesktopViewerToolbar = pureComponent((__, children) => {
},
},
m(
".flex.list-bg.pt-xs.pb-xs.plr-m",
".flex.list-bg.pt-4.pb-4.plr-m",
{
style: {
"border-radius": `0 ${size.radius_8}px ${size.radius_8}px 0`,

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

@ -27,7 +27,7 @@ export async function showLogsDialog(logContent: string) {
},
class {
view() {
return m(".fill-absolute.selectable.scroll.white-space-pre.plr.pt-16.pb", logContent)
return m(".fill-absolute.selectable.scroll.white-space-pre.plr.pt-16.pb-16", logContent)
}
},
{},

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

@ -157,7 +157,7 @@ export class MailRecipientsTextField implements ClassComponent<MailRecipientsTex
// Placeholder element for the suggestion progress icon with a fixed width and height to avoid flickering.
// when reaching the end of the input line and when entering a text into the second line.
m(
".flex.align-right.mr-8.flex.items-end.pb-s",
".flex.align-right.mr-8.flex.items-end.pb-8",
{
style: {
width: px(20), // in case the progress icon is not shown we reserve the width of the progress icon

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

@ -80,7 +80,7 @@ export class SearchDropDown<T extends Suggestion> implements ClassComponent<Sear
}
return m(
".pt-s.pb-s.click.content-hover",
".pt-8.pb-8.click.content-hover",
{
class: selected ? "content-accent-fg row-selected icon-accent" : "",
onmousedown: () => attrs.onSuggestionSelected(idx),

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-m.pb-m.pl.pr.ml-8",
".flex.mb-4.border-radius.pt-12.pb-12.pl.pr.ml-8",
{
style: {
paddingTop: "12px",

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

@ -29,7 +29,7 @@ export class SidebarSection implements Component<SidebarSectionAttrs> {
},
},
[
m(".folder-row.flex-space-between.plr-button.pt-s.button-height", [
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()),
button ?? null,
]),

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

@ -23,7 +23,7 @@ export class TitleSection implements Component<SettingsTitleSectionAttrsType> {
},
},
m(
".center.pb-s.pt-m",
".center.pb-8.pt-12",
attrs.icon
? m(Icon, {
icon: attrs.icon,

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-xs.pb-xs.search-bar.flex-grow.click",
".flex-end.items-center.border-radius.plr-s.pt-4.pb-4.search-bar.flex-grow.click",
{
focused: String(this.isFocused),
...landmarkAttrs(AriaLandmarks.Search),

10
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-l.pr-l.pb-s", [
m(".flex.flex-column.pl-l.pr-l.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.text-break", m(child))]),
view: () => m("", [m(DialogHeaderBar, actionBarAttrs), m(".plr-l.pb-16.text-break", m(child))]),
})
.setCloseHandler(closeAction)
.show()
@ -781,9 +781,9 @@ export class Dialog implements ModalComponent {
return new Dialog(DialogType.Reminder, {
view: () => [
m(".dialog-contentButtonsBottom.text-break.scroll", [
m(".h2.pb", title),
m(".h2.pb-16", title),
m(".flex-direction-change.items-center", [
m("#dialog-message.pb.selectable", typeof message === "function" ? message() : message),
m("#dialog-message.pb-16.selectable", typeof message === "function" ? message() : message),
m("img.dialog-img.mb-16.bg-white.border-radius", {
style: {
"min-width": "150px",
@ -918,7 +918,7 @@ export class Dialog implements ModalComponent {
dialog = new Dialog(type, {
view: () => [
m(DialogHeaderBar, actionBarAttrs),
m(".dialog-max-height.plr-l.pb.text-break.scroll", ["function" === typeof child ? child() : m(child)]),
m(".dialog-max-height.plr-l.pb-16.text-break.scroll", ["function" === typeof child ? child() : m(child)]),
],
}).setCloseHandler(doCancel)
dialog.addShortcut({

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

@ -34,7 +34,7 @@ export class ExpanderButton implements Component<ExpanderAttrs> {
return m(
".limit-width",
m(
"button.expander.bg-transparent.pt-s.hover-ul.limit-width.flex.items-center.b.text-ellipsis.flash",
"button.expander.bg-transparent.pt-8.hover-ul.limit-width.flex.items-center.b.text-ellipsis.flash",
{
style: a.style,
onclick: (event: MouseEvent) => {

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

@ -19,7 +19,7 @@ export class FilterChip implements Component<FilterChipAttrs> {
private localdom: HTMLElement | null = null
view({ attrs: { label, icon, selected, chevron, onClick } }: Vnode<FilterChipAttrs>): Children {
let selectors = "button.flex.items-center.border-radius-m.pt-hpad-button.pb-hpad-button.gap-vpad-xs.font-weight-500.state-bg-2.border.smaller"
let selectors = "button.flex.items-center.border-radius-m.pt-8.pb-hpad-button.gap-vpad-xs.font-weight-500.state-bg-2.border.smaller"
if (icon) {
selectors += ".pl-vpad-s"
} else {

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

@ -31,7 +31,7 @@ export class IconSegmentControl<T> implements Component<IconSegmentControlAttrs<
vnode.attrs.items.map((item) => {
const title = lang.getTranslationText(item.label)
return m(
"button.icon-segment-control-item.flex.center-horizontally.center-vertically.text-ellipsis.small.state-bg.pt-xs.pb-xs",
"button.icon-segment-control-item.flex.center-horizontally.center-vertically.text-ellipsis.small.state-bg.pt-4.pb-4",
{
active: item.value === vnode.attrs.selectedValue ? "true" : undefined,
title,

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

@ -57,7 +57,7 @@ export class InfoBanner implements Component<InfoBannerAttrs> {
"",
{ style: { "margin-left": px(size.icon_24 + 1) } }, // allow room for the icon
[
m(".mr-12.pt-s.pb-s", typeof message === "function" ? message() : m(".small.text-break", lang.get(message))),
m(".mr-12.pt-8.pb-8", typeof message === "function" ? message() : m(".small.text-break", lang.get(message))),
m(".flex.ml-negative-8", { style: buttonContainerStyle }, [this.renderButtons(buttons), this.renderHelpLink(helpLink)]),
],
),

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

@ -13,7 +13,7 @@ export type MessageBoxAttrs = {
export class MessageBox implements Component<MessageBoxAttrs> {
view({ attrs, children }: Vnode<MessageBoxAttrs>): Children {
return m(
".justify-center.items-start.dialog-width-s.pt-16.pb.plr.border-radius",
".justify-center.items-start.dialog-width-s.pt-16.pb-16.plr.border-radius",
{
style: Object.assign(
{

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

@ -37,7 +37,7 @@ export class MonospaceTextDisplay implements Component<MonospaceTextDisplayAttrs
let extraClasses = classes ?? ""
if (border) {
extraClasses += ".border.pt-16.pb.plr"
extraClasses += ".border.pt-16.pb-16.plr"
}
// in case the chunkSize parameter is set we want to preserve the line break to display the monospace content in multiple rows.

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

@ -66,7 +66,7 @@ export class RadioSelector<T> implements Component<RadioSelectorAttrs<T>> {
// Handle changes in value from the attributes
checked: isSelected ? true : null,
}),
m("label.b.left.pt-xs.pb-xs", { for: optionId }, lang.getTranslationText(option.name)),
m("label.b.left.pt-4.pb-4", { for: optionId }, lang.getTranslationText(option.name)),
],
)
}

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

@ -41,7 +41,7 @@ class SnackBar implements Component<SnackBarAttrs> {
view(vnode: Vnode<SnackBarAttrs>) {
// use same padding as MinimizedEditor
return m(
".snackbar-content.flex.flex-space-between.border-radius.pb-xs.pt-xs",
".snackbar-content.flex.flex-space-between.border-radius.pb-4.pt-4",
{
class: vnode.attrs.dismissButton ? "pl" : "plr",
onmouseenter: () => {

4
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-s" +
".text-ellipsis.pr.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-s.pb-s." + columnWidths[index] + (bold ? ".b" : "") + (columnAlignments[index] ? ".right" : ""),
"td.text-ellipsis.pr.pt-8.pb-8." + columnWidths[index] + (bold ? ".b" : "") + (columnAlignments[index] ? ".right" : ""),
{
title: text, // show the text as tooltip, so ellipsed lines can be shown
},

4
src/common/gui/dialogs/ContentWithOptionsDialog.ts
View file

@ -15,8 +15,8 @@ export interface ContentWithOptionsDialogAttrs {
// Returns the layout for this dialog type
export class ContentWithOptionsDialog implements Component<ContentWithOptionsDialogAttrs> {
view({ attrs, children }: Vnode<ContentWithOptionsDialogAttrs>) {
return m(".flex.flex-column.pb-ml.height-100p.text-break", [
m("section.flex.flex-column.pt-16.pb.height-100p.gap-vpad", children),
return m(".flex.flex-column.pb-24.height-100p.text-break", [
m("section.flex.flex-column.pt-16.pb-16.height-100p.gap-vpad", children),
m(
"section.flex.flex-column",
{ style: { gap: "1em", "margin-top": "auto" } },

4
src/common/gui/dialogs/ImageWithOptionsDialog.ts
View file

@ -19,12 +19,12 @@ interface ImageWithOptionsDialogAttrs {
// Returns the layout for this dialog type
export class ImageWithOptionsDialog implements Component<ImageWithOptionsDialogAttrs> {
view({ attrs }: Vnode<ImageWithOptionsDialogAttrs>) {
return m(".flex.flex-column.pb-ml.height-100p.text-break", [
return m(".flex.flex-column.pb-24.height-100p.text-break", [
m(
"section",
m(
".flex-center.mt-12",
m("img.pb.pt-16.block.height-100p", {
m("img.pb-16.pt-16.block.height-100p", {
src: attrs.image,
alt: "",
rel: "noreferrer",

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

@ -139,7 +139,7 @@ export class SelectCredentialsEncryptionModeView implements Component<SelectCred
class: attrs.class,
},
[
attrs.error ? m(".small.center.statusTextColor.pb-s", liveDataAttrs(), attrs.error) : null,
attrs.error ? m(".small.center.statusTextColor.pb-8", liveDataAttrs(), attrs.error) : null,
m("", lang.get("credentialsEncryptionModeSelection_msg")),
m(
".mt-16",

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

@ -52,7 +52,7 @@ class ShortcutDialog implements Component<ShortcutDialogAttrs> {
isReadOnly: true,
}))
return m(
"div.pb",
"div.pb-16",
textFieldAttrs.map((t) => m(TextField, t)),
)
}

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

@ -98,7 +98,7 @@ export class HtmlEditor implements Component {
? m(".wysiwyg.rel.overflow-hidden.selectable", [
this.editor.isEnabled() && (this.toolbarEnabled || renderedInjections)
? [
m(".flex-end.sticky.pb-2", [
m(".flex-end.sticky.pb-4", [
this.toolbarEnabled ? m(RichTextToolbar, Object.assign({ editor: this.editor }, this.toolbarAttrs)) : null,
renderedInjections,
]),

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

@ -426,62 +426,53 @@ styles.registerStyle("main", () => {
".pt-0": {
"padding-top": 0,
},
".pt-s": {
".pt-8": {
"padding-top": px(size.spacing_8),
},
".pt-l": {
".pt-32": {
"padding-top": px(size.spacing_32),
},
".pt-m": {
".pt-12": {
"padding-top": px(size.spacing_12),
},
".pt-ml": {
".pt-24": {
"padding-top": px(size.spacing_24),
},
".pt-xl": {
".pt-48": {
"padding-top": px(size.spacing_48),
},
".pt-xxs": {
".pt-4": {
"padding-top": px(size.spacing_4),
},
".pt-xs": {
"padding-top": px(size.spacing_4),
},
".pt-hpad-button": {
".pt-8": {
"padding-top": px(size.spacing_8),
},
".pb-0": {
"padding-bottom": 0,
},
".pb": {
".pb-16": {
"padding-bottom": px(size.spacing_16),
},
".pb-2": {
"padding-bottom": "2px",
},
// for dropdown toggles
".pb-s": {
".pb-8": {
"padding-bottom": px(size.spacing_8),
},
".drag": {
"touch-action": "auto",
},
".pb-xxs": {
".pb-4": {
"padding-bottom": px(size.spacing_4),
},
".pb-xs": {
"padding-bottom": px(size.spacing_4),
},
".pb-l": {
".pb-32": {
"padding-bottom": px(size.spacing_32),
},
".pb-xl": {
".pb-48": {
"padding-bottom": px(size.spacing_48),
},
".pb-m": {
".pb-12": {
"padding-bottom": px(size.spacing_12),
},
".pb-ml": {
".pb-24": {
"padding-bottom": px(size.spacing_24),
},
".pb-floating": {

2
src/common/gui/nav/DrawerMenu.ts
View file

@ -35,7 +35,7 @@ export class DrawerMenu implements Component<DrawerMenuAttrs> {
const userController = logins.getUserController()
return m(
"drawer-menu.flex.col.items-center.pt-16.pb.noprint",
"drawer-menu.flex.col.items-center.pt-16.pb-16.noprint",
{
...landmarkAttrs(AriaLandmarks.Contentinfo, "drawer menu"),
style: {

12
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-l"),
".flex.col.flex-grow-shrink-auto.max-width-m.plr-l." + (styles.isSingleColumnLayout() ? "pt-16" : "pt-32"),
{
...landmarkAttrs(AriaLandmarks.Main, isApp() || isDesktop() ? lang.get("addAccount_action") : lang.get("login_label")),
oncreate: (vnode) => {
@ -107,7 +107,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
},
[
m(
".content-bg.border-radius-big.pb",
".content-bg.border-radius-big.pb-16",
{
class: styles.isSingleColumnLayout() ? "plr-l" : "plr-2l",
},
@ -247,7 +247,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
}
_renderLoginForm(): Children {
return m(".flex.col.pb", [
return m(".flex.col.pb-16", [
m(LoginForm, {
oncreate: (vnode) => {
const form = vnode as Vnode<unknown, LoginForm>
@ -283,12 +283,12 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
}
_renderCredentialsSelector(): Children {
return m(".flex.col.pb-l", [
return m(".flex.col.pb-32", [
m(
".small.center.statusTextColor",
{
...liveDataAttrs(),
class: styles.isSingleColumnLayout() ? "" : "pt-xs",
class: styles.isSingleColumnLayout() ? "" : "pt-4",
},
lang.getTranslationText(this.viewModel.helpText),
),
@ -320,7 +320,7 @@ export class LoginView extends BaseTopLevelView implements TopLevelView<LoginVie
}
_renderAppButtons(): Children {
return m(".flex-center.pt-l.ml-between-4", [
return m(".flex-center.pt-32.ml-between-4", [
client.isDesktopDevice() || client.device === DeviceType.ANDROID
? m(IconButton, {
title: "appInfoAndroidImageAlt_alt",

6
src/common/misc/ErrorReporter.ts
View file

@ -165,7 +165,7 @@ function showReportDialog(
{
expanded: detailsExpanded,
},
m(".selectable", [m(".selectable", subject), message.split("\n").map((l) => (l.trim() === "" ? m(".pb", "") : m("", l)))]),
m(".selectable", [m(".selectable", subject), message.split("\n").map((l) => (l.trim() === "" ? m(".pb-16", "") : m("", l)))]),
),
]
},
@ -207,7 +207,7 @@ async function showLogDialog(heading: string, text: string) {
middle: lang.makeTranslation("heading", heading),
},
{
view: () => m(".white-space-pre.pt-16.pb.selectable", text),
view: () => m(".white-space-pre.pt-16.pb-16.selectable", text),
},
)
.addShortcut({
@ -258,7 +258,7 @@ export async function showErrorDialogNotLoggedIn(e: ErrorInfo): Promise<void> {
}),
),
m(
".plr.selectable.pb.scroll.text-pre",
".plr.selectable.pb-16.scroll.text-pre",
{
style: {
height: px(200),

4
src/common/misc/news/items/NewPlansNews.ts
View file

@ -53,13 +53,13 @@ export class NewPlansNews implements NewsListItem {
return m(".full-width", [
m(".h4", lang.get("newPlansNews_title")),
m(
".pb",
".pb-16",
lang.get("newPlansExplanation_msg", {
"{plan1}": "Revolutionary",
"{plan2}": "Legend",
}),
),
m(".pb", lang.get("newPlansOfferExplanation_msg")),
m(".pb-16", lang.get("newPlansOfferExplanation_msg")),
m(
".flex-end.flex-no-grow-no-shrink-auto.flex-wrap",
buttonAttrs.map((a) => m(Button, a)),

4
src/common/misc/news/items/NewPlansOfferEndingNews.ts
View file

@ -51,13 +51,13 @@ export class NewPlansOfferEndingNews implements NewsListItem {
return m(".full-width", [
m(".h4", lang.get("newPlansOfferEndingNews_title")),
m(
".pb",
".pb-16",
lang.get("newPlansExplanationPast_msg", {
"{plan1}": "Revolutionary",
"{plan2}": "Legend",
}),
),
m(".pb", lang.get("newPlansOfferEnding_msg")),
m(".pb-16", lang.get("newPlansOfferEnding_msg")),
m(
".flex-end.flex-no-grow-no-shrink-auto.flex-wrap",
buttonAttrs.map((a) => m(Button, a)),

4
src/common/misc/news/items/UpdateColorCustomizationNews.ts
View file

@ -26,8 +26,8 @@ export class UpdateColorCustomizationNews implements NewsListItem {
}
return m(".full-width", [
m(".h4.pb", lang.get("updateColorCustomizationNews_title")),
m(".pb", lang.get("updateColorCustomizationNews_msg")),
m(".h4.pb-16", lang.get("updateColorCustomizationNews_title")),
m(".pb-16", lang.get("updateColorCustomizationNews_msg")),
m(
".flex-end.gap-hpad.flex-no-grow-no-shrink-auto.flex-wrap",
m(Button, {

2
src/common/misc/news/items/UsageOptInNews.ts
View file

@ -62,7 +62,7 @@ export class UsageOptInNews implements NewsListItem {
return m(".full-width", [
m(".h4", lang.get("userUsageDataOptIn_title")),
m(".pb", lang.get("userUsageDataOptInExplanation_msg")),
m(".pb-16", lang.get("userUsageDataOptInExplanation_msg")),
m("ul.usage-test-opt-in-bullets", [
m("li", lang.get("userUsageDataOptInStatement1_msg")),
m("li", lang.get("userUsageDataOptInStatement2_msg")),

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

@ -118,7 +118,7 @@ export class SelectAppLockMethodView implements Component<SelectAppLockMethodDia
class: attrs.class,
},
[
attrs.error ? m(".small.center.statusTextColor.pb-s", liveDataAttrs(), attrs.error) : null,
attrs.error ? m(".small.center.statusTextColor.pb-8", liveDataAttrs(), attrs.error) : null,
m("", lang.get("credentialsEncryptionModeSelection_msg")),
m(
".mt-16",

2
src/common/ratings/pages/DissatisfactionPage.ts
View file

@ -29,7 +29,7 @@ export class DissatisfactionPage implements Component<DissatisfactionPageAttrs>
padding: "1em 0",
},
},
m("img.pb.block.center-h", {
m("img.pb-16.block.center-h", {
src: `${window.tutao.appState.prefixWithoutFile}/images/rating/ears-${client.isCalendarApp() ? "calendar" : "mail"}.png`,
alt: "",
rel: "noreferrer",

4
src/common/ratings/pages/SuggestionPage.ts
View file

@ -41,7 +41,7 @@ export class SuggestionPage implements Component<SuggestionPageAttrs> {
maxWidth: px(160),
},
}),
m(".h3.text-center.pb-s.pt-s", lang.get("ratingSuggestionPage_title")),
m(".h3.text-center.pb-8.pt-8", lang.get("ratingSuggestionPage_title")),
]),
m(
Card,
@ -58,7 +58,7 @@ export class SuggestionPage implements Component<SuggestionPageAttrs> {
}),
),
m(
".flex.flex-column.gap-vpad.pb",
".flex.flex-column.gap-vpad.pb-16",
{
style: {
marginTop: "auto",

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

@ -20,7 +20,7 @@ export class AffiliateKpisViewer implements UpdatableSettingsDetailsViewer {
".flex.flex-column.fill-absolute.plr-l",
m("h4.mt-32", "KPIs"),
m(
".overflow-auto.pt-s",
".overflow-auto.pt-8",
{ style: { height: "100%" } },
m(
"",

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-xl", [
return m(".fill-absolute.scroll.plr-l.pb-48", [
m(".h4.mt-32", lang.get("settingsForDevice_label")),
m(DropDownSelector, languageDropDownAttrs),
this._renderThemeSelector(),

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-xl", m(ReferralLinkViewer, { referralLink: this.referralLink }))
return m(".mt-32.plr-l.pb-48", m(ReferralLinkViewer, { referralLink: this.referralLink }))
}
async entityEventsReceived(updates: ReadonlyArray<EntityUpdateData>): Promise<void> {

4
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-xl",
".fill-absolute.scroll.plr-l.pb-48",
{
style: {
backgroundColor: theme.surface_container,
@ -189,7 +189,7 @@ export class KeyManagementSettingsViewer implements UpdatableSettingsViewer {
m(Card, {}, [
// QR code
m(
".pb.pt-16",
".pb-16.pt-16",
{ style: { display: "flex", "justify-content": "center" } },
// If the user is on a dark theme, we want to render a white border around the QR code to help the detection algorithm.
// We do not want any extra padding on light themes since it looks ugly.

2
src/common/settings/keymanagement/dialogpages/FingerprintMismatchInfoPage.ts
View file

@ -35,7 +35,7 @@ export class FingerprintMismatchInfoPage implements Component<VerificationErrorI
throw new Error("unsupported source of trust")
}
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: m.trust(subTitle),

4
src/common/settings/keymanagement/dialogpages/FingerprintMismatchKeepPage.ts
View file

@ -25,7 +25,7 @@ export class FingerprintMismatchKeepPage implements Component<FingerprintMismatc
const subtitle = lang.get("fingerprintMismatchKeepTofuSubtitle_msg")
const message = lang.get("fingerprintMismatchKeepTofu_msg", { "{mailAddress}": address })
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: subtitle,
@ -34,7 +34,7 @@ export class FingerprintMismatchKeepPage implements Component<FingerprintMismatc
}),
m(
Card,
m(".plr.flex.flex-column.gap-vpad.pt-s.pb-s", [
m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
m("", m.trust(message)),
m(ExternalLink, {
isCompanySite: true,

4
src/common/settings/keymanagement/dialogpages/MethodSelectionPage.ts
View file

@ -25,7 +25,7 @@ export class MethodSelectionPage implements Component<MethodSelectionPageAttrs>
})
return m(
".pt-16.pb.flex.col.gap-vpad",
".pt-16.pb-16.flex.col.gap-vpad",
{
style: {
height: px(DEFAULT_HEIGHT),
@ -36,7 +36,7 @@ export class MethodSelectionPage implements Component<MethodSelectionPageAttrs>
{ shouldDivide: true },
m(
"section.pt-s.pb-s",
"section.pt-8.pb-8",
{
style: {
padding: px(size.spacing_8),

8
src/common/settings/keymanagement/dialogpages/MultiRecipientsKeyVerificationRecoveryUserSelectionPage.ts
View file

@ -31,7 +31,7 @@ export class MultiRecipientsKeyVerificationRecoveryUserSelectionPage implements
const selectableRecipients = this.makeRecipientOptions(vnode.attrs.model.getUnverifiedRecipients())
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: "",
@ -40,7 +40,7 @@ export class MultiRecipientsKeyVerificationRecoveryUserSelectionPage implements
}),
m(
Card,
m(".plr.flex.flex-column.gap-vpad.pt-s.pb-s", [
m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
lang.get("keyManagement.mailRecipientsVerificationMismatchError_msg"),
m(
"",
@ -73,14 +73,14 @@ export class MultiRecipientsKeyVerificationRecoveryUserSelectionPage implements
const title = lang.get("keyManagement.reverifyRecipientsCompleted_title")
const message = lang.get("keyManagement.reverifyRecipientsCompleted_msg")
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: "",
icon: Icons.CheckCircleOutline,
iconOptions: { color: theme.success },
}),
m(Card, m(".plr.flex.flex-column.gap-vpad.pt-s.pb-s", [message])),
m(Card, m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [message])),
])
}

4
src/common/settings/keymanagement/dialogpages/RecipientKeyVerificationRecoveryAcceptPage.ts
View file

@ -18,7 +18,7 @@ export class RecipientKeyVerificationRecoveryAcceptPage implements Component<Ver
let contactUpdatedText = lang.get("keyVerificationErrorContactUpdated_msg", { "{mailAddress}": vnode.attrs.contactMailAddress })
const contactMailAddress = vnode.attrs.contactMailAddress
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: "",
@ -27,7 +27,7 @@ export class RecipientKeyVerificationRecoveryAcceptPage implements Component<Ver
}),
m(
Card,
m(".plr.flex.flex-column.gap-vpad.pt-s.pb-s", [
m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
m("", m.trust(contactUpdatedText)),
m(ExternalLink, {
isCompanySite: true,

2
src/common/settings/keymanagement/dialogpages/RecipientKeyVerificationRecoveryInfoPage.ts
View file

@ -27,7 +27,7 @@ export class RecipientKeyVerificationRecoveryInfoPage implements Component<Verif
? lang.get("keyVerificationErrorManual_msg")
: lang.get("keyVerificationErrorGeneric_msg")
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle,

4
src/common/settings/keymanagement/dialogpages/RecipientKeyVerificationRecoveryRejectPage.ts
View file

@ -18,7 +18,7 @@ export class RecipientKeyVerificationRecoveryRejectPage implements Component<Ver
let contactNotUpdatedText = lang.get("keyVerificationErrorContactNotUpdated_msg", { "{mailAddress}": vnode.attrs.contactMailAddress })
const contactMailAddress = vnode.attrs.contactMailAddress
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: "",
@ -27,7 +27,7 @@ export class RecipientKeyVerificationRecoveryRejectPage implements Component<Ver
}),
m(
Card,
m(".plr.flex.flex-column.gap-vpad.pt-s.pb-s", [
m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
m("", m.trust(contactNotUpdatedText)),
m(ExternalLink, {
isCompanySite: true,

2
src/common/settings/keymanagement/dialogpages/SenderKeyVerificationRecoveryInfoPage.ts
View file

@ -26,7 +26,7 @@ export class SenderKeyVerificationRecoveryInfoPage implements Component<Verifica
? lang.get("keyVerificationErrorManual_msg")
: lang.get("keyVerificationErrorGeneric_msg")
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle,

4
src/common/settings/keymanagement/dialogpages/SenderKeyVerificationRecoverySuccessPage.ts
View file

@ -16,7 +16,7 @@ export class SenderKeyVerificationRecoverySuccessPage implements Component<Sende
const title = lang.get("keyVerificationErrorAccept_title")
let contactUpdatedText = lang.get("keyVerificationErrorContactUpdated_msg", { "{mailAddress}": vnode.attrs.model.getSenderAddress() })
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle: "",
@ -25,7 +25,7 @@ export class SenderKeyVerificationRecoverySuccessPage implements Component<Sende
}),
m(
Card,
m(".plr.flex.flex-column.gap-vpad.pt-s.pb-s", [
m(".plr.flex.flex-column.gap-vpad.pt-8.pb-8", [
m("", m.trust(contactUpdatedText)),
m(ExternalLink, {
isCompanySite: true,

2
src/common/settings/keymanagement/dialogpages/VerificationByManualInputPage.ts
View file

@ -33,7 +33,7 @@ export class VerificationByManualInputPage implements Component<VerificationByTe
const publicIdentity = model.getPublicIdentity()
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title: lang.get("keyManagement.textVerification_label"),
subTitle: lang.get("keyManagement.verificationByTextMailAdress_label"),

2
src/common/settings/keymanagement/dialogpages/VerificationByQrCodeInputPage.ts
View file

@ -40,7 +40,7 @@ export class VerificationByQrCodeInputPage implements Component<VerificationByQr
}
view(vnode: Vnode<VerificationByQrCodePageAttrs>): Children {
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title: lang.get("keyManagement.qrVerification_label"),
subTitle: lang.get("keyManagement.verificationByQrCodeScan_label"),

2
src/common/settings/keymanagement/dialogpages/VerificationErrorPage.ts
View file

@ -45,7 +45,7 @@ export class VerificationErrorPage implements Component<VerificationErrorPageAtt
}
}
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(TitleSection, {
title,
subTitle,

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-xl", [
m("#user-settings.fill-absolute.scroll.plr-l.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

@ -104,7 +104,7 @@ export class RecoverCodeField {
m(".flex-grow-shrink-half.plr-l.flex-center.align-self-center", this.renderRecoveryText()),
m(
".flex-grow-shrink-half.plr-l.flex-center.align-self-center",
m("img.pt-16.bg-white.pt-16.pb", {
m("img.pt-16.bg-white.pt-16.pb-16", {
src: image.src,
alt: lang.getTranslationText(image.alt),
style: {
@ -137,6 +137,6 @@ export class RecoverCodeField {
private renderRecoveryText(): Child {
const link = InfoLink.RecoverCode
return m(".pt-16.pb", [lang.get("recoveryCode_msg"), m("", [m(MoreInfoLink, { link, isSmall: true })])])
return m(".pt-16.pb-16", [lang.get("recoveryCode_msg"), m("", [m(MoreInfoLink, { link, isSmall: true })])])
}
}

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

@ -15,7 +15,7 @@ export function show(model: CustomColorsEditorViewModel) {
model.builtTheme.map(() => m.redraw())
const form = {
view: () => {
return m(".pb", [
return m(".pb-16", [
m(CustomColorEditor, {
model: model,
}),

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

@ -77,7 +77,7 @@ type GroupSharingDialogAttrs = {
class GroupSharingDialogContent implements Component<GroupSharingDialogAttrs> {
view(vnode: Vnode<GroupSharingDialogAttrs>): Children {
const { model, texts, dialog } = vnode.attrs
return m(".flex.col.pt-s", [
return m(".flex.col.pt-8", [
m(Table, {
columnHeading: [
{

6
src/common/subscription/BuyOptionBox.ts
View file

@ -222,7 +222,7 @@ export class BuyOptionBox implements Component<BuyOptionBoxAttr> {
m("span", attrs.priceHint ? lang.getTranslationText(attrs.priceHint) : lang.get("emptyString_msg")),
vnode.attrs.hasPriceFootnote && m("sup", { style: { "font-size": px(8) } }, "1"),
),
m(".small.text-center.pb-ml", lang.getTranslationText(attrs.helpLabel)),
m(".small.text-center.pb-24", lang.getTranslationText(attrs.helpLabel)),
this.renderPaymentIntervalControl(attrs.selectedPaymentInterval, !!attrs.hasFirstYearDiscount),
attrs.actionButton
? m(
@ -243,11 +243,11 @@ export class BuyOptionBox implements Component<BuyOptionBoxAttr> {
private renderPrice(price: string, isApplePrice?: boolean, strikethroughPrice?: string) {
return m(
".flex.flex-wrap.column-gap-s.justify-center.items-center.pt-l.text-center",
".flex.flex-wrap.column-gap-s.justify-center.items-center.pt-32.text-center",
{ style: { ...(!isApplePrice && { display: "grid", "grid-template-columns": "1fr auto 1fr" }) } },
strikethroughPrice != null && strikethroughPrice.trim() !== ""
? m(
".span.strike.pt-s",
".span.strike.pt-8",
{
style: {
color: theme.on_surface_variant,

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

@ -16,7 +16,7 @@ export type CancellationReasonInputAttrs = {
export class CancellationReasonInput {
view(vnode: Vnode<CancellationReasonInputAttrs>): Children {
return [
m(".mt-16.pb-s.b.center", lang.get("cancellationInfo_msg")),
m(".mt-16.pb-8.b.center", lang.get("cancellationInfo_msg")),
m(DropDownSelector, {
label: "whyLeave_msg",
items: [

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

@ -201,7 +201,7 @@ export class InvoiceAndPaymentDataPage implements WizardPageN<UpgradeSubscriptio
),
]),
m(
".flex-center.full-width.pt-l",
".flex-center.full-width.pt-32",
m(LoginButton, {
label: "next_action",
class: "small-login-button",

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

@ -251,7 +251,7 @@ export class PaymentViewer implements UpdatableSettingsViewer {
m(".h4.mt-32", lang.get("currentBalance_label")),
m(".flex.center-horizontally.center-vertically.col", [
m(
"div.h4.pt-16.pb" + (this.isAmountOwed() ? ".content-accent-fg" : ""),
"div.h4.pt-16.pb-16" + (this.isAmountOwed() ? ".content-accent-fg" : ""),
formatPrice(balance, true) + (this.accountBalance() !== balance ? ` (${formatPrice(this.accountBalance(), true)})` : ""),
),
this.accountBalance() !== balance
@ -264,7 +264,7 @@ export class PaymentViewer implements UpdatableSettingsViewer {
: null,
this.isPayButtonVisible()
? m(
".pb",
".pb-16",
{
style: {
width: "200px",
@ -535,7 +535,7 @@ function showPayConfirmDialog(price: number): Promise<boolean> {
view: (): Children => [
m(DialogHeaderBar, actionBarAttrs),
m(
".plr-l.pb",
".plr-l.pb-16",
m("", [
m(".pt-16", lang.get("invoicePayConfirm_msg")),
m(TextField, {

4
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.plr-l",
".flex.flex-column.max-width-m.pt-16.pb-16.plr-l",
{
style: {
minHeight: styles.isDesktopLayout() ? "850px" : "",
@ -33,7 +33,7 @@ export class SetupLeavingUserSurveyPage implements Component<SetupLeavingUserSur
...vnode.attrs.imageStyle,
},
},
m("img.pb.block.full-width.height-100p", {
m("img.pb-16.block.full-width.height-100p", {
src: `${window.tutao.appState.prefixWithoutFile}/images/leaving-wizard/${vnode.attrs.image}.png`,
alt: "",
rel: "noreferrer",

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.plr-l", [
m(".flex-grow-shrink-auto.max-width-m.pt-16.pb-16.plr-l", [
a.readonly
? m(TextField, {
label: "mailAddress_label",

6
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.plr-l", [
m(".pt-16.pb-16.plr-l", [
m(TextField, {
label: "subscription_label",
value: getDisplayNameOfPlanType(attrs.data.targetPlanType),
@ -169,13 +169,13 @@ export class UpgradeConfirmSubscriptionPage implements WizardPageN<UpgradeSubscr
}),
]),
m(
".smaller.center.pt-l",
".smaller.center.pt-32",
attrs.data.options.businessUse()
? lang.get("pricing.subscriptionPeriodInfoBusiness_msg")
: lang.get("pricing.subscriptionPeriodInfoPrivate_msg"),
),
m(
".flex-center.full-width.pt-l",
".flex-center.full-width.pt-32",
m(LoginButton, {
label: isAppStorePayment ? "checkoutWithAppStore_action" : "buy_action",
class: "small-login-button",

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

@ -33,7 +33,7 @@ export class UpgradeCongratulationsPage implements WizardPageN<UpgradeSubscripti
])
: null,
m(
".flex-center.full-width.pt-l",
".flex-center.full-width.pt-32",
m(LoginButton, {
label: "ok_action",
class: "small-login-button",

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

@ -150,7 +150,7 @@ function renderVisualCaptcha(viewModel: CaptchaDialogViewModel) {
[
m("", viewModel.visualCaptchaDescription),
m("img.pt-ml.center-h.block.full-width", {
m("img.pt-24.center-h.block.full-width", {
src: viewModel.getVisualData(),
alt: lang.get("captchaDisplay_label"),
}),
@ -180,7 +180,7 @@ function renderDialogContent(actionBarAttrs: DialogHeaderBarAttrs, viewModel: Ca
return [
m(DialogHeaderBar, actionBarAttrs),
m(
".pt-16.plr-l.pb.flex.col#captcha_wrapper",
".pt-16.plr-l.pb-16.flex.col#captcha_wrapper",
{
style: {
flex: "1 1 auto",

2
src/common/subscription/components/PersonalFreePlanBox.ts
View file

@ -55,7 +55,7 @@ export class PersonalFreePlanBox implements Component<FreePlanBoxAttrs> {
},
[
m(
".flex-space-between.items-center.pb",
".flex-space-between.items-center.pb-16",
m(
".flex.items-center.column-gap",
m(

2
src/common/subscription/components/PersonalPaidPlanBox.ts
View file

@ -127,7 +127,7 @@ export class PersonalPaidPlanBox implements Component<PersonalPlanBoxAttrs> {
},
m(
".flex.items-center.pb",
".flex.items-center.pb-16",
{
style: {
gap: "8px",

2
src/common/subscription/components/PromotionRibbon.ts
View file

@ -18,7 +18,7 @@ export class PromotionRibbon implements Component<PromotionRibbonAttrs> {
const borderRadiusTopRight = planBoxPosition === "right" || planBoxPosition === "center" ? px(size.radius_8) : "0"
return m(
".full-width.pt-xs.pb-xs.text-center.b.smaller",
".full-width.pt-4.pb-4.text-center.b.smaller",
{
style: {
backgroundColor,

4
src/common/subscription/giftcards/GiftCardUtils.ts
View file

@ -81,9 +81,9 @@ export function showGiftCardToShare(giftCard: GiftCard) {
{
view: () => [
m(
".flex-center.full-width.pt-16.pb",
".flex-center.full-width.pt-16.pb-16",
m(
".pt-l", // Needed to center SVG
".pt-32", // Needed to center SVG
{
style: {
width: "480px",

4
src/common/subscription/giftcards/PurchaseGiftCardDialog.ts
View file

@ -116,7 +116,7 @@ class GiftCardPurchaseView implements Component<GiftCardPurchaseViewAttrs> {
const { model, onGiftCardPurchased } = vnode.attrs
return [
m(
".flex.center-horizontally.wrap.pt-ml",
".flex.center-horizontally.wrap.pt-24",
{
style: {
"column-gap": px(BOX_MARGIN),
@ -159,7 +159,7 @@ class GiftCardPurchaseView implements Component<GiftCardPurchaseViewAttrs> {
message: model.message,
onMessageChanged: (message) => (model.message = message),
}),
renderAcceptGiftCardTermsCheckbox(model.confirmed, (checked) => (model.confirmed = checked), "pt-l"),
renderAcceptGiftCardTermsCheckbox(model.confirmed, (checked) => (model.confirmed = checked), "pt-32"),
m(LoginButton, {
label: "buy_action",
class: "mt-32 mb-32",

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

@ -198,9 +198,9 @@ class GiftCardWelcomePage implements WizardPageN<RedeemGiftCardModel> {
return [
m(
".flex-center.full-width.pt-l",
".flex-center.full-width.pt-32",
m(
".pt-l", // Needed to center SVG
".pt-32", // Needed to center SVG
{
style: {
width: "480px",
@ -210,7 +210,7 @@ class GiftCardWelcomePage implements WizardPageN<RedeemGiftCardModel> {
),
),
m(
".flex-center.full-width.pt-l",
".flex-center.full-width.pt-32",
m(LoginButton, {
label: "existingAccount_label",
class: "small-login-button",
@ -218,7 +218,7 @@ class GiftCardWelcomePage implements WizardPageN<RedeemGiftCardModel> {
}),
),
m(
".flex-center.full-width.pt-l.pb",
".flex-center.full-width.pt-32.pb-16",
m(LoginButton, {
label: "register_label",
class: "small-login-button",
@ -380,7 +380,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
return m("", [
mapNullable(model.newAccountData?.recoverCode, (code) =>
m(
".pt-l.plr-l",
".pt-32.plr-l",
m(RecoverCodeField, {
showMessage: true,
recoverCode: code,
@ -389,7 +389,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
),
isFree ? this.renderInfoForFreeAccounts(model) : this.renderInfoForPaidAccounts(model),
m(
".flex-center.full-width.pt-l",
".flex-center.full-width.pt-32",
m(
"",
{
@ -410,7 +410,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
),
),
m(
".flex-center.full-width.pt-s.pb",
".flex-center.full-width.pt-8.pb-16",
m(LoginButton, {
label: "redeem_label",
class: "small-login-button",
@ -450,7 +450,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
private renderInfoForFreeAccounts(model: RedeemGiftCardModel): Children {
return [
m(".pt-l.plr-l", `${lang.get("giftCardUpgradeNotifyRevolutionary_msg")} ${this.getCreditOrDebitMessage(model)}`),
m(".pt-32.plr-l", `${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", [
@ -490,7 +490,7 @@ class RedeemGiftCardPage implements WizardPageN<RedeemGiftCardModel> {
private renderInfoForPaidAccounts(model: RedeemGiftCardModel): Children {
return [
m(
".pt-l.plr-l.flex-center",
".pt-32.plr-l.flex-center",
`${lang.get("giftCardCreditNotify_msg", {
"{credit}": formatPrice(Number(model.giftCardInfo.value), true),
})} ${lang.get("creditUsageOptions_msg")}`,

4
src/common/support/pages/ContactSupportPage.ts
View file

@ -137,7 +137,7 @@ export class ContactSupportPage implements Component<Props> {
),
m(
".flex.flex-column.gap-vpad.pb",
".flex.flex-column.gap-vpad.pb-16",
{
style: {
marginTop: "auto",
@ -160,7 +160,7 @@ export class ContactSupportPage implements Component<Props> {
}),
(this.sendMailModel?.getAttachments() ?? []).map((attachment) =>
m(
".flex.center-vertically.flex-space-between.pb-s.pt-s",
".flex.center-vertically.flex-space-between.pb-8.pt-8",
{ style: { paddingInline: px(size.spacing_8) } },
m("span.smaller", attachment.name),
m(

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

@ -17,11 +17,11 @@ type EmailSupportUnavailableAttrs = {
export class EmailSupportUnavailablePage implements Component<EmailSupportUnavailableAttrs> {
view({ attrs: { data, goToContactSupportPage } }: Vnode<EmailSupportUnavailableAttrs>): Children {
return m(
".pt-16.pb",
".pt-16.pb-16",
m(
Card,
{ shouldDivide: true },
m("div.pt-s.pb-s.plr", [
m("div.pt-8.pb-8.plr", [
m(".h4.mt-4", lang.get("supportNoDirectSupport_title")),
m("p", lang.get("supportNoDirectSupport_msg")),
m("img.block", {

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

@ -24,7 +24,7 @@ export class SupportCategoryPage implements Component<Props> {
const languageTag = lang.languageTag
const currentlySelectedCategory = selectedCategory()
return m(".pt-16.pb.flex.col.gap-vpad", [
return m(".pt-16.pb-16.flex.col.gap-vpad", [
m(Card, [
m(
"",

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