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 111

Fix icon not being aligned properly on Host details/ My device page. (#11919)

Browse source
This commit is contained in:
Gabriel Hernandez 2023-05-24 15:10:07 +01:00 committed by GitHub
parent 048de9a002
commit e500a4f65d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changes/issue-11763-fix-misaligned-icons Normal file
View file

@ -0,0 +1 @@
- fix misaligned icons in UI

4
frontend/components/Icon/_styles.scss
View file

@ -2,8 +2,4 @@
// keeps this element the same size as the svg
// aligns properly in text, buttons, dropdowns, summary tile custom component
display: inline-flex;
svg {
padding: 1px;
}
}

24
frontend/components/icons/PendingPartial.tsx
View file

@ -1,18 +1,18 @@
import React from "react";
const PendingPartial = () => {
import { COLORS, Colors } from "styles/var/colors";
interface ICheckProps {
color?: Colors;
}
const PendingPartial = ({ color = "ui-fleet-black-50" }: ICheckProps) => {
return (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="9" cy="9" r="8" stroke="#8B8FA2" strokeWidth="2" />
<circle cx="5.6665" cy="9" r="1" fill="#8B8FA2" />
<circle cx="8.6665" cy="9" r="1" fill="#8B8FA2" />
<circle cx="11.6665" cy="9" r="1" fill="#8B8FA2" />
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7" stroke={COLORS[color]} strokeWidth="2" />
<circle cx="4.667" cy="8" r="1" fill={COLORS[color]} />
<circle cx="7.667" cy="8" r="1" fill={COLORS[color]} />
<circle cx="10.666" cy="8" r="1" fill={COLORS[color]} />
</svg>
);
};

21
frontend/components/icons/SuccessPartial.tsx
View file

@ -1,18 +1,17 @@
import React from "react";
import { COLORS, Colors } from "styles/var/colors";
const SuccessPartial = () => {
interface ICheckProps {
color?: Colors;
}
const SuccessPartial = ({ color = "status-success" }: ICheckProps) => {
return (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse cx="9" cy="9" rx="8" ry="8" stroke="#3DB67B" strokeWidth="2" />
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7" stroke={COLORS[color]} strokeWidth="2" />
<path
d="M6 10L8 12L12 6"
stroke="#3DB67B"
d="m5 9 2 2 4-6"
stroke={COLORS[color]}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"

9
frontend/styles/global/_global.scss
View file

@ -18,8 +18,6 @@ body {
html,
body {
height: 100%;
// desired default line-height for text is 1.5x the font size.
line-height: 1.5;
.__react_component_tooltip {
text-align: center;
@ -39,6 +37,13 @@ h3 {
line-height: 1.2;
}
p {
// Desired default line-height for text is 1.5x the font size for paragrah text.
// This allows for a comfortable reading experience by adding space between
// multiline paragraphs.
line-height: 1.5;
}
h1 {
font-size: $large;
font-weight: $regular;