Migrate scss layouts to RootPage component

Author: catarak

client/common/Button.jsx

@@ -20,6 +20,7 @@ const displays = {
 // general global styles
 const StyledButton = styled.button`
   &&& {
+    font-weight: bold;
     display: flex;
     justify-content: center;
     align-items: center;

client/components/Dropdown.jsx

@@ -34,11 +34,11 @@ const DropdownWrapper = styled.ul`
   }
 
   & li:hover {
-    background-color: ${prop('Button.hover.background')};
-    color: ${prop('Button.hover.foreground')};
+    background-color: ${prop('Button.primary.hover.background')};
+    color: ${prop('Button.primary.hover.foreground')};
 
     * {
-      color: ${prop('Button.hover.foreground')};
+      color: ${prop('Button.primary.hover.foreground')};
     }
   }
 

client/components/RootPage.jsx

@@ -3,7 +3,7 @@ import { prop } from '../theme';
 
 const RootPage = styled.div`
   height: 100%;
-  overflow: auto;
+  flex-wrap: wrap;
   display: flex;
   flex-direction: column;
   color: ${prop('primaryTextColor')};

client/components/mobile/FloatingNav.jsx

@@ -16,7 +16,7 @@ const FloatingContainer = styled.div`
     width: ${remSize(32)};
   }
   svg > path {
-    fill: ${prop('Button.default.background')} !important;
+    fill: ${prop('Button.primary.default.background')} !important;
   }
 `;
 

client/components/mobile/MobileScreen.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { remSize } from '../../theme';
+import { remSize, prop } from '../../theme';
 
 const ScreenWrapper = styled.div`
   .toast {
@@ -14,13 +14,19 @@ const ScreenWrapper = styled.div`
     min-width: unset;
     bottom: ${remSize(64)};
   }
+  ${({ fullscreen }) =>
+    fullscreen &&
+    `
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-flow: column;
+    background-color: ${prop('backgroundColor')}
+  `}
 `;
 
 const Screen = ({ children, fullscreen, slimheader }) => (
-  <ScreenWrapper
-    className={fullscreen && 'fullscreen-preview'}
-    slimheader={slimheader}
-  >
+  <ScreenWrapper fullscreen={fullscreen} slimheader={slimheader}>
     {children}
   </ScreenWrapper>
 );

client/modules/IDE/pages/FullView.jsx

@@ -12,6 +12,7 @@ import {
   MessageTypes
 } from '../../../utils/dispatcher';
 import useInterval from '../hooks/useInterval';
+import RootPage from '../../../components/RootPage';
 
 function FullView(props) {
   const dispatch = useDispatch();
@@ -45,7 +46,7 @@ function FullView(props) {
     };
   }, []);
   return (
-    <div className="fullscreen-preview">
+    <RootPage style={{ flexWrap: 'initial' }}>
       <Helmet>
         <title>{project.name}</title>
       </Helmet>
@@ -61,7 +62,7 @@ function FullView(props) {
       <main className="preview-frame-holder">
         <PreviewFrame fullView />
       </main>
-    </div>
+    </RootPage>
   );
 }
 

client/modules/IDE/pages/IDEView.jsx

@@ -35,6 +35,7 @@ import AddToCollectionList from '../components/AddToCollectionList';
 import Feedback from '../components/Feedback';
 import { CollectionSearchbar } from '../components/Searchbar';
 import { getIsUserOwner } from '../selectors/users';
+import RootPage from '../../../components/RootPage';
 
 function getTitle(props) {
   const { id } = props.project;
@@ -250,7 +251,7 @@ class IDEView extends React.Component {
 
   render() {
     return (
-      <div className="ide">
+      <RootPage>
         <Helmet>
           <title>{getTitle(this.props)}</title>
         </Helmet>
@@ -451,7 +452,7 @@ class IDEView extends React.Component {
             />
           </Overlay>
         )}
-      </div>
+      </RootPage>
     );
   }
 }

client/modules/User/pages/DashboardView.jsx

@@ -11,6 +11,7 @@ import AssetList from '../../IDE/components/AssetList';
 import AssetSize from '../../IDE/components/AssetSize';
 import CollectionList from '../../IDE/components/CollectionList';
 import SketchList from '../../IDE/components/SketchList';
+import RootPage from '../../../components/RootPage';
 import * as ProjectActions from '../../IDE/actions/project';
 import {
   CollectionSearchbar,
@@ -133,7 +134,7 @@ class DashboardView extends React.Component {
     const actions = this.renderActionButton(currentTab, username, this.props.t);
 
     return (
-      <div className="dashboard">
+      <RootPage>
         <Nav layout="dashboard" />
 
         <main className="dashboard-header">
@@ -165,7 +166,7 @@ class DashboardView extends React.Component {
             <CollectionCreate />
           </Overlay>
         )}
-      </div>
+      </RootPage>
     );
   }
 }

client/styles/layout/_dashboard.scss

@@ -1,14 +1,3 @@
-.dashboard {
-	display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  @include themify() {
-    color: getThemifyVariable('primary-text-color');
-    background-color: getThemifyVariable('background-color');
-  }
-  height: 100%;
-}
-
 .dashboard-content {
   display: flex;
   flex-direction: column;