Bug 1684859 - Connect titles and toggles, fix padding and font weight. r=prathiksha

Differential Revision: https://phabricator.services.mozilla.com/D101409
This commit is contained in:
Erica Wright 2021-01-12 19:37:23 +00:00
Родитель 898fb17519
Коммит 26101454bb
7 изменённых файлов: 73 добавлений и 32 удалений

Просмотреть файл

@ -156,6 +156,7 @@ main {
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--newtab-background-button-color);

Просмотреть файл

@ -52,6 +52,7 @@ export class ContentSection extends React.PureComponent {
<div id="shortcuts-section" className="section">
<label className="switch">
<input
id="shortcuts-toggle"
checked={topSitesEnabled}
type="checkbox"
onChange={this.onPreferenceSelect}
@ -62,11 +63,12 @@ export class ContentSection extends React.PureComponent {
<span className="slider" role="presentation"></span>
</label>
<div>
<h2
id="custom-shortcuts-title"
className="title"
data-l10n-id="newtab-custom-shortcuts-title"
/>
<h2 id="custom-shortcuts-title" className="title">
<label
htmlFor="shortcuts-toggle"
data-l10n-id="newtab-custom-shortcuts-title"
></label>
</h2>
<p
id="custom-shortcuts-subtitle"
className="subtitle"
@ -140,6 +142,7 @@ export class ContentSection extends React.PureComponent {
<div id="pocket-section" className="section">
<label className="switch">
<input
id="pocket-toggle"
checked={pocketEnabled}
type="checkbox"
onChange={this.onPreferenceSelect}
@ -150,11 +153,12 @@ export class ContentSection extends React.PureComponent {
<span className="slider" role="presentation"></span>
</label>
<div>
<h2
id="custom-pocket-title"
className="title"
data-l10n-id="newtab-custom-pocket-title"
/>
<h2 id="custom-pocket-title" className="title">
<label
htmlFor="pocket-toggle"
data-l10n-id="newtab-custom-pocket-title"
></label>
</h2>
<p
id="custom-pocket-subtitle"
className="subtitle"
@ -198,6 +202,7 @@ export class ContentSection extends React.PureComponent {
<div id="recent-section" className="section">
<label className="switch">
<input
id="highlights-toggle"
checked={highlightsEnabled}
type="checkbox"
onChange={this.onPreferenceSelect}
@ -209,11 +214,13 @@ export class ContentSection extends React.PureComponent {
<span className="slider" role="presentation"></span>
</label>
<div>
<h2
id="custom-recent-title"
className="title"
data-l10n-id="newtab-custom-recent-title"
/>
<h2 id="custom-recent-title" className="title">
<label
htmlFor="highlights-toggle"
data-l10n-id="newtab-custom-recent-title"
></label>
</h2>
<p
id="custom-recent-subtitle"
className="subtitle"
@ -225,6 +232,7 @@ export class ContentSection extends React.PureComponent {
<div id="snippets-section" className="section">
<label className="switch">
<input
id="snippets-toggle"
checked={snippetsEnabled}
type="checkbox"
onChange={this.onPreferenceSelect}
@ -235,11 +243,12 @@ export class ContentSection extends React.PureComponent {
<span className="slider" role="presentation"></span>
</label>
<div>
<h2
id="custom-snippets-title"
className="title"
data-l10n-id="newtab-custom-snippets-title"
/>
<h2 id="custom-snippets-title" className="title">
<label
htmlFor="snippets-toggle"
data-l10n-id="newtab-custom-snippets-title"
></label>
</h2>
<p
id="custom-snippets-subtitle"
className="subtitle"

Просмотреть файл

@ -85,6 +85,10 @@
grid-template-rows: auto;
grid-template-columns: auto 26px;
& > div {
grid-area: 1;
}
.title {
grid-column: 1 / -1;
margin: 0;
@ -140,7 +144,6 @@
appearance: none;
padding-block: 7px;
padding-inline: 10px 13px;
margin-bottom: 10px;
margin-inline-start: 2px;
-moz-context-properties: fill;
fill: var(--customize-menu-primary-text-color);
@ -240,6 +243,10 @@
.more-information {
top: -77px;
}
.check-wrapper {
margin-top: 10px;
}
}
.more-info-pocket-wrapper {

Просмотреть файл

@ -512,6 +512,7 @@ main {
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
@ -1667,6 +1668,8 @@ main {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto 26px; }
.home-section .section > div {
grid-area: 1; }
.home-section .section .title {
grid-column: 1 / -1;
margin: 0;
@ -1708,7 +1711,6 @@ main {
appearance: none;
padding-block: 7px;
padding-inline: 10px 13px;
margin-bottom: 10px;
margin-inline-start: 2px;
-moz-context-properties: fill;
fill: var(--customize-menu-primary-text-color);
@ -1779,6 +1781,8 @@ main {
max-height: 78px; }
.home-section .section .more-info-top-wrapper .more-information {
top: -77px; }
.home-section .section .more-info-top-wrapper .check-wrapper {
margin-top: 10px; }
.home-section .section .more-info-pocket-wrapper {
max-height: 35px; }
.home-section .section .more-info-pocket-wrapper .more-information {

Просмотреть файл

@ -515,6 +515,7 @@ main {
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
@ -1670,6 +1671,8 @@ main {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto 26px; }
.home-section .section > div {
grid-area: 1; }
.home-section .section .title {
grid-column: 1 / -1;
margin: 0;
@ -1711,7 +1714,6 @@ main {
appearance: none;
padding-block: 7px;
padding-inline: 10px 13px;
margin-bottom: 10px;
margin-inline-start: 2px;
-moz-context-properties: fill;
fill: var(--customize-menu-primary-text-color);
@ -1782,6 +1784,8 @@ main {
max-height: 78px; }
.home-section .section .more-info-top-wrapper .more-information {
top: -77px; }
.home-section .section .more-info-top-wrapper .check-wrapper {
margin-top: 10px; }
.home-section .section .more-info-pocket-wrapper {
max-height: 35px; }
.home-section .section .more-info-pocket-wrapper .more-information {

Просмотреть файл

@ -512,6 +512,7 @@ main {
.personalize-button {
font-size: 12px;
font-weight: 600;
border: 1px solid transparent;
border-radius: 4px;
background-color: var(--newtab-background-button-color);
@ -1667,6 +1668,8 @@ main {
display: grid;
grid-template-rows: auto;
grid-template-columns: auto 26px; }
.home-section .section > div {
grid-area: 1; }
.home-section .section .title {
grid-column: 1 / -1;
margin: 0;
@ -1708,7 +1711,6 @@ main {
appearance: none;
padding-block: 7px;
padding-inline: 10px 13px;
margin-bottom: 10px;
margin-inline-start: 2px;
-moz-context-properties: fill;
fill: var(--customize-menu-primary-text-color);
@ -1779,6 +1781,8 @@ main {
max-height: 78px; }
.home-section .section .more-info-top-wrapper .more-information {
top: -77px; }
.home-section .section .more-info-top-wrapper .check-wrapper {
margin-top: 10px; }
.home-section .section .more-info-pocket-wrapper {
max-height: 35px; }
.home-section .section .more-info-pocket-wrapper .more-information {

Просмотреть файл

@ -14330,6 +14330,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
}, external_React_default.a.createElement("label", {
className: "switch"
}, external_React_default.a.createElement("input", {
id: "shortcuts-toggle",
checked: topSitesEnabled,
type: "checkbox",
onChange: this.onPreferenceSelect,
@ -14341,9 +14342,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
role: "presentation"
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
id: "custom-shortcuts-title",
className: "title",
className: "title"
}, external_React_default.a.createElement("label", {
htmlFor: "shortcuts-toggle",
"data-l10n-id": "newtab-custom-shortcuts-title"
}), external_React_default.a.createElement("p", {
})), external_React_default.a.createElement("p", {
id: "custom-shortcuts-subtitle",
className: "subtitle",
"data-l10n-id": "newtab-custom-shortcuts-subtitle"
@ -14397,6 +14400,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
}, external_React_default.a.createElement("label", {
className: "switch"
}, external_React_default.a.createElement("input", {
id: "pocket-toggle",
checked: pocketEnabled,
type: "checkbox",
onChange: this.onPreferenceSelect,
@ -14408,9 +14412,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
role: "presentation"
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
id: "custom-pocket-title",
className: "title",
className: "title"
}, external_React_default.a.createElement("label", {
htmlFor: "pocket-toggle",
"data-l10n-id": "newtab-custom-pocket-title"
}), external_React_default.a.createElement("p", {
})), external_React_default.a.createElement("p", {
id: "custom-pocket-subtitle",
className: "subtitle",
"data-l10n-id": "newtab-custom-pocket-subtitle"
@ -14440,6 +14446,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
}, external_React_default.a.createElement("label", {
className: "switch"
}, external_React_default.a.createElement("input", {
id: "highlights-toggle",
checked: highlightsEnabled,
type: "checkbox",
onChange: this.onPreferenceSelect,
@ -14452,9 +14459,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
role: "presentation"
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
id: "custom-recent-title",
className: "title",
className: "title"
}, external_React_default.a.createElement("label", {
htmlFor: "highlights-toggle",
"data-l10n-id": "newtab-custom-recent-title"
}), external_React_default.a.createElement("p", {
})), external_React_default.a.createElement("p", {
id: "custom-recent-subtitle",
className: "subtitle",
"data-l10n-id": "newtab-custom-recent-subtitle"
@ -14464,6 +14473,7 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
}, external_React_default.a.createElement("label", {
className: "switch"
}, external_React_default.a.createElement("input", {
id: "snippets-toggle",
checked: snippetsEnabled,
type: "checkbox",
onChange: this.onPreferenceSelect,
@ -14475,9 +14485,11 @@ class ContentSection_ContentSection extends external_React_default.a.PureCompone
role: "presentation"
})), external_React_default.a.createElement("div", null, external_React_default.a.createElement("h2", {
id: "custom-snippets-title",
className: "title",
className: "title"
}, external_React_default.a.createElement("label", {
htmlFor: "snippets-toggle",
"data-l10n-id": "newtab-custom-snippets-title"
}), external_React_default.a.createElement("p", {
})), external_React_default.a.createElement("p", {
id: "custom-snippets-subtitle",
className: "subtitle",
"data-l10n-id": "newtab-custom-snippets-subtitle"