From df01e0dfbdd8d68863c0d3d9e5bd377ea105f1b5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 17 Feb 2022 21:51:11 -0800
Subject: [PATCH] fix: Disabled primary buttons should have a lighter
 appearance, closes #3110

---
 app/components/Button.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index c55b30a82..faf7dd607 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -1,5 +1,5 @@
 import { ExpandedIcon } from "outline-icons";
-import { darken } from "polished";
+import { darken, lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 
@@ -49,6 +49,7 @@ const RealButton = styled.button<{
     cursor: default;
     pointer-events: none;
     color: ${(props) => props.theme.white50};
+    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};
 
     svg {
       fill: ${(props) => props.theme.white50};
@@ -88,6 +89,7 @@ const RealButton = styled.button<{
 
     &:disabled {
       color: ${props.theme.textTertiary};
+      background: none;
 
       svg {
         fill: currentColor;
@@ -104,6 +106,10 @@ const RealButton = styled.button<{
       &:hover:not(:disabled) {
         background: ${darken(0.05, props.theme.danger)};
       }
+
+      &:disabled {
+        background: none;
+      }
   `};
 `;