From 75ee63fe674d0897909214fd971b89f342c64d0a Mon Sep 17 00:00:00 2001
From: Joao Victor <joaov@imdt.com.br>
Date: Tue, 15 Nov 2022 16:59:09 -0300
Subject: [PATCH] fix: console warnings due to invalid attributes

---
 .../common/modal/header/component.jsx         | 16 +++++++-------
 .../components/common/modal/header/styles.js  | 22 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/header/component.jsx b/bigbluebutton-html5/imports/ui/components/common/modal/header/component.jsx
index 06ee29ec7b..706391da3d 100644
--- a/bigbluebutton-html5/imports/ui/components/common/modal/header/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/common/modal/header/component.jsx
@@ -46,15 +46,15 @@ class Header extends React.Component {
 
     return (
       <Styled.Header
-        hideBorder={hideBorder}
-        headerOnTop={headerOnTop}
-        innerHeader={innerHeader}
+        $hideBorder={hideBorder}
+        $headerOnTop={headerOnTop}
+        $innerHeader={innerHeader}
         {...other}
       >
         <Styled.Title
-          hasMarginBottom={innerHeader}
-          headerOnTop={headerOnTop}
-          innerHeader={innerHeader}
+          $hasMarginBottom={innerHeader}
+          $headerOnTop={headerOnTop}
+          $innerHeader={innerHeader}
         >
           {children}
         </Styled.Title>
@@ -65,8 +65,8 @@ class Header extends React.Component {
             circle
             hideLabel
             aria-describedby="modalDismissDescription"
-            headerOnTop={headerOnTop}
-            innerHeader={innerHeader}
+            $headerOnTop={headerOnTop}
+            $innerHeader={innerHeader}
             {...closeButtonProps}
           />
         ) : null}
diff --git a/bigbluebutton-html5/imports/ui/components/common/modal/header/styles.js b/bigbluebutton-html5/imports/ui/components/common/modal/header/styles.js
index 978b8ef7ab..927b667da8 100644
--- a/bigbluebutton-html5/imports/ui/components/common/modal/header/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/common/modal/header/styles.js
@@ -24,17 +24,17 @@ const Header = styled.header`
   border: none;
   display: grid;
 
-  ${({ headerOnTop }) => headerOnTop && `
-    grid-template-columns: auto max-content;
+  ${({ $headerOnTop }) => $headerOnTop && `
+    grid-template-columns: auto min-content;
     grid-template-rows: min-content;
   `}
 
-  ${({ innerHeader }) => innerHeader && `
+  ${({ $innerHeader }) => $innerHeader && `
     grid-template-columns: auto;
     grid-template-rows: min-content min-content;
   `}
 
-  ${({ hideBorder }) => !hideBorder && `
+  ${({ $hideBorder }) => !$hideBorder && `
     padding: calc(${lineHeightComputed} / 2) 0;
     border-bottom: ${borderSize} solid ${colorGrayLighter};
   `}
@@ -55,15 +55,15 @@ const Title = styled(TitleElipsis)`
     padding: 0 ${mdPaddingX};
   }
 
-  ${({ headerOnTop }) => headerOnTop && `
+  ${({ $headerOnTop }) => $headerOnTop && `
     grid-area: 1 / 1 / 2 / 3;
   `}
 
-  ${({ innerHeader }) => innerHeader && `
-    grid-area: 2 / 1 / 3 / 3;
+  ${({ $innerHeader }) => $innerHeader && `
+    grid-area: 2 / 1 / 3 / 2;
   `}
 
-  ${({ hasMarginBottom }) => hasMarginBottom && `
+  ${({ $hasMarginBottom }) => $hasMarginBottom && `
     margin-bottom: ${mdPaddingX};
   `}
 `;
@@ -76,12 +76,12 @@ const DismissButton = styled(Button)`
     & > i { color: ${colorText}; }
   }
 
-  ${({ headerOnTop }) => headerOnTop && `
+  ${({ $headerOnTop }) => $headerOnTop && `
     grid-area: 1 / 2 / 2 / 3;
   `}
 
-  ${({ innerHeader }) => innerHeader && `
-    grid-area: 1 / 1 / 2 / 3;
+  ${({ $innerHeader }) => $innerHeader && `
+    grid-area: 1 / 1 / 2 / 2;
   `}
 
   justify-self: end;