initial styling

scm-ui/src/components/Header.js

@@ -0,0 +1,31 @@
+//@flow
+import React from "react";
+import Logo from "./Logo";
+
+type Props = {
+  children?: React.Node
+};
+
+class Header extends React.Component<Props> {
+  render() {
+    const { children } = this.props;
+    return (
+      <section className="hero is-dark is-small">
+        <div className="hero-body">
+          <div className="container">
+            <div className="columns is-vcentered">
+              <div className="column">
+                <Logo />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="hero-foot">
+          <div className="container">{children}</div>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default Header;

scm-ui/src/components/InputField.js

@@ -0,0 +1,49 @@
+//@flow
+import React from "react";
+import Image from "../images/logo.png";
+
+type Props = {
+  label?: string,
+  placeholder?: string,
+  type?: string,
+  onChange: string => void
+};
+
+class InputField extends React.Component<Props> {
+  static defaultProps = {
+    type: "text",
+    placeholder: ""
+  };
+
+  handleInput = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    this.props.onChange(event.target.value);
+  };
+
+  renderLabel = () => {
+    const label = this.props.label;
+    if (label) {
+      return <label class="label">{label}</label>;
+    }
+    return "";
+  };
+
+  render() {
+    const { type, placeholder } = this.props;
+
+    return (
+      <div class="field">
+        {this.renderLabel()}
+        <div class="control">
+          <input
+            class="input"
+            type={type}
+            placeholder={placeholder}
+            onChange={this.handleInput}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default InputField;

scm-ui/src/components/Logo.js

@@ -0,0 +1,11 @@
+//@flow
+import React from "react";
+import Image from "../images/logo.png";
+
+class Logo extends React.PureComponent {
+  render() {
+    return <img src={Image} alt="SCM-Manager logo" />;
+  }
+}
+
+export default Logo;

scm-ui/src/components/PrimaryNavigation.js

@@ -0,0 +1,17 @@
+//@flow
+import React from "react";
+import PrimaryNavigationLink from "./PrimaryNavigationLink";
+
+class PrimaryNavigation extends React.Component<Props> {
+  render() {
+    return (
+      <nav className="tabs is-boxed">
+        <ul>
+          <PrimaryNavigationLink to="/users">Users</PrimaryNavigationLink>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+export default PrimaryNavigation;

scm-ui/src/components/PrimaryNavigationLink.js

@@ -0,0 +1,29 @@
+//@flow
+import React from "react";
+import { Route, Link } from "react-router-dom";
+
+type Props = {
+  to: string,
+  activeOnlyWhenExact?: boolean,
+  children?: React.Node
+};
+
+class PrimaryNavigationLink extends React.Component<Props> {
+  renderLink = (route: any) => {
+    const { to, children } = this.props;
+    return (
+      <li className={route.match ? "is-active" : ""}>
+        <Link to={to}>{children}</Link>
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+    return (
+      <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
+    );
+  }
+}
+
+export default PrimaryNavigationLink;

scm-ui/src/components/SubmitButton.js

@@ -0,0 +1,38 @@
+//@flow
+import React from "react";
+import Logo from "./Logo";
+import classNames from "classnames";
+
+type Props = {
+  value: string,
+  large?: boolean,
+  fullWidth?: boolean
+};
+
+class SubmitButton extends React.Component<Props> {
+  render() {
+    const { value, large, fullWidth } = this.props;
+
+    const largeClass = large ? "is-large" : "";
+    const fullWidthClass = fullWidth ? "is-fullwidth" : "";
+
+    return (
+      <div className="field">
+        <div className="control">
+          <input
+            type="submit"
+            className={classNames(
+              "button",
+              "is-link",
+              largeClass,
+              fullWidthClass
+            )}
+            value={value}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SubmitButton;