From e7605d2d2fdc236e39f27c9780cff6b19423aa80 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:30:22 -0500
Subject: [PATCH] Fleet UI: Fix app store icons with awkward borders (#24126)

---
 changes/23733-apple-app-store-icons           |  1 +
 .../icons/SoftwareIcon/SoftwareIcon.tsx       |  1 -
 .../icons/SoftwareIcon/_styles.scss           | 27 ++++++++-----------
 3 files changed, 12 insertions(+), 17 deletions(-)
 create mode 100644 changes/23733-apple-app-store-icons

diff --git a/changes/23733-apple-app-store-icons b/changes/23733-apple-app-store-icons
new file mode 100644
index 0000000000..f9b062ff82
--- /dev/null
+++ b/changes/23733-apple-app-store-icons
@@ -0,0 +1 @@
+- Fleet UI: Remove image borders that are included in Apple's app store icons
diff --git a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
index e7c29fec98..369621a50f 100644
--- a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
+++ b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
@@ -29,7 +29,6 @@ const SoftwareIcon = ({
   url,
 }: ISoftwareIconProps) => {
   const classNames = classnames(baseClass, `${baseClass}__${size}`);
-
   // If we are given a url to render as the icon, we need to render it
   // differently than the svg icons. We will use an img tag instead with the
   // src set to the url.
diff --git a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
index bb62bd5cb8..1d3e841549 100644
--- a/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
+++ b/frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
@@ -1,6 +1,5 @@
 .software-icon {
   flex-shrink: 0;
-  border: 1px solid $ui-fleet-black-10;
 
   &__small {
     border-radius: $border-radius;
@@ -31,34 +30,30 @@
   // TODO: we should change ".core-wrapper a img" selector in that file
   // as it too generic and can affect other parts of the app.
   > img.software-icon__software-img-small {
-    width: 22px;
-    height: 22px;
+    width: 24px;
+    height: 24px;
     border-radius: $border-radius-small;
-    padding: 1px;
     margin-left: 0;
   }
 
-  >img.software-icon__software-img-medium {
-    width: 38px;
-    height: 38px;
+  > img.software-icon__software-img-medium {
+    width: 40px;
+    height: 40px;
     border-radius: $border-radius-xlarge;
-    padding: 1px;
     margin-left: 0;
   }
 
-  >img.software-icon__software-img-large {
-    width: 60px;
-    height: 60px;
+  > img.software-icon__software-img-large {
+    width: 64px;
+    height: 64px;
     border-radius: $border-radius-xxlarge;
-    padding: 1px;
     margin-left: 0;
   }
 
-  >img.software-icon__software-img-xlarge {
-    width: 88px;
-    height: 88px;
+  > img.software-icon__software-img-xlarge {
+    width: 96px;
+    height: 96px;
     border-radius: $border-radius-xxlarge;
-    padding: $pad-xsmall;
     margin-left: 0;
   }
 }