Add blur to transparent buttons

2 files changed, 12 insertions, 3 deletions

diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx
index d424e8b54e..a761179924 100644
--- a/gui/src/renderer/components/AppButton.tsx
+++ b/gui/src/renderer/components/AppButton.tsx
@@ -3,7 +3,12 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import log from '../../shared/logging';
 import { useMounted } from '../lib/utilityHooks';
-import { StyledButtonContent, StyledLabel, StyledLabelContainer } from './AppButtonStyles';
+import {
+  StyledButtonContent,
+  StyledLabel,
+  StyledLabelContainer,
+  transparentButton,
+} from './AppButtonStyles';
 import ImageView from './ImageView';
 
 interface IButtonContext {
@@ -178,14 +183,14 @@ export const BlueButton = styled(BaseButton)({
   },
 });
 
-export const TransparentButton = styled(BaseButton)({
+export const TransparentButton = styled(BaseButton)(transparentButton, {
   backgroundColor: colors.white20,
   ':not(:disabled):hover': {
     backgroundColor: colors.white40,
   },
 });
 
-export const RedTransparentButton = styled(BaseButton)({
+export const RedTransparentButton = styled(BaseButton)(transparentButton, {
   backgroundColor: colors.red60,
   ':not(:disabled):hover': {
     backgroundColor: colors.red80,
diff --git a/gui/src/renderer/components/AppButtonStyles.tsx b/gui/src/renderer/components/AppButtonStyles.tsx
index f851bf69c5..5446e89b31 100644
--- a/gui/src/renderer/components/AppButtonStyles.tsx
+++ b/gui/src/renderer/components/AppButtonStyles.tsx
@@ -21,3 +21,7 @@ export const StyledButtonContent = styled.div({
   justifyContent: 'center',
   padding: '9px',
 });
+
+export const transparentButton = {
+  backdropFilter: 'blur(4px)',
+};