diff --git a/src/components/Modal/Modal.css b/src/components/Modal/Modal.css index ed753841..a8b60c3e 100644 --- a/src/components/Modal/Modal.css +++ b/src/components/Modal/Modal.css @@ -46,8 +46,6 @@ background-color: transparent; color: var(--matterColor); - /* Font */ - composes: h6Font from '../../marketplace.css'; cursor: pointer; &:enabled:hover { @@ -63,10 +61,16 @@ } } +.closeText { + /* Font */ + composes: h6Font from '../../marketplace.css'; +} + .closeIcon { display: inline-block; margin-left: 12px; - margin-top: 2px; + padding: 6px 0 6px; + box-sizing: content-box; } .content { diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js index a272e645..0b4f0c94 100644 --- a/src/components/Modal/Modal.js +++ b/src/components/Modal/Modal.js @@ -51,7 +51,7 @@ export class ModalComponent extends Component { const closeModalMessage = intl.formatMessage({ id: 'Modal.closeModal' }); const closeBtn = isOpen ? : null; diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 321e1c70..01ad04ee 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -26,15 +26,14 @@ */ .topbarDesktopLabel { display: inline-block; - margin: 24px 0 16px 0; + margin: 20px 0; text-decoration: inherit; } /* logo */ .logoLink { flex-shrink: 0; - display: flex; - align-items: center; + padding: 16px 0 23px 0; height: 100%; margin-right: 24px; } diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css index dcacb969..22e2d0f8 100644 --- a/src/containers/StyleguidePage/StyleguidePage.css +++ b/src/containers/StyleguidePage/StyleguidePage.css @@ -38,10 +38,18 @@ composes: withPadding; @media (--desktopViewport) { - padding: 56px 0 0 16px; + padding: 48px 0 0 16px; } } +.examplesList { + margin: 24px 0; +} + +.example { + padding: 0; +} + .link { color: var(--marketplaceColor); } @@ -63,23 +71,31 @@ .typographyContent {} .baselines { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; @media (--desktopViewport) { - background-image: url('data:image/svg+xml;utf8,'); + background-image: url('data:image/svg+xml;utf8,'); background-repeat: repeat; } } .spacing2x { margin: calc(2 * var(--spacingUnit)) 0; + + @media (--desktopViewport) { + margin: calc(2 * var(--spacingUnitDesktop)) 0; + } } .fontsContainer { display: flex; flex-wrap: wrap; margin-top: calc(4 * var(--spacingUnit)); + + @media (--desktopViewport) { + margin-top: calc(3 * var(--spacingUnitDesktop)); + } } .fontCard { @@ -87,13 +103,14 @@ display: flex; flex-direction: column; - /** - * FontCard contains 4px worth of borders, which needs to be factored in since we use - * box-sizing: border-box; - * In this case, we'll adjust margin-bottoms (24px - 4px = 20px) - */ - margin-bottom: calc(4 * var(--spacingUnit) - 4px); margin-right: calc(2 * var(--spacingUnit)); + margin-bottom: calc(2 * var(--spacingUnit) + 2px); + + @media (--desktopViewport) { + margin-right: calc(2 * var(--spacingUnitDesktop)); + margin-bottom: calc(2 * var(--spacingUnitDesktop) + 2px); + } + } .element { @@ -106,12 +123,16 @@ flex-grow: 1; width: 100%; background-color: #f1f1f1; - padding: calc(2 * var(--spacingUnit)); + padding: calc(2 * var(--spacingUnit) - 3px) calc(2 * var(--spacingUnit)); border-style: solid; border-color: #aaa; border-width: 1px; border-top-color: transparent; + + @media (--desktopViewport) { + padding: calc(2 * var(--spacingUnitDesktop) - 3px) calc(2 * var(--spacingUnitDesktop)); + } } /* Colors.example */ @@ -150,6 +171,10 @@ width: 100%; background-color: #fff; padding: calc(2 * var(--spacingUnit)); + + @media (--desktopViewport) { + padding: calc(2 * var(--spacingUnitDesktop) - 2px) calc(2 * var(--spacingUnitDesktop)); + } } .marketplaceColorBackground { diff --git a/src/containers/StyleguidePage/StyleguidePage.js b/src/containers/StyleguidePage/StyleguidePage.js index 64c79122..d5f22422 100644 --- a/src/containers/StyleguidePage/StyleguidePage.js +++ b/src/containers/StyleguidePage/StyleguidePage.js @@ -23,7 +23,7 @@ const Example = props => { const exampleWrapperClassName = useDefaultWrapperStyles ? css.defaultWrapperStyles : ''; const desc = description ?

Description: {description}

: null; return ( -
  • +

  • { } const html = examples.length > 0 - ?
      + ?
        {examples.map(ex => )}
      :

      No examples with filter: {componentName}/{exampleName}

      ; diff --git a/src/containers/StyleguidePage/Typography.example.js b/src/containers/StyleguidePage/Typography.example.js index ee074543..9072c8ce 100644 --- a/src/containers/StyleguidePage/Typography.example.js +++ b/src/containers/StyleguidePage/Typography.example.js @@ -30,72 +30,70 @@ const Fonts = () => { const heroTitleFontStyling = `Mobile styles: font-size: 48px; line-height: 54px; - padding: 5px 0 1px; + padding: 1px 0 5px; Desktop styles: font-size: 90px; line-height: 96px; - padding: 0;`; + padding: 1px 0 7px;`; const h1FontStyling = `Mobile styles: font-size: 30px; line-height: 36px; - padding: 3.5px 0 2.5px; Desktop styles: font-size: 48px; - line-height: 56px; - padding: 6px 0 2px;`; + line-height: 56px;`; const h2FontStyling = `Mobile styles: font-size: 24px; line-height: 30px; - padding: 3px 0 3px; + padding: 5px 0 1px; Desktop styles: font-size: 24px; line-height: 32px; - padding: 4px 0 4px;`; + padding: 5px 0 3px;`; const h3FontStyling = `Mobile styles: font-size: 20px; line-height: 24px; - padding: 2px 0 4px; + padding: 4px 0 2px; Desktop styles: font-size: 20px; line-height: 24px; - padding: 2px 0 6px;`; + padding: 4px 0 4px;`; const h4FontStyling = `Mobile styles: font-size: 16px; line-height: 24px; - padding: 3.5px 0 2.5px; + padding: 0; Desktop styles: font-size: 16px; line-height: 24px; - padding: 4px 0 4px;`; + padding: 5px 0 3px;`; const h5FontStyling = `Mobile styles: font-size: 14px; line-height: 18px; - padding: 1.5px 0 4.5px; + padding: 4px 0 2px; Desktop styles: font-size: 14px; - line-height: 18px; - padding: 7px 0 1px;`; + line-height: 16px; + padding: 2px 0 6px;`; const h6FontStyling = `Mobile styles: font-size: 12px; line-height: 18px; - padding: 2px 0 4px; + padding: 4px 0 2px; Desktop styles: font-size: 12px; - line-height: 18px; - padding: 6px 0 2px;`; + line-height: 16px; + padding: 2px 0 6px;`; const bodyFontStyling = `Mobile styles: font-size: 18px; diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css index e54c453d..1bc396d3 100644 --- a/src/containers/Topbar/Topbar.css +++ b/src/containers/Topbar/Topbar.css @@ -1,5 +1,10 @@ @import '../../marketplace.css'; +:root { + --topbarHeight: 60px; + --logoHeight: 25px; +} + .root { width: 100%; } @@ -8,7 +13,7 @@ /* Size */ width: 100%; - height: 60px; + height: var(--topbarHeight); /* Layout for child components */ display: flex; @@ -28,9 +33,8 @@ } .home { - /* Home icon's height is 25px. Touch area is created with padding (covers Topbar height) */ display: flex; - padding: 17.5px 24px; + padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px; } .logoutButton { @@ -86,6 +90,7 @@ .searchContainer { position: relative; height: 100%; + margin-top: 72px; } .mobileHelp { @@ -95,7 +100,7 @@ /* Absolute position to avoid affecting the layout of the autocomplete predictions list */ position: absolute; - top: 115px; + top: 114px; /* Pull text behind search suggestions */ z-index: -1; diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.css b/src/containers/TopbarSearchForm/TopbarSearchForm.css index cd5d756f..771bdb05 100644 --- a/src/containers/TopbarSearchForm/TopbarSearchForm.css +++ b/src/containers/TopbarSearchForm/TopbarSearchForm.css @@ -22,7 +22,7 @@ height: var(--topbarHeight); border: none; padding-top: 0; - padding-bottom: 0; + padding-bottom: 3px; } .mobilePredictions { diff --git a/src/marketplace.css b/src/marketplace.css index 7dd498b3..4b4d29b3 100644 --- a/src/marketplace.css +++ b/src/marketplace.css @@ -61,13 +61,13 @@ h1, h2, h3, h4, h5, h6, p, pre { font-weight: 700; /* Bold */ font-size: 48px; line-height: 54px; - padding: 5px 0 1px; /* 5px + 1px = 6px */; + padding: 1px 0 5px; /* 1px + 5px = 6px */; letter-spacing: -1px; @media (--desktopViewport) { font-size: 90px; line-height: 96px; - padding: 0; + padding: 1px 0 7px; /* 1px + 7px = 8px */ letter-spacing: -2px; } } @@ -79,7 +79,7 @@ h1, font-weight: 600; /* SemiBold */ font-size: 30px; line-height: 36px; - padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */ + padding: 0; letter-spacing: -0.5px; @media (--desktopViewport) { @@ -96,12 +96,12 @@ h2, font-weight: 600; /* SemiBold */ font-size: 24px; line-height: 30px; - padding: 3px 0 3px; /* 3px + 3px = 6px */ + padding: 5px 0 1px; /* 5px + 1px = 6px */ letter-spacing: -0.3px; @media (--desktopViewport) { line-height: 32px; - padding: 4px 0 4px; /* 4px + 4px = 8px */ + padding: 5px 0 3px;; /* 5px + 3px = 8px */ } } @@ -111,11 +111,11 @@ h3, font-weight: 600; /* SemiBold */ font-size: 20px; line-height: 24px; - padding: 2px 0 4px; /* 2px + 4px = 6px */ + padding: 4px 0 2px; /* 4px + 2px = 6px */ letter-spacing: -0.2px; @media (--desktopViewport) { - padding: 2px 0 6px; /* 2px + 6px = 8px */ + padding: 4px 0 4px; /* 4px + 4px = 8px */ } } @@ -125,11 +125,11 @@ h4, font-weight: 500; /* Medium */ font-size: 16px; line-height: 24px; - padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */ + padding: 0; letter-spacing: 0; @media (--desktopViewport) { - padding: 4px 0 4px; /* 4px + 4px = 8px */ + padding: 5px 0 3px; /* 5px + 3px = 8px */ } } @@ -139,12 +139,12 @@ h5, font-weight: 400; /* Regular */ font-size: 14px; line-height: 18px; - padding: 1.5px 0 4.5px; /* 1.5px + 4.5px = 6px */ + padding: 4px 0 2px; /* 4px + 2px = 6px */ letter-spacing: 0; @media (--desktopViewport) { line-height: 16px; - padding: 1px 0 7px; /* 1px + 7px = 8px */ + padding: 2px 0 6px; /* 2px + 6px = 8px */ } } @@ -154,7 +154,7 @@ h6, font-weight: 700; /* Bold */ font-size: 12px; line-height: 18px; - padding: 2px 0 4px; /* 2px + 4px = 6px */ + padding: 4px 0 2px; /* 4px + 2px = 6px */ letter-spacing: 1.5px; text-transform: uppercase; @@ -175,13 +175,13 @@ li, font-weight: 500; /* Medium */ font-size: 18px; line-height: 24px; - padding: 2.5px 0 3.5px; /* 2.5px + 3.5px = 6px */ + padding: 0; letter-spacing: -0.1px; @media (--desktopViewport) { font-size: 20px; line-height: 32px; - padding: 6px 0 2px; /* 6px + 2px = 8px */ + padding: 0; } } @@ -190,12 +190,12 @@ li, font-weight: 400; /* Regular */ font-size: 13px; line-height: 18px; - padding: 2px 0 4px; /* 2px + 4px = 6px */ + padding: 3.5px 0 2.5px; /* 3.5px + 2.5px = 6px */ letter-spacing: -0.1px; @media (--desktopViewport) { line-height: 16px; - padding: 1.5px 0 6.5px; /* 1.5px + 6.5px; = 8px */ + padding: 2.5px 0 5.5px; /* 1.5px + 6.5px; = 8px */ } } @@ -218,7 +218,6 @@ li, font-weight: 700; /* Bold */ font-size: 14px; line-height: 18px; - padding: 7.5px 0 4.5px; letter-spacing: 0.1px; }