Merge branch 'master' into reports

components/Badge.js

@@ -4,6 +4,7 @@ import { cloneElement } from 'react'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 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)`
@@ -36,7 +37,7 @@ const TestGroupBadge = ({ testName, ...props }) => {
 export const CategoryBadge = ({ categoryCode }) => {
   let IconComponent
   try {
-    IconComponent = require(`ooni-components/icons/CategoryCode${categoryCode}`).default
+    IconComponent = icons[`CategoryCode${categoryCode}`]
   } catch {
     IconComponent = null
   }
@@ -47,11 +48,7 @@ export const CategoryBadge = ({ categoryCode }) => {
         <Box>
           <FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />
         </Box>
-        {IconComponent && (
-          <Box>
-            <IconComponent height={15} width={15} />
-          </Box>
-        )}
+        {IconComponent && <IconComponent size={15} />}
       </Flex>
     </Badge>
   )

components/DateRangePicker.js

@@ -42,9 +42,6 @@ margin: 1em 1em 0;
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
-button {
-  padding: 4px 6px;
-}
 `
 
 const StyledFooter = styled.div`
@@ -101,7 +98,9 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) =>
   const rangesList = ranges.map((range) => 
     <Button
       hollow
+      size="small"
       key={range}
+      px={2}
       onClick={(e) => {
         e.preventDefault()
         selectRange(range)

components/Flag.js

@@ -36,7 +36,7 @@ const FlagContainer = styled.div`
   /* padding-top: 3px; */
   width: ${props => props.size + 2}px;
   height: ${props => props.size + 2}px;
-  border: ${props => props.border ? '1px solid white' : 'none'};
+  border: ${props => props.$border ? '1px solid white' : 'none'};
 `
 
 export const Flag = ({countryCode, size, border}) => {
@@ -47,7 +47,7 @@ export const Flag = ({countryCode, size, border}) => {
   }
   const src = `/static/flags/1x1/${countryCode}.svg`
   return (
-    <FlagContainer className='country-flag' size={size} border={border}>
+    <FlagContainer className='country-flag' size={size} $border={border}>
       <FlagImg src={src} size={size} loading='lazy' />
     </FlagContainer>
   )

components/NavBar.js

@@ -19,7 +19,7 @@ const StyledNavItem = styled.a`
 const NavItemLabel = styled.span`
   color: ${(props) => props.theme.colors.white};
   cursor: pointer;
-  opacity: ${(props) => (props.active ? '1' : '0.6 ')};
+  opacity: ${(props) => (props.$active ? '1' : '0.6 ')};
 
   ${StyledNavItem}:hover & {
     opacity: 1;
@@ -34,7 +34,7 @@ const Underline = styled.span`
   left: 0;
   bottom: -6px;
 
-  width: ${(props) => (props.active ? '100%' : '0px')};
+  width: ${(props) => (props.$active ? '100%' : '0px')};
   ${StyledNavItem}:hover & {
     width: calc(100%);
   }
@@ -55,8 +55,8 @@ const NavItemComponent = ({ router, label, href }) => {
     <Box ml={[0, 4]} my={[2, 0]}>
       <NLink href={href} passHref>
         <StyledNavItem>
-          <NavItemLabel active={active}>{label}</NavItemLabel>
-          <Underline active={active} />
+          <NavItemLabel $active={active}>{label}</NavItemLabel>
+          <Underline $active={active} />
         </StyledNavItem>
       </NLink>
     </Box>
@@ -98,9 +98,9 @@ export const NavBar = ({ color }) => {
           alignItems={['flex-start', 'center']}
         >
           <Box style={{ zIndex: 1 }}>
-            <NLink href="/" passHref>
+            <NLink href='/' passHref>
               <Link>
-                <ExplorerLogo height="26px" />
+                <ExplorerLogo height='26px' />
               </Link>
             </NLink>
           </Box>

components/dashboard/Form.js

@@ -1,9 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useForm, Controller } from 'react-hook-form'
-import { Box, Flex, Input, Button } from 'ooni-components'
-import { MultiSelect } from 'react-multi-select-component'
+import { Box, Flex, Input, MultiSelect } from 'ooni-components'
 import { useIntl } from 'react-intl'
-import dayjs from 'services/dayjs'
 import { format } from 'date-fns'
 import { getLocalisedRegionName } from '../../utils/i18nCountries'
 
@@ -98,23 +96,19 @@ export const Form = ({ onChange, query, availableCountries }) => {
   return (
     <form>
       <Flex alignItems={['center']} flexDirection={['column', 'row']}>
-        <Box width={[1, 1 / 4]} mr={3} sx={{ zIndex: 2 }}>
-          {intl.formatMessage({ id: 'Search.Sidebar.Country' })}
-          {
-            <Controller
-              render={({ field }) => (
-                <MultiSelect
-                  options={countryOptions}
-                  overrideStrings={multiSelectStrings}
-                  name={field.name}
-                  value={field.value}
-                  onChange={field.onChange}
-                />
-              )}
-              name="probe_cc"
-              control={control}
-            />
-          }
+        <Box width={[1, 1/4]} mr={3} sx={{ zIndex: 2 }}>
+          <Controller
+            render={({field}) => (
+              <MultiSelect
+                label={intl.formatMessage({id: 'Search.Sidebar.Country'})}
+                options={countryOptions}
+                overrideStrings={multiSelectStrings}
+                {...field}
+              />
+            )}
+            name='probe_cc'
+            control={control}
+          />
         </Box>
         <Box width={[1, 1 / 5]}>
           <Flex>

components/flags/ad.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAD from 'flag-icon-css/flags/1x1/ad.svg'
+import SvgFlagAD from 'flag-icons/flags/1x1/ad.svg'
 
 export const FlagAD = () => (
   <SvgFlagAD viewBox='0 0 512 512' />

components/flags/ae.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAE from 'flag-icon-css/flags/1x1/ae.svg'
+import SvgFlagAE from 'flag-icons/flags/1x1/ae.svg'
 
 export const FlagAE = () => (
   <SvgFlagAE viewBox='0 0 512 512' />

components/flags/af.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAF from 'flag-icon-css/flags/1x1/af.svg'
+import SvgFlagAF from 'flag-icons/flags/1x1/af.svg'
 
 export const FlagAF = () => (
   <SvgFlagAF viewBox='0 0 512 512' />

components/flags/ag.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAG from 'flag-icon-css/flags/1x1/ag.svg'
+import SvgFlagAG from 'flag-icons/flags/1x1/ag.svg'
 
 export const FlagAG = () => (
   <SvgFlagAG viewBox='0 0 512 512' />

components/flags/ai.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAI from 'flag-icon-css/flags/1x1/ai.svg'
+import SvgFlagAI from 'flag-icons/flags/1x1/ai.svg'
 
 export const FlagAI = () => (
   <SvgFlagAI viewBox='0 0 512 512' />

components/flags/al.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAL from 'flag-icon-css/flags/1x1/al.svg'
+import SvgFlagAL from 'flag-icons/flags/1x1/al.svg'
 
 export const FlagAL = () => (
   <SvgFlagAL viewBox='0 0 512 512' />

components/flags/am.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAM from 'flag-icon-css/flags/1x1/am.svg'
+import SvgFlagAM from 'flag-icons/flags/1x1/am.svg'
 
 export const FlagAM = () => (
   <SvgFlagAM viewBox='0 0 512 512' />

components/flags/ao.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAO from 'flag-icon-css/flags/1x1/ao.svg'
+import SvgFlagAO from 'flag-icons/flags/1x1/ao.svg'
 
 export const FlagAO = () => (
   <SvgFlagAO viewBox='0 0 512 512' />

components/flags/aq.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAQ from 'flag-icon-css/flags/1x1/aq.svg'
+import SvgFlagAQ from 'flag-icons/flags/1x1/aq.svg'
 
 export const FlagAQ = () => (
   <SvgFlagAQ viewBox='0 0 512 512' />

components/flags/ar.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAR from 'flag-icon-css/flags/1x1/ar.svg'
+import SvgFlagAR from 'flag-icons/flags/1x1/ar.svg'
 
 export const FlagAR = () => (
   <SvgFlagAR viewBox='0 0 512 512' />

components/flags/as.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAS from 'flag-icon-css/flags/1x1/as.svg'
+import SvgFlagAS from 'flag-icons/flags/1x1/as.svg'
 
 export const FlagAS = () => (
   <SvgFlagAS viewBox='0 0 512 512' />

components/flags/at.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAT from 'flag-icon-css/flags/1x1/at.svg'
+import SvgFlagAT from 'flag-icons/flags/1x1/at.svg'
 
 export const FlagAT = () => (
   <SvgFlagAT viewBox='0 0 512 512' />

components/flags/au.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAU from 'flag-icon-css/flags/1x1/au.svg'
+import SvgFlagAU from 'flag-icons/flags/1x1/au.svg'
 
 export const FlagAU = () => (
   <SvgFlagAU viewBox='0 0 512 512' />

components/flags/aw.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAW from 'flag-icon-css/flags/1x1/aw.svg'
+import SvgFlagAW from 'flag-icons/flags/1x1/aw.svg'
 
 export const FlagAW = () => (
   <SvgFlagAW viewBox='0 0 512 512' />

components/flags/ax.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAX from 'flag-icon-css/flags/1x1/ax.svg'
+import SvgFlagAX from 'flag-icons/flags/1x1/ax.svg'
 
 export const FlagAX = () => (
   <SvgFlagAX viewBox='0 0 512 512' />

components/flags/az.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagAZ from 'flag-icon-css/flags/1x1/az.svg'
+import SvgFlagAZ from 'flag-icons/flags/1x1/az.svg'
 
 export const FlagAZ = () => (
   <SvgFlagAZ viewBox='0 0 512 512' />

components/flags/ba.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBA from 'flag-icon-css/flags/1x1/ba.svg'
+import SvgFlagBA from 'flag-icons/flags/1x1/ba.svg'
 
 export const FlagBA = () => (
   <SvgFlagBA viewBox='0 0 512 512' />

components/flags/bb.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBB from 'flag-icon-css/flags/1x1/bb.svg'
+import SvgFlagBB from 'flag-icons/flags/1x1/bb.svg'
 
 export const FlagBB = () => (
   <SvgFlagBB viewBox='0 0 512 512' />

components/flags/bd.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBD from 'flag-icon-css/flags/1x1/bd.svg'
+import SvgFlagBD from 'flag-icons/flags/1x1/bd.svg'
 
 export const FlagBD = () => (
   <SvgFlagBD viewBox='0 0 512 512' />

components/flags/be.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBE from 'flag-icon-css/flags/1x1/be.svg'
+import SvgFlagBE from 'flag-icons/flags/1x1/be.svg'
 
 export const FlagBE = () => (
   <SvgFlagBE viewBox='0 0 512 512' />

components/flags/bf.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBF from 'flag-icon-css/flags/1x1/bf.svg'
+import SvgFlagBF from 'flag-icons/flags/1x1/bf.svg'
 
 export const FlagBF = () => (
   <SvgFlagBF viewBox='0 0 512 512' />

components/flags/bg.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBG from 'flag-icon-css/flags/1x1/bg.svg'
+import SvgFlagBG from 'flag-icons/flags/1x1/bg.svg'
 
 export const FlagBG = () => (
   <SvgFlagBG viewBox='0 0 512 512' />

components/flags/bh.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBH from 'flag-icon-css/flags/1x1/bh.svg'
+import SvgFlagBH from 'flag-icons/flags/1x1/bh.svg'
 
 export const FlagBH = () => (
   <SvgFlagBH viewBox='0 0 512 512' />

components/flags/bi.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBI from 'flag-icon-css/flags/1x1/bi.svg'
+import SvgFlagBI from 'flag-icons/flags/1x1/bi.svg'
 
 export const FlagBI = () => (
   <SvgFlagBI viewBox='0 0 512 512' />

components/flags/bj.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBJ from 'flag-icon-css/flags/1x1/bj.svg'
+import SvgFlagBJ from 'flag-icons/flags/1x1/bj.svg'
 
 export const FlagBJ = () => (
   <SvgFlagBJ viewBox='0 0 512 512' />

components/flags/bl.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBL from 'flag-icon-css/flags/1x1/bl.svg'
+import SvgFlagBL from 'flag-icons/flags/1x1/bl.svg'
 
 export const FlagBL = () => (
   <SvgFlagBL viewBox='0 0 512 512' />

components/flags/bm.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBM from 'flag-icon-css/flags/1x1/bm.svg'
+import SvgFlagBM from 'flag-icons/flags/1x1/bm.svg'
 
 export const FlagBM = () => (
   <SvgFlagBM viewBox='0 0 512 512' />

components/flags/bn.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBN from 'flag-icon-css/flags/1x1/bn.svg'
+import SvgFlagBN from 'flag-icons/flags/1x1/bn.svg'
 
 export const FlagBN = () => (
   <SvgFlagBN viewBox='0 0 512 512' />

components/flags/bo.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBO from 'flag-icon-css/flags/1x1/bo.svg'
+import SvgFlagBO from 'flag-icons/flags/1x1/bo.svg'
 
 export const FlagBO = () => (
   <SvgFlagBO viewBox='0 0 512 512' />

components/flags/bq.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import SvgFlagBQ from 'flag-icon-css/flags/1x1/bq.svg'
+import SvgFlagBQ from 'flag-icons/flags/1x1/bq.svg'
 
 export const FlagBQ = () => (
   <SvgFlagBQ viewBox='0 0 512 512' />