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({