add connection modal

web/src/utility/forms.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TextField } from './inputs';
+import { Field } from 'formik';
+
+export const FormRow = styled.div`
+  display: flex;
+  margin: 10px;
+`;
+
+export const FormLabel = styled.div`
+  width: 10vw;
+  font-weight: bold;
+`;
+
+export const FormValue = styled.div``;
+
+export function FormTextField({ label, ...other }) {
+  return (
+    <FormRow>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>
+        <Field {...other} as={TextField} />
+      </FormValue>
+    </FormRow>
+  );
+}
+
+export function FormSubmit({text}) {
+  return (
+    <FormRow>
+      <input type="submit" value={text}/>
+    </FormRow>
+  );
+}

web/src/utility/inputs.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function TextField({ ...other }) {
+  return <input type="text" {...other}></input>;
+}

web/src/utility/layout.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Grid = styled.div``;
+
+export const Row = styled.div``;
+
+export const Col = styled.div``;