changes

src/core/client/ui/components/Spinner/Spinner.css

@@ -1,8 +1,3 @@
-.root {
-  display: block;
-  text-align: center;
-}
-
 .spinner {
   animation: rotator 1.4s linear infinite;
 }

src/core/client/ui/components/Spinner/Spinner.tsx

@@ -17,28 +17,26 @@ export interface SpinnerProps {
 const Spinner: StatelessComponent<SpinnerProps> = props => {
   const { className, classes } = props;
 
-  const rootClassName = cn(classes.root, className);
+  const rootClassName = cn(classes.spinner, className);
 
   return (
-    <div className={rootClassName}>
-      <svg
-        className={styles.spinner}
-        width="40px"
-        height="40px"
-        viewBox="0 0 66 66"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          className={styles.path}
-          fill="none"
-          strokeWidth="6"
-          strokeLinecap="round"
-          cx="33"
-          cy="33"
-          r="30"
-        />
-      </svg>
-    </div>
+    <svg
+      className={rootClassName}
+      width="40px"
+      height="40px"
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        className={styles.path}
+        fill="none"
+        strokeWidth="6"
+        strokeLinecap="round"
+        cx="33"
+        cy="33"
+        r="30"
+      />
+    </svg>
   );
 };
 

src/core/client/ui/components/TextField/TextField.tsx

@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React from "react";
+import React, { ChangeEvent, EventHandler } from "react";
 import { StatelessComponent } from "react";
 import { withStyles } from "talk-ui/hocs";
 import * as styles from "./TextField.css";
@@ -42,13 +42,13 @@ export interface TextFieldProps {
    */
   name?: string;
   /**
-   * type
+   * type: Here we only allow text type values
    */
-  type?: string;
+  type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
   /**
    * onChange
    */
-  onChange?: <T>(event: any) => void;
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
 }
 
 const TextField: StatelessComponent<TextFieldProps> = props => {
@@ -85,6 +85,7 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
 TextField.defaultProps = {
   color: "regular",
   placeholder: "",
+  type: "text",
 };
 
 const enhanced = withStyles(styles)(TextField);