From d340fa8d2a43f4bdaf1b95a8575f4514484a446e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 6 Jun 2023 14:03:52 +0000 Subject: [PATCH] Remove TODO comments about spacing variables (#10695) The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686 --- res/css/structures/_RoomView.pcss | 4 ++-- res/css/views/beta/_BetaCard.pcss | 4 ++-- res/css/views/dialogs/_InviteDialog.pcss | 18 +++++++++--------- res/css/views/dialogs/_SpotlightDialog.pcss | 14 +++++++------- .../security/_AccessSecretStorageDialog.pcss | 6 +++--- .../elements/_GenericEventListSummary.pcss | 2 +- res/css/views/elements/_ReplyChain.pcss | 6 +++--- res/css/views/messages/_EventTileBubble.pcss | 4 ++-- res/css/views/messages/_ViewSourceEvent.pcss | 4 ++-- res/css/views/right_panel/_BaseCard.pcss | 14 +++++++------- res/css/views/right_panel/_ThreadPanel.pcss | 2 +- res/css/views/right_panel/_UserInfo.pcss | 10 +++++----- res/css/views/rooms/_EventTile.pcss | 6 +++--- res/css/views/rooms/_IRCLayout.pcss | 2 +- res/css/views/settings/_FontScalingPanel.pcss | 6 +++--- res/css/views/settings/_ProfileSettings.pcss | 2 +- .../views/settings/tabs/_SettingsSection.pcss | 2 +- res/css/views/settings/tabs/_SettingsTab.pcss | 6 +++--- 18 files changed, 56 insertions(+), 56 deletions(-) diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index b340c8d994..b70649029f 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -15,7 +15,7 @@ limitations under the License. */ :root { - --RoomView_MessageList-padding: 18px; /* TODO: use a variable */ + --RoomView_MessageList-padding: 18px; } .mx_RoomView_wrapper { @@ -212,7 +212,7 @@ limitations under the License. margin-bottom: 4px; h2 { - margin-top: 6px; /* TODO: Use a spacing variable */ + margin-top: 6px; } } diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss index 62f7d7b93a..47ab7b005b 100644 --- a/res/css/views/beta/_BetaCard.pcss +++ b/res/css/views/beta/_BetaCard.pcss @@ -35,7 +35,7 @@ limitations under the License. font-size: $font-18px; line-height: $font-22px; color: $primary-content; - margin: $spacing-4 0 14px; // TODO: use a spacing variable + margin: $spacing-4 0 14px; display: flex; align-items: center; @@ -117,7 +117,7 @@ limitations under the License. .mx_BetaCard_betaPill { background-color: $accent-alt; - padding: $spacing-4 10px; // TODO: use a spacing variable + padding: $spacing-4 10px; border-radius: 8px; text-transform: uppercase; font-size: $font-12px; diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss index a7c1346951..4ffdb5d6cf 100644 --- a/res/css/views/dialogs/_InviteDialog.pcss +++ b/res/css/views/dialogs/_InviteDialog.pcss @@ -28,7 +28,7 @@ limitations under the License. flex-direction: row; /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */ /* for the user section gets weird. */ - margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */ + margin: $spacing-8 45px 0 0; .mx_InviteDialog_editor { flex: 1; @@ -43,14 +43,14 @@ limitations under the License. flex-wrap: wrap; .mx_InviteDialog_userTile { - margin: 6px 6px 0 0; /* TODO: Use a spacing variable */ + margin: 6px 6px 0 0; display: inline-block; min-width: max-content; /* prevent manipulation by flexbox */ } /* overrides bunch of our default text input styles */ > input[type="text"] { - margin: 6px 0 !important; /* TODO: Use a spacing variable */ + margin: 6px 0 !important; height: 24px; line-height: $font-24px; font-size: $font-14px; @@ -67,7 +67,7 @@ limitations under the License. .mx_InviteDialog_goButton { min-width: 48px; - margin-inline-start: 10px; /* TODO: Use a spacing variable */ + margin-inline-start: 10px; height: 25px; line-height: $font-25px; } @@ -77,7 +77,7 @@ limitations under the License. /* Width and height are required to trick the layout engine. */ width: 20px; height: 20px; - margin-inline-start: 5px; /* TODO: Use a spacing variable */ + margin-inline-start: 5px; display: inline-block; vertical-align: middle; } @@ -103,7 +103,7 @@ limitations under the License. } .mx_InviteDialog_section_showMore { - margin: 7px 18px; /* TODO: Use a spacing variable */ + margin: 7px 18px; display: block; } } @@ -252,7 +252,7 @@ limitations under the License. .mx_InviteDialog_userSections { margin-top: $spacing-4; overflow-y: auto; - padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */ + padding: 0 45px $spacing-4 0; } .mx_InviteDialog_helpText { @@ -289,7 +289,7 @@ limitations under the License. .mx_DialPad { row-gap: $spacing-16; - column-gap: 48px; /* TODO: Use a spacing variable */ + column-gap: 48px; margin-inline: auto; } } @@ -450,7 +450,7 @@ limitations under the License. } .mx_InviteDialog_identityServer { - margin-top: 1em; /* TODO: Use a spacing variable */ + margin-top: 1em; } .mx_InviteDialog_oneThreepid { diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 9303e61a33..75b4f48ff5 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/res/css/views/dialogs/_SpotlightDialog.pcss @@ -36,7 +36,7 @@ limitations under the License. kbd { display: inline-block; - padding: 2px $spacing-4; /* TODO: Use a spacing variable */ + padding: 2px $spacing-4; margin: 0 $spacing-4; border-radius: 6px; background-color: $quinary-content; @@ -76,7 +76,7 @@ limitations under the License. vertical-align: middle; color: $primary-content; position: relative; - padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */ + padding: $spacing-4 $spacing-8 $spacing-4 37px; &::before { background-color: $secondary-content; @@ -234,7 +234,7 @@ limitations under the License. .mx_SpotlightDialog_otherSearches, .mx_SpotlightDialog_hiddenResults { .mx_SpotlightDialog_option { - padding: 6px $spacing-4; /* TODO: Use a spacing variable */ + padding: 6px $spacing-4; border-radius: 8px; font-size: $font-15px; line-height: $font-24px; @@ -258,11 +258,11 @@ limitations under the License. .mx_AccessibleButton { padding: $spacing-4 $spacing-20; - margin: 2px $spacing-4; /* TODO: Use a spacing variable */ + margin: 2px $spacing-4; } .mx_SpotlightDialog_enterPrompt { - margin-top: 9px; /* TODO: Use a spacing variable */ + margin-top: 9px; margin-right: $spacing-8; } } @@ -379,7 +379,7 @@ limitations under the License. .mx_AccessibleButton { position: relative; margin: 0; - padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */ + padding: 3px $spacing-8 3px $spacing-28; &::before { content: ""; @@ -480,7 +480,7 @@ limitations under the License. } .mx_SpotlightDialog_enterPrompt { - padding: 2px $spacing-4; /* TODO: Use a spacing variable */ + padding: 2px $spacing-4; /* To avoid any styling inherent with elements */ font-family: inherit; font-weight: inherit; diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss index 6b802197dc..85e5c08258 100644 --- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss +++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss @@ -23,7 +23,7 @@ limitations under the License. height: 24px; margin-inline-end: $spacing-8; position: relative; - top: 5px; /* TODO: spacing variable */ + top: 5px; background-color: $primary-content; } @@ -81,7 +81,7 @@ limitations under the License. mask-repeat: no-repeat; mask-position: center; mask-size: 20px; - margin-inline-end: 5px; /* TODO: spacing variable */ + margin-inline-end: 5px; } &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid { @@ -109,7 +109,7 @@ limitations under the License. text-align: initial; display: flex; flex-flow: column; - gap: 14px; /* TODO: spacing variable */ + gap: 14px; .mx_Dialog_buttons_additive { float: none; diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss index b7d1adb73e..a0f5a97c25 100644 --- a/res/css/views/elements/_GenericEventListSummary.pcss +++ b/res/css/views/elements/_GenericEventListSummary.pcss @@ -23,7 +23,7 @@ limitations under the License. .mx_GenericEventListSummary_spacer { border-bottom: 1px solid $primary-hairline-color; - margin-left: 63px; /* TODO: Use a variable */ + margin-left: 63px; line-height: $font-30px; /* TODO: Use a variable */ .mx_IRCLayout & { diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss index 6de9d367a2..4f216322b4 100644 --- a/res/css/views/elements/_ReplyChain.pcss +++ b/res/css/views/elements/_ReplyChain.pcss @@ -16,9 +16,9 @@ limitations under the License. .mx_ReplyChain { margin: 0; // Reset default blockquote margin - padding-left: 10px; // TODO: Use a spacing variable - border-left: 2px solid var(--username-color); // TODO: Use a spacing variable - border-radius: 2px; // TODO: Use a spacing variable + padding-left: 10px; + border-left: 2px solid var(--username-color); + border-radius: 2px; .mx_ReplyChain_show { &.mx_AccessibleButton_kind_link_inline { diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss index 7facf259a1..8fd3371401 100644 --- a/res/css/views/messages/_EventTileBubble.pcss +++ b/res/css/views/messages/_EventTileBubble.pcss @@ -15,10 +15,10 @@ limitations under the License. */ .mx_EventTileBubble { - --EventTileBubble_margin-block: 10px; /* TODO: Use a spacing variable */ + --EventTileBubble_margin-block: 10px; background-color: $dark-panel-bg-color; - padding: 10px; /* TODO: Use a spacing variable */ + padding: 10px; border-radius: 8px; /* Reserve space for external timestamps, but also cap the width */ max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss index 725c834188..0b76ed5953 100644 --- a/res/css/views/messages/_ViewSourceEvent.pcss +++ b/res/css/views/messages/_ViewSourceEvent.pcss @@ -29,7 +29,7 @@ limitations under the License. pre { line-height: 1.2; - margin: 3.5px 0; /* TODO: use a variable */ + margin: 3.5px 0; } .mx_ViewSourceEvent_toggle { @@ -56,7 +56,7 @@ limitations under the License. align-self: flex-end; height: var(--ViewSourceEvent_toggle-size); mask-position: 0 bottom; - margin-bottom: 5px; /* TODO: use a variable */ + margin-bottom: 5px; mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); } } diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index 39f55b052d..73454e6c17 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/res/css/views/right_panel/_BaseCard.pcss @@ -17,7 +17,7 @@ limitations under the License. .mx_BaseCard { --BaseCard_padding-inline: $spacing-8; --BaseCard_EventTile_line-padding-block: 2px; - --BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */ + --BaseCard_EventTile-spacing-inline: 36px; --BaseCard_header-button-size: 24px; padding: 0 var(--BaseCard_padding-inline); @@ -32,7 +32,7 @@ limitations under the License. margin: $spacing-4 0 $spacing-12; > h2 { - margin: 0 44px; /* TODO: Use a spacing variable */ + margin: 0 44px; font-size: $font-18px; font-weight: var(--font-semi-bold); overflow: hidden; @@ -79,7 +79,7 @@ limitations under the License. margin-inline-start: var(--BaseCard_header-button-size); .mx_BaseCard_header_title_heading { - margin-inline-start: 6px; /* TODO: Use a spacing variable */ + margin-inline-start: 6px; } } } @@ -159,7 +159,7 @@ limitations under the License. } .mx_BaseCard_Button { - padding: 10px; /* TODO: Use a spacing variable */ + padding: 10px; padding-inline-start: $spacing-12; margin: 0; position: relative; @@ -234,8 +234,8 @@ limitations under the License. font-size: $font-12px; color: $secondary-content; - padding-top: 10px; /* TODO: Use a spacing variable */ - padding-bottom: 10px; /* TODO: Use a spacing variable */ + padding-top: 10px; + padding-bottom: 10px; border: 1px solid $quinary-content; box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); @@ -243,7 +243,7 @@ limitations under the License. .mx_ContextualMenu_chevron_top { left: auto; - right: 22px; /* TODO: Use a spacing variable */ + right: 22px; border-bottom-color: $quinary-content; &::after { diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss index 470494df52..8435ee5b9f 100644 --- a/res/css/views/right_panel/_ThreadPanel.pcss +++ b/res/css/views/right_panel/_ThreadPanel.pcss @@ -26,7 +26,7 @@ limitations under the License. } .mx_ThreadPanel_dropdown { - padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */ + padding: 3px $spacing-4 3px $spacing-8; border-radius: 4px; line-height: 1.5; user-select: none; diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index 1287e74f06..d8ea74586c 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -27,7 +27,7 @@ limitations under the License. top: 0; border-radius: 4px; background-color: $dark-panel-bg-color; - margin: 9px; /* TODO: Use a variable */ + margin: 9px; z-index: 1; /* render on top of the right panel */ div { @@ -44,7 +44,7 @@ limitations under the License. h2 { font-size: $font-18px; font-weight: var(--font-semi-bold); - margin: 18px 0 0 0; /* TODO: Use a variable */ + margin: 18px 0 0 0; } .mx_UserInfo_container { @@ -151,7 +151,7 @@ limitations under the License. } p { - margin: 5px 0; /* TODO: Use a variable */ + margin: 5px 0; } .mx_UserInfo_profile { @@ -179,7 +179,7 @@ limitations under the License. } .mx_E2EIcon { - margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */ + margin-top: 3px; /* visual vertical centering to the top line of text. */ margin-inline-end: $spacing-4; /* margin from displayName */ min-width: 18px; /* convince flexbox to not collapse it */ } @@ -196,7 +196,7 @@ limitations under the License. justify-content: center; align-items: center; - margin: 6px 0; /* TODO: Use a variable */ + margin: 6px 0; .mx_UserInfo_roleDescription { display: flex; diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index fc871bbc35..849609acf9 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -18,7 +18,7 @@ limitations under the License. $left-gutter: 64px; .mx_EventTile { - --EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */ + --EventTile_content-margin-inline-end: 34px; --EventTile_group_line-spacing-block-start: 1px; --EventTile_group_line-spacing-block-end: 3px; --EventTile_group_line-spacing-inline-start: $left-gutter; @@ -347,7 +347,7 @@ $left-gutter: 64px; > .mx_DisambiguatedProfile_mxid { visibility: collapse; margin-left: 0; /* Override the inherited margin. */ - padding: 0 5px; /* TODO: Use a spacing variable */ + padding: 0 5px; } &:hover { @@ -537,7 +537,7 @@ $left-gutter: 64px; } .mx_RoomView_timeline_rr_enabled & { - $inline-end-margin: 80px; /* TODO: Use a spacing variable */ + $inline-end-margin: 80px; .mx_ThreadSummary, .mx_ThreadSummary_icon, diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 07400f2f49..6f4b7c280c 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -22,7 +22,7 @@ limitations under the License. --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */ --icon-width: 14px; --line-height: var(--irc-line-height); - --right-padding: 5px; /* TODO: Use a spacing variable */ + --right-padding: 5px; line-height: var(--line-height) !important; diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss index 06b248d729..87d92e4b0a 100644 --- a/res/css/views/settings/_FontScalingPanel.pcss +++ b/res/css/views/settings/_FontScalingPanel.pcss @@ -24,11 +24,11 @@ limitations under the License. display: flow-root; &.mx_IRCLayout { - padding-top: 9px; /* TODO: Use a spacing variable */ + padding-top: 9px; } .mx_EventTile[data-layout="bubble"] { - margin-top: 30px; /* TODO: Use a spacing variable */ + margin-top: 30px; } .mx_EventTile_msgOption { @@ -39,7 +39,7 @@ limitations under the License. .mx_FontScalingPanel_fontSlider { display: flex; align-items: center; - padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */ + padding: 15px $spacing-20 35px; background: rgba($quinary-content, 0.2); border-radius: 10px; font-size: $font-10px; diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss index 0b4c68120c..94b03eeabf 100644 --- a/res/css/views/settings/_ProfileSettings.pcss +++ b/res/css/views/settings/_ProfileSettings.pcss @@ -57,7 +57,7 @@ limitations under the License. > .mx_AccessibleButton_kind_link { font-size: $font-14px; - margin-inline-end: 10px; /* TODO: Use a spacing variable */ + margin-inline-end: 10px; } } } diff --git a/res/css/views/settings/tabs/_SettingsSection.pcss b/res/css/views/settings/tabs/_SettingsSection.pcss index 5f4fd6f024..d3a35b7f47 100644 --- a/res/css/views/settings/tabs/_SettingsSection.pcss +++ b/res/css/views/settings/tabs/_SettingsSection.pcss @@ -16,7 +16,7 @@ limitations under the License. .mx_SettingsSection { --SettingsTab_section-margin-bottom-preferences-labs: 30px; - --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */ + --SettingsTab_heading_nth_child-margin-top: 30px; --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */ color: $primary-content; diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 064bd457d9..17779783d4 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -50,9 +50,9 @@ limitations under the License. color: $secondary-content; font-size: $font-14px; display: block; - margin-top: 10px; /* TODO: Use a spacing variable */ + margin-top: 10px; margin-inline-end: 80px; /* Align with the rest of the view */ - margin-bottom: 10px; /* TODO: Use a spacing variable */ + margin-bottom: 10px; margin-inline-start: 0; } @@ -63,7 +63,7 @@ limitations under the License. .mx_SettingsFlag { margin-inline-end: $end-gutter; - margin-bottom: 10px; /* TODO: Use a spacing variable */ + margin-bottom: 10px; .mx_SettingsFlag_label { vertical-align: middle;