feat(*): ap design sync - I57

src/components/TextButton.js

@@ -1,26 +1,28 @@
 import styled from 'styled-components';
 
+import { AP_THEME } from '../containers/App/themeConstants';
+
 const TextButton = styled.button`
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
-  font-size: ${props => (props.fontSize ? props.fontSize : '#inherit')};
-  color: ${props => (props.disabled ? '#B5BABE' : '#B9BCC4')};
+  font-size: ${props => (props.fontSize ? props.fontSize : 'inherit')};
+  color: ${props => (props.disabled ? '#B5BABE' : AP_THEME.GRAY)};
   display: ${props => (props.display ? props.display : 'inline-block')};
   cursor: pointer;
   text-decoration: underline;
   &:hover {
-    color: #FFFFFF;
+    color: ${AP_THEME.WHITE};
     text-decoration: underline;
   }
   &:focus {
     outline: none;
-    color: #FFFFFF;
+    color: ${AP_THEME.WHITE};
     text-decoration: underline;
   }
   &:active {
-    color: #FFFFFF;
+    color: ${AP_THEME.WHITE};
     text-decoration: underline;
   }
 `;

src/containers/App/__snapshots__/index.test.js.snap

@@ -6,45 +6,14 @@ exports[`<App /> on initialization renders page correctly 1`] = `
   <App__MainWrapper>
     <Header />
     <App__ContentWrapper>
-      <Tab
-        grid={
-          Object {
-            "paneWidth": 12,
-            "tabWidth": 4,
-          }
-        }
-        menu={
-          Object {
-            "fluid": true,
-            "tabular": true,
-            "vertical": true,
-          }
-        }
-        panes={
-          Array [
-            Object {
-              "menuItem": "Text",
-              "render": [Function],
-            },
-            Object {
-              "menuItem": "Model",
-              "render": [Function],
-            },
-            Object {
-              "menuItem": "Logic",
-              "render": [Function],
-            },
-            Object {
-              "menuItem": "Metadata",
-              "render": [Function],
-            },
-          ]
-        }
-        renderActiveOnly={true}
+      <Connect(LeftNav)
+        setCurrentEditor={[Function]}
+      />
+      <Connect(CurrentEditor)
+        type="contract"
       />
       <Connect(LibraryComponent) />
     </App__ContentWrapper>
-    <Connect(ErrorContainer) />
   </App__MainWrapper>
 </App__AppWrapper>
 `;

src/containers/App/index.js

@@ -9,6 +9,8 @@ import ErrorModalComponent from '../ErrorModal';
 import LeftNavContainer from '../LeftNav';
 import CurrentEditorContainer from '../CurrentEditor';
 
+import { CONTENT_BACKGROUND } from './themeConstants';
+
 const AppWrapper = styled.div`
   height: 100%;
 `;
@@ -20,9 +22,11 @@ const MainWrapper = styled.div`
 `;
 
 const ContentWrapper = styled.div`
+  background-color: ${CONTENT_BACKGROUND};
   height: calc(100vh - 37px);
   display: grid;
   grid-template-columns: 204px auto 355px;
+  overflow-y: hidden;
 `;
 
 export const App = () => {

src/containers/App/themeConstants.js

@@ -0,0 +1,44 @@
+export const AP_THEME = {
+  DARK_BLUE: '#141F3C',
+  DARK_BLUE_MEDIUM: '#182444',
+  DARK_BLUE_LIGHT: '#1E2D53',
+  CYAN: '#19C6C7',
+  GRAY: '#B9BCC4',
+  LIGHT_GRAY: '#F0F0F0',
+  WHITE: '#FFFFFF',
+};
+
+export const CONTENT_BACKGROUND = AP_THEME.DARK_BLUE;
+
+export const FILE_BAR = {
+  OPTION_BUTTONS: AP_THEME.WHITE,
+  OPTION_BUTTONS_HOVER: AP_THEME.CYAN,
+  BACKGROUND: AP_THEME.DARK_BLUE_LIGHT,
+};
+
+export const LEFT_NAV = {
+  HEADING: AP_THEME.GRAY,
+};
+
+export const CONTRACT_EDITOR = {
+  BUTTON_BACKGROUND_INACTIVE: AP_THEME.DARK_BLUE_LIGHT,
+  BUTTON_BACKGROUND_ACTIVE: '#364C77',
+  BUTTON_BACKGROUND_HOVER: '#364C77',
+  BUTTON_SYMBOL_INACTIVE: '#949CA2',
+  BUTTON_SYMBOL_ACTIVE: AP_THEME.WHITE,
+  TOOLBAR_BACKGROUND: AP_THEME.DARK_BLUE_LIGHT,
+  TOOLTIP_BACKGROUND: AP_THEME.CYAN,
+  TOOLTIP: AP_THEME.DARK_BLUE_MEDIUM,
+  DIVIDER: '#46608E',
+  WIDTH: '600px',
+};
+
+export const TEMPLATE_LIBRARY = {
+  HEADER_TITLE: '#939EBA',
+  ACTION_BUTTON: AP_THEME.CYAN,
+  ACTION_BUTTON_BACKGROUND: AP_THEME.DARK_BLUE_MEDIUM,
+  ACTION_BUTTON_BORDER: '#50637F',
+  TEMPLATE_BACKGROUND: AP_THEME.DARK_BLUE_LIGHT,
+  TEMPLATE_TITLE: AP_THEME.GRAY,
+  TEMPLATE_DESCRIPTION: AP_THEME.WHITE,
+};

src/containers/ContractEditor/index.js

@@ -6,6 +6,7 @@ import { ContractEditor } from '@accordproject/cicero-ui';
 import { loadTemplateObjectAction } from '../../actions/templatesActions';
 import { documentEdited } from '../../actions/contractActions';
 import parseClause from '../../utilities/parseClause';
+import { AP_THEME, CONTRACT_EDITOR } from '../App/themeConstants';
 
 const EditorWrapper = styled.div`
   overflow-y: auto;
@@ -15,9 +16,24 @@ const EditorWrapper = styled.div`
     background: transparent;
   };
   justify-self: center;
-  width: 594px;
+  width: 100%;
+  height: inherit;
 `;
 
+const editorProps = {
+  TOOLBAR_BACKGROUND: CONTRACT_EDITOR.TOOLBAR_BACKGROUND,
+  BUTTON_BACKGROUND_INACTIVE: CONTRACT_EDITOR.BUTTON_BACKGROUND_INACTIVE,
+  BUTTON_BACKGROUND_ACTIVE: CONTRACT_EDITOR.BUTTON_BACKGROUND_ACTIVE,
+  BUTTON_BACKGROUND_HOVER: CONTRACT_EDITOR.BUTTON_BACKGROUND_HOVER,
+  BUTTON_SYMBOL_INACTIVE: CONTRACT_EDITOR.BUTTON_SYMBOL_INACTIVE,
+  BUTTON_SYMBOL_ACTIVE: CONTRACT_EDITOR.BUTTON_SYMBOL_ACTIVE,
+  TOOLTIP_BACKGROUND: CONTRACT_EDITOR.TOOLTIP_BACKGROUND,
+  TOOLTIP: CONTRACT_EDITOR.TOOLTIP,
+  DROPDOWN_COLOR: AP_THEME.WHITE,
+  DIVIDER: CONTRACT_EDITOR.DIVIDER,
+  WIDTH: CONTRACT_EDITOR.WIDTH,
+};
+
 const EditorContainer = props => (
   <EditorWrapper>
     <ContractEditor
@@ -26,6 +42,7 @@ const EditorContainer = props => (
       onChange={props.onEditorChange}
       value={props.value}
       lockText={false}
+      editorProps={editorProps}
     />
   </EditorWrapper>
 );

src/containers/CurrentEditor/index.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { updateModelFileAction } from '../../actions/modelActions';
 import { updateLogicMockAction } from '../../actions/logicActions';
 import { updateSampleMockAction } from '../../actions/sampleActions';
+
 import ClauseTemplateEditor from '../ClauseTemplateEditor';
 import ContractEditor from '../ContractEditor';
 import ConcertoEditor from '../ConcertoEditor';

src/containers/Header/index.js

@@ -3,11 +3,13 @@ import styled from 'styled-components';
 
 import image from '../../../public/img/logo.png';
 
+import { AP_THEME } from '../App/themeConstants';
+
 const HeaderWrapper = styled.div`
     display: flex;
     height: 37px;
     width: 100%;
-    background-color: #1B1C1C;
+    background-color: ${AP_THEME.DARK_BLUE};
     color: white;
 `;
 
@@ -17,7 +19,6 @@ const HeaderTitle = styled.div`
     margin-left: 30px;
     padding-right: 20px;
     text-align: center;
-    font-weight: bold;
 `;
 
 const HeaderImage = styled.img`

src/containers/LeftNav/SubHeadingBtn.js

@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 import TextButton from '../../components/TextButton';
+import { AP_THEME } from '../App/themeConstants';
 
 const SubHeadingBtn = styled(TextButton)`
-  color: #B9BCC4;
+  color: ${AP_THEME.GRAY};
   font-size: 16px;
   line-height: 24px;
   text-decoration: none;