diff --git a/.eslintrc.js b/.eslintrc.js index c013bcf0c..d19656888 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -58,6 +58,11 @@ module.exports = { // https://github.com/sveltejs/eslint-plugin-svelte3/issues/41#issuecomment-572503966 "no-multiple-empty-lines": ["error", { max: 2, maxBOF: 2, maxEOF: 0 }], }, + + // Eslint only allows regular CSS inside
- + <PageTitle text={'Schema'} /> <FilterInput onChangeText={filterTextChanged} filterText={searchText} /> <div class="schema-browser"> diff --git a/src/components/icons/InfoIcon.svelte b/src/components/icons/InfoIcon.svelte index 72fee82c6..fd48337e9 100644 --- a/src/components/icons/InfoIcon.svelte +++ b/src/components/icons/InfoIcon.svelte @@ -1,8 +1,8 @@ <style> svg { display: inline-block; - width: $spacing-md; - color: $color-dark-gray-50; + width: 15px; + color: $color-light-gray-50; } </style> diff --git a/src/components/tabs/Tab.svelte b/src/components/tabs/Tab.svelte index a401ac00a..74517afc1 100644 --- a/src/components/tabs/Tab.svelte +++ b/src/components/tabs/Tab.svelte @@ -11,13 +11,13 @@ <style> .title { + @include text-title-3xs; border-top-width: 0px; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; padding: 1rem; background-color: $color-light-gray-10; display: inline-block; - @include text-title-3xs; &.active { background-color: $color-light-gray-40; } diff --git a/src/components/tabs/TabContent.svelte b/src/components/tabs/TabContent.svelte index a9914077e..deeefc9fb 100644 --- a/src/components/tabs/TabContent.svelte +++ b/src/components/tabs/TabContent.svelte @@ -5,7 +5,7 @@ const activeTab = getContext("activeTab"); </script> -<style lang="scss"> +<style> .box { padding: 2rem; border: 1px solid $color-light-gray-40; diff --git a/src/pages/AppDetail.svelte b/src/pages/AppDetail.svelte index ec2075cdf..72ca0c84b 100644 --- a/src/pages/AppDetail.svelte +++ b/src/pages/AppDetail.svelte @@ -7,7 +7,7 @@ import NotFound from "../components/NotFound.svelte"; import Pill from "../components/Pill.svelte"; import { TabGroup, Tab, TabContent } from "../components/tabs"; - import Title from "../components/Title.svelte"; + import PageTitle from "../components/PageTitle.svelte"; export let params; @@ -29,7 +29,7 @@ </style> {#await appDataPromise then app} - <Title text={params.app} /> + <PageTitle text={params.app} /> {#if app.deprecated} <Pill message="Deprecated" bgColor="#4a5568" /> @@ -37,7 +37,7 @@ <p>{app.description}</p> <table class="mzp-u-data-table"> <tr> - <td>Source Code URL</td> + <td>Source Code</td> <td><a href={app.url}>{app.url}</a></td> </tr> <tr> diff --git a/src/pages/AppList.svelte b/src/pages/AppList.svelte index ba589aade..b0d8d508f 100644 --- a/src/pages/AppList.svelte +++ b/src/pages/AppList.svelte @@ -2,7 +2,7 @@ import { onMount } from "svelte"; import FilterInput from "../components/FilterInput.svelte"; import Pill from "../components/Pill.svelte"; - import Title from "../components/Title.svelte"; + import PageTitle from "../components/PageTitle.svelte"; import { fetchJSON } from "../state/api"; const URL = "data/apps.json"; @@ -36,7 +36,7 @@ } </style> -<Title text="Applications" /> +<PageTitle text="Applications" /> <div class="deprecation-checkbox"> <label> diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte index 9721e0032..4ac5f398d 100644 --- a/src/pages/MetricDetail.svelte +++ b/src/pages/MetricDetail.svelte @@ -5,7 +5,7 @@ import NotFound from "../components/NotFound.svelte"; import HelpHoverable from "../components/HelpHoverable.svelte"; import helpText from "../data/help"; - import Title from "../components/Title.svelte"; + import PageTitle from "../components/PageTitle.svelte"; export let params; let metricName = params.metric.replaceAll("-", "."); @@ -66,7 +66,7 @@ </style> {#await metricDataPromise then metric} - <Title text={metric.name} /> + <PageTitle text={metric.name} /> <p> <Markdown text={metric.description} /> </p> diff --git a/src/pages/PingDetail.svelte b/src/pages/PingDetail.svelte index 1ec941265..f02e25cfc 100644 --- a/src/pages/PingDetail.svelte +++ b/src/pages/PingDetail.svelte @@ -5,7 +5,7 @@ import ItemList from "../components/ItemList.svelte"; import NotFound from "../components/NotFound.svelte"; import Markdown from "../components/Markdown.svelte"; - import Title from "../components/Title.svelte"; + import PageTitle from "../components/PageTitle.svelte"; export let params; const pingDataPromise = getPingData(params.app, params.ping); @@ -26,7 +26,7 @@ </style> {#await pingDataPromise then ping} - <Title text={ping.name} /> + <PageTitle text={ping.name} /> <table class="mzp-u-data-table"> <tr> <td>Description</td> diff --git a/src/pages/TableDetail.svelte b/src/pages/TableDetail.svelte index 241b40494..4dcead4f5 100644 --- a/src/pages/TableDetail.svelte +++ b/src/pages/TableDetail.svelte @@ -4,7 +4,7 @@ import { fetchJSON, getTableData } from "../state/api"; import NotFound from "../components/NotFound.svelte"; - import Title from "../components/Title.svelte"; + import PageTitle from "../components/PageTitle.svelte"; export let params; export let queryString; @@ -38,7 +38,7 @@ </style> {#await pingDataPromise then data} - <Title text={`Table <code>${data.table.name}</code> for ${params.app}`} /> + <PageTitle text={`Table <code>${data.table.name}</code> for ${params.app}`} /> <table class="mzp-u-data-table"> <tr> <td>BigQuery Definition</td> diff --git a/stories/Pagination.svelte b/stories/Pagination.svelte index 83a68d4bc..f747bc937 100644 --- a/stories/Pagination.svelte +++ b/stories/Pagination.svelte @@ -65,8 +65,8 @@ display: flex; justify-content: center; .page { - height: 3rem; @include text-body-md; + height: 3rem; font-weight: bold; margin: $spacing-sm; cursor: pointer;