diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss index 422e6e98b5c..6ac4a0934c2 100644 --- a/packages/@ourworldindata/components/src/Checkbox.scss +++ b/packages/@ourworldindata/components/src/Checkbox.scss @@ -7,6 +7,10 @@ position: relative; + label { + margin: 0; // style leak in admin + } + input { position: absolute; opacity: 0; diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss index 2bc2ce39a83..66ae19aa7ae 100644 --- a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss +++ b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss @@ -18,11 +18,12 @@ color: $light-text; background: white; - border: 1px solid $light-stroke !important; + border: 1px solid $light-stroke; border-radius: 50%; &:hover { background: $hover-fill; + border-color: $hover-fill; cursor: pointer; color: $dark-text; } diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.scss b/packages/@ourworldindata/grapher/src/controls/Dropdown.scss index 9174c638314..fb5ebb2939f 100644 --- a/packages/@ourworldindata/grapher/src/controls/Dropdown.scss +++ b/packages/@ourworldindata/grapher/src/controls/Dropdown.scss @@ -33,6 +33,11 @@ padding: 7px; color: $dark-text; + &.focus { + outline: 1px solid #a4b6ca !important; + outline-offset: -1px; + } + &:hover { background: $hover-fill; cursor: pointer; @@ -63,7 +68,8 @@ .option { padding: 8px 18px; - &:hover { + &:hover, + &.focus { cursor: pointer; background: $hover-fill; } diff --git a/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx b/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx index ec3b019f3b9..30d57e08aa0 100644 --- a/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx +++ b/packages/@ourworldindata/grapher/src/controls/Dropdown.tsx @@ -1,5 +1,6 @@ import React from "react" import Select, { Props } from "react-select" +import cx from "classnames" export function Dropdown(props: Props): React.JSX.Element { return ( @@ -14,10 +15,18 @@ export function Dropdown(props: Props): React.JSX.Element { unstyled={true} isMulti={false} classNames={{ - control: (state) => - state.menuIsOpen ? "active control" : "control", - option: (state) => - state.isSelected ? "active option" : "option", + control: (state) => { + return cx("control", { + focus: state.isFocused, + active: state.menuIsOpen, + }) + }, + option: (state) => { + return cx("option", { + focus: state.isFocused, + active: state.isSelected, + }) + }, menu: () => "menu", }} {...props} diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss index e104c7af8bb..2295366d2cb 100644 --- a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss +++ b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss @@ -6,6 +6,10 @@ position: relative; + label { + margin: 0; // style leak in admin + } + input { position: absolute; opacity: 0; diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 42d7d32da94..ab68520077d 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -1527,8 +1527,14 @@ export class Grapher const { yColumnSlugs, xColumnSlug, sizeColumnSlug, colorColumnSlug } = this + // sort y columns by their display name + const sortedYColumnSlugs = sortBy( + yColumnSlugs, + (slug) => this.inputTable.get(slug).titlePublicOrDisplayName.title + ) + return excludeUndefined([ - ...yColumnSlugs, + ...sortedYColumnSlugs, xColumnSlug, sizeColumnSlug, colorColumnSlug, @@ -1542,7 +1548,7 @@ export class Grapher // sort y-columns by their display name const sortedYColumnSlugs = sortBy( yColumnSlugs, - (slug) => this.inputTable.get(slug).titlePublicOrDisplayName + (slug) => this.inputTable.get(slug).titlePublicOrDisplayName.title ) const columnSlugs = excludeUndefined([ @@ -2492,7 +2498,7 @@ export class Grapher justifyContent: "center", textAlign: "center", lineHeight: 1.5, - padding: "3rem", + padding: "48px", }} >

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss index bde2d7e1743..769d18f2e21 100644 --- a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss +++ b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss @@ -6,7 +6,13 @@ align-items: center; padding: var(--padding) var(--padding) 16px; - button { + .title { + @include grapher_h5-black-caps; + color: $light-text; + } + + .close-button { margin-left: 8px; + flex-shrink: 0; } } diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx index 6157a7ab2a5..ad96dd46c11 100644 --- a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx +++ b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx @@ -4,16 +4,25 @@ import { CloseButton } from "../closeButton/CloseButton.js" export function OverlayHeader({ title, + onTitleClick, onDismiss, className, }: { title: string + onTitleClick?: () => void onDismiss?: () => void className?: string }): JSX.Element { return (

-

{title}

+

+ {title} +

{onDismiss && }
) diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss index 0ba748d14c4..a8054100293 100644 --- a/packages/@ourworldindata/grapher/src/core/typography.scss +++ b/packages/@ourworldindata/grapher/src/core/typography.scss @@ -2,12 +2,34 @@ // headings // +@mixin grapher_h1-semibold { + display: block; + margin: 0; + + font-family: $serif-font-stack; + font-size: 24px; + font-weight: 600; + line-height: 1.1667; + letter-spacing: 0; +} + +@mixin grapher_h2-semibold { + display: block; + margin: 0; + + font-family: $serif-font-stack; + font-size: 20px; + font-weight: 600; + line-height: 1.2; + letter-spacing: 0; +} + @mixin grapher_h3-semibold { display: block; margin: 0; font-family: $serif-font-stack; - font-size: 1.125rem; + font-size: 18px; font-weight: 600; line-height: 1.1111; letter-spacing: 0; @@ -22,7 +44,7 @@ margin: 0; font-family: $serif-font-stack; - font-size: 1.1rem; + font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: 0; @@ -37,7 +59,7 @@ margin: 0; font-family: $sans-serif-font-stack; - font-size: 0.75rem; + font-size: 12px; font-weight: 900; line-height: 1.3333; letter-spacing: 0.1em; @@ -58,7 +80,7 @@ margin: 0; font-family: $sans-serif-font-stack; - font-size: 1rem; + font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: 0; @@ -73,7 +95,7 @@ margin: 0; font-family: $sans-serif-font-stack; - font-size: 0.8125rem; + font-size: 13px; font-weight: 500; line-height: 1.3846; letter-spacing: 0; @@ -110,7 +132,7 @@ margin: 0; font-family: $sans-serif-font-stack; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0; @@ -125,7 +147,7 @@ margin: 0; font-family: $sans-serif-font-stack; - font-size: 0.8125rem; + font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 0.01em; diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss index 92e95dd5641..22d71ecec1c 100644 --- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss +++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss @@ -226,7 +226,7 @@ } .closest-time-notice-tippy { - max-width: 13rem; + max-width: 208px; text-align: center; - padding: 0.25rem; + padding: 4px; } diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss index 8686cdcbcc8..b938a3b4be3 100644 --- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss +++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss @@ -1,6 +1,9 @@ .entity-selector { --padding: var(--modal-padding, 16px); + $sort-button-size: 32px; + $sort-button-margin: 16px; + color: $dark-text; // necessary for scrolling @@ -114,22 +117,19 @@ .label { flex-shrink: 0; margin-right: 8px; - color: $dark-text; } button.sort { flex-shrink: 0; - margin-left: 16px; - - $size: 32px; + margin-left: $sort-button-margin; display: flex; align-items: center; justify-content: center; position: relative; - height: $size; - width: $size; + height: $sort-button-size; + width: $sort-button-size; padding: 7px; color: $dark-text; @@ -185,10 +185,18 @@ position: relative; cursor: pointer; + &.hovered { + background: rgba(219, 229, 240, 0.4); + } + + &--with-bar.hovered { + background: rgba(219, 229, 240, 0.6); + } + .value { color: #a1a1a1; white-space: nowrap; - margin-left: 8px; + margin-left: 12px; } .bar { @@ -201,11 +209,12 @@ } .label-with-location-icon { - display: flex; - align-items: center; + &--no-line-break { + white-space: nowrap; + } svg { - margin-left: 8px; + margin-left: 6px; font-size: 0.9em; color: #a1a1a1; @@ -217,7 +226,7 @@ } } - .animated-entity { + .flipped { position: relative; z-index: 0; background: #fff; @@ -255,31 +264,39 @@ display: flex; align-items: center; justify-content: space-between; - padding: 16px var(--padding); + padding: 8px var(--padding); box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04); .footer__selected { - font-size: 0.6875rem; + font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; - - display: flex; - flex-wrap: wrap; - column-gap: 4px; } button { background: none; border: none; color: $dark-text; - font-size: 0.8125rem; + font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-decoration-line: underline; text-underline-offset: 3px; cursor: pointer; + padding: 8px; + margin-right: -8px; + border-radius: 4px; + + &:hover { + text-decoration: none; + } + + &:active { + background: #f7f7f7; + } + &:disabled { color: #c6c6c6; text-decoration: none; @@ -287,4 +304,8 @@ } } } + + .grapher-dropdown .menu { + width: calc(100% + $sort-button-margin + $sort-button-size); + } } diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx index 28994ab4caa..39a9cebf4ec 100644 --- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx +++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx @@ -57,6 +57,7 @@ export interface EntitySelectorState { mostRecentlySelectedEntityName?: string externalSortColumnsByIndicatorId?: Record isLoadingExternalSortColumn?: boolean + isAnimationDisabledInSingleMode?: boolean } export interface EntitySelectorManager { @@ -102,7 +103,7 @@ const EXTERNAL_SORT_INDICATORS = [ }, { key: "gdpPerCapita", - label: "GDP per capita", + label: "GDP per capita (int. $)", indicatorId: GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR, isMatch: (column: CoreColumn): boolean => { const label = makeColumnLabel(column) @@ -130,6 +131,7 @@ export class EntitySelector extends React.Component<{ scrollableContainer: React.RefObject = React.createRef() searchField: React.RefObject = React.createRef() + contentRef: React.RefObject = React.createRef() private defaultSortConfig = { slug: this.table.entityNameSlug, @@ -142,6 +144,16 @@ export class EntitySelector extends React.Component<{ if (this.props.autoFocus && !isTouchDevice()) this.searchField.current?.focus() + // disable animation in single mode when all entities are visible + if (this.contentRef.current && this.scrollableContainer.current) { + const shouldAnimationBeDisabled = + this.contentRef.current.clientHeight <= + this.scrollableContainer.current.clientHeight - 56 // 56px is the height of the sort bar + this.set({ + isAnimationDisabledInSingleMode: shouldAnimationBeDisabled, + }) + } + // scroll to the top when the search input changes reaction( () => this.searchInput, @@ -284,6 +296,13 @@ export class EntitySelector extends React.Component<{ ) } + @computed private get isAnimationDisabledInSingleMode(): boolean { + return ( + this.manager.entitySelectorState.isAnimationDisabledInSingleMode ?? + false + ) + } + @computed private get table(): OwidTable { return this.manager.tableForSelection } @@ -555,6 +574,11 @@ export class EntitySelector extends React.Component<{ ) } + @action.bound onTitleClick(): void { + if (this.scrollableContainer.current) + this.scrollableContainer.current.scrollTop = 0 + } + @action.bound onSearchKeyDown(e: React.KeyboardEvent): void { const { searchResults } = this if (e.key === "Enter" && searchResults && searchResults.length > 0) { @@ -568,7 +592,6 @@ export class EntitySelector extends React.Component<{ this.selectionArray.toggleSelection(entityName) } else { this.selectionArray.setSelectedEntities([entityName]) - if (this.props.onDismiss) this.props.onDismiss() } this.set({ mostRecentlySelectedEntityName: entityName }) @@ -709,7 +732,9 @@ export class EntitySelector extends React.Component<{ private renderSortBar(): JSX.Element { return (
- Sort by + + Sort by + + {sortedAvailableEntities.map((entity) => ( +
  • + this.onChange(entity.name)} + local={entity.local} + /> +
    • + ))} + + ) + } + return ( -
      - {this.sortedAvailableEntities.map((entity) => ( -
    • - this.onChange(entity.name)} - local={entity.local} - /> -
      • - ))} -
    + +
      + {selected.map((entity, entityIndex) => ( + + this.onChange(entity.name)} + local={entity.local} + /> + + ))} + {unselected.map((entity, entityIndex) => ( + + this.onChange(entity.name)} + local={entity.local} + /> + + ))} +
    +     ) } @@ -831,33 +912,24 @@ export class EntitySelector extends React.Component<{ )}
      - {selected.map((entity) => ( - ( + -
    • - - this.onChange(entity.name) - } - local={entity.local} - /> -
      • -       + this.onChange(entity.name)} + local={entity.local} + /> + ))}
    @@ -872,33 +944,24 @@ export class EntitySelector extends React.Component<{ )}
      - {unselected.map((entity) => ( - ( + -
    • - - this.onChange(entity.name) - } - local={entity.local} - /> -
      • -       + this.onChange(entity.name)} + local={entity.local} + /> + ))}
    @@ -907,40 +970,23 @@ export class EntitySelector extends React.Component<{ } private renderFooter(): JSX.Element { - const { numSelectedEntities, selectedEntityNames } = this.selectionArray + const { numSelectedEntities } = this.selectionArray const { partitionedVisibleEntities: visibleEntities } = this return (
    - {this.isMultiMode ? ( - <> -
    - {numSelectedEntities > 0 - ? `${numSelectedEntities} selected` - : "Empty selection"} -
    - - - ) : ( -
    - {selectedEntityNames.length > 0 ? ( - <> - Current selection: - - {selectedEntityNames[0]} - - - ) : ( - "Empty selection" - )} -
    - )} +
    + {numSelectedEntities > 0 + ? `${numSelectedEntities} selected` + : "Empty selection"} +
    +
    ) } @@ -948,7 +994,11 @@ export class EntitySelector extends React.Component<{ render(): JSX.Element { return (
    - + {this.renderSearchBar()} @@ -957,7 +1007,10 @@ export class EntitySelector extends React.Component<{ this.sortOptions.length > 1 && this.renderSortBar()} -
    +
    {this.searchInput ? this.renderSearchResults() : this.isMultiMode @@ -966,7 +1019,7 @@ export class EntitySelector extends React.Component<{
    - {this.renderFooter()} + {this.isMultiMode && this.renderFooter()}
    ) } @@ -982,7 +1035,7 @@ function SelectableEntity({ onChange, local, }: { - name: React.ReactNode + name: string checked: boolean type: "checkbox" | "radio" bar?: BarConfig @@ -994,16 +1047,20 @@ function SelectableEntity({ radio: RadioButton, }[type] + const nameWords = name.split(" ") const label = local ? ( - {name} - - - + {nameWords.slice(0, -1).join(" ")}{" "} + + {nameWords[nameWords.length - 1]} + + + + ) : ( name @@ -1011,7 +1068,12 @@ function SelectableEntity({ return (
    e.currentTarget.classList.add("hovered")} + onMouseLeave={(e) => e.currentTarget.classList.remove("hovered")} // make the whole row clickable onClickCapture={(e) => { e.stopPropagation() @@ -1032,6 +1094,39 @@ function SelectableEntity({ ) } +function FlippedListItem({ + flipId, + mostRecentlySelectedFlipId, + index = 0, + children, +}: { + flipId: string + mostRecentlySelectedFlipId?: string + index?: number + children: React.ReactNode +}) { + return ( + +
  • + {children} +
    • +     + ) +} + function makeColumnLabel(column: CoreColumn): string { return column.titlePublicOrDisplayName.title } diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss index 257b8793194..45caa152565 100644 --- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss +++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss @@ -96,12 +96,12 @@ } .title { - font-size: 1rem; + font-size: 16px; } p { margin: 8px 0 0; - font-size: 0.875rem; + font-size: 14px; } a { @@ -125,6 +125,18 @@ } } +&.GrapherComponentSmall .download-modal-content { + .grouped-menu-item h4, + .grouped-menu-callout h4 { + font-size: 14px; + } + + .grouped-menu-item p, + .grouped-menu-callout p { + font-size: 13px; + } +} + &.GrapherComponentNarrow .download-modal-content { .grouped-menu-icon img { display: none; diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss index 63384e330d1..91be08c1772 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss +++ b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss @@ -8,6 +8,7 @@ &__title { @include h2-semibold; + font-size: 20px; color: $dark-text; margin-top: 0; margin-bottom: 16px; @@ -16,7 +17,7 @@ &__content, &__content ul { @include body-2-regular; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; color: $dark-text; margin: 0; diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss index 97e1b09bd22..f702cf84d80 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss +++ b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss @@ -7,6 +7,7 @@ .key-data { @include label-2-medium; + font-size: 13px; &__title { margin-bottom: 4px; diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss index 98d08a2b303..a6e100e5d5b 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss +++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss @@ -15,24 +15,36 @@ flex-shrink: 0; } - .scrollable { - max-width: $max-content-width; - margin: 0 auto; - width: 100%; + .overlay-header { + padding-bottom: 6px; + } + .scrollable { flex: 1 1 auto; overflow-y: auto; + padding: 0 var(--modal-padding) var(--modal-padding); &--pad-top { padding-top: var(--modal-padding); } + } + + .scrollable .centered { + max-width: $max-content-width; + margin: 0 auto; + width: 100%; + height: 100%; // needed for the loading indicator position: relative; min-height: 45px; } + .scrollable .centered > .source { + padding-bottom: var(--modal-padding); + } + .close-button--top-right { position: absolute; top: 0; @@ -43,28 +55,60 @@ .note-multiple-indicators { margin-top: 0; color: $light-text; - font-size: 0.875rem; + font-size: 14px; font-style: italic; font-weight: 500; } + .Tabs__tab { + font-size: $tab-font-size; + padding: 8px $tab-padding; + margin-right: $tab-gap; + } + .source { color: $light-text; + --indicator-sources-description-heading: #{$dark-text}; + --indicator-sources-key-data-title: #{$dark-text}; + --indicator-sources-content: #{$light-text}; + + --indicator-processing-content-size: 14px; + --indicator-processing-background: #{$gray-10}; + --indicator-processing-title: #{$dark-text}; + --indicator-processing-content: #{$light-text}; + + --data-processing-content-size: 14px; + --data-processing-content: #{$light-text}; + + --expandable-toggle-border: #{$border}; + --expandable-toggle-title: #{$dark-text}; + --expandable-toggle-content: #{$light-text}; + --expandable-toggle-button: #{$dark-text}; + --expandable-toggle-button-hover: #{$light-text}; + --expandable-toggle-title-size: 16px; + --expandable-toggle-content-size: 14px; + + --non-expandable-title: #{$dark-text}; + --non-expandable-border: #{$border}; + --non-expandable-title-size: 16px; + --non-expandable-content-size: 14px; + h2 { @include h1-semibold; + font-size: 24px; margin-top: 0; margin-bottom: 8px; - margin-right: 8px; color: $dark-text; @include sm-up { - font-size: 1.5rem; + font-size: 24px; } } .description-below-title { @include body-3-medium; + font-size: 14px; color: $dark-text; p { @@ -83,9 +127,13 @@ } } + .title { + margin-right: 8px; + } + .title-fragments { color: $light-text; - font-size: 1.25rem; + font-size: 20px; } a { @@ -103,6 +151,7 @@ .heading { @include h2-semibold; + font-size: 20px; margin-top: 32px; margin-bottom: 16px; color: $dark-text; @@ -113,10 +162,6 @@ } .indicator-sources { - --indicator-sources-description-heading: #{$dark-text}; - --indicator-sources-key-data-title: #{$dark-text}; - --indicator-sources-content: #{$light-text}; - .ExpandableToggle:first-of-type, .NonExpandable:first-of-type { border-top: none; @@ -134,32 +179,17 @@ } .data-processing { - --data-processing-content: #{$light-text}; - margin-top: 0; margin-bottom: 16px; } .indicator-processing-callout { - --indicator-processing-background: #{$gray-10}; - --indicator-processing-title: #{$dark-text}; - --indicator-processing-content: #{$light-text}; - margin-left: 0; margin-right: 0; - } - .ExpandableToggle { - --expandable-toggle-border: #{$border}; - --expandable-toggle-title: #{$dark-text}; - --expandable-toggle-content: #{$light-text}; - --expandable-toggle-button: #{$dark-text}; - --expandable-toggle-button-hover: #{$light-text}; - } - - .NonExpandable { - --non-expandable-title: #{$dark-text}; - --non-expandable-border: #{$border}; + &__title { + font-size: 12px; + } } .ExpandableToggle__content { @@ -177,19 +207,13 @@ } } - .Tabs__tab { - font-size: $tab-font-size; - padding: 8px $tab-padding; - margin-right: $tab-gap; - } - .data-citation__item:not(:first-of-type) { margin-top: 16px; } .citation__paragraph { color: $light-text; - font-size: 0.875rem; + font-size: 14px; } .citation__type { @@ -197,11 +221,12 @@ line-height: 1.5; color: $dark-text; font-weight: 500; - font-size: 0.875rem; + font-size: 14px; } .indicator-processing .indicator-processing__link { @include body-3-medium; + font-size: 14px; display: inline-block; height: auto; padding: 0; @@ -220,20 +245,17 @@ &.GrapherComponentSmall .sources-modal-content { .source { - --text-small: 0.8125rem; + --text-small: 13px; --indicator-processing-content-size: var(--text-small); --data-processing-content-size: var(--text-small); - --expandable-toggle-title-size: 0.875rem; + --expandable-toggle-title-size: 14px; --expandable-toggle-content-size: var(--text-small); - --non-expandable-title-size: 0.875rem; + --non-expandable-title-size: 14px; --non-expandable-content-size: var(--text-small); h2 { - font-size: 1.25rem; - @include sm-up { - font-size: 1.25rem; - } + font-size: 20px; } h2 + p { @@ -241,7 +263,7 @@ } .heading { - font-size: 1.125rem; + font-size: 18px; } .indicator-descriptions .key-info { diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx index d4c034cff3b..cee39f3e811 100644 --- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx @@ -278,11 +278,13 @@ export class SourcesModal extends React.Component< "scrollable--pad-top": !this.showStickyHeader, })} > - {this.manager.isReady ? ( - this.renderModalContent() - ) : ( - - )} +
    + {this.manager.isReady ? ( + this.renderModalContent() + ) : ( + + )} +
    @@ -400,7 +402,7 @@ export class Source extends React.Component<{ protected renderTitle(): JSX.Element { return (

    - {this.title.title}{" "} + {this.title.title}{" "} {(this.title.attributionShort || this.title.titleVariant) && ( <> diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss index 7de5ab99a67..a1a860839a2 100644 --- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss +++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss @@ -15,7 +15,7 @@ left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.1); z-index: $zindex-controls-backdrop; } } diff --git a/packages/@ourworldindata/grapher/src/tabs/Tabs.scss b/packages/@ourworldindata/grapher/src/tabs/Tabs.scss index a97ffa470a7..b4deb7f3f7e 100644 --- a/packages/@ourworldindata/grapher/src/tabs/Tabs.scss +++ b/packages/@ourworldindata/grapher/src/tabs/Tabs.scss @@ -13,14 +13,13 @@ } &__tab { + @include grapher_label-2-medium; + display: inline-block; margin: 0 8px 8px 0; padding: 8px 16px; border: 1px solid $blue-10; background: #fff; color: $light-text; - font-size: 0.8125rem; - font-weight: 500; - letter-spacing: 0.01em; white-space: nowrap; &:hover {