New right panel visual language (#11664)

* New right panel visual language

* Upgrade Compound

* Align old room header with right panel

* Rigth panel look and feel

* Fix linting and e2e tests

* Update snapshot

* Add test

* Lint

* Remove screenshot local script

* Update snapshots and UI based on feedback

* fix i18n key

* Update right panel visuals

* Fix tests

* lintfixes

* fix tests

* fix tests

* Add tests for search icon

* Fix invite dialog spec

src/components/views/right_panel/BaseCard.tsx

@@ -25,7 +25,7 @@ import { backLabelForPhase } from "../../../stores/right-panel/RightPanelStorePh
 import { CardContext } from "./context";
 
 interface IProps {
-    header?: ReactNode;
+    header?: ReactNode | null;
     footer?: ReactNode;
     className?: string;
     withoutScrollContainer?: boolean;
@@ -86,11 +86,13 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
         return (
             <CardContext.Provider value={{ isCard: true }}>
                 <div className={classNames("mx_BaseCard", className)} ref={ref} onKeyDown={onKeyDown}>
-                    <div className="mx_BaseCard_header">
-                        {backButton}
-                        {closeButton}
-                        {header}
-                    </div>
+                    {header !== null && (
+                        <div className="mx_BaseCard_header">
+                            {backButton}
+                            {closeButton}
+                            {header}
+                        </div>
+                    )}
                     {children}
                     {footer && <div className="mx_BaseCard_footer">{footer}</div>}
                 </div>