From 66dc7c5e1de06934ec417130184ad1f3c43c1c81 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Tue, 5 Nov 2024 12:28:43 -0500
Subject: [PATCH] fix: visual defects following theme change

---
 src/Alert/Alert.tsx                     |  4 +---
 src/BrandedNavBar/MobileMenu.tsx        |  6 +++---
 src/Breadcrumbs/BreadcrumbsListItem.tsx |  1 +
 src/Button/ControlIcon.tsx              | 11 +----------
 src/Icon/Icon.tsx                       |  2 +-
 src/utils/subPx.js                      |  6 ------
 src/utils/subPx.ts                      | 11 +++++++++++
 7 files changed, 18 insertions(+), 23 deletions(-)
 delete mode 100644 src/utils/subPx.js
 create mode 100644 src/utils/subPx.ts

diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 77e03b608..308f42fe4 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -81,9 +81,7 @@ const Alert = ({
   return (
     <Flex
       bg={alertColours[type].backgroundColor}
-      py="x2"
-      paddingLeft="x2"
-      paddingRight="x1_5"
+      p="x2"
       borderRadius="medium"
       borderLeftWidth="4px"
       borderLeftColor={alertColours[type].borderColor}
diff --git a/src/BrandedNavBar/MobileMenu.tsx b/src/BrandedNavBar/MobileMenu.tsx
index 41b1b9a23..dea366d25 100644
--- a/src/BrandedNavBar/MobileMenu.tsx
+++ b/src/BrandedNavBar/MobileMenu.tsx
@@ -195,7 +195,7 @@ const Menu = styled.ul(({ theme }) => ({
   zIndex: theme.zIndices.content,
   width: "100%",
   color: theme.colors.white,
-  [`${Heading3}`]: {
+  [`${TopLevelText}`]: {
     padding: `${theme.space.x1} 0 ${theme.space.x1} ${theme.space.x3}`,
   },
 }));
@@ -226,14 +226,14 @@ type BaseMobileMenuProps = {
   showNulogyLogo?: boolean;
 };
 
-const BaseMobileMenu: React.FC<React.PropsWithChildren<BaseMobileMenuProps>> = ({
+const BaseMobileMenu = ({
   menuData,
   closeMenu,
   subtext,
   themeColorObject,
   showNulogyLogo,
   ...props
-}) => (
+}: BaseMobileMenuProps) => (
   <Nav backgroundColor={themeColorObject && themeColorObject.background} {...props}>
     <BrandingWrap>
       <BrandingText logoColor={themeColorObject?.logoColor} />
diff --git a/src/Breadcrumbs/BreadcrumbsListItem.tsx b/src/Breadcrumbs/BreadcrumbsListItem.tsx
index 8a734290a..10bcdae2b 100644
--- a/src/Breadcrumbs/BreadcrumbsListItem.tsx
+++ b/src/Breadcrumbs/BreadcrumbsListItem.tsx
@@ -39,6 +39,7 @@ export const BreadcrumbsListItem = styled.li<{ variant: ComponentVariant }>(
     "a, p": {
       padding: theme.space.none,
       fontSize: theme.fontSizes.small,
+      lineHeight: theme.lineHeights.smallTextBase,
     },
   }),
   variant({
diff --git a/src/Button/ControlIcon.tsx b/src/Button/ControlIcon.tsx
index ba4c9aa54..f97d6577f 100644
--- a/src/Button/ControlIcon.tsx
+++ b/src/Button/ControlIcon.tsx
@@ -52,16 +52,7 @@ const StyledButton = styled.button<{
 
 const ControlIcon = React.forwardRef<HTMLButtonElement, ControlIconProps>(
   ({ icon, toggled, disabled, label, size = "x4", type = "button", ...props }, ref) => (
-    <StyledButton
-      height={size}
-      width={size}
-      aria-label={label}
-      ref={ref}
-      disabled={disabled}
-      toggled={toggled}
-      type={type}
-      {...props}
-    >
+    <StyledButton aria-label={label} ref={ref} disabled={disabled} toggled={toggled} type={type} {...props}>
       <Icon size={size} icon={icon} />
     </StyledButton>
   )
diff --git a/src/Icon/Icon.tsx b/src/Icon/Icon.tsx
index f16e46c01..b168f4c7c 100644
--- a/src/Icon/Icon.tsx
+++ b/src/Icon/Icon.tsx
@@ -75,7 +75,7 @@ const Svg = React.forwardRef<SVGSVGElement, IconProps>(
 );
 
 const Icon = styled(Svg)<IconProps>(space, ({ theme, color = "currentColor", size }) => ({
-  minWidth: theme.sizes[size] ?? theme.sizes.x3,
+  minWidth: theme.sizes[size] ?? size ?? theme.sizes.x3,
   color: color,
 }));
 
diff --git a/src/utils/subPx.js b/src/utils/subPx.js
deleted file mode 100644
index 815714f48..000000000
--- a/src/utils/subPx.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const subPx = (val1, val2) => {
-  const val2Str = !val2 ? "1px" : `${val2}`;
-  return `${parseInt(val1.replace("px", ""), 10) - parseInt(val2Str.replace("px", ""), 10)}px`;
-};
-
-export default subPx;
diff --git a/src/utils/subPx.ts b/src/utils/subPx.ts
new file mode 100644
index 000000000..82503cc66
--- /dev/null
+++ b/src/utils/subPx.ts
@@ -0,0 +1,11 @@
+type CSSUnit = string;
+/**
+ * Subtracts two CSS measurements using calc()
+ * @param baseValue The starting CSS measurement
+ * @param subtractValue The value to subtract (defaults to '1px')
+ * @returns A CSS calc() expression
+ */
+export default function subPx(baseValue: CSSUnit, subtractValue?: CSSUnit): string {
+  const valueToSubtract: CSSUnit = subtractValue ?? "1px";
+  return `calc(${baseValue} - ${valueToSubtract})`;
+}