From 1aaee2b5de76b4dfe7a24a16d86fd091eab65ae2 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 1 Nov 2022 12:51:05 -0400
Subject: [PATCH] Non-released bug: Fix dropdown by fixing icon styling (#8522)

---
 frontend/components/BackLink/BackLink.tsx   | 2 +-
 frontend/components/BackLink/_styles.scss   | 3 +++
 frontend/components/Icon/_styles.scss       | 6 +++---
 frontend/components/icons/CalendarCheck.tsx | 6 +++---
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/components/BackLink/BackLink.tsx b/frontend/components/BackLink/BackLink.tsx
index 84f68acdee..072ebbb93a 100644
--- a/frontend/components/BackLink/BackLink.tsx
+++ b/frontend/components/BackLink/BackLink.tsx
@@ -29,7 +29,7 @@ const BackLink = ({ text, path, className }: IBackLinkProps): JSX.Element => {
           direction="left"
           color="coreVibrantBlue"
         />
-        {text}
+        <span>{text}</span>
       </>
     </Link>
   );
diff --git a/frontend/components/BackLink/_styles.scss b/frontend/components/BackLink/_styles.scss
index 62dd273bd0..3a6eb08a82 100644
--- a/frontend/components/BackLink/_styles.scss
+++ b/frontend/components/BackLink/_styles.scss
@@ -1,4 +1,7 @@
 .back-link {
+  display: flex;
+  align-items: center;
+
   &__back-icon {
     padding-right: $pad-small;
     display: inline;
diff --git a/frontend/components/Icon/_styles.scss b/frontend/components/Icon/_styles.scss
index 1f457f8d67..13c4c4a4cf 100644
--- a/frontend/components/Icon/_styles.scss
+++ b/frontend/components/Icon/_styles.scss
@@ -1,5 +1,5 @@
 .icon {
-  // only style that aligns properly whether in text
-  display: inline;
-  vertical-align: middle;
+  // keeps this element the same size as the svg
+  // aligns properly in text, buttons, dropdowns, summary tile custom component
+  display: inline-flex;
 }
diff --git a/frontend/components/icons/CalendarCheck.tsx b/frontend/components/icons/CalendarCheck.tsx
index 8a65e1b98f..d95b0a55c2 100644
--- a/frontend/components/icons/CalendarCheck.tsx
+++ b/frontend/components/icons/CalendarCheck.tsx
@@ -3,9 +3,9 @@ import React from "react";
 const CalendarCheck = () => {
   return (
     <svg
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >