diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss index 3e07b044b438..2574c758f944 100644 --- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss +++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss @@ -312,7 +312,7 @@ } .meta { - padding: var(--space-large) var(--space-small); + padding: var(--space-large) var(--space-small) 0; color: var(--newtab-text-primary-color); .info-wrap .excerpt { @@ -330,7 +330,7 @@ .card-stp-button-position-wrapper { inset-inline-end: var(--space-xlarge); - inset-block-end: var(--space-xlarge); + inset-block-end: var(--space-small); } &:hover, diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx index 61160521f62a..46d66e8df18f 100644 --- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx +++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx @@ -43,7 +43,7 @@ export const DSSource = ({ refinedCardsLayout, }) => { // refinedCard styles will have a larger favicon size - const faviconSize = refinedCardsLayout ? 24 : 16; + const faviconSize = refinedCardsLayout ? 20 : 16; // First try to display sponsored label or time to read here. if (newSponsoredLabel) { diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css index 189bfee3093d..7ad1baf5f75d 100644 --- a/browser/extensions/newtab/css/activity-stream.css +++ b/browser/extensions/newtab/css/activity-stream.css @@ -5421,7 +5421,7 @@ main section { padding: var(--space-small); } .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta { - padding: var(--space-large) var(--space-small); + padding: var(--space-large) var(--space-small) 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { @@ -5435,7 +5435,7 @@ main section { } .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-xlarge); - inset-block-end: var(--space-xlarge); + inset-block-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; @@ -5749,7 +5749,7 @@ main section { padding: var(--space-small); } .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta { - padding: var(--space-large) var(--space-small); + padding: var(--space-large) var(--space-small) 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { @@ -5763,7 +5763,7 @@ main section { } .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-xlarge); - inset-block-end: var(--space-xlarge); + inset-block-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; @@ -6078,7 +6078,7 @@ main section { padding: var(--space-small); } .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta { - padding: var(--space-large) var(--space-small); + padding: var(--space-large) var(--space-small) 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { @@ -6092,7 +6092,7 @@ main section { } .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-xlarge); - inset-block-end: var(--space-xlarge); + inset-block-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; @@ -6406,7 +6406,7 @@ main section { padding: var(--space-small); } .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta { - padding: var(--space-large) var(--space-small); + padding: var(--space-large) var(--space-small) 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { @@ -6420,7 +6420,7 @@ main section { } .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-xlarge); - inset-block-end: var(--space-xlarge); + inset-block-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js index dc7aa78439f5..acccfebc2f26 100644 --- a/browser/extensions/newtab/data/content/activity-stream.bundle.js +++ b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -3508,7 +3508,7 @@ const DSSource = ({ refinedCardsLayout }) => { // refinedCard styles will have a larger favicon size - const faviconSize = refinedCardsLayout ? 24 : 16; + const faviconSize = refinedCardsLayout ? 20 : 16; // First try to display sponsored label or time to read here. if (newSponsoredLabel) {