diff --git a/components/navigation/arrowLink.module.css b/components/navigation/arrowLink.module.css index d40c4ab7a..2a4b9eda3 100644 --- a/components/navigation/arrowLink.module.css +++ b/components/navigation/arrowLink.module.css @@ -1,9 +1,9 @@ .Container { - @apply flex flex-wrap flex-col md:flex-row md:flex-nowrap items-center justify-between mt-20 gap-4; + @apply flex flex-wrap flex-col md:flex-row md:flex-nowrap items-center justify-between mt-16 mb-8 gap-4; } .Link { - @apply overflow-hidden border-none text-base tracking-tight font-sans font-normal text-gray-90 leading-7 hover:opacity-70 flex items-center transition-all; + @apply overflow-hidden border-none text-base md:text-lg tracking-tight font-sans font-normal text-gray-90 leading-7 hover:opacity-70 flex items-center transition-all; } .Truncate { @@ -15,7 +15,7 @@ } .NextLink { - @apply mt-8 sm:mt-0; + @apply mt-0 sm:mt-0; } .Icon { diff --git a/components/utilities/helpful.module.css b/components/utilities/helpful.module.css index 208f1603b..1ca785540 100644 --- a/components/utilities/helpful.module.css +++ b/components/utilities/helpful.module.css @@ -3,17 +3,10 @@ } .Title { - @apply font-bold text-lg mb-0 tracking-tight; + @apply font-bold text-base mb-0 tracking-tight; @apply text-gray-90 !important; } -:global(.dark) .Title, -:global(.dark) .ImproveTitle, -:global(.dark) .ImproveText, -:global(.dark) .Label { - @apply text-white !important; -} - .CtaContainer { @apply flex flex-row items-center pt-4 md:pt-0; } @@ -27,20 +20,11 @@ @apply ml-6; } -:global(.dark) .Button { - @apply bg-gray-80; - @apply text-white !important; -} - .Icon { @apply text-base mr-2; @apply text-gray-50 !important; } -:global(.dark) .Icon { - @apply text-gray-90; -} - /* How can we improve this page form step */ .ImproveTitle { @apply font-bold text-lg tracking-tight my-0; @@ -60,10 +44,6 @@ @apply w-4 h-4 mr-2 checked:bg-gray-90 appearance-none border border-gray-90 rounded-sm outline-0 cursor-pointer; } -:global(.dark) .Input { - @apply checked:bg-white border-white; -} - .Label { @apply font-sans; @apply text-gray-90 !important; @@ -79,9 +59,33 @@ } .FormContainer { - @apply flex flex-col md:flex-row items-start md:items-center mt-16; + @apply flex flex-col md:flex-row items-start md:items-center pt-8 mt-8 md:pt-12 md:mt-12 border-t border-t-gray-30; } .Form { @apply flex-1; } + +:global(.dark) .Title, +:global(.dark) .ImproveTitle, +:global(.dark) .ImproveText, +:global(.dark) .Label { + @apply text-white !important; +} + +:global(.dark) .Button { + @apply bg-gray-80; + @apply text-white !important; +} + +:global(.dark) .Icon { + @apply text-gray-90; +} + +:global(.dark) .Input { + @apply checked:bg-white border-white; +} + +:global(.dark) .FormContainer { + @apply border-gray-90; +} diff --git a/components/utilities/psa.module.css b/components/utilities/psa.module.css index 508cee386..720d56c96 100644 --- a/components/utilities/psa.module.css +++ b/components/utilities/psa.module.css @@ -1,5 +1,5 @@ .Container { - @apply flex items-center flex-wrap py-8 mt-16 border-t border-b border-t-gray-30 border-b-gray-30; + @apply flex items-center flex-wrap; } :global(.dark) .Container { diff --git a/pages/[...slug].js b/pages/[...slug].js index dfc4e5632..cce9a5d3b 100644 --- a/pages/[...slug].js +++ b/pages/[...slug].js @@ -255,11 +255,11 @@ export default function Article({
+ {arrowContainer} +
- - {arrowContainer}