New: Many UI Updates and Performance Tweaks

frontend/src/Components/InfoLabel.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { kinds, sizes } from 'Helpers/Props';
+import styles from './InfoLabel.css';
+
+function InfoLabel(props) {
+  const {
+    className,
+    title,
+    kind,
+    size,
+    outline,
+    children,
+    ...otherProps
+  } = props;
+
+  return (
+    <span
+      className={classNames(
+        className,
+        styles[kind],
+        styles[size],
+        outline && styles.outline
+      )}
+      {...otherProps}
+    >
+      <div className={styles.title}>
+        {title}
+      </div>
+      <div>
+        {children}
+      </div>
+    </span>
+  );
+}
+
+InfoLabel.propTypes = {
+  className: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  kind: PropTypes.oneOf(kinds.all).isRequired,
+  size: PropTypes.oneOf(sizes.all).isRequired,
+  outline: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+InfoLabel.defaultProps = {
+  className: styles.label,
+  kind: kinds.DEFAULT,
+  size: sizes.SMALL,
+  outline: false
+};
+
+export default InfoLabel;