Integrate old UI.

js-old/src/ui/ModalBox/body.js

@@ -0,0 +1,35 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { PropTypes } from 'react';
+
+import styles from './modalBox.css';
+
+export default function Body ({ children }) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={ styles.body }>
+      { children }
+    </div>
+  );
+}
+
+Body.propTypes = {
+  children: PropTypes.node
+};

js-old/src/ui/ModalBox/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './modalBox';

js-old/src/ui/ModalBox/modalBox.css

@@ -0,0 +1,62 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.body {
+  display: flex;
+  justify-content: flex-start;
+
+  .content {
+    flex: 1;
+
+    .body {
+      width: 100%;
+    }
+
+    .summary {
+      line-height: 1.618em;
+      padding: 0 4em 1.5em 4em;
+      text-align: center;
+    }
+  }
+
+  .icon {
+    align-items: center;
+    background: rgb(167, 151, 0);
+    border-radius: 50%;
+    display: flex;
+    flex: 0 0 5em;
+    flex-direction: column;
+    height: 5em;
+    justify-content: center;
+    margin-right: 1.5em;
+    padding: 0.75em;
+    width: 5em;
+
+    img {
+      margin: 0;
+      padding: 0;
+    }
+
+    svg {
+      fill: white !important;
+      font-size: 3.5em !important;
+      height: 3.5em !important;
+      margin: 0 !important;
+      width: 3.5em !important;
+    }
+  }
+}

js-old/src/ui/ModalBox/modalBox.js

@@ -0,0 +1,43 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { PropTypes } from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import Body from './body';
+import Summary from './summary';
+import styles from './modalBox.css';
+
+export default function ModalBox ({ children, icon, summary }) {
+  return (
+    <div className={ styles.body }>
+      <div className={ styles.icon }>
+        { icon }
+      </div>
+      <div className={ styles.content }>
+        <Summary summary={ summary } />
+        <Body children={ children } />
+      </div>
+    </div>
+  );
+}
+
+ModalBox.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.node.isRequired,
+  summary: nodeOrStringProptype()
+};

js-old/src/ui/ModalBox/modalBox.spec.js

@@ -0,0 +1,62 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import ModalBox from './';
+
+let component;
+
+const CHILDREN = <div id='testChild'>testChild</div>;
+const ICON = <div id='testIcon'>testIcon</div>;
+const SUMMARY = <div id='testSummary'>testSummary</div>;
+
+function render () {
+  component = shallow(
+    <ModalBox
+      children={ CHILDREN }
+      icon={ ICON }
+      summary={ SUMMARY }
+    />
+  );
+
+  return component;
+}
+
+describe('ui/ModalBox', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  it('adds the icon as supplied', () => {
+    expect(component.find('#testIcon').text()).to.equal('testIcon');
+  });
+
+  describe('components', () => {
+    it('adds the Body as supplied', () => {
+      expect(component.find('Body').props().children).to.deep.equal(CHILDREN);
+    });
+
+    it('adds the Summary as supplied', () => {
+      expect(component.find('Summary').props().summary).to.deep.equal(SUMMARY);
+    });
+  });
+});

js-old/src/ui/ModalBox/summary.js

@@ -0,0 +1,37 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from './modalBox.css';
+
+export default function Summary ({ summary }) {
+  if (!summary) {
+    return null;
+  }
+
+  return (
+    <div className={ styles.summary }>
+      { summary }
+    </div>
+  );
+}
+
+Summary.propTypes = {
+  summary: nodeOrStringProptype()
+};