Fix link styling

ooni · Jan 16, 2024 · 8c72311 · 8c72311
1 parent ed9e518
commit 8c72311
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 48 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -23,7 +23,7 @@ export const MATLink = ({ query }) => {
   const showMATButton = !Array.isArray(query.test_name)
 
   return (
-    <Flex mt={3} justifyContent='space-between' alignItems='center'>
+    <Flex mt={3} justifyContent='space-between' alignItems='center' flexWrap="wrap" sx={{gap: 3}}>
       <Box>
         {showMATButton &&
           <NLink href={`/chart/mat?${queryToSearchParams}`}>
@@ -33,16 +33,14 @@ export const MATLink = ({ query }) => {
           </NLink>
         }
       </Box>
-      <Box>
-        <Box mr={3}>
-          <NLink href={apiUrl}>
-            {intl.formatMessage({id: 'MAT.Charts.DownloadJSONData'})} <MdOutlineFileDownload style={{verticalAlign: 'bottom'}} size={20} />
-          </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>
-      </Box>
+      </Flex>
     </Flex>
   )
 }

diff --git a/components/measurement/CommonSummary.js b/components/measurement/CommonSummary.js
@@ -18,8 +18,11 @@ const SummaryContainer = styled(Box)`
   color: white;
 `
 
-const StyledSummaryItemLabel = styled(Text)`
-  font-weight: 600;
+const StyledLink = styled(NLink)`
+  color: white;
+  &:hover {
+    color: white;
+  }
 `
 
 const CommonSummary = ({
@@ -62,7 +65,7 @@ const CommonSummary = ({
           {hero}
           <Flex mt={2} sx={{textDecoration:'underline'}}>
             <Box width={[1, 1, 1/2]}>
-              <NLink href={`/country/${countryCode}`}>
+              <StyledLink href={`/country/${countryCode}`}>
                 <Flex alignItems='center'>
                   <Box mr={2}>
                     <Flag countryCode={countryCode} size={33} />
@@ -71,11 +74,11 @@ const CommonSummary = ({
                     {country}
                   </Box>
                 </Flex>
-              </NLink>
+              </StyledLink>
               <Text fontSize={1}>
-                <NLink href={`/as/${network}`}>
+                <StyledLink href={`/as/${network}`}>
                   <Text mb={2} mt={2}>{network} {networkName}</Text>
-                </NLink>
+                </StyledLink>
               </Text>
             </Box>
           </Flex>

diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
@@ -305,6 +305,19 @@ const validateMeasurement = (measurement) => {
 
 const getSearchHref = (input) => (`${process.env.NEXT_PUBLIC_EXPLORER_URL}/search?input=${input}`)
 
+const StyledLink = styled(NLink)`
+  direction: ltr;
+  display: inline;
+`
+
+const StyledStatusInfoLink = styled(NLink)`
+  color: white;
+  text-decoration: underline;
+  &:hover {
+    color: white;
+  }
+`
+
 const WebConnectivityDetails = ({
   isConfirmed,
   isAnomaly,
@@ -349,7 +362,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Failed'
       values={{
         date,
-        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
+        WebsiteURL: <StyledLink href={getSearchHref(input)}>{input}</StyledLink>,
         network: probe_asn,
         country
       }}
@@ -360,7 +373,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.ConfirmedBlocked'
       values={{
         date,
-        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
+        WebsiteURL: <StyledLink href={getSearchHref(input)}>{input}</StyledLink>,
         network: probe_asn,
         country
       }}
@@ -384,7 +397,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Anomaly'
       values={{
         date,
-        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
+        WebsiteURL: <StyledLink href={getSearchHref(input)}>{input}</StyledLink>,
         'link-to-docs': (string) => (<a href="https://ooni.org/support/faq/#why-do-false-positives-occur">{string}</a>),
         network: probe_asn,
         country,
@@ -409,7 +422,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Accessible'
       values={{
         date,
-        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
+        WebsiteURL: <StyledLink href={getSearchHref(input)}>{input}</StyledLink>,
         network: probe_asn,
         country
       }}
@@ -432,7 +445,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Down'
       values={{
         date,
-        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
+        WebsiteURL: <StyledLink href={getSearchHref(input)}>{input}</StyledLink>,
         network: probe_asn,
         country
       }}
@@ -456,7 +469,7 @@ const WebConnectivityDetails = ({
       id='Measurement.SummaryText.Websites.Failed'
       values={{
         date,
-        WebsiteURL: <Box dir='ltr'><NLink href={getSearchHref(input)}>{input}</NLink></Box>,
+        WebsiteURL: <StyledLink href={getSearchHref(input)}>{input}</StyledLink>,
         network: probe_asn,
         country
       }}
@@ -489,9 +502,9 @@ const WebConnectivityDetails = ({
         status: status,
         statusInfo: <StatusInfo 
           title={
-            <NLink href={`/domain/${hostname}`}>
+            <StyledStatusInfoLink href={`/domain/${hostname}`}>
               {input}
-            </NLink>
+            </StyledStatusInfoLink>
           }
           message={reason} 
         />,
@@ -603,21 +616,5 @@ const WebConnectivityDetails = ({
   )
 }
 
-WebConnectivityDetails.propTypes = {
-  country: PropTypes.string.isRequired,
-  input: PropTypes.any,
-  isAnomaly: PropTypes.bool.isRequired,
-  isConfirmed: PropTypes.bool.isRequired,
-  isFailure: PropTypes.bool.isRequired,
-  measurement: PropTypes.object.isRequired,
-  probe_asn: PropTypes.any,
-  render: PropTypes.func,
-  scores: PropTypes.shape({
-    analysis: PropTypes.shape({
-      blocking_type: PropTypes.any
-    })
-  }),
-  measurement_start_time: PropTypes.any
-}
 
 export default WebConnectivityDetails
diff --git a/components/search/ResultsList.js b/components/search/ResultsList.js
@@ -220,8 +220,7 @@ ASNBox.propTypes = {
   asn: PropTypes.string
 }
 
-// XXX add this to the design system
-const StyledViewDetailsLink = styled.span`
+const StyledViewDetailsLink = styled(NLink)`
   cursor: pointer;
   text-decoration: none;
   color: ${props => props.theme.colors.blue5};
@@ -234,9 +233,7 @@ const ViewDetailsLink = ({measurementUid, children}) => {
   let href = `/m/${measurementUid}`
 
   return (
-    <NLink href={href}>
-      <StyledViewDetailsLink>{children}</StyledViewDetailsLink>
-    </NLink>
+    <StyledViewDetailsLink href={href}>{children}</StyledViewDetailsLink>
   )
 }
 

diff --git a/pages/api/cloudflare.js b/pages/api/cloudflare.js
@@ -1,12 +1,12 @@
 import axios from 'axios'
+import { LRUCache } from 'lru-cache'
 import dayjs from 'services/dayjs'
-import LRU from 'lru-cache'
 
 const CACHE_MAX_SIZE = process.env.CACHE_MAX_SIZE || 100
 const CACHE_MAX_AGE_IN_S = process.env.CACHE_MAX_AGE_IN_S || 60 * 60
 
 const context = {
-  cache: new LRU({
+  cache: new LRUCache({
     max: CACHE_MAX_SIZE,
     ttl: CACHE_MAX_AGE_IN_S
   })

diff --git a/pages/search.js b/pages/search.js
@@ -17,15 +17,15 @@ import styled from 'styled-components'
 
 import NavBar from '/components/NavBar'
 
+import dynamic from 'next/dynamic'
+import { sortByKey } from '../utils'
 import FormattedMarkdown from '/components/FormattedMarkdown'
 import FilterSidebar, { queryToFilterMap } from '/components/search/FilterSidebar'
-// import { Loader } from '/components/search/Loader'
 import ResultsList from '/components/search/ResultsList'
 
 const Loader = dynamic(() => import('/components/search/Loader'), { ssr: false })
 
-import dynamic from 'next/dynamic'
-import { sortByKey } from '../utils'
+
 
 export const getServerSideProps = async ({query}) => {
   // By default, on '/search' show measurements published until today