Skip to content

Commit

Permalink
Use tailwind for styling
Browse files Browse the repository at this point in the history
  • Loading branch information
majakomel committed Jun 28, 2024
1 parent 487cbfa commit 8494b04
Show file tree
Hide file tree
Showing 401 changed files with 9,153 additions and 10,366 deletions.
51 changes: 26 additions & 25 deletions components/Badge.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
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 = styled(Box)`
// background-color: ${(props) => props.bg || props.theme.colors.gray8};
// border: ${(props) => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};

// `

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',
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 bg={color} {...props}>
<div className="flex gap-1 items-center">
<div>{groupName}</div>
{cloneElement(icon, { size: 12 })}
</Flex>
</div>
</Badge>
)
}
Expand All @@ -43,13 +44,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-600 text-gray-800">
<div className="flex gap-1 items-center">
<div>
<FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />
</Box>
</div>
{IconComponent && <IconComponent size={15} />}
</Flex>
</div>
</Badge>
)
}
Expand Down
20 changes: 7 additions & 13 deletions components/BlockText.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import styled from 'styled-components'
import { Box } from 'ooni-components'
const BlockText = ({ className, ...props }) => (
<div
className={`bg-gray-100 border-l border-blue-600 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
34 changes: 15 additions & 19 deletions components/CallToActionBox.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,25 @@
import NLink from 'next/link'
import { Box, Button, Flex, Heading, Text } from 'ooni-components'
import { Button } from 'ooni-components'
import { FormattedMessage } from 'react-intl'

const CallToActionBox = ({title, text}) => {
const CallToActionBox = ({ title, text }) => {
return (
<Flex my={4} bg='gray3' flexWrap='wrap'>
<Box width={1} mx={4} my={2}>
<Heading h={4}>
{title}
</Heading>
<Text fontSize={2}>
{text}
</Text>
</Box>
<Flex alignItems='center' mx={4} my={4} flexDirection={['column', 'row']}>
<Box mr={4} mb={[3, 0]}>
<NLink href='https://ooni.org/install'>
<div className="flex my-8 bg-gray-400 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">
<Button>
<FormattedMessage id='Country.Overview.NoData.Button.InstallProbe' />
<FormattedMessage id="Country.Overview.NoData.Button.InstallProbe" />
</Button>
</NLink>
</Box>
</Flex>
</Flex>
</div>
</div>
</div>
)
}

export default CallToActionBox
export default CallToActionBox
120 changes: 67 additions & 53 deletions components/Chart.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
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 { memo, useEffect, useMemo } from 'react'
import { MdBarChart, MdOutlineFileDownload } from 'react-icons/md'
import { FormattedMessage, useIntl } from 'react-intl'
import { MATFetcher } from 'services/fetchers'
Expand All @@ -23,51 +24,61 @@ 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">
<div className="flex mt-4 justify-between items-center flex-wrap gap-4">
{showMATButton && (
<NLink href={`/chart/mat?${queryToSearchParams}`}>
<StyledHollowButton>
{intl.formatMessage({ id: 'MAT.Charts.SeeOnMAT' })}{' '}
<MdBarChart size={20} style={{ verticalAlign: 'bottom' }} />
</StyledHollowButton>
</NLink>
)}
<div className="flex gap-4 flex-wrap">
<NLink href={apiUrl}>
{intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
{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} />
{intl.formatMessage({ id: 'MAT.Charts.DownloadCSVData' })}{' '}
<MdOutlineFileDownload
style={{ verticalAlign: 'bottom' }}
size={20}
/>
</NLink>
</Flex>
</Flex>
</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])

Expand All @@ -76,32 +87,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>
)
})
Expand Down
11 changes: 0 additions & 11 deletions components/CollapseTrigger.js

This file was deleted.

34 changes: 17 additions & 17 deletions components/CountryBox.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
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(' ')]
import { Text } from 'ooni-components'

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>
<Text fontSize={1} fontWeight="bold" ml={2} lineHeight="24px">
{c.localisedName}
</Text>
</div>
}
count={c.count}
/>
))
}
</Box>
))}
</div>
)
}

export default CountryList
export default CountryList
Loading

0 comments on commit 8494b04

Please sign in to comment.