Merge pull request #4136 from brave/pr3940_ca-6846_1.3.x

Fix alignment on Welcome page content (uplift to 1.3.x)

components/brave_welcome_ui/components/wrapper/index.ts

@@ -5,6 +5,7 @@
 import styled, { css, keyframes } from 'styled-components'
 import { backgroundHeight } from '../images'
 
+const contentMaxWidth = 580
 const slideContentHeight = 540
 const footerHeight = 52
 const footerTopMargin = 24
@@ -42,7 +43,8 @@ export const Footer = styled(BaseGrid.withComponent('footer'))`
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: ${footerHeight}px;
   max-width: 540px;
-  margin: ${footerTopMargin}px 0 0 0;
+  margin: ${footerTopMargin}px auto 0;
+  height: auto;
 `
 
 export const FooterLeftColumn = styled(BaseColumn)`
@@ -72,15 +74,20 @@ export const Content = styled<ContentProps, 'section'>('section')`
   will-change: transform;
   transform: translateX(${p => p.isPrevious ? '-' + p.screenPosition : p.screenPosition}) scale(0.8);
   transition: opacity 600ms, transform 600ms ease-in-out;
-  position: absolute;
-  z-index: ${p => p.zIndex};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   flex: 1;
-  max-width: 580px;
+  max-width: ${contentMaxWidth}px;
   padding: 24px;
+  margin: auto;
+  /*
+    inactive elements need to be absolute positioned to prevent pilling up
+    in the background making visible elements misaligned. In this case display:none
+    would prevent us from seeing the ransition animation. See comment below.
+  */
+  position: ${p => p.active ? 'static' : 'absolute'};
 
   /*
     prevents focus on all content's child elements if the parent is not active.
@@ -106,12 +113,7 @@ interface PageProps {
 export const Page = styled<PageProps, 'div'>('div')`
   width: inherit;
   height: inherit;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
   background: ${p => p.theme.color.panelBackground};
-  flex-direction: column;
-  position: relative;
   overflow-x: hidden;
   overflow-y: ${p => p.shouldUpdateElementOverflow ? 'initial' : 'hidden' };
 `
@@ -128,23 +130,15 @@ export const Panel = styled('div')`
   animation-fill-mode: forwards;
   /* end of animation stuff */
   box-sizing: border-box;
-  position: relative;
-  max-width: 800px;
+  max-width: ${contentMaxWidth}px;
   width: 100%;
-  display: flex;
-  flex-direction: column;
   margin: 0 auto;
   font-size: inherit;
-  align-items: center;
   min-height: ${slideContentHeight + footerTopMargin + footerHeight}px;
   height: calc(100vh - ${backgroundHeight}px);
 `
 
 export const SlideContent = styled<{}, 'div'>('div')`
-  max-width: inherit;
-  width: inherit;
-  min-height: ${slideContentHeight}px;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  height: ${slideContentHeight}px;
 `