houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hotkey visibility in buttons with blue accent (#15764)

Browse Source 
Closes #15728

## Problem
The `color` of `ButtonHotKeys` was set to `theme.border.color.blue` when
the button accent was blue. This led to poor visibility of the hotkey.

## Solution
The `color` is now set to `GRAY_SCALE_LIGHT.gray7`

## Screenshots
### Before
<img width="278" height="54" alt="image"
src="https://github.com/user-attachments/assets/7dd2c8a4-1230-4b57-9a1d-62564ab15337"
/>
<img width="280" height="52" alt="image"
src="https://github.com/user-attachments/assets/21cc62fb-e1eb-47ce-925c-3658389d24d8"
/>


### After
<img width="274" height="54" alt="image"
src="https://github.com/user-attachments/assets/cfbed222-a807-4af2-ab11-839ef5274186"
/>
<img width="275" height="52" alt="image"
src="https://github.com/user-attachments/assets/602274d8-3af6-4de8-9504-2cb0fe30d5dc"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Balaji Krishnamurthy
2025-11-18 20:26:00 +05:30
committed by GitHub
parent bbe104c27b
commit 14d3866439
4 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
+4 -4
View File
@@ -1,10 +1,10 @@
import { getOsShortcutSeparator } from '@ui/utilities';
import styled from '@emotion/styled';
import {
type ButtonAccent,
type ButtonSize,
type ButtonVariant,
} from '@ui/input';
import styled from '@emotion/styled';
import { getOsShortcutSeparator } from '@ui/utilities';
const StyledSeparator = styled.div<{
buttonSize: ButtonSize;
@@ -13,7 +13,7 @@ const StyledSeparator = styled.div<{
background: ${({ theme, accent }) => {
switch (accent) {
case 'blue':
return theme.border.color.blue;
return theme.buttons.secondaryTextColor;
case 'danger':
return theme.border.color.danger;
default:
@@ -33,7 +33,7 @@ const StyledShortcutLabel = styled.div<{
color: ${({ theme, variant, accent }) => {
switch (accent) {
case 'blue':
return theme.border.color.blue;
return theme.buttons.secondaryTextColor;
case 'danger':
return variant === 'primary'
? theme.border.color.danger