Mobile styling fixes

ooni · Aug 1, 2024 · dfbe154 · dfbe154
1 parent b4a048a
commit dfbe154
Show file tree

Hide file tree

Showing 49 changed files with 170 additions and 209 deletions.
diff --git a/components/Badge.js b/components/Badge.js
@@ -28,7 +28,7 @@ const TestGroupBadge = ({ testName, ...props }) => {
  const { icon, groupName, color } = getTestMetadata(testName)
 
  return (
- <Badge bg={color} {...props}>
+ <Badge style={{ backgroundColor: color }} {...props}>
  <div className="flex gap-1 items-center">
  <div>{groupName}</div>
  {cloneElement(icon, { size: 12 })}

diff --git a/components/DateRangePicker.js b/components/DateRangePicker.js
@@ -137,7 +137,7 @@ const DateRangePicker = ({
  }
 
  return (
- <div className="z-[8888] absolute max-w-[300px] bg-white border border-gray-200">
+ <div className="z-[6666] absolute max-w-[300px] bg-white border border-gray-200">
  <OutsideClickHandler onOutsideClick={() => close()}>
  <div className="flex gap-1 mt-2 mx-2 mb-0 flex-wrap">{rangesList}</div>
  <DayPicker

diff --git a/components/Footer.js b/components/Footer.js
@@ -27,7 +27,7 @@ const Footer = () => {
  }).format(new Date())
  return (
  <footer className="text-white mt-8 bg-blue-900">
- <div className="container mx-auto">
+ <div className="container">
  <div className="flex flex-wrap">
  <div className="py-6 w-full md:w-2/5">
  <div className="flex flex-wrap items-center">

diff --git a/components/NavBar.js b/components/NavBar.js
@@ -85,35 +85,35 @@ export const NavBar = ({ color }) => {
 
  return (
  <div
- className={`${color} z-[9999] sm:flex sm:justify-between sm:items-center sm:px-4 sm:py-5`}
+ className={`${color} z-[8888] py-4`}
  >
- <div className="container mx-auto">
- <div className="flex flex-row justify-between items-center">
- <div className="z-[1]">
+ <div className="container">
+ <div className="flex flex-row justify-between items-end">
+ <div className="z-[1] mb-1">
  <Link href="/">
  <ExplorerLogo height="26px" />
  </Link>
  </div>
- <div className="StyledResponsiveMenu" color="white">
+ <div className="StyledResponsiveMenu">
  <MdMenu
  size="28px"
- className="md:hidden cursor-pointer"
+ className="lg:hidden cursor-pointer text-white"
  onClick={() => setShowMenu(!showMenu)}
  />
  <div
- className={`menuItemsWrapper z-[9999] md:block ${showMenu ? 'block overflow-y-scroll max-h-full p-8 text-base fixed top-0 right-0 bg-gray-50' : 'hidden'}`}
+ className={`z-[9999] lg:block ${showMenu ? 'block overflow-y-scroll max-h-full p-8 text-base fixed top-0 right-0 bg-gray-50' : 'hidden'}`}
  >
  {showMenu && (
  <div className="flex justify-end">
  <MdClose
  size="28px"
- className="closeIcon cursor-pointer"
+ className="cursor-pointer"
  onClick={() => setShowMenu(!showMenu)}
  />
  </div>
  )}
  <div
- className={`menuItems 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 ${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.Search" />}

diff --git a/components/NotFound.js b/components/NotFound.js
@@ -5,7 +5,7 @@ const NotFound = ({ title }) => {
  const { asPath } = useRouter()
 
  return (
- <div className="container mx-auto">
+ <div className="container">
  <div className="flex justify-around items-center my-16">
  <OONI404 height="200px" />
  <div className="w-1/2">

diff --git a/components/aggregation/mat/ConfirmationModal.js b/components/aggregation/mat/ConfirmationModal.js
@@ -4,12 +4,10 @@ import { FormattedMessage } from 'react-intl'
 export const ConfirmationModal = ({ show, onConfirm, onCancel }) => {
  return (
  <Modal
- className="rounded-lg shadow-md shadow-black"
+ className="rounded-lg shadow-md shadow-black bg-white text-black"
  show={show}
- color="black"
- bg="white"
  >
- <div className="container mx-auto p-4">
+ <div className="container">
  <div className="flex flex-col">
  <h4 className="text-center">
  <FormattedMessage id="MAT.Form.ConfirmationModal.Title" />
@@ -21,14 +19,10 @@ export const ConfirmationModal = ({ show, onConfirm, onCancel }) => {
  </div>
  <div className="flex justify-end my-4">
  <button className="btn btn-primary mx-4 w-1/3" onClick={onCancel}>
- {/* <div className="font-bold"> */}
  <FormattedMessage id="MAT.Form.ConfirmationModal.No" />
- {/* </div> */}
  </button>
  <button className="btn btn-primary mx-4 w-1/3" onClick={onConfirm}>
- {/* <div className="font-bold"> */}
  <FormattedMessage id="MAT.Form.ConfirmationModal.Button.Yes" />
- {/* </div> */}
  </button>
  </div>
  </Modal>

diff --git a/components/as/Calendar.js b/components/as/Calendar.js
@@ -71,7 +71,7 @@ const Calendar = memo(function Calendar({ data }) {
  dayBorderColor="#ffffff"
  />
  </div>
- <div className="flex justify-between items-center mt-2 mb-[60px]">
+ <div className="flex md:justify-between mt-2 mb-[60px] flex-col md:flex-row">
  <div className="flex">
  {colorLegend.map((item) => (
  <span key={item.color} style={{ marginRight: '16px' }}>
@@ -88,7 +88,7 @@ const Calendar = memo(function Calendar({ data }) {
  </span>
  ))}
  </div>
- <div className="flex">
+ <div className="flex flex-wrap">
  {yearsOptions.map((year) => (
  <span
  key={year}

diff --git a/components/as/Form.js b/components/as/Form.js
@@ -48,7 +48,7 @@ const Form = ({ onSubmit, since, until }) => {
  return (
  <form>
  <div className="flex items-center">
- <div className="md:w-1/5">
+ <div className="w-full md:w-1/2 xl:w-1/5">
  <div className="flex">
  <div className="w-2/3 mr-4">
  <Controller

diff --git a/components/country/CountryDetails.js b/components/country/CountryDetails.js
@@ -21,12 +21,10 @@ const Header = ({ countryCode, countryName }) => {
  const miniHeader = scrollPosition >= 150
 
  return (
- // py={ miniHeader ? 0 : 4}
- <div className="flex transition-all duration-500 ease-in-out items-center flex-wrap">
+ <div className={`flex transition-all duration-500 ease-in-out items-center flex-wrap ${miniHeader ? 'py-0' : 'py-4'}`}>
  <Flag countryCode={countryCode} size={miniHeader ? 32 : 60} />
  <div className="ml-4 mr-auto">
- {/* fontSize={miniHeader ? 2 : 4} */}
- <h1 className="flex transition-all duration-500 ease-in-out">
+ <h1 className={`flex transition-all duration-500 ease-in-out ${miniHeader ? 'text-2xl' : 'text-4xl'}`}>
  {countryName}
  </h1>
  </div>
@@ -127,41 +125,39 @@ const CountryDetails = ({
  networkCount={overviewStats.network_count}
  />
  <StyledStickySubMenu>
- <div className="container mx-auto">
+ <div className="container">
  <Header countryCode={countryCode} countryName={countryName} />
  </div>
  </StyledStickySubMenu>
- <div className="container mx-auto">
- <div className="flex flex-wrap mt-8">
- <div>
- <CountryContextProvider
- countryCode={countryCode}
+ <div className="container mt-8">
+ <div>
+ <CountryContextProvider
+ countryCode={countryCode}
+ countryName={countryName}
+ >
+ <Overview
  countryName={countryName}
- >
- <Overview
- countryName={countryName}
- middleboxCount={overviewStats.middlebox_detected_networks}
- imCount={overviewStats.im_apps_blocked}
- circumventionTools={overviewStats.circumvention_tools_blocked}
- blockedWebsitesCount={overviewStats.websites_confirmed_blocked}
- networkCount={overviewStats.network_count}
- measurementCount={overviewStats.measurement_count}
- measuredSince={overviewStats.first_bucket_date}
- testCoverage={testCoverage}
- networkCoverage={networkCoverage}
- fetchTestCoverageData={fetchTestCoverageData}
- featuredArticles={reports}
- />
- <Form onSubmit={onSubmit} since={since} until={until} />
- <WebsitesSection countryCode={countryCode} />
- <AppsSection />
- </CountryContextProvider>
- <ThirdPartyDataChart
- country={countryCode}
- since={since}
- until={until}
+ middleboxCount={overviewStats.middlebox_detected_networks}
+ imCount={overviewStats.im_apps_blocked}
+ circumventionTools={overviewStats.circumvention_tools_blocked}
+ blockedWebsitesCount={overviewStats.websites_confirmed_blocked}
+ networkCount={overviewStats.network_count}
+ measurementCount={overviewStats.measurement_count}
+ measuredSince={overviewStats.first_bucket_date}
+ testCoverage={testCoverage}
+ networkCoverage={networkCoverage}
+ fetchTestCoverageData={fetchTestCoverageData}
+ featuredArticles={reports}
  />
- </div>
+ <Form onSubmit={onSubmit} since={since} until={until} />
+ <WebsitesSection countryCode={countryCode} />
+ <AppsSection />
+ </CountryContextProvider>
+ <ThirdPartyDataChart
+ country={countryCode}
+ since={since}
+ until={until}
+ />
  </div>
  </div>
  </>

diff --git a/components/country/Overview.js b/components/country/Overview.js
@@ -9,7 +9,7 @@ import { BoxWithTitle } from './boxes'
 const ooniBlogBaseURL = 'https://ooni.org'
 
 const FeaturedArticle = ({ link, title }) => (
- <div className="py-1" py={1}>
+ <div className="py-1">
  <a
  className="text-blue-700"
  href={ooniBlogBaseURL + link}
@@ -52,10 +52,10 @@ const Overview = ({
  </BlockText>
  {/* </SummaryText> */}
 
- <h4 className="my-2" my={2}>
+ <h4 className="my-2">
  <FormattedMessage id="Country.Overview.Heading.TestsByClass" />
  </h4>
- <div className="text-base" fontSize={16}>
+ <div className="text-base">
  <FormattedMarkdown id="Country.Overview.Heading.TestsByClass.Description" />
  </div>
  <Calendar startYear={measuredSince} />

diff --git a/components/country/PageNavMenu.js b/components/country/PageNavMenu.js
@@ -9,7 +9,7 @@ const HideInLargeScreens = ({ children }) => (
 )
 
 const PageNavItem = ({ link, children }) => (
- <div className="mx-4 my-1" mx={3} my={1}>
+ <div className="mx-4 my-1">
  <a className="p-2 text-base text-blue-500" href={link}>
  {children}
  </a>

diff --git a/components/country/boxes.js b/components/country/boxes.js
@@ -6,7 +6,7 @@ export const SimpleBox = ({ children }) => (
 
 export const BoxWithTitle = ({ title, children }) => (
  <div className="border border-gray-400 my-8 p-4">
- <div className="container mx-auto">
+ <div className="container">
  <div className="mb-4 text-xl font-semibold">{title}</div>
  {children}
  </div>

diff --git a/components/dashboard/Form.js b/components/dashboard/Form.js
@@ -105,8 +105,8 @@ export const Form = ({ onChange, query, availableCountries }) => {
 
  return (
  <form>
- <div className="flex items-center flex-col md:flex-row">
- <div className="md:w-1/4 mr-4 z-[2]">
+ <div className="flex flex-col md:flex-row">
+ <div className="xl:w-1/4 md:w-1/2 mr-4">
  <Controller
  render={({ field }) => (
  <MultiSelect
@@ -120,7 +120,7 @@ export const Form = ({ onChange, query, availableCountries }) => {
  control={control}
  />
  </div>
- <div className="md:w-1/5">
+ <div className="xl:w-1/4 md:w-1/2">
  <div className="flex">
  <div className="w-1/2 mr-4">
  <Controller

diff --git a/components/domain/Form.js b/components/domain/Form.js
@@ -92,8 +92,8 @@ const Form = ({ onSubmit, availableCountries = [] }) => {
 
  return (
  <form>
- <div className="flex items-center">
- <div className="md:w-1/5">
+ <div className="flex items-center flex-wrap">
+ <div className="w-full md:w-1/2 lg:w-1/3">
  <div className="flex">
  <div className="w-2/3 mr-4">
  <Controller
@@ -135,7 +135,7 @@ const Form = ({ onSubmit, availableCountries = [] }) => {
  />
  )}
  </div>
- <div className="md:w-1/4 mr-4 z-[2]">
+ <div className="w-full md:w-1/3 lg:1/3 z-[2]">
  <Controller
  control={control}
  name="probe_cc"

diff --git a/components/findings/Form.js b/components/findings/Form.js
@@ -188,10 +188,8 @@ const Form = ({ defaultValues, onSubmit }) => {
  return (
  <>
  <Modal
+ // className='px-8'
  show={showPreview}
- maxWidth={1200}
- px={2}
- width="100%"
  onHideClick={() => setShowPreview(!showPreview)}
  >
  <div className="p-8">
@@ -249,8 +247,7 @@ const Form = ({ defaultValues, onSubmit }) => {
  name="email_address"
  render={({ field }) => (
  <Input
- className='mb-4 required'
- bg="gray2"
+ className='mb-4 required [&>input]:bg-gray-200'
  {...field}
  label={intl.formatMessage({
  id: 'Findings.Form.EmailAddress.Label',
@@ -301,8 +298,8 @@ const Form = ({ defaultValues, onSubmit }) => {
  name="tags"
  render={({ field }) => (
  <MultiSelectCreatable
+ className='mb-4'
  {...field}
- mb={3}
  label={intl.formatMessage({ id: 'Findings.Form.Tags.Label' })}
  components={{ DropdownIndicator: null }}
  menuIsOpen={false}
@@ -317,8 +314,8 @@ const Form = ({ defaultValues, onSubmit }) => {
  name="test_names"
  render={({ field }) => (
  <MultiSelectCreatable
+ className='mb-4'
  {...field}
- mb={3}
  options={testNamesOptions}
  label={intl.formatMessage({
  id: 'Findings.Form.TestNames.Label',
@@ -332,7 +329,7 @@ const Form = ({ defaultValues, onSubmit }) => {
  render={({ field }) => (
  <MultiSelect
  {...field}
- mb={3}
+ className='mb-4'
  options={sortedCountries}
  label={intl.formatMessage({ id: 'Navbar.Countries' })}
  />
@@ -347,7 +344,7 @@ const Form = ({ defaultValues, onSubmit }) => {
  {...field}
  menuIsOpen={false}
  components={{ DropdownIndicator: null }}
- mb={3}
+ className='mb-4'
  label={intl.formatMessage({ id: 'Findings.Form.ASNs.Label' })}
  placeholder={intl.formatMessage({
  id: 'Findings.Form.ASNs.Placeholder',
@@ -362,7 +359,7 @@ const Form = ({ defaultValues, onSubmit }) => {
  render={({ field }) => (
  <MultiSelectCreatable
  {...field}
- mb={3}
+ className='mb-4'
  label={intl.formatMessage({ id: 'Navbar.Domains' })}
  placeholder={intl.formatMessage({
  id: 'Findings.Form.Domains.Placeholder',
@@ -389,7 +386,7 @@ const Form = ({ defaultValues, onSubmit }) => {
  name="text"
  render={({ field }) => (
  <Textarea
- className='mb-4 min-h-[500px] required'
+ className='mb-4 required [&>textarea]:min-h-[500px]'
  {...field}
  label={intl.formatMessage({ id: 'Findings.Form.Text.Label' })}
  error={errors?.text?.message}

diff --git a/components/findings/LoginRequiredModal.js b/components/findings/LoginRequiredModal.js
@@ -15,7 +15,7 @@ const LoginRequiredModal = ({ show }) => {
 
  return (
  <Modal className="rounded-lg shadow-md text-black bg-white " show={show}>
- <div className="container mx-auto text-center p-1 md:p-4 py-8">
+ <div className="container text-center p-1 md:p-4 py-8">
  <div className="flex">
  <h4>
  {intl.formatMessage({ id: 'Findings.LoginRequiredModal.Title' })}

diff --git a/components/landing/HighlightBox.js b/components/landing/HighlightBox.js
@@ -20,7 +20,7 @@ const HighlightBox = ({ countryCode, title, text, dates, footer }) => {
  </div>
  )}
  {dates}
- <h4 className="text-2xl my-2">{title}</h4>
+ <h4 className="text-2xl my-2 leading-tight">{title}</h4>
  <p className="text-xl">
  <Markdown>{text}</Markdown>
  </p>