diff --git a/frontend/app/element/button.less b/frontend/app/element/button.less index 1f848f3df..5dcd84519 100644 --- a/frontend/app/element/button.less +++ b/frontend/app/element/button.less @@ -33,6 +33,9 @@ &.primary, &.secondary { background: var(--accent-color); + &:hover { + color: var(--main-text-color); + } i { fill: var(--main-text-color); @@ -49,6 +52,7 @@ &.primary.ghost { background: none; + border: 1px solid var(--accent-color); i { fill: var(--accent-color); @@ -68,6 +72,13 @@ &.secondary.ghost { background: none; + border: 1px solid var(--secondary-text-color); + color: var(--secondary-text-color); + + &:hover { + border: 1px solid var(--main-text-color); + color: 1px solid var(--main-text-color); + } } &.secondary.danger { diff --git a/frontend/app/element/iconbutton.less b/frontend/app/element/iconbutton.less index bf1a3f6a5..d781a23a9 100644 --- a/frontend/app/element/iconbutton.less +++ b/frontend/app/element/iconbutton.less @@ -3,6 +3,17 @@ opacity: 0.7; align-items: center; + &.bulb { + color: var(--bulb-color); + opacity: 1; + + &:hover i::before { + content: "\f672"; + position: relative; + left: -1px; + } + } + &:hover { opacity: 1; } diff --git a/frontend/app/theme.less b/frontend/app/theme.less index 1883baff2..2dd506eff 100644 --- a/frontend/app/theme.less +++ b/frontend/app/theme.less @@ -104,4 +104,6 @@ --conn-icon-color-6: #ffa24e; --conn-icon-color-7: #dbde52; --conn-icon-color-8: #58c142; + + --bulb-color: rgb(255, 221, 51); } diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx index dfda2d061..5981dbd14 100644 --- a/frontend/app/view/preview/preview.tsx +++ b/frontend/app/view/preview/preview.tsx @@ -357,8 +357,9 @@ export class PreviewModel implements ViewModel { tipIcon = [ { elemtype: "iconbutton", - icon: "lightbulb-on", + icon: "lightbulb", iconColor: "var(--warning-color)", + className: "bulb", click: () => { const tips: UserInputRequest = { requestid: "",