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} + {text} ); 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 (