fix: Disabled primary buttons should have a lighter appearance, closes #3110

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;
+      }
   `};
 `;