From 9b4058890bb8e0e59d6abc577b6322b34b632555 Mon Sep 17 00:00:00 2001 From: majakomel Date: Wed, 3 Jul 2024 23:21:54 -0400 Subject: [PATCH] Update more styles --- components/Badge.js | 4 +- components/BlockText.js | 2 +- components/CallToActionBox.js | 8 +- components/Chart.js | 14 +- components/CountryBox.js | 5 +- components/DateRangePicker.js | 8 +- components/Footer.js | 2 +- components/FormattedMarkdown.js | 15 ++- components/Layout.js | 42 +++--- components/MATChart.js | 5 +- components/NavBar.js | 122 +++++++++--------- components/NotFound.js | 2 +- components/SharedStyledComponents.js | 13 +- components/SocialButtons.js | 4 +- components/ThirdPartyDataChart.js | 12 +- components/VictoryTheme.js | 19 ++- components/VirtualizedGrid.js | 8 +- components/aggregation/Debug.js | 4 +- components/aggregation/mat/CustomTooltip.js | 4 +- components/aggregation/mat/Filters.js | 4 +- components/aggregation/mat/FunnelChart.js | 12 +- components/aggregation/mat/Help.js | 2 +- components/aggregation/mat/NoCharts.js | 2 +- components/aggregation/mat/colorMap.js | 12 +- components/as/Calendar.js | 13 +- components/colors.js | 12 +- components/country/Overview.js | 2 +- components/country/OverviewCharts.js | 10 +- components/country/PageNavMenu.js | 4 +- components/country/SectionHeader.js | 4 +- components/country/Tooltip.js | 6 +- components/country/boxes.js | 4 +- components/findings/FindingDisplay.js | 6 +- components/findings/Form.js | 2 +- components/landing/ChartLoader.js | 6 +- components/landing/HighlightBox.js | 7 +- components/landing/HighlightsSection.js | 16 +-- components/landing/Stats.js | 22 ++-- components/measurement/CommonDetails.js | 60 ++++----- components/measurement/CommonSummary.js | 2 +- components/measurement/DetailsBox.js | 6 +- components/measurement/DetailsHeader.js | 2 +- components/measurement/FeedbackBox.js | 8 +- components/measurement/nettests/Tor.js | 10 +- .../measurement/nettests/WebConnectivity.js | 18 +-- components/search/FilterSidebar.js | 3 +- components/search/Loader.js | 6 +- components/search/ResultsList.js | 55 ++++---- components/test-info.js | 18 +-- components/vendor/SpinLoader.js | 4 +- package.json | 2 +- pages/404.js | 2 +- pages/as/[probe_asn].js | 6 +- pages/chart/circumvention.js | 2 +- pages/chart/mat.js | 2 +- pages/countries.js | 2 +- pages/domain/[domain].js | 4 +- pages/findings/create.js | 6 +- pages/findings/dashboard.js | 24 ++-- pages/findings/edit/[id].js | 6 +- pages/findings/index.js | 4 +- pages/index.js | 55 ++++---- pages/login.js | 8 +- pages/m/[measurement_uid].js | 14 +- pages/search.js | 6 +- styles/globals.css | 43 +++++- tailwind.config.js | 72 +---------- yarn.lock | 10 +- 68 files changed, 430 insertions(+), 469 deletions(-) diff --git a/components/Badge.js b/components/Badge.js index 84d5654ab..2366e2930 100644 --- a/components/Badge.js +++ b/components/Badge.js @@ -15,7 +15,7 @@ import { getTestMetadata } from './utils' export const Badge = ({ className, ...props }) => (
{ } return ( - +
diff --git a/components/BlockText.js b/components/BlockText.js index 46bec1f69..bccf1d69b 100644 --- a/components/BlockText.js +++ b/components/BlockText.js @@ -1,6 +1,6 @@ const BlockText = ({ className, ...props }) => (
) diff --git a/components/CallToActionBox.js b/components/CallToActionBox.js index 83070ec03..658d45b38 100644 --- a/components/CallToActionBox.js +++ b/components/CallToActionBox.js @@ -1,21 +1,21 @@ -import NLink from 'next/link' +import Link from 'next/link' import { Button } from 'ooni-components' import { FormattedMessage } from 'react-intl' const CallToActionBox = ({ title, text }) => { return ( -
+

{title}

{text}
- + - +
diff --git a/components/Chart.js b/components/Chart.js index d193034d3..90cc7a204 100644 --- a/components/Chart.js +++ b/components/Chart.js @@ -3,7 +3,7 @@ import GridChart, { } from 'components/aggregation/mat/GridChart' import { MATContextProvider } from 'components/aggregation/mat/MATContext' import { DetailsBox } from 'components/measurement/DetailsBox' -import NLink from 'next/link' +import Link from 'next/link' import { memo, useEffect, useMemo } from 'react' import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md' import { FormattedMessage, useIntl } from 'react-intl' @@ -26,28 +26,28 @@ export const MATLink = ({ query }) => { return (
{showMATButton && ( - + {intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '} - + )}
- + {intl.formatMessage({ id: 'MAT.Charts.DownloadJSONData' })}{' '} - - + + {intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '} - +
) diff --git a/components/CountryBox.js b/components/CountryBox.js index c8104cddf..88b716497 100644 --- a/components/CountryBox.js +++ b/components/CountryBox.js @@ -1,6 +1,5 @@ import Flag from 'components/Flag' import { GridBox } from 'components/VirtualizedGrid' -import { Text } from 'ooni-components' const CountryList = ({ countries, itemsPerRow = 6 }) => { return ( @@ -17,9 +16,7 @@ const CountryList = ({ countries, itemsPerRow = 6 }) => {
- - {c.localisedName} - +
{c.localisedName}
} count={c.count} diff --git a/components/DateRangePicker.js b/components/DateRangePicker.js index a5b834db0..4dcd2b7e6 100644 --- a/components/DateRangePicker.js +++ b/components/DateRangePicker.js @@ -1,5 +1,5 @@ import { addDays, parse, sub } from 'date-fns' -import { Button } from 'ooni-components' +import { Button, colors } from 'ooni-components' import { useMemo, useState } from 'react' import { DayPicker } from 'react-day-picker' import 'react-day-picker/dist/style.css' @@ -29,7 +29,7 @@ z-index: 99999; position: absolute; max-width: 300px; background-color: #ffffff; -border: 1px solid ${(props) => props.theme.colors.gray2}; +border: 1px solid ${colors.gray['200']}; .rdp-cell { padding: 2px 0; @@ -39,7 +39,7 @@ border: 1px solid ${(props) => props.theme.colors.gray2}; .rdp-day_selected:focus:not([disabled]), .rdp-day_selected:active:not([disabled]), .rdp-day_selected:hover:not([disabled]) { - background-color: ${(props) => props.theme.colors.blue5}; + background-color: ${colors.blue['500']}; } ` @@ -149,7 +149,7 @@ const DateRangePicker = ({ const rangesList = ranges.map((range) => (
diff --git a/components/SharedStyledComponents.js b/components/SharedStyledComponents.js index b39d8ff47..421e69376 100644 --- a/components/SharedStyledComponents.js +++ b/components/SharedStyledComponents.js @@ -1,4 +1,4 @@ -import { Button } from 'ooni-components' +import { Button, colors } from 'ooni-components' import styled from 'styled-components' export const StyledSticky = styled.div` @@ -6,7 +6,7 @@ position: sticky; top: 0; background: white; z-index: 99; -border-bottom: 1px solid ${(props) => props.theme.colors.gray3}; +border-bottom: 1px solid ${colors.gray['300']}; ` export const StyledStickyNavBar = ({ ...props }) => ( @@ -15,11 +15,10 @@ export const StyledStickyNavBar = ({ ...props }) => ( export const StyledStickySubMenu = ({ ...props }) => (
) -// border-bottom: 1px solid ${props => props.theme.colors.gray3}; export const StickySubMenu = ({ title, children }) => { return ( @@ -35,10 +34,10 @@ export const StickySubMenu = ({ title, children }) => { // port the design to ooni-components export const StyledHollowButton = styled(Button)` &:hover { - border-color: ${(props) => props.theme.colors.blue9}; - color: ${(props) => props.theme.colors.blue9}; + border-color: ${colors.blue['900']}; + color: ${colors.blue['900']}; &:hover:enabled { - border-color: ${(props) => props.theme.colors.blue9}; + border-color: ${colors.blue['900']}; } } ` diff --git a/components/SocialButtons.js b/components/SocialButtons.js index ec1003b11..d33063736 100644 --- a/components/SocialButtons.js +++ b/components/SocialButtons.js @@ -14,7 +14,7 @@ const SocialButtons = ({ url }) => { { 'facebook-link': (string) => ( { ), 'twitter-link': (string) => ( { @@ -79,7 +79,7 @@ const ThirdPartyDataChart = ({ since, until, country, asn, ...props }) => { id: intl.formatMessage({ id: 'ThirdPartyChart.Label.cloudflare', }), - color: theme.colors.yellow5, + color: colors.yellow['500'], data: cloudflareData.value.data, }, ] diff --git a/components/VictoryTheme.js b/components/VictoryTheme.js index cb508f997..14c674b2c 100644 --- a/components/VictoryTheme.js +++ b/components/VictoryTheme.js @@ -1,19 +1,18 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import { firaSans } from '../pages/_app' -const colors = theme.colors // Color scale const colorScale = [ - colors.yellow2, - colors.lime3, - colors.fuschia4, - colors.blue5, - colors.grey6, - colors.grey7, - colors.green8, + colors.yellow['200'], + colors.lime['300'], + colors.fuchsia['400'], + colors.blue['500'], + colors.gray['600'], + colors.gray['700'], + colors.green['800'], ] -const primaryColor = colors.base +const primaryColor = colors.blue['500'] // Typography export const sansSerif = `${firaSans.style.fontFamily}, sans-serif` diff --git a/components/VirtualizedGrid.js b/components/VirtualizedGrid.js index a1a74fec5..f35c305ba 100644 --- a/components/VirtualizedGrid.js +++ b/components/VirtualizedGrid.js @@ -13,8 +13,8 @@ export const GridBox = ({ return ( -
-
+
+
{title}
@@ -26,7 +26,7 @@ export const GridBox = ({ id="Network.Summary.Country.Measurements" values={{ measurementsTotal: ( - {count} + {count} ), }} /> @@ -38,7 +38,7 @@ export const GridBox = ({ <> {Object.entries(multiCount).map(([key, value]) => (
- {value} + {value} diff --git a/components/aggregation/Debug.js b/components/aggregation/Debug.js index c662102cd..65e23e52d 100644 --- a/components/aggregation/Debug.js +++ b/components/aggregation/Debug.js @@ -6,7 +6,7 @@ import { useDebugContext } from './DebugContext' import { paramsToQuery, queryToParams } from './website/queryUtils' const Bold = ({ children }) => ( - + Childre {Children.toArray(children)} @@ -65,7 +65,7 @@ export const Debug = ({ query, children, ...rest }) => { const apiQuery = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/aggregation?${paramsToQuery(params)}` return ( -
+
{ { Header: intl.formatMessage({ id: `MAT.Table.Header.${yAxis}` }), Cell: ({ value, row }) => ( - {value} +
{value}
), id: 'yAxisLabel', accessor: 'rowLabel', diff --git a/components/aggregation/mat/FunnelChart.js b/components/aggregation/mat/FunnelChart.js index f5db20633..dde60f509 100644 --- a/components/aggregation/mat/FunnelChart.js +++ b/components/aggregation/mat/FunnelChart.js @@ -1,11 +1,11 @@ import { ResponsiveFunnel } from '@nivo/funnel' -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' const stateColors = { - ok: theme.colors.green8, - failure: theme.colors.gray6, - anomaly: theme.colors.yellow9, - confirmed: theme.colors.red7, + ok: colors.green['800'], + failure: colors.gray['600'], + anomaly: colors.yellow['900'], + confirmed: colors.red['700'], } const reshapeData = (data) => { @@ -23,7 +23,7 @@ export const FunnelChart = ({ data }) => ( data={reshapeData(data)} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} valueFormat=">-.2s" - colors={(d) => stateColors[d.id.split('_')[0]] ?? theme.colors.blue5} + colors={(d) => stateColors[d.id.split('_')[0]] ?? colors.blue['500']} borderWidth={20} labelColor={{ from: 'color', modifiers: [['darker', 3]] }} beforeSeparatorLength={100} diff --git a/components/aggregation/mat/Help.js b/components/aggregation/mat/Help.js index ee55f5eda..43ebc6876 100644 --- a/components/aggregation/mat/Help.js +++ b/components/aggregation/mat/Help.js @@ -21,7 +21,7 @@ const Help = () => { {[...getCategoryCodesMap().values()].map( ({ code, name, description }, i) => (
diff --git a/components/aggregation/mat/NoCharts.js b/components/aggregation/mat/NoCharts.js index 50c0f6a3a..995dfc61a 100644 --- a/components/aggregation/mat/NoCharts.js +++ b/components/aggregation/mat/NoCharts.js @@ -6,7 +6,7 @@ export const NoCharts = ({ message }) => {
-
+
{message && (
diff --git a/components/aggregation/mat/colorMap.js b/components/aggregation/mat/colorMap.js index 387453a27..eba8c826e 100644 --- a/components/aggregation/mat/colorMap.js +++ b/components/aggregation/mat/colorMap.js @@ -1,9 +1,9 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' export const colorMap = { - confirmed_count: theme.colors.red7, - anomaly_count: theme.colors.yellow5, - failure_count: theme.colors.gray4, - ok_count: theme.colors.green5, - measurement_count: theme.colors.blue5, + confirmed_count: colors.red['700'], + anomaly_count: colors.yellow['500'], + failure_count: colors.gray['400'], + ok_count: colors.green['500'], + measurement_count: colors.blue['500'], } diff --git a/components/as/Calendar.js b/components/as/Calendar.js index 2826db4cc..4b2683917 100644 --- a/components/as/Calendar.js +++ b/components/as/Calendar.js @@ -1,6 +1,6 @@ import { ResponsiveCalendar } from '@nivo/calendar' import { add, compareDesc, startOfToday, startOfYear } from 'date-fns' -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import { memo, useState } from 'react' import styled from 'styled-components' import { getRange } from 'utils' @@ -8,11 +8,16 @@ import { getRange } from 'utils' const StyledCalendar = styled.div` height: 180px; ` -const { colors } = theme -const chartColors = [colors.blue2, colors.blue4, colors.blue5, colors.blue7] + +const chartColors = [ + colors.blue['200'], + colors.blue['400'], + colors.blue['500'], + colors.blue['700'], +] const findColor = (number) => { - if (number === 0) return colors.gray1 + if (number === 0) return colors.gray['100'] if (number <= 50) return chartColors[0] if (number <= 500) return chartColors[1] if (number <= 5000) return chartColors[2] diff --git a/components/colors.js b/components/colors.js index 653fee7c5..f39c50196 100644 --- a/components/colors.js +++ b/components/colors.js @@ -1,7 +1,7 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' -export const colorNormal = theme.colors.green7 -export const colorError = theme.colors.gray4 -export const colorConfirmed = theme.colors.red8 -export const colorAnomaly = theme.colors.yellow8 -export const colorEmpty = theme.colors.gray3 +export const colorNormal = colors.green['700'] +export const colorError = colors.gray['400'] +export const colorConfirmed = colors.red['800'] +export const colorAnomaly = colors.yellow['800'] +export const colorEmpty = colors.gray['300'] diff --git a/components/country/Overview.js b/components/country/Overview.js index 7a9015977..e0b48f871 100644 --- a/components/country/Overview.js +++ b/components/country/Overview.js @@ -11,7 +11,7 @@ const ooniBlogBaseURL = 'https://ooni.org' const FeaturedArticle = ({ link, title }) => (
( style={{ backgroundColor: active ? testGroups[testGroup].color - : theme.colors.gray4, + : colors.gray['400'], }} /> -
+
{' '} {testGroups[testGroup].name}{' '}
@@ -149,7 +149,7 @@ class TestsByGroup extends Component { text="No Data Available" textAnchor="middle" style={{ - fill: theme.colors.gray6, + fill: colors.gray['600'], }} /> @@ -271,7 +271,7 @@ class TestsByGroup extends Component { labelComponent={} style={{ data: { - stroke: theme.colors.gray7, + stroke: colors.gray['700'], }, }} /> diff --git a/components/country/PageNavMenu.js b/components/country/PageNavMenu.js index 9233ff70a..b433b66bb 100644 --- a/components/country/PageNavMenu.js +++ b/components/country/PageNavMenu.js @@ -10,7 +10,7 @@ const HideInLargeScreens = ({ children }) => ( const PageNavItem = ({ link, children }) => ( @@ -24,7 +24,7 @@ const PageNavMenu = ({ countryCode }) => { {/* Show a trigger to open and close the nav menu, but hide it on desktops */} setOpen(!isOpen)} diff --git a/components/country/SectionHeader.js b/components/country/SectionHeader.js index 8f10aed9a..d70a0befe 100644 --- a/components/country/SectionHeader.js +++ b/components/country/SectionHeader.js @@ -1,11 +1,11 @@ const SectionHeader = ({ children }) => ( -
+
{children}
) SectionHeader.Title = ({ children, ...props }) => ( - + {children} ) diff --git a/components/country/Tooltip.js b/components/country/Tooltip.js index c7bdfbcad..5ce0eacef 100644 --- a/components/country/Tooltip.js +++ b/components/country/Tooltip.js @@ -1,6 +1,6 @@ import { VictoryLabel, VictoryTooltip } from 'victory' -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import { firaSans } from '../../pages/_app' const Tooltip = (props) => ( @@ -9,7 +9,7 @@ const Tooltip = (props) => ( labelComponent={ ( } flyoutStyle={{ strokeWidth: 0, - fill: theme.colors.gray8, + fill: colors.gray['800'], padding: 2, pointerEvents: 'none', }} diff --git a/components/country/boxes.js b/components/country/boxes.js index db30439de..61fe81371 100644 --- a/components/country/boxes.js +++ b/components/country/boxes.js @@ -1,11 +1,11 @@ import PropTypes from 'prop-types' export const SimpleBox = ({ children }) => ( -
{children}
+
{children}
) export const BoxWithTitle = ({ title, children }) => ( -
+
{title}
{children} diff --git a/components/findings/FindingDisplay.js b/components/findings/FindingDisplay.js index 2dc1b5389..aea01ef9c 100644 --- a/components/findings/FindingDisplay.js +++ b/components/findings/FindingDisplay.js @@ -35,7 +35,7 @@ const FindingDisplay = ({ incident }) => { return ( <> -

{incident?.title}

+

{incident?.title}

{!!incident?.CCs?.length && (
@@ -44,7 +44,7 @@ const FindingDisplay = ({ incident }) => {
)} -
+
{incident?.start_time && formatLongDate(incident?.start_time, intl.locale)}{' '} -{' '} @@ -61,7 +61,7 @@ const FindingDisplay = ({ incident }) => { ))}
)} -
+
{intl.formatMessage( { id: 'Findings.Display.CreatedByOn' }, { reportedBy, formattedDate: formattedCreationDate }, diff --git a/components/findings/Form.js b/components/findings/Form.js index bc5757851..e878cb4bf 100644 --- a/components/findings/Form.js +++ b/components/findings/Form.js @@ -414,7 +414,7 @@ const Form = ({ defaultValues, onSubmit }) => { {intl.formatMessage({ id: 'General.Submit' })} {submitError && ( -
+
{intl.formatMessage({ id: 'Measurement.Feedback.Failure' })}
Error: {submitError} diff --git a/components/landing/ChartLoader.js b/components/landing/ChartLoader.js index 19f5a0923..2934095c2 100644 --- a/components/landing/ChartLoader.js +++ b/components/landing/ChartLoader.js @@ -1,4 +1,4 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import ContentLoader from 'react-content-loader' export const ChartLoader = () => ( @@ -6,8 +6,8 @@ export const ChartLoader = () => ( height={200} width={450} speed={1} - primarycolor={theme.colors.gray3} - secondarycolor={theme.colors.gray5} + primarycolor={colors.gray['300']} + secondarycolor={colors.gray['500']} > diff --git a/components/landing/HighlightBox.js b/components/landing/HighlightBox.js index 4b11ce6b2..4c3c3bcf0 100644 --- a/components/landing/HighlightBox.js +++ b/components/landing/HighlightBox.js @@ -1,5 +1,4 @@ import Markdown from 'markdown-to-jsx' -import { Heading } from 'ooni-components' import PropTypes from 'prop-types' import { useIntl } from 'react-intl' import { getLocalisedRegionName } from 'utils/i18nCountries' @@ -10,14 +9,14 @@ const HighlightBox = ({ countryCode, title, text, dates, footer }) => { const intl = useIntl() return ( -
+
{countryCode && (
- +

{getLocalisedRegionName(countryCode, intl.locale)} - +

)} {dates} diff --git a/components/landing/HighlightsSection.js b/components/landing/HighlightsSection.js index d7960793b..a04a74abc 100644 --- a/components/landing/HighlightsSection.js +++ b/components/landing/HighlightsSection.js @@ -1,4 +1,4 @@ -import NLink from 'next/link' +import Link from 'next/link' import { Button } from 'ooni-components' import PropTypes from 'prop-types' import { useIntl } from 'react-intl' @@ -9,7 +9,7 @@ const HighlightSection = ({ title, highlights, description }) => { return (
-
+
{title}
{/* Optional Description */} @@ -25,18 +25,18 @@ const HighlightSection = ({ title, highlights, description }) => { footer={
{item.explore && ( - - - + )} {item.report && ( - - - + )}
} diff --git a/components/landing/Stats.js b/components/landing/Stats.js index c28f8e58b..341765cfa 100644 --- a/components/landing/Stats.js +++ b/components/landing/Stats.js @@ -1,6 +1,6 @@ /* global process */ import axios from 'axios' -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import { useIntl } from 'react-intl' import dayjs from 'services/dayjs' import useSWR from 'swr' @@ -101,7 +101,7 @@ const CoverageChart = () => { } @@ -136,21 +136,21 @@ const CoverageChart = () => { name: 'Countries', symbol: { type: 'minus', - fill: theme.colors.blue8, + fill: colors.blue['800'], }, }, { name: 'Networks', symbol: { type: 'minus', - fill: theme.colors.gray7, + fill: colors.gray['700'], }, }, { name: 'Monthly Measurements', symbol: { type: 'minus', - fill: theme.colors.yellow7, + fill: colors.yellow['700'], }, }, ]} @@ -163,7 +163,7 @@ const CoverageChart = () => { dependentAxis style={{ axis: { - stroke: theme.colors.blue7, + stroke: colors.blue['700'], strokeWidth: 2, }, }} @@ -178,7 +178,7 @@ const CoverageChart = () => { scale={{ x: 'time', y: 'linear' }} style={{ data: { - stroke: theme.colors.blue8, + stroke: colors.blue['800'], }, }} /> @@ -187,7 +187,7 @@ const CoverageChart = () => { offsetX={400} style={{ axis: { - stroke: theme.colors.gray7, + stroke: colors.gray['700'], strokeWidth: 2, }, }} @@ -205,7 +205,7 @@ const CoverageChart = () => { scale={{ x: 'time', y: 'linear' }} style={{ data: { - stroke: theme.colors.gray7, + stroke: colors.gray['700'], }, }} /> @@ -214,7 +214,7 @@ const CoverageChart = () => { orientation="right" style={{ axis: { - stroke: theme.colors.yellow7, + stroke: colors.yellow['700'], strokeWidth: 2, }, }} @@ -231,7 +231,7 @@ const CoverageChart = () => { scale={{ x: 'time', y: 'linear' }} style={{ data: { - stroke: theme.colors.yellow7, + stroke: colors.yellow['700'], }, }} /> diff --git a/components/measurement/CommonDetails.js b/components/measurement/CommonDetails.js index 90ef54998..023789893 100644 --- a/components/measurement/CommonDetails.js +++ b/components/measurement/CommonDetails.js @@ -1,6 +1,6 @@ import dynamic from 'next/dynamic' import { useRouter } from 'next/router' -import { Button, theme } from 'ooni-components' +import { Button, colors } from 'ooni-components' import PropTypes from 'prop-types' import { useState } from 'react' import { FormattedMessage, useIntl } from 'react-intl' @@ -159,7 +159,7 @@ const CommonDetails = ({ )}
{/* Metadata: platform, probe, MK version etc. */} - +
{/* User Feedback */} {!!userFeedbackItems.length && ( @@ -177,44 +177,44 @@ const CommonDetails = ({ -

+
+
{intl.formatMessage({ id: 'Measurement.CommonDetails.RawMeasurement.Heading', })} -

- {/*
*/} - +
+ +
*/} - - {/*
*/} - {/*
*/} - - {/*
*/} +
} content={ diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js index 5afb2a9b5..c6c8e4e89 100644 --- a/components/measurement/CommonSummary.js +++ b/components/measurement/CommonSummary.js @@ -27,7 +27,7 @@ const CommonSummary = ({ return (
diff --git a/components/measurement/DetailsBox.js b/components/measurement/DetailsBox.js index 2ea93bc65..14c1f05a8 100644 --- a/components/measurement/DetailsBox.js +++ b/components/measurement/DetailsBox.js @@ -40,13 +40,13 @@ export const DetailsBox = ({ }, [isOpen, setIsOpen]) return ( -
+
{title && (
-

{title}

+ {title} {
- + {metadata.name}   diff --git a/components/measurement/FeedbackBox.js b/components/measurement/FeedbackBox.js index 31997b0e0..6a7cb76a0 100644 --- a/components/measurement/FeedbackBox.js +++ b/components/measurement/FeedbackBox.js @@ -2,7 +2,7 @@ import useStateMachine from '@cassiozen/usestatemachine' import LoginForm from 'components/login/LoginForm' import SpinLoader from 'components/vendor/SpinLoader' import { submitFeedback } from 'lib/api' -import { Button, RadioButton, RadioGroup, theme } from 'ooni-components' +import { Button, RadioButton, RadioGroup, colors } from 'ooni-components' import { useEffect, useMemo, useRef, useState } from 'react' import { Controller, useForm } from 'react-hook-form' import { GrClose } from 'react-icons/gr' @@ -138,7 +138,7 @@ const FeedbackBox = ({ const submitEnabled = useMemo(() => !!firstLevelRadio, [firstLevelRadio]) return ( -
+
setShowModal(false)} @@ -264,7 +264,7 @@ const FeedbackBox = ({
{error && ( - +
Error: {error} @@ -284,7 +284,7 @@ const FeedbackBox = ({ )} {state.value === 'submit' && ( - + )} {state.value === 'success' && ( <> diff --git a/components/measurement/nettests/Tor.js b/components/measurement/nettests/Tor.js index 1136bdb22..b6b4c584a 100644 --- a/components/measurement/nettests/Tor.js +++ b/components/measurement/nettests/Tor.js @@ -1,4 +1,4 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import { Cross, Tick } from 'ooni-components/icons' import PropTypes from 'prop-types' import { useMemo } from 'react' @@ -53,7 +53,7 @@ const NameCell = ({ children }) => { {children}
{clipboard.copied && ( - + )}
@@ -114,13 +114,13 @@ const Table = ({ columns, data }) => { const ConnectionStatusCell = ({ cell: { value } }) => { let statusIcon = null if (value === false) { - statusIcon =
N/A
+ statusIcon =
N/A
} else { statusIcon = value === null ? ( - + ) : ( - + ) } return ( diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js index 4badfc1e2..335a3de61 100644 --- a/components/measurement/nettests/WebConnectivity.js +++ b/components/measurement/nettests/WebConnectivity.js @@ -1,6 +1,6 @@ import bufferFrom from 'buffer-from' import deepmerge from 'deepmerge' -import NLink from 'next/link' +import Link from 'next/link' import { Cross, Tick } from 'ooni-components/icons' import PropTypes from 'prop-types' import url from 'url' @@ -67,7 +67,7 @@ const RequestResponseContainer = ({ request }) => {
-
+ 
               {request.request.method} {request.request.url}
@@ -78,7 +78,7 @@ const RequestResponseContainer = ({ request }) => {
-
+ 
               {request.response.headers ? (
                 Object.keys(request.response.headers).map((header, index) => (
@@ -100,7 +100,7 @@ const RequestResponseContainer = ({ request }) => {
-
+
@@ -278,10 +278,10 @@ const validateMeasurement = (measurement) => { const getSearchHref = (input) => `${process.env.NEXT_PUBLIC_EXPLORER_URL}/search?input=${input}` -const StyledLink = ({ children }) => ( - +const StyledLink = ({ children, href }) => ( + {children} - + ) const WebConnectivityDetails = ({ @@ -503,12 +503,12 @@ const WebConnectivityDetails = ({ statusInfo: ( {input} - + } message={reason} /> diff --git a/components/search/FilterSidebar.js b/components/search/FilterSidebar.js index 770ac9dac..22d663c9d 100644 --- a/components/search/FilterSidebar.js +++ b/components/search/FilterSidebar.js @@ -7,6 +7,7 @@ import { RadioButton, RadioGroup, Select, + colors, } from 'ooni-components' import { useCallback, useEffect, useMemo, useState } from 'react' import { Controller, useForm } from 'react-hook-form' @@ -23,7 +24,7 @@ const StyledLabel = styled(Label).attrs({ mb: 1, fontSize: 1, })` - color: ${(props) => props.theme.colors.blue5}; + color: ${colors.blue['500']}; padding-top: 32px; ` diff --git a/components/search/Loader.js b/components/search/Loader.js index 80fe9ad84..65a1d039a 100644 --- a/components/search/Loader.js +++ b/components/search/Loader.js @@ -1,4 +1,4 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import PropTypes from 'prop-types' import ContentLoader from 'react-content-loader' @@ -10,8 +10,8 @@ export const LoaderRow = (props) => { height={40} width={450} speed={1} - primarycolor={theme.colors.gray3} - secondarycolor={theme.colors.gray5} + primarycolor={colors.gray['300']} + secondarycolor={colors.gray['500']} {...props} > diff --git a/components/search/ResultsList.js b/components/search/ResultsList.js index 771dc9594..86be5bf5e 100644 --- a/components/search/ResultsList.js +++ b/components/search/ResultsList.js @@ -1,5 +1,4 @@ -import NLink from 'next/link' -import { Box, Text } from 'ooni-components' +import Link from 'next/link' import PropTypes from 'prop-types' import { defineMessages, useIntl } from 'react-intl' import dayjs from 'services/dayjs' @@ -186,11 +185,7 @@ const messages = defineMessages({ const ASNBox = ({ asn }) => { const justNumber = asn.split('AS')[1] - return ( - - AS {justNumber} - - ) + return
AS {justNumber}
} ASNBox.propTypes = { @@ -198,7 +193,7 @@ ASNBox.propTypes = { } const tagClassNames = 'rounded-2xl py-1 px-2 text-xs' -const hollowTagClasNames = `${tagClassNames} bg-transparent border border-gray-800` +const hollowTagClasNames = `${tagClassNames} bg-transparent border border-gray-700` const getIndicators = ({ test_name, @@ -228,7 +223,7 @@ const getIndicators = ({ } else if (confirmed === true) { color = colorConfirmed tag = ( -
+
{intl.formatMessage(messages[`${computedMessageIdPrefix}.Blocked`])}
) @@ -307,40 +302,40 @@ const ResultItem = ({ const testName = testNames[test_name]?.name || test_name return ( - -
- + +
+
- - +
+
- +
- -
{probe_cc}
- - +
+
{probe_cc}
+
+
- - +
+
- - +
+
{dayjs .utc(measurement_start_time) .format('YYYY-MM-DD HH:mm [UTC]')} - - {testName} +
+
{testName}
- +
{input && ( -
+
{inputLabel}
)} @@ -348,9 +343,9 @@ const ResultItem = ({
- +
- + ) } diff --git a/components/test-info.js b/components/test-info.js index 473262347..e32ea7fce 100644 --- a/components/test-info.js +++ b/components/test-info.js @@ -1,4 +1,4 @@ -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import { NettestGroupCircumvention, @@ -13,49 +13,49 @@ import { FormattedMessage } from 'react-intl' export const testGroups = { websites: { - color: theme.colors.indigo7, + color: colors.indigo['700'], id: 'Tests.Groups.Websites.Name', name: , icon: , }, im: { - color: theme.colors.cyan7, + color: colors.cyan['700'], id: 'Tests.Groups.Instant Messagging.Name', name: , icon: , }, middlebox: { - color: theme.colors.violet9, + color: colors.violet['900'], id: 'Tests.Groups.Middlebox.Name', name: , icon: , }, performance: { - color: theme.colors.fuchsia6, + color: colors.fuchsia['600'], id: 'Tests.Groups.Performance.Name', name: , icon: , }, circumvention: { - color: theme.colors.pink6, + color: colors.pink['600'], id: 'Tests.Groups.Circumvention.Name', name: , icon: , }, experimental: { - color: theme.colors.gray5, + color: colors.gray['500'], id: 'Tests.Groups.Experimental.Name', name: , icon: , }, legacy: { - color: theme.colors.gray5, + color: colors.gray['500'], id: 'Tests.Groups.Legacy.Name', name: , icon: , }, default: { - color: theme.colors.gray5, + color: colors.gray['500'], id: 'DefaultTestGroupName', name: null, icon: , diff --git a/components/vendor/SpinLoader.js b/components/vendor/SpinLoader.js index 0cc758c97..1cd6f9694 100644 --- a/components/vendor/SpinLoader.js +++ b/components/vendor/SpinLoader.js @@ -1,5 +1,5 @@ // From: https://github.com/LucasBassetti/react-css-loaders/tree/master/lib/spin -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import PropTypes from 'prop-types' import styled, { css, keyframes } from 'styled-components' @@ -68,7 +68,7 @@ SpinLoader.propTypes = { SpinLoader.defaultProps = { $background: '#fff', - $color: theme.colors.blue5, + $color: colors.blue['500'], $duration: 1.4, $size: 5, $margin: '50px auto', diff --git a/package.json b/package.json index 0daf32267..f92c1d8f1 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "markdown-to-jsx": "^7.4.0", "next": "^14.2.4", "nprogress": "^0.2.0", - "ooni-components": "0.6.0-alpha.8", + "ooni-components": "file:.yalc/ooni-components", "pretty-ms": "^8.0.0", "prop-types": "^15.8.1", "react": "^18.3.1", diff --git a/pages/404.js b/pages/404.js index 532f1a3df..e8f74f8b3 100644 --- a/pages/404.js +++ b/pages/404.js @@ -16,7 +16,7 @@ const Custom404 = () => {
-

+

diff --git a/pages/as/[probe_asn].js b/pages/as/[probe_asn].js index 9a16cff83..ec937c85d 100644 --- a/pages/as/[probe_asn].js +++ b/pages/as/[probe_asn].js @@ -12,7 +12,7 @@ import Loader from 'components/as/Loader' import Form from 'components/domain/Form' import ResultsList from 'components/search/ResultsList' import Head from 'next/head' -import NLink from 'next/link' +import Link from 'next/link' import { useRouter } from 'next/router' import { useMemo } from 'react' import { MdOutlineSearch } from 'react-icons/md' @@ -119,12 +119,12 @@ export const RecentMeasurements = ({ recentMeasurements, query }) => { {intl.formatMessage({ id: 'Domain.RecentMeasurements.Title' })} - + {intl.formatMessage({ id: 'Domain.Button.SearchResults' })}{' '} - + ) } diff --git a/pages/chart/circumvention.js b/pages/chart/circumvention.js index 4702903cc..f2fef8356 100644 --- a/pages/chart/circumvention.js +++ b/pages/chart/circumvention.js @@ -60,7 +60,7 @@ const DashboardCircumvention = ({ availableCountries }) => {

-
+
{Object.keys(query).length > 0 && ( diff --git a/pages/chart/mat.js b/pages/chart/mat.js index c4a0886f6..381301553 100644 --- a/pages/chart/mat.js +++ b/pages/chart/mat.js @@ -73,7 +73,7 @@ const MeasurementAggregationToolkit = () => {

-
+
diff --git a/pages/countries.js b/pages/countries.js index 162bf6ccb..fa3ceea8d 100644 --- a/pages/countries.js +++ b/pages/countries.js @@ -71,7 +71,7 @@ const RegionBlock = ({ regionCode, countries }) => { const RegionLink = ({ href, label }) => ( {label} diff --git a/pages/domain/[domain].js b/pages/domain/[domain].js index 82b015b26..006366c9b 100644 --- a/pages/domain/[domain].js +++ b/pages/domain/[domain].js @@ -6,7 +6,7 @@ import { StyledSticky } from 'components/SharedStyledComponents' import { GridBox } from 'components/VirtualizedGrid' import Form from 'components/domain/Form' import Head from 'next/head' -import NLink from 'next/link' +import Link from 'next/link' import { useRouter } from 'next/router' import { RecentMeasurements } from 'pages/as/[probe_asn]' import { useMemo, useState } from 'react' @@ -124,7 +124,7 @@ const Canonical = ({ canonicalDomain }) => { { id: 'Domain.Canonical' }, { canonicalDomain: ( - {canonicalDomain} + {canonicalDomain} ), }, )} diff --git a/pages/findings/create.js b/pages/findings/create.js index 961fa7022..84175c423 100644 --- a/pages/findings/create.js +++ b/pages/findings/create.js @@ -1,5 +1,5 @@ import { createIncidentReport, getUserEmail } from 'lib/api' -import NLink from 'next/link' +import Link from 'next/link' import { useRouter } from 'next/router' import { Button } from 'ooni-components' import { useEffect, useState } from 'react' @@ -59,11 +59,11 @@ const Create = () => {

{intl.formatMessage({ id: 'Findings.Create.Title' })}

- + - +
diff --git a/pages/findings/dashboard.js b/pages/findings/dashboard.js index 8deadc0e4..f44e94d00 100644 --- a/pages/findings/dashboard.js +++ b/pages/findings/dashboard.js @@ -12,7 +12,7 @@ import { publishIncidentReport, unpublishIncidentReport, } from 'lib/api' -import NLink from 'next/link' +import Link from 'next/link' import { useRouter } from 'next/router' import { Button } from 'ooni-components' import { useEffect, useMemo, useState } from 'react' @@ -86,9 +86,9 @@ const Dashboard = () => { header: 'Title', accessorKey: 'title', cell: (info) => ( - + {info.getValue()} - + ), }, { @@ -124,18 +124,18 @@ const Dashboard = () => { accessorKey: 'id', cell: (info) => ( <> - - - + {info.row.original.published ? ( - - + + - +
) : ( diff --git a/pages/findings/edit/[id].js b/pages/findings/edit/[id].js index b827508f4..0ee96b498 100644 --- a/pages/findings/edit/[id].js +++ b/pages/findings/edit/[id].js @@ -1,7 +1,7 @@ import Form from 'components/findings/Form' import useUser from 'hooks/useUser' import Head from 'next/head' -import NLink from 'next/link' +import Link from 'next/link' import { useRouter } from 'next/router' import { Button } from 'ooni-components' import { useEffect, useMemo } from 'react' @@ -67,11 +67,11 @@ const EditReport = () => {

{intl.formatMessage({ id: 'Findings.Edit.Title' })}

- + - +
{defaultValues && ( <> diff --git a/pages/findings/index.js b/pages/findings/index.js index 259208a03..ea01848c2 100644 --- a/pages/findings/index.js +++ b/pages/findings/index.js @@ -145,7 +145,7 @@ const Index = () => { title={incident.title} text={incident.short_description} dates={ -
+
{incident.start_time && formatLongDate(incident.start_time, intl.locale)}{' '} @@ -169,7 +169,7 @@ const Index = () => { footer={
- +
- +
{ {/* Measurement Statistics */}
-

+

@@ -199,7 +188,7 @@ const LandingPage = ({ measurementCount, asnCount, countryCount }) => { {/* Highlights */}
diff --git a/pages/m/[measurement_uid].js b/pages/m/[measurement_uid].js index 2e1d6c05b..daa74ccb2 100644 --- a/pages/m/[measurement_uid].js +++ b/pages/m/[measurement_uid].js @@ -1,6 +1,6 @@ import axios from 'axios' import Head from 'next/head' -import { theme } from 'ooni-components' +import { colors } from 'ooni-components' import PropTypes from 'prop-types' import { useMemo, useState } from 'react' import useSWR from 'swr' @@ -22,12 +22,12 @@ import NotFound from '../../components/NotFound' import { fetcher } from '/lib/api' const pageColors = { - default: theme.colors.base, - anomaly: theme.colors.yellow9, - reachable: theme.colors.green8, - error: theme.colors.gray6, - down: theme.colors.gray6, - confirmed: theme.colors.red7, + default: colors.blue['500'], + anomaly: colors.yellow['900'], + reachable: colors.green['800'], + error: colors.gray['600'], + down: colors.gray['600'], + confirmed: colors.red['700'], } export async function getServerSideProps({ query }) { diff --git a/pages/search.js b/pages/search.js index 97a6e7391..127df5be3 100644 --- a/pages/search.js +++ b/pages/search.js @@ -130,12 +130,12 @@ const ErrorBox = ({ error }) => {
-
+ 
             {JSON.stringify(restOfError, null, '  ')}
-
+ 
{stack}
@@ -149,7 +149,7 @@ ErrorBox.propTypes = { const NoResults = () => (
-

+

diff --git a/styles/globals.css b/styles/globals.css index 410b371ef..4d868efe3 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,9 +1,50 @@ @tailwind base; @tailwind components; + +.btn { + @apply flex items-center px-6 py-2 text-base justify-center rounded-full font-medium border-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-white focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none; +} + +.btn.btn-primary { + @apply bg-blue-500 text-white; +} + +.btn.btn-primary-hollow { + @apply bg-transparent text-blue-500 hover:text-blue-500 hover:text-white hover:bg-blue-100 hover:border-blue-500; +} + +.btn.btn-dark { + @apply bg-black text-white; +} + +.btn.btn-dark-hollow { + @apply bg-transparent text-black hover:text-black hover:text-white hover:bg-gray-100 hover:border-black; +} + +.btn.btn-white { + @apply bg-white text-black; +} + +.btn.btn-white-hollow { + @apply bg-transparent text-white hover:text-white hover:text-blue-500 hover:bg-gray-100 hover:border-white; +} + +.btn.btn-sm { + @apply px-4 py-1 text-sm; +} + +.btn.btn-lg { + @apply px-8 py-2 text-2xl; +} + +.btn.btn-xl { + @apply px-16 py-3.5 text-2xl; +} + @tailwind utilities; @layer base { a { - @apply text-blue-600 underline; + @apply text-blue-500 underline; } } diff --git a/tailwind.config.js b/tailwind.config.js index 5b778c9ed..a5701e3f3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,81 +1,15 @@ /** @type {import('tailwindcss').Config} */ -// const colors = require('tailwindcss/colors') - +import { theme } from 'ooni-components' const plugin = require('tailwindcss/plugin') module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', + './node_modules/ooni-components/dist/**/*.{js,ts,jsx,tsx,mdx}', ], safelist: ['lg:grid-cols-4', 'lg:grid-cols-6'], - theme: { - extend: { - colors: { - // ...colors, - blue: { - 100: '#e7f5ff', - 200: '#c9e8ff', - 300: '#8dd5f8', - 400: '#5db8fe', - 500: '#37a6ed', - 600: '#0588cb', - 700: '#0f77b8', - 800: '#056aa6', - 900: '#005f9c', - 1000: '#005a99', - }, - gray: { - 100: '#f8f9fa', - 200: '#f1f3f5', - 300: '#e9ecef', - 400: '#dee2e6', - 500: '#ced4da', - 600: '#adb5bd', - 700: '#868e96', - 800: '#495057', - 900: '#343a40', - 1000: '#212529', - }, - indigo: { - 100: '#edf2ff', - 200: '#dbe4ff', - 300: '#bac8ff', - 400: '#91a7ff', - 500: '#748ffc', - 600: '#5c7cfa', - 700: '#4c6ef5', - 800: '#4263eb', - 900: '#3b5bdb', - 1000: '#364fc7', - }, - violet: { - 100: '#f3f0ff', - 200: '#e5dbff', - 300: '#d0bfff', - 400: '#b197fc', - 500: '#9775fa', - 600: '#845ef7', - 700: '#7950f2', - 800: '#7048e8', - 900: '#6741d9', - 1000: '#5f3dc4', - }, - fuchsia: { - 100: '#f8f0fc', - 200: '#f3d9fa', - 300: '#eebefa', - 400: '#e599f7', - 500: '#da77f2', - 600: '#cc5de8', - 700: '#be4bdb', - 800: '#ae3ec9', - 900: '#9c36b5', - 1000: '#862e9c', - }, - }, - }, - }, + theme, plugins: [ plugin(({ addBase, theme }) => { addBase({ diff --git a/yarn.lock b/yarn.lock index 3a0ea1caa..38b9ea1f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5162,15 +5162,17 @@ onetime@^5.1.0, onetime@^5.1.2: dependencies: mimic-fn "^2.1.0" -ooni-components@0.6.0-alpha.8: - version "0.6.0-alpha.8" - resolved "https://registry.yarnpkg.com/ooni-components/-/ooni-components-0.6.0-alpha.8.tgz#ffb338245154d64009ef0c944f8a6aff0cd3aa54" - integrity sha512-zaT7tttCQcVCmtGcE/Z5hPF9KtijpCOViNdLor1btlmrE26UgsKCUXwr3oc00eKbJJXyJl6dBUsQahPjucV5vw== +"ooni-components@file:.yalc/ooni-components": + version "0.6.0-alpha.9" dependencies: "@styled-system/css" "^5.1.5" "@styled-system/should-forward-prop" "^5.1.5" + class-variance-authority "^0.7.0" + clsx "^2.1.0" + mini-svg-data-uri "^1.4.4" react-select "^5.8.0" styled-system "^5.1.5" + yalc "^1.0.0-pre.53" opener@^1.5.2: version "1.5.2"