Update Tabs on Legal, update RootPage styling

Author: catarak

client/components/RootPage.jsx

@@ -2,11 +2,12 @@ import styled from 'styled-components';
 import { prop } from '../theme';
 
 const RootPage = styled.div`
-  height: 100%;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
+  height: ${({ fixedHeight }) => fixedHeight || 'initial'};
 `;
 
 export default RootPage;

client/modules/IDE/pages/Legal.jsx

@@ -17,10 +17,13 @@ const StyledTabList = styled(TabList)`
   border-bottom: 1px solid ${prop('Modal.separator')};
 `;
 
-const StyledTab = styled(Tab)`
+const TabTitle = styled.p`
+  padding: 0 ${remSize(5)} ${remSize(5)} ${remSize(5)};
   cursor: pointer;
-  & p {
-    padding: 0 ${remSize(5)} ${remSize(5)} ${remSize(5)};
+  color: ${prop('inactiveTextColor')};
+  &:hover,
+  &:focus {
+    color: ${prop('primaryTextColor')};
   }
 `;
 
@@ -50,12 +53,12 @@ function Legal({ location }) {
       <Nav layout="dashboard" />
       <Tabs selectedIndex={selectedIndex} onSelect={onSelect}>
         <StyledTabList>
-          <StyledTab className="react-tabs__tab">
-            <p>Privacy Policy</p>
-          </StyledTab>
-          <StyledTab className="react-tabs__tab">
-            <p>Terms of Use</p>
-          </StyledTab>
+          <Tab>
+            <TabTitle>Privacy Policy</TabTitle>
+          </Tab>
+          <Tab>
+            <TabTitle>Terms of Use</TabTitle>
+          </Tab>
         </StyledTabList>
         <TabPanel>
           <PrivacyPolicy />

client/modules/User/pages/DashboardView.jsx

@@ -134,7 +134,7 @@ class DashboardView extends React.Component {
     const actions = this.renderActionButton(currentTab, username, this.props.t);
 
     return (
-      <RootPage>
+      <RootPage fixedHeight="100%">
         <Nav layout="dashboard" />
 
         <main className="dashboard-header">

client/theme.js

@@ -65,6 +65,7 @@ export default {
     colors,
     ...common,
     primaryTextColor: grays.dark,
+    inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
 
     Button: {
@@ -146,6 +147,7 @@ export default {
     colors,
     ...common,
     primaryTextColor: grays.lightest,
+    inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
 
     Button: {
@@ -227,6 +229,7 @@ export default {
     colors,
     ...common,
     primaryTextColor: grays.lightest,
+    inactiveTextColor: grays.light,
     backgroundColor: grays.darker,
 
     Button: {