diff --git a/web/components/button.css b/web/components/button.css --- a/web/components/button.css +++ b/web/components/button.css @@ -10,28 +10,56 @@ cursor: pointer; } +.btn:hover { + transition-duration: 200ms; + transition-property: background-color, color; +} + +.btn:disabled { + cursor: not-allowed; + color: var(--btn-disabled-color); +} + .primary { - background: var(--btn-bg-primary); + background-color: var(--btn-bg-primary); color: var(--fg); - transition: 200ms; } .primary:hover { background-color: var(--btn-bg-primary-hover); - transition: 200ms; +} + +.primary:disabled { + background-color: var(--btn-bg-primary-disabled); } .secondary { - background: var(--shades-black-90); + background-color: var(--btn-bg-secondary); color: var(--fg); border: 1px solid var(--btn-secondary-border); } +.secondary:hover { + background-color: var(--btn-bg-secondary-hover); +} + +.secondary:disabled { + background-color: var(--btn-bg-secondary-disabled); +} + .danger { - background: var(--btn-bg-danger); + background-color: var(--btn-bg-danger); color: var(--fg); } +.danger:hover { + background-color: var(--btn-bg-danger-hover); +} + +.danger:disabled { + background-color: var(--btn-bg-danger-disabled); +} + .round { width: 30px; height: 30px; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -62,7 +62,14 @@ /* Color Theme */ --btn-bg-primary: var(--violet-dark-100); --btn-bg-primary-hover: var(--violet-dark-80); + --btn-bg-primary-disabled: var(--shades-black-80); + --btn-bg-secondary: var(--shades-black-90); + --btn-bg-secondary-hover: var(--shades-black-80); + --btn-bg-secondary-disabled: var(--shades-black-90); --btn-bg-danger: var(--error-primary); + --btn-bg-danger-hover: var(--error-dark-50); + --btn-bg-danger-disabled: var(--shades-black-80); + --btn-disabled-color: var(--shades-black-60); --chat-bg: var(--violet-dark-80); --chat-confirmation-icon: var(--violet-dark-100); --keyserver-selection: var(--violet-dark-60);