From 59509c00336a2472bee8245ee09b28a3fc329e1c Mon Sep 17 00:00:00 2001
From: majakomel <maja.komel@gmail.com>
Date: Tue, 12 Nov 2024 13:38:33 +0100
Subject: [PATCH] Add more styling fixes

---
 components/NavBar.js                          |   2 +-
 components/measurement/DetailsHeader.js       |  26 +-
 components/measurement/Hero.js                |   2 +-
 components/measurement/StatusInfo.js          |  12 +-
 .../measurement/nettests/WebConnectivity.js   | 241 ++++++++----------
 5 files changed, 134 insertions(+), 149 deletions(-)

diff --git a/components/NavBar.js b/components/NavBar.js
index a459e0f8..20cda3fb 100644
--- a/components/NavBar.js
+++ b/components/NavBar.js
@@ -182,7 +182,7 @@ export const NavBar = ({ color }) => {
                   </div>
                 )}
                 <div
-                  className={`flex gap-4 lg:gap-8 ${showMenu && 'pt-2 flex-col items-start [&>a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
+                  className={`flex gap-4 lg:gap-8 text-sm ${showMenu && 'pt-2 flex-col items-start [&>a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
                 >
                   <NavItem
                     label={<FormattedMessage id="Navbar.Findings" />}
diff --git a/components/measurement/DetailsHeader.js b/components/measurement/DetailsHeader.js
index d0c934fc..7b54094f 100644
--- a/components/measurement/DetailsHeader.js
+++ b/components/measurement/DetailsHeader.js
@@ -23,18 +23,20 @@ const DetailsHeader = ({ testName, runtime, notice, url }) => {
       <div className="flex mb-8 mt-4 gap-1 flex-col md:flex-row">
         <div className="flex items-center">
           <TestGroupBadge testName={testName} />
-          <div className="ml-2">
-            <a
-              className="text-blue-700 md:text-xl flex items-center"
-              href={metadata.info}
-            >
-              {metadata.name}
-              &nbsp;
-              <small>
-                <MdOpenInNew />
-              </small>
-            </a>
-          </div>
+          {!isEmbeddedView && (
+            <div className="ml-2">
+              <a
+                className="text-blue-700 md:text-xl flex items-center"
+                href={metadata.info}
+              >
+                {metadata.name}
+                &nbsp;
+                <small>
+                  <MdOpenInNew />
+                </small>
+              </a>
+            </div>
+          )}
         </div>
         <div className="mx-auto">{notice}</div>
         {runtime && (
diff --git a/components/measurement/Hero.js b/components/measurement/Hero.js
index 172bd431..629d8dcc 100644
--- a/components/measurement/Hero.js
+++ b/components/measurement/Hero.js
@@ -40,7 +40,7 @@ const Hero = ({ status, icon, label, info }) => {
   }
 
   return (
-    <div className="text-white my-7">
+    <div className="text-white my-8">
       <div className="font-normal text-2xl">
         <div className="flex my-2 justify-center items-center">
           {icon} <div>{label}</div>
diff --git a/components/measurement/StatusInfo.js b/components/measurement/StatusInfo.js
index c7040faa..2553377b 100644
--- a/components/measurement/StatusInfo.js
+++ b/components/measurement/StatusInfo.js
@@ -2,14 +2,16 @@ import PropTypes from 'prop-types'
 
 const StatusInfo = ({ title, message }) => (
   <div className="flex flex-col">
-    <div className="text-center text-2xl md:text-3xl mb-3 break-words">
+    <div className="text-center text-2xl md:text-3xl break-words">
       {' '}
       {title}{' '}
     </div>
-    <div className="text-center text-lg font-bold whitespace-pre">
-      {' '}
-      {message}{' '}
-    </div>
+    {message && (
+      <div className="text-center text-lg font-bold mt-3 whitespace-pre">
+        {' '}
+        {message}{' '}
+      </div>
+    )}
   </div>
 )
 
diff --git a/components/measurement/nettests/WebConnectivity.js b/components/measurement/nettests/WebConnectivity.js
index d0a696c0..04fad500 100644
--- a/components/measurement/nettests/WebConnectivity.js
+++ b/components/measurement/nettests/WebConnectivity.js
@@ -335,10 +335,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Failed"
         values={{
           date,
-          WebsiteURL: (
-            <UrlWrapper href={input} />
-            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -351,10 +348,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.ConfirmedBlocked"
         values={{
           date,
-          WebsiteURL: (
-            <UrlWrapper href={input} />
-            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -382,15 +376,15 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Anomaly"
         values={{
           date,
-          WebsiteURL: (
-            <UrlWrapper href={input} />
-            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
-          'link-to-docs': (string) => (
-            <a href="https://ooni.org/support/faq/#why-do-false-positives-occur">
-              {string}
-            </a>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
+          'link-to-docs': (string) =>
+            isEmbeddedView ? (
+              string
+            ) : (
+              <a href="https://ooni.org/support/faq/#why-do-false-positives-occur">
+                {string}
+              </a>
+            ),
           network: probe_asn,
           country,
           reason,
@@ -416,10 +410,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Accessible"
         values={{
           date,
-          WebsiteURL: (
-            <UrlWrapper href={input} />
-            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -444,10 +435,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Down"
         values={{
           date,
-          WebsiteURL: (
-            <UrlWrapper href={input} />
-            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -473,10 +461,7 @@ const WebConnectivityDetails = ({
         id="Measurement.SummaryText.Websites.Failed"
         values={{
           date,
-          WebsiteURL: (
-            <UrlWrapper href={input} />
-            // <StyledLink href={getSearchHref(input)}>{input}</StyledLink>
-          ),
+          WebsiteURL: <UrlWrapper href={input} />,
           network: probe_asn,
           country,
         }}
@@ -533,115 +518,111 @@ const WebConnectivityDetails = ({
         details: (
           <>
             {/* Failures */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.Failures.Heading" />
-                }
-                content={
-                  <div className="flex mb-2 flex-wrap">
-                    <div className="w-1/3">
-                      <FormattedMessage id="Measurement.Details.Websites.Failures.Label.HTTP" />
-                    </div>
-                    <div className="w-2/3">
-                      <FailureString failure={http_experiment_failure} />
-                    </div>
-                    <div className="w-1/3">
-                      <FormattedMessage id="Measurement.Details.Websites.Failures.Label.DNS" />
-                    </div>
-                    <div className="w-2/3">
-                      <FailureString failure={dns_experiment_failure} />
-                    </div>
-                    <div className="w-1/3">
-                      <FormattedMessage id="Measurement.Details.Websites.Failures.Label.Control" />
-                    </div>
-                    <div className="w-2/3">
-                      <FailureString failure={control_failure} />
-                    </div>
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.Failures.Heading" />
+              }
+              content={
+                <div className="flex mb-2 flex-wrap">
+                  <div className="w-1/2 md:w-1/3">
+                    <FormattedMessage id="Measurement.Details.Websites.Failures.Label.HTTP" />
                   </div>
-                }
-              />
-            </div>
+                  <div className="w-1/2 md:w-2/3">
+                    <FailureString failure={http_experiment_failure} />
+                  </div>
+                  <div className="w-1/2 md:w-1/3">
+                    <FormattedMessage id="Measurement.Details.Websites.Failures.Label.DNS" />
+                  </div>
+                  <div className="w-1/2 md:w-2/3">
+                    <FailureString failure={dns_experiment_failure} />
+                  </div>
+                  <div className="w-1/2 md:w-1/3">
+                    <FormattedMessage id="Measurement.Details.Websites.Failures.Label.Control" />
+                  </div>
+                  <div className="w-1/2 md:w-2/3">
+                    <FailureString failure={control_failure} />
+                  </div>
+                </div>
+              }
+            />
+
             {/* DNS Queries */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Heading" />
-                }
-                content={
-                  Array.isArray(queries) ? (
-                    <>
-                      <div className="flex flex-wrap mb-2">
-                        <div className="mr-1">
-                          <strong>
-                            <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Label.Resolver" />
-                            :
-                          </strong>
-                        </div>
-                        <div>{client_resolver || '(unknown)'}</div>
-                      </div>
-                      <div className="w-full">
-                        {queries.map((query, index) => (
-                          <QueryContainer key={index} query={query} />
-                        ))}
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Heading" />
+              }
+              content={
+                Array.isArray(queries) ? (
+                  <>
+                    <div className="flex flex-wrap mb-2">
+                      <div className="mr-1">
+                        <strong>
+                          <FormattedMessage id="Measurement.Details.Websites.DNSQueries.Label.Resolver" />
+                          :
+                        </strong>
                       </div>
-                    </>
-                  ) : (
-                    <FormattedMessage id="General.NoData" />
-                  )
-                }
-              />
-            </div>
+                      <div>{client_resolver || '(unknown)'}</div>
+                    </div>
+                    <div className="w-full">
+                      {queries.map((query, index) => (
+                        <QueryContainer key={index} query={query} />
+                      ))}
+                    </div>
+                  </>
+                ) : (
+                  <FormattedMessage id="General.NoData" />
+                )
+              }
+            />
+
             {/* TCP COnnections */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.TCP.Heading" />
-                }
-                content={
-                  tcpConnections.length > 0 ? (
-                    tcpConnections.map((connection, index) => (
-                      <div className="flex" key={index}>
-                        <div>
-                          <strong>{connection.destination}</strong>:{' '}
-                          {connection.failure
-                            ? `${intl.formatMessage({ id: 'Measurement.Details.Websites.TCP.ConnectionTo.Failed' })} (${connection.failure})`
-                            : intl.formatMessage({
-                                id: 'Measurement.Details.Websites.TCP.ConnectionTo.Success',
-                              })}
-                        </div>
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.TCP.Heading" />
+              }
+              content={
+                tcpConnections.length > 0 ? (
+                  tcpConnections.map((connection, index) => (
+                    <div className="flex" key={index}>
+                      <div>
+                        <strong>{connection.destination}</strong>:{' '}
+                        {connection.failure
+                          ? `${intl.formatMessage({ id: 'Measurement.Details.Websites.TCP.ConnectionTo.Failed' })} (${connection.failure})`
+                          : intl.formatMessage({
+                              id: 'Measurement.Details.Websites.TCP.ConnectionTo.Success',
+                            })}
                       </div>
-                    ))
-                  ) : (
-                    <FormattedMessage id="General.NoData" />
-                  )
-                }
-              />
-            </div>
+                    </div>
+                  ))
+                ) : (
+                  <FormattedMessage id="General.NoData" />
+                )
+              }
+            />
+
             {/* I would like us to enrich the HTTP response body section with
               information about every request and response as this is a very common
             thing we look at when investigating a case. */}
-            <div className="flex">
-              <DetailsBox
-                title={
-                  <FormattedMessage id="Measurement.Details.Websites.HTTP.Heading" />
-                }
-                content={
-                  Array.isArray(requests) ? (
-                    <div className="w-full">
-                      {requests.map((request, index) => (
-                        <RequestResponseContainer
-                          key={index}
-                          request={request}
-                        />
-                      ))}
-                    </div>
-                  ) : (
-                    <FormattedMessage id="General.NoData" />
-                  )
-                }
-              />
-            </div>
+
+            <DetailsBox
+              title={
+                <FormattedMessage id="Measurement.Details.Websites.HTTP.Heading" />
+              }
+              content={
+                Array.isArray(requests) ? (
+                  <div className="w-full">
+                    {requests.map((request, index) => (
+                      <RequestResponseContainer key={index} request={request} />
+                    ))}
+                  </div>
+                ) : (
+                  <FormattedMessage id="General.NoData" />
+                )
+              }
+            />
           </>
         ),
       })}