Skip to content

Commit

Permalink
Add more styling fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@majakomel
majakomel committed Nov 12, 2024
1 parent ae44731 commit 59509c0
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 149 deletions.
2 changes: 1 addition & 1 deletion components/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
Expand Down
26 changes: 14 additions & 12 deletions components/measurement/DetailsHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
2 changes: 1 addition & 1 deletion components/measurement/Hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 7 additions & 5 deletions components/measurement/StatusInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
241 changes: 111 additions & 130 deletions components/measurement/nettests/WebConnectivity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}}
Expand All @@ -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,
}}
Expand Down Expand Up @@ -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,
Expand All @@ -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,
}}
Expand All @@ -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,
}}
Expand All @@ -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,
}}
Expand Down Expand Up @@ -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" />
)
}
/>
</>
),
})}
Expand Down

0 comments on commit 59509c0

Please sign in to comment.