mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-03 06:57:54 +02:00
Code Issues Releases Wiki Activity

fix: unreadable badge icon on certain colors (#3810)

Browse Source
This commit is contained in:
Sami Mazouz
2023-04-29 18:35:18 +01:00
committed by GitHub
parent af3f91ca5b
commit 7ebeb9c0a5
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
framework/core/js/src/common/components/Badge.tsx
View File

@@ -2,6 +2,7 @@ import Tooltip from './Tooltip';
import Component, { ComponentAttrs } from '../Component'; import Component, { ComponentAttrs } from '../Component';
import icon from '../helpers/icon'; import icon from '../helpers/icon';
import classList from '../utils/classList'; import classList from '../utils/classList';
import textContrastClass from '../helpers/textContrastClass';
export interface IBadgeAttrs extends ComponentAttrs { export interface IBadgeAttrs extends ComponentAttrs {
icon: string; icon: string;
@@ -27,7 +28,7 @@ export default class Badge<CustomAttrs extends IBadgeAttrs = IBadgeAttrs> extend
view() { view() {
const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs; const { type, icon: iconName, label, color, style = {}, ...attrs } = this.attrs;
const className = classList('Badge', [type && `Badge--${type}`], attrs.className); const className = classList('Badge', [type && `Badge--${type}`], attrs.className, color && textContrastClass(color));
const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;'); const iconChild = iconName ? icon(iconName, { className: 'Badge-icon' }) : m.trust('&nbsp;');

2
framework/core/less/common/Badge.less
View File

@@ -4,7 +4,7 @@
height: var(--size); height: var(--size);
border-radius: calc(~"var(--size) / 2"); border-radius: calc(~"var(--size) / 2");
background: var(--badge-bg); background: var(--badge-bg);
color: var(--badge-color); color: var(--contrast-color, var(--badge-color));
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;