Update more styles

ooni · Jul 4, 2024 · 9b40588 · 9b40588
1 parent 8494b04
commit 9b40588
Show file tree

Hide file tree

Showing 68 changed files with 430 additions and 469 deletions.
diff --git a/components/Badge.js b/components/Badge.js
@@ -15,7 +15,7 @@ import { getTestMetadata } from './utils'
 export const Badge = ({ className, ...props }) => (
   <div
     className={twMerge(
-      'inline-block rounded py-1 px-2 leading-4 text-xs uppercase bg-gray-900 text-white font-semibold tracking-wide',
+      'inline-block rounded py-1 px-2 leading-4 text-xs uppercase bg-gray-800 text-white font-semibold tracking-wide',
       className,
     )}
     {...props}
@@ -44,7 +44,7 @@ export const CategoryBadge = ({ categoryCode }) => {
   }
 
   return (
-    <Badge className="bg-white border border-gray-600 text-gray-800">
+    <Badge className="bg-white border border-gray-500 text-gray-700">
       <div className="flex gap-1 items-center">
         <div>
           <FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />

diff --git a/components/BlockText.js b/components/BlockText.js
@@ -1,6 +1,6 @@
 const BlockText = ({ className, ...props }) => (
   <div
-    className={`bg-gray-100 border-l border-blue-600 p-3 font-base ${className}`}
+    className={`bg-gray-50 border-l border-blue-500 p-3 font-base ${className}`}
     {...props}
   />
 )

diff --git 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 (
-    <div className="flex my-8 bg-gray-400 flex-wrap">
+    <div className="flex my-8 bg-gray-300 flex-wrap">
       <div className="w-full mx-8 my-2">
         <h4>{title}</h4>
         <div className="text-xl">{text}</div>
       </div>
       <div className="flex items-center m-8 flex-col md:flex-row">
         <div className="mr-8 mb-4 md:mb-0">
-          <NLink href="https://ooni.org/install">
+          <Link href="https://ooni.org/install">
             <Button>
               <FormattedMessage id="Country.Overview.NoData.Button.InstallProbe" />
             </Button>
-          </NLink>
+          </Link>
         </div>
       </div>
     </div>

diff --git 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 (
     <div className="flex mt-4 justify-between items-center flex-wrap gap-4">
       {showMATButton && (
-        <NLink href={`/chart/mat?${queryToSearchParams}`}>
+        <Link href={`/chart/mat?${queryToSearchParams}`}>
           <StyledHollowButton>
             {intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '}
             <MdBarChart size={20} style={{ verticalAlign: 'bottom' }} />
           </StyledHollowButton>
-        </NLink>
+        </Link>
       )}
       <div className="flex gap-4 flex-wrap">
-        <NLink href={apiUrl}>
+        <Link href={apiUrl}>
           {intl.formatMessage({ id: 'MAT.Charts.DownloadJSONData' })}{' '}
           <MdOutlineFileDownload
             style={{ verticalAlign: 'bottom' }}
             size={20}
           />
-        </NLink>
-        <NLink href={`${apiUrl}&format=CSV`}>
+        </Link>
+        <Link href={`${apiUrl}&format=CSV`}>
           {intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '}
           <MdOutlineFileDownload
             style={{ verticalAlign: 'bottom' }}
             size={20}
           />
-        </NLink>
+        </Link>
       </div>
     </div>
   )

diff --git 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 }) => {
               <div className="self-start">
                 <Flag countryCode={c.alpha_2} size={22} border />
               </div>
-              <Text fontSize={1} fontWeight="bold" ml={2} lineHeight="24px">
-                {c.localisedName}
-              </Text>
+              <div className="font-bold ml-2">{c.localisedName}</div>
             </div>
           }
           count={c.count}

diff --git 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) => (
     <Button
       hollow
-      size="small"
+      size="s"
       key={range}
       px={2}
       onClick={(e) => {

diff --git a/components/Footer.js b/components/Footer.js
@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl'
 import styled from 'styled-components'
 
 const StyledFooter = ({ ...props }) => (
-  <footer className="text-white mt-8 bg-blue-1000" {...props} />
+  <footer className="text-white mt-8 bg-blue-900" {...props} />
 )
 
 const FooterHead = ({ ...props }) => (

diff --git a/components/FormattedMarkdown.js b/components/FormattedMarkdown.js
@@ -1,20 +1,23 @@
 // Documentation for markdown-to-jsx
 // https://github.com/probablyup/markdown-to-jsx
 import Markdown from 'markdown-to-jsx'
-import { Link, theme } from 'ooni-components'
 import PropTypes from 'prop-types'
 import { useIntl } from 'react-intl'
+import { twMerge } from 'tailwind-merge'
+
+const MdH1 = ({ children, className, ...props }) => (
+  <h3 className={twMerge('my-2', className)} {...props}>
+    {children}
+  </h3>
+)
 
 export const FormattedMarkdownBase = ({ children }) => {
   return (
     <Markdown
       options={{
         overrides: {
-          a: {
-            component: Link,
-            props: {
-              color: theme.colors.blue7,
-            },
+          h1: {
+            component: MdH1,
           },
         },
       }}

diff --git a/components/Layout.js b/components/Layout.js
@@ -1,7 +1,7 @@
-import { Box, theme } from 'ooni-components'
+import { colors } from 'ooni-components'
 import PropTypes from 'prop-types'
 import { useMemo } from 'react'
-import { ThemeProvider, createGlobalStyle } from 'styled-components'
+import { createGlobalStyle } from 'styled-components'
 
 import { StyledStickyNavBar } from 'components/SharedStyledComponents'
 import { getDirection } from 'components/withIntl'
@@ -12,8 +12,6 @@ import Footer from './Footer'
 import Header from './Header'
 import NavBar from './NavBar'
 
-theme.maxWidth = 1024
-
 const GlobalStyle = createGlobalStyle`
   * {
     text-rendering: geometricPrecision;
@@ -29,9 +27,9 @@ const GlobalStyle = createGlobalStyle`
   }
   a {
     text-decoration: none;
-    color: ${(props) => props.theme.colors.blue6};
+    color: ${colors.blue['600']};
     &:hover {
-      color: ${(props) => props.theme.colors.blue9};
+      color: ${colors.blue['900']};
     }
   }
   /*
@@ -70,25 +68,23 @@ const Layout = ({ children }) => {
   }, [pathname])
 
   return (
-    <ThemeProvider theme={theme}>
-      <UserProvider>
-        <GlobalStyle direction={getDirection(locale)} />
-        <div className="site text-sm">
-          <Header />
-          {navbarSticky ? (
-            <StyledStickyNavBar>
-              <NavBar color={navbarColor} />
-            </StyledStickyNavBar>
-          ) : (
+    <UserProvider>
+      <GlobalStyle direction={getDirection(locale)} />
+      <div className="site text-sm">
+        <Header />
+        {navbarSticky ? (
+          <StyledStickyNavBar>
             <NavBar color={navbarColor} />
-          )}
-          <Box className="content" mt={navbarColor ? '-66px' : 0}>
-            {children}
-          </Box>
-          <Footer />
+          </StyledStickyNavBar>
+        ) : (
+          <NavBar color={navbarColor} />
+        )}
+        <div className={`content ${navbarColor && 'mt-[-66px]'}`}>
+          {children}
         </div>
-      </UserProvider>
-    </ThemeProvider>
+        <Footer />
+      </div>
+    </UserProvider>
   )
 }
 

diff --git a/components/MATChart.js b/components/MATChart.js
@@ -5,7 +5,6 @@ import { NoCharts } from 'components/aggregation/mat/NoCharts'
 import { StackedBarChart } from 'components/aggregation/mat/StackedBarChart'
 import TableView from 'components/aggregation/mat/TableView'
 import { axiosResponseTime } from 'components/axios-plugins'
-import { Box, Text } from 'ooni-components'
 import { useMemo } from 'react'
 import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
@@ -70,9 +69,9 @@ export const MATChartWrapper = ({ link, caption }) => {
       <div className="my-8">
         <MATChart query={query} showFilters={false} />
         {caption && (
-          <Text fontSize={1} mt={2}>
+          <div className="mt-2">
             <FormattedMarkdownBase>{captionText}</FormattedMarkdownBase>
-          </Text>
+          </div>
         )}
       </div>
     )