Fix header styling for Wagtail 3.0

wagtail_localize/static_src/common/components/Header/index.tsx

@@ -1,6 +1,47 @@
 import React, { FunctionComponent } from 'react';
 import Icon from '../Icon';
 import gettext from 'gettext';
+import styled from 'styled-components';
+
+const StyledHeader = styled.header`
+    padding-inline-end: 20px;
+    padding-inline-start: 20px;
+    background-color: var(--color-primary);
+    color: #fff;
+
+    @media screen and (min-width: 50em) {
+        padding-inline-end: 50px;
+        padding-inline-start: 50px;
+    }
+
+    a {
+        text-decoration: none;
+    }
+`;
+
+const StyledHeaderTitle = styled.h1`
+    color: #fff;
+    font-weight: 700;
+`;
+
+const StyledButtonLink = styled.a`
+    &.button--live {
+        background-color: #fff;
+        color: var(--color-primary);
+        border-radius: 2px;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 2.3em;
+        padding: 0 0.75em;
+
+        .icon {
+            width: 1.25em;
+            height: 1.25em;
+            vertical-align: text-top;
+            margin-right: 0.25em;
+        }
+    }
+`;
 
 interface HeaderButtonActionProps {
     label: string;
@@ -56,15 +97,15 @@ export const HeaderLinkAction: FunctionComponent<HeaderLinkActionProps> = ({
     }
 
     return (
-        <a
+        <StyledButtonLink
             href={href}
             target="_blank"
             rel="noopener noreferrer"
             className={classNames.join(' ')}
             title={title}
         >
             {icon && <Icon name={icon} />} {label}
-        </a>
+        </StyledButtonLink>
     );
 };
 
@@ -254,22 +295,22 @@ const Header: FunctionComponent<HeaderProps> = ({
     }
 
     return (
-        <header className={classNames.join(' ')}>
+        <StyledHeader className={classNames.join(' ')}>
             {breadcrumbRendered}
             <div className={rowClassNames.join(' ')}>
-                <h1
-                    className="left col header-title"
+                <StyledHeaderTitle
+                    className="left col"
                     style={{ textTransform: 'none' }}
                 >
                     {' '}
                     {/* TODO: Move style */}
                     {icon && <Icon name={icon} />}
                     {title} {subtitleWrapped}
-                </h1>
+                </StyledHeaderTitle>
                 <div className="right">{actions}</div>
             </div>
             <ul className="row header-meta">{meta}</ul>
-        </header>
+        </StyledHeader>
     );
 };
 

wagtail_localize/static_src/common/components/Tabs/index.tsx

@@ -15,16 +15,71 @@ export interface TabsProps {
 
 // Remove bottom margin that Wagtail adds by default
 // This makes it tricky to align the toolbox consistently when there are both tabs and no tabs
-const ULWithoutMargin = styled.ul`
+const StyledTabs = styled.ul`
     margin-bottom: 0;
+    margin-top: 0;
+    background-color: var(--color-primary);
+
+    > li {
+        list-style-type: none;
+        width: 33%;
+        float: left;
+        padding: 0;
+        position: relative;
+        margin-right: 2px;
+
+        @media screen and (min-width: 50em) {
+            width: auto;
+            padding: 0;
+        }
+
+        &:first-of-type {
+            margin-left: 0;
+        }
+
+        > a {
+            background-color: var(--color-primary-darker);
+            text-transform: uppercase;
+            font-weight: 600;
+            text-decoration: none;
+            display: block;
+            padding: 0.6em 0.7em 0.8em;
+            color: #fff;
+            border-top: 0.3em solid var(--color-primary-darker);
+            max-height: 1.44em;
+            overflow: hidden;
+
+            @media screen and (min-width: 50em) {
+                padding-left: 20px;
+                padding-right: 20px;
+            }
+        }
+
+        &.active > a {
+            box-shadow: none;
+            color: #333;
+            background-color: #fff;
+            border-top: 0.3em solid #333;
+        }
+    }
+
+    &:before,
+    &:after {
+        content: ' ';
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
 `;
 
 export const Tabs: FunctionComponent<TabsProps> = ({ tabs, children }) => {
     const [currentTab, setCurrentTab] = React.useState(tabs[0].slug);
 
     return (
         <>
-            <ULWithoutMargin className="tab-nav merged" role="tablist">
+            <StyledTabs className="tab-nav merged" role="tablist">
                 {tabs.map(tab => {
                     const onClick = (
                         e: React.MouseEvent<HTMLAnchorElement>
@@ -35,7 +90,7 @@ export const Tabs: FunctionComponent<TabsProps> = ({ tabs, children }) => {
 
                     const classNames = [];
 
-                    if (tab.slug == currentTab) {
+                    if (tab.slug === currentTab) {
                         classNames.push('active');
                     }
 
@@ -61,7 +116,7 @@ export const Tabs: FunctionComponent<TabsProps> = ({ tabs, children }) => {
                         </li>
                     );
                 })}
-            </ULWithoutMargin>
+            </StyledTabs>
             <div className="tab-content">
                 <CurrentTabContext.Provider value={currentTab}>
                     {children}
@@ -83,7 +138,8 @@ export const TabContent: FunctionComponent<Tab> = ({ slug, children }) => {
     return (
         <SectionWithoutPadding
             id={`tab-${slug}`}
-            className={slug == currentTab ? 'active' : ''}
+            className={slug === currentTab ? 'active' : ''}
+            hidden={slug !== currentTab}
         >
             {children}
         </SectionWithoutPadding>