From c9bdce3f43e6fe7f563701b4d65a01ea9de9f4e8 Mon Sep 17 00:00:00 2001
From: James Fenn <me@jfenn.me>
Date: Sat, 15 Jul 2023 15:02:19 -0400
Subject: [PATCH] implement article-nav icon padding

---
 .../blog-post/article-nav/article-nav.module.scss | 15 ++++++++++-----
 src/views/blog-post/article-nav/article-nav.tsx   |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/views/blog-post/article-nav/article-nav.module.scss b/src/views/blog-post/article-nav/article-nav.module.scss
index 1326faed..c7288177 100644
--- a/src/views/blog-post/article-nav/article-nav.module.scss
+++ b/src/views/blog-post/article-nav/article-nav.module.scss
@@ -50,11 +50,6 @@
 	@include transition(background-color border-color);
 
 	&__overline {
-		svg {
-			width: var(--article-nav_item_arrow_size);
-			height: var(--article-nav_item_arrow_size);
-		}
-
 		color: var(--article-nav_item_overline-color);
 		display: flex;
 		align-items: center;
@@ -113,3 +108,13 @@
 		text-align: right;
 	}
 }
+
+.icon {
+	display: inline-flex;
+	padding: var(--icon-size-dense-padding);
+
+	svg {
+		width: var(--article-nav_item_arrow_size);
+		height: var(--article-nav_item_arrow_size);
+	}
+}
diff --git a/src/views/blog-post/article-nav/article-nav.tsx b/src/views/blog-post/article-nav/article-nav.tsx
index 9edb4948..5cd0d074 100644
--- a/src/views/blog-post/article-nav/article-nav.tsx
+++ b/src/views/blog-post/article-nav/article-nav.tsx
@@ -21,7 +21,7 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
 					? (
 						<span class={`${style.item__overline} text-style-button-regular`}>
 							<span
-								style="display: inline-flex;"
+								class={`${style.icon}`}
 								dangerouslySetInnerHTML={{ __html: arrow_left }}
 							/>
 							Previous article
@@ -31,7 +31,7 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
 						<span class={`${style.item__overline} text-style-button-regular`}>
 							Next article
 							<span
-								style="display: inline-flex;"
+								class={`${style.icon}`}
 								dangerouslySetInnerHTML={{ __html: arrow_right }}
 							/>
 						</span>