From e705152cc7461f2189a36cf3a1b2fcab92e319f2 Mon Sep 17 00:00:00 2001
From: Ramon Souza <contato@ramonsouza.com>
Date: Tue, 31 May 2022 10:22:17 -0300
Subject: [PATCH] restore removed styles

---
 .../ui/components/common/button/styles.js     | 49 ++++++++++++++++---
 1 file changed, 42 insertions(+), 7 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/common/button/styles.js b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
index 7c0ee61cc6..12f984577a 100644
--- a/bigbluebutton-html5/imports/ui/components/common/button/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/button/styles.js
@@ -200,7 +200,7 @@ const ButtonWrapper = styled(BaseButton)`
     padding: ${jumboPaddingY} ${jumboPaddingX};
   `}
 
-  ${({ color }) => color === 'primary' && `
+  ${({ size, circle, color }) => size === 'lg' && circle && color === 'primary' && `
     &:focus:not([aria-disabled="true"]){
       & > span{
         color: ${btnPrimaryColor};
@@ -235,7 +235,9 @@ const ButtonWrapper = styled(BaseButton)`
     }
   `}
 
-  ${({ circle, ghost, color }) => circle && ghost && color === 'default' && `
+  ${({
+    size, circle, ghost, color,
+  }) => size === 'lg' && circle && ghost && color === 'default' && `
     & > span{
       color: ${btnDefaultGhostColor};
     }
@@ -251,7 +253,7 @@ const ButtonWrapper = styled(BaseButton)`
 
     &:hover{
       & > span{
-        filter: brightness(90%);
+        filter: brightness(85%);
         background-color: ${btnDefaultGhostBg} !important;
       }
     }
@@ -259,7 +261,7 @@ const ButtonWrapper = styled(BaseButton)`
     &:active:focus{
       & > span{
         filter: brightness(85%);
-        background-color: ${btnDefaultGhostActiveBg};
+        background-color: ${btnDefaultGhostActiveBg} !important;
       }
     }
 
@@ -363,7 +365,7 @@ const ButtonSpan = styled.span`
       color: ${btnDefaultColor};
       background-color: ${btnDefaultBg};
       background-clip: padding-box;
-      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
+      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
     }
 
     &:hover & {
@@ -375,6 +377,19 @@ const ButtonSpan = styled.span`
     color: ${btnPrimaryColor};
     background-color: ${btnPrimaryBg};
     border: ${borderSizeLarge} solid transparent;
+
+    &:focus,
+    .buttonWrapper:focus:not([aria-disabled="true"]) & {
+      color: ${btnPrimaryColor};
+      background-color: ${btnPrimaryBg};
+      background-clip: padding-box;
+      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
+    }
+    &:hover,
+    .buttonWrapper:hover & {
+      color: ${btnPrimaryColor};
+    }
+  
   `}
 
   ${({ color }) => color === 'success' && `
@@ -490,6 +505,25 @@ const ButtonSpan = styled.span`
     }
   `}
 
+  ${({ ghost, color, size }) => ghost && color === 'default' && size !== 'lg' && `
+    color: ${btnDefaultBg};
+    background-image: none;
+    background-color: transparent;
+    border: ${borderSizeLarge} solid transparent;
+    &:focus,
+    .buttonWrapper:focus & {
+      color: ${btnDefaultBg};
+      background-color: ${btnDefaultColor};
+      background-clip: padding-box;
+      box-shadow: 0 0 0 ${borderSizeLarge} ${btnDefaultBg};
+    }
+    &:hover,
+    .buttonWrapper:hover & {
+      color: ${btnDefaultBg};
+      background-color: ${btnDefaultColor};
+    }
+  `}
+
   ${({ ghost, color }) => ghost && color === 'primary' && `
     color: ${btnPrimaryBg};
 
@@ -723,7 +757,7 @@ const Button = styled(BaseButton)`
       color: ${btnDefaultColor};
       background-color: ${btnDefaultBg};
       background-clip: padding-box;
-      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
+      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
     }
 
     &:hover,
@@ -735,13 +769,14 @@ const Button = styled(BaseButton)`
   ${({ color }) => color === 'primary' && `
     color: ${btnPrimaryColor};
     background-color: ${btnPrimaryBg};
+    border: ${borderSizeLarge} solid transparent;
 
     &:focus,
     .buttonWrapper:focus:not([aria-disabled="true"]) & {
       color: ${btnPrimaryColor};
       background-color: ${btnPrimaryBg};
       background-clip: padding-box;
-      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBorder};
+      box-shadow: 0 0 0 ${borderSize} ${btnPrimaryBg};
     }
 
     &:hover,