Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 114

Fleet UI: Fix app store icons with awkward borders (#24126)

Browse source
This commit is contained in:
RachelElysia 2024-11-26 16:30:22 -05:00 committed by GitHub
parent d7e946fcce
commit e7605d2d2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changes/23733-apple-app-store-icons Normal file
View file

@ -0,0 +1 @@
- Fleet UI: Remove image borders that are included in Apple's app store icons

1
frontend/pages/SoftwarePage/components/icons/SoftwareIcon/SoftwareIcon.tsx
View file

@ -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.

27
frontend/pages/SoftwarePage/components/icons/SoftwareIcon/_styles.scss
View file

@ -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;
}
}