Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(TabInfoButton): [EMU-7334] Increase contrast #309

Merged
merged 2 commits into from
May 13, 2024
Merged

fix(TabInfoButton): [EMU-7334] Increase contrast #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3c9186
fix(TabInfoButton): [EMU-7334] Increase contrast
kimkwanka May 13, 2024
7010599
refactor(TabInfoButton): [EMU-7334] Use InfoIcon component
kimkwanka May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 5 additions & 30 deletions src/lib/components/comparisonTable/components/TableInfoButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Info from '../../../icon/icons/Info';
import styles from './style.module.scss';

const TableInfoButton = ({
Expand All @@ -7,39 +8,13 @@ const TableInfoButton = ({
onClick: () => void;
className?: string;
}) => (
<span
role="button"
<button
className={`p-btn--secondary ${styles.button} ${className}`}
type="button"
onClick={onClick}
onKeyDown={(e) => {
e.stopPropagation();

if (e.key === 'Enter' || e.key === " ") {
onClick();
}
}}
tabIndex={0}
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z"
/>
<path d="M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z" />
</svg>
</span>
<Info size={20} />
</button>
);

export default TableInfoButton;
8 changes: 6 additions & 2 deletions src/lib/components/comparisonTable/components/TableInfoButton/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,16 @@
background-color: $ds-primary-50;

svg {
fill: $ds-primary-300;
path {
fill: $ds-primary-300;
}
}
}

svg {
fill: $ds-primary-100;
path {
fill: $ds-grey-400;
}
transition: all 0.3s ease;
}

Expand Down
Loading