Use Tailwind for styling components

components/Badge.js

@@ -1,35 +1,31 @@
-import { Box, Flex, Text, theme } from 'ooni-components'
+import * as icons from 'ooni-components/icons'
 import PropTypes from 'prop-types'
 import { cloneElement } from 'react'
 import { FormattedMessage } from 'react-intl'
-import styled from 'styled-components'
+import { twMerge } from 'tailwind-merge'
 import { getTestMetadata } from './utils'
-import * as icons from 'ooni-components/icons'
 
-// XXX replace what is inside of search/results-list.StyledResultTag
-export const Badge = styled(Box)`
-  display: inline-block;
-  border-radius: 4px;
-  padding: 4px 8px;
-  line-height: 16px;
-  font-size: 12px;
-  text-transform: uppercase;
-  background-color: ${(props) => props.bg || props.theme.colors.gray8};
-  border: ${(props) => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
-  color: ${(props) => props.color || props.theme.colors.white};
-  letter-spacing: 1.25px;
-  font-weight: 600;
-`
+export const Badge = ({ className, ...props }) => {
+  return (
+    <div
+      className={twMerge(
+        'inline-block rounded py-1 px-2 leading-4 text-xs uppercase bg-gray-800 text-white font-semibold tracking-wide',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
 
 const TestGroupBadge = ({ testName, ...props }) => {
   const { icon, groupName, color } = getTestMetadata(testName)
 
   return (
-    <Badge bg={color} color="white" {...props}>
-      <Flex sx={{ gap: 1 }} alignItems="center">
-        <Text>{groupName}</Text>
+    <Badge style={{ backgroundColor: color }} {...props}>
+      <div className="flex gap-1 items-center">
+        <div>{groupName}</div>
         {cloneElement(icon, { size: 12 })}
-      </Flex>
+      </div>
     </Badge>
   )
 }
@@ -43,13 +39,13 @@ export const CategoryBadge = ({ categoryCode }) => {
   }
 
   return (
-    <Badge bg="#ffffff" borderColor={theme.colors.gray5} color={theme.colors.gray7}>
-      <Flex sx={{ gap: 1 }} alignItems="center">
-        <Box>
+    <Badge className="bg-white border border-gray-500 text-gray-700">
+      <div className="flex gap-1 items-center">
+        <div>
           <FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />
-        </Box>
+        </div>
         {IconComponent && <IconComponent size={15} />}
-      </Flex>
+      </div>
     </Badge>
   )
 }

components/BlockText.js

@@ -1,14 +1,8 @@
-import styled from 'styled-components'
-import { Box } from 'ooni-components'
+const BlockText = ({ className, ...props }) => (
+  <div
+    className={`bg-gray-50 border-s-[10px] text-base border-blue-500 p-3 font-base ${className}`}
+    {...props}
+  />
+)
 
-const BlockText = styled(Box)`
-  background-color: ${props => props.theme.colors.gray0};
-  border-left: 10px solid ${props => props.theme.colors.blue5};
-`
-
-BlockText.defaultProps = {
-  p: 3,
-  fontSize: 1,
-}
-
-export default BlockText
+export default BlockText

components/ButtonSpinner.js

@@ -1,16 +1,5 @@
 import { ImSpinner8 } from 'react-icons/im'
-import { keyframes, styled } from 'styled-components'
 
-const spin = keyframes`
-to {
-  transform: rotate(360deg);
-}
-`
-
-const StyledSpinner = styled(ImSpinner8)`
-  animation: ${spin} 1s linear infinite;
-`
-
-const ButtonSpinner = () => <StyledSpinner />
+const ButtonSpinner = () => <ImSpinner8 className="animate-spin" />
 
 export default ButtonSpinner

components/CallToActionBox.js

@@ -1,25 +1,20 @@
-import NLink from 'next/link'
-import { Box, Button, Flex, Heading, Text } from 'ooni-components'
+import Link from 'next/link'
 import { FormattedMessage } from 'react-intl'
 
-const CallToActionBox = ({title, text}) => {
+const CallToActionBox = ({ title, text }) => {
   return (
-    <Flex p={3} bg='gray3' flexWrap='wrap' minHeight='180px'>
-      <Box mb={2}>
-        <Heading h={4} m={0}>
-          {title}
-        </Heading>
-        <Text fontSize={1}>
-          {text}
-        </Text>
-      </Box>
-      <NLink href='https://ooni.org/install'>
-        <Button>
-          <FormattedMessage id='Country.Overview.NoData.Button.InstallProbe' />
-        </Button>
-      </NLink>
-    </Flex>
+    <div className="flex p-4 bg-gray-300 flex-wrap min-h-[180px]">
+      <div className="mb-2">
+        <h4>{title}</h4>
+        <div className="text-xl">{text}</div>
+      </div>
+      <Link href="https://ooni.org/install">
+        <button type="button" className="btn btn-primary">
+          <FormattedMessage id="Country.Overview.NoData.Button.InstallProbe" />
+        </button>
+      </Link>
+    </div>
   )
 }
 
-export default CallToActionBox
+export default CallToActionBox

components/Chart.js

@@ -1,14 +1,14 @@
-import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/GridChart'
+import GridChart, {
+  prepareDataForGridChart,
+} from 'components/aggregation/mat/GridChart'
 import { MATContextProvider } from 'components/aggregation/mat/MATContext'
 import { DetailsBox } from 'components/measurement/DetailsBox'
-import NLink from 'next/link'
-import { Box, Flex } from 'ooni-components'
-import React, { useEffect, useMemo } from 'react'
+import Link from 'next/link'
+import { memo, useEffect, useMemo } from 'react'
 import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { MATFetcher } from 'services/fetchers'
 import useSWR from 'swr'
-import { StyledHollowButton } from './SharedStyledComponents'
 
 const swrOptions = {
   revalidateOnFocus: false,
@@ -23,51 +23,55 @@ export const MATLink = ({ query }) => {
   const showMATButton = !Array.isArray(query.test_name)
 
   return (
-    <Flex mt={3} justifyContent='space-between' alignItems='center' flexWrap="wrap" sx={{gap: 3}}>
-      <Box>
-        {showMATButton &&
-          <NLink href={`/chart/mat?${queryToSearchParams}`}>
-            <StyledHollowButton>
-              {intl.formatMessage({id: 'MAT.Charts.SeeOnMAT'})} <MdBarChart size={20} style={{verticalAlign: 'bottom'}} />
-            </StyledHollowButton>
-          </NLink>
-        }
-      </Box>
-      <Flex sx={{gap: 3}} flexWrap="wrap">
-        <NLink href={apiUrl}>
-          {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
-        </NLink>
-        <NLink href={`${apiUrl}&format=CSV`}>
-          {intl.formatMessage({id: 'MAT.Charts.DownloadCSVData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
-        </NLink>
-      </Flex>
-    </Flex>
+    <div className="flex mt-4 justify-between items-center flex-wrap gap-4">
+      {showMATButton && (
+        <Link href={`/chart/mat?${queryToSearchParams}`}>
+          <button type="button" className="btn btn-primary-hollow">
+            {intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '}
+            <MdBarChart size={20} style={{ verticalAlign: 'bottom' }} />
+          </button>
+        </Link>
+      )}
+      <div className="flex gap-4">
+        <Link className="inline-flex" href={apiUrl}>
+          {intl.formatMessage({ id: 'MAT.Charts.DownloadJSONData' })}{' '}
+          <MdOutlineFileDownload size={20} />
+        </Link>
+        <Link className="inline-flex" href={`${apiUrl}&format=CSV`}>
+          {intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '}
+          <MdOutlineFileDownload size={20} />
+        </Link>
+      </div>
+    </div>
   )
 }
 
-const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, setState}) {
+const Chart = memo(function Chart({
+  testGroup = null,
+  queryParams = {},
+  setState,
+}) {
   const apiQuery = useMemo(() => {
     const qs = new URLSearchParams(queryParams).toString()
     return qs
   }, [queryParams])
 
-  const { data, error } = useSWR(
-    apiQuery,
-    MATFetcher,
-    swrOptions
-  )
+  const { data, error } = useSWR(apiQuery, MATFetcher, swrOptions)
 
   const [chartData, rowKeys, rowLabels] = useMemo(() => {
     if (!data) {
       return [null, 0]
     }
-    let chartData = data.data
+    const chartData = data.data
     const graphQuery = queryParams
-    const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(chartData, graphQuery)
+    const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(
+      chartData,
+      graphQuery,
+    )
     return [reshapedData, rowKeys, rowLabels]
   }, [data, queryParams])
 
-  useEffect(()=> {
+  useEffect(() => {
     if (setState && data?.data) setState(data.data)
   }, [data, setState])
 
@@ -76,32 +80,35 @@ const Chart = React.memo(function Chart({testGroup = null, queryParams = {}, set
   return (
     // <MATContextProvider key={name} test_name={name} {...queryParams}>
     <MATContextProvider {...queryParams}>
-      <Flex flexDirection='column'>
-        <Box>
-          {(!chartData && !error) ? (
-            <FormattedMessage id="General.Loading" />
-          ) : (
-            <>
-              <GridChart
-                data={chartData}
-                rowKeys={rowKeys}
-                rowLabels={rowLabels}
-              />
-              {!!chartData?.size && <MATLink query={queryParams} />}
-            </>
-          )}
-        </Box>
-        {error &&
-          <DetailsBox collapsed={false} content={<>
-            <details>
-              <summary><span>Error: {error.message}</span></summary>
-              <Box as='pre'>
-                {JSON.stringify(error, null, 2)}
-              </Box>
-            </details>
-          </>}/>
-        }
-      </Flex>
+      <div className="flex flex-col">
+        {!chartData && !error ? (
+          <FormattedMessage id="General.Loading" />
+        ) : (
+          <>
+            <GridChart
+              data={chartData}
+              rowKeys={rowKeys}
+              rowLabels={rowLabels}
+            />
+            {!!chartData?.size && <MATLink query={queryParams} />}
+          </>
+        )}
+        {error && (
+          <DetailsBox
+            collapsed={false}
+            content={
+              <>
+                <details>
+                  <summary>
+                    <span>Error: {error.message}</span>
+                  </summary>
+                  <pre>{JSON.stringify(error, null, 2)}</pre>
+                </details>
+              </>
+            }
+          />
+        )}
+      </div>
     </MATContextProvider>
   )
 })

components/CountryBox.js

@@ -1,32 +1,29 @@
 import Flag from 'components/Flag'
 import { GridBox } from 'components/VirtualizedGrid'
-import { Box, Flex, Text } from 'ooni-components'
-
-const CountryList = ({ countries, itemsPerRow = 6, gridGap = 3 }) => {
-  const gridTemplateColumns = ['1fr 1fr', '1fr 1fr', '1fr 1fr 1fr 1fr', [...Array(itemsPerRow)].map((i) => ('1fr')).join(' ')]
 
+const CountryList = ({ countries, itemsPerRow = 6 }) => {
   return (
-    <Box sx={{
-      display: 'grid',
-      gridGap,
-      gridTemplateColumns 
-    }}>
+    // lg:grid-cols-${itemsPerRow} is added to the safelist in tailwindConfig.config.js
+    <div
+      className={`grid gap-2 grid-cols-2 md:grid-cols-4 lg:grid-cols-${itemsPerRow}`}
+    >
       {countries.map((c) => (
         <GridBox
           key={c.alpha_2}
           href={`/country/${c.alpha_2}`}
           title={
-            <Flex mb={2} alignItems='center'>
-              <Box alignSelf='start'><Flag countryCode={c.alpha_2} size={22} border /></Box>
-              <Text fontSize={1} fontWeight='bold' ml={2} lineHeight='24px'>{c.localisedName}</Text>
-            </Flex>
+            <div className="flex mb-2 items-center">
+              <div className="self-start">
+                <Flag countryCode={c.alpha_2} size={22} border />
+              </div>
+              <div className="font-bold ml-2">{c.localisedName}</div>
+            </div>
           }
           count={c.count}
         />
-        ))
-      }
-    </Box>
+      ))}
+    </div>
   )
 }
 
-export default CountryList
+export default CountryList