Fix style

src/App.scss

@@ -15,19 +15,19 @@ limitations under the License.
 */
 
 @mixin spacer {
-  width: 100%;
-  flex-grow: 1;
-  flex-shrink: 0;
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 0;
 }
 
 .topSpacer {
-  @include spacer;
+    @include spacer;
 
-  height: 30vh;
+    height: 30vh;
 }
 
 .bottomSpacer {
-  @include spacer;
+    @include spacer;
 
-  height: 10vh;
+    height: 10vh;
 }

src/App.tsx

@@ -19,13 +19,13 @@ import "./App.scss";
 
 import SingleColumn from "./layouts/SingleColumn";
 
-function App() {
-  return (
-    <SingleColumn>
-      <div className="topSpacer" />
-      <div className="bottomSpacer" />
-    </SingleColumn>
-  );
-}
+const App: React.FC = () => {
+    return (
+        <SingleColumn>
+            <div className="topSpacer" />
+            <div className="bottomSpacer" />
+        </SingleColumn>
+    );
+};
 
 export default App;

src/components/Button.tsx

@@ -20,42 +20,44 @@ import classnames from "classnames";
 import "./Button.scss";
 
 interface IProps extends React.ButtonHTMLAttributes<Element> {
-  // Briefly display these instead of the children onClick
-  flashChildren?: React.ReactNode;
+    // Briefly display these instead of the children onClick
+    flashChildren?: React.ReactNode;
 }
 
 /**
  * Like a normal button except it will flash content when clicked.
  */
-export default ({
-  onClick,
-  children,
-  flashChildren,
-  className,
-  ...restProps
+const Button: React.FC<IProps> = ({
+    onClick,
+    children,
+    flashChildren,
+    className,
+    ...restProps
 }: IProps) => {
-  const [wasClicked, setWasClicked] = React.useState(false);
+    const [wasClicked, setWasClicked] = React.useState(false);
 
-  const wrappedOnClick: React.MouseEventHandler = (e) => {
-    if (onClick) {
-      onClick(e);
-    }
+    const wrappedOnClick: React.MouseEventHandler = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
 
-    setWasClicked(true);
-    window.setTimeout(() => {
-      setWasClicked(false);
-    }, 1000);
-  };
+        setWasClicked(true);
+        window.setTimeout(() => {
+            setWasClicked(false);
+        }, 1000);
+    };
 
-  const content = wasClicked ? flashChildren : children;
+    const content = wasClicked ? flashChildren : children;
 
-  const classNames = classnames("button", className, {
-    buttonHighlight: wasClicked,
-  });
+    const classNames = classnames("button", className, {
+        buttonHighlight: wasClicked,
+    });
 
-  return (
-    <button className={classNames} onClick={wrappedOnClick} {...restProps}>
-      {content}
-    </button>
-  );
+    return (
+        <button className={classNames} onClick={wrappedOnClick} {...restProps}>
+            {content}
+        </button>
+    );
 };
+
+export default Button;

src/components/Tile.tsx

@@ -19,9 +19,11 @@ import React from "react";
 import "./Tile.scss";
 
 interface IProps {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
-export default (props: IProps) => {
-  return <div className="tile">{props.children}</div>;
+const Tile: React.FC<IProps> = (props: IProps) => {
+    return <div className="tile">{props.children}</div>;
 };
+
+export default Tile;

src/index.scss

@@ -19,8 +19,8 @@ limitations under the License.
 // CSS reset
 
 * {
-  box-sizing: border-box;
-  margin: 0;
+    box-sizing: border-box;
+    margin: 0;
 }
 
 // Styling for universal elements
@@ -28,19 +28,19 @@ limitations under the License.
 html,
 body,
 #root {
-  height: 100%;
-  width: 100%;
+    height: 100%;
+    width: 100%;
 
-  font-family: Helvetica Neue;
-  font-style: normal;
+    font-family: Helvetica Neue;
+    font-style: normal;
 
-  background-color: $app-background;
-  color: $font;
+    background-color: $app-background;
+    color: $font;
 }
 
 h1 {
-  font-weight: bold;
-  font-size: 24px;
-  line-height: 32px;
-  text-align: center;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 32px;
+    text-align: center;
 }

src/index.tsx

@@ -4,8 +4,8 @@ import "./index.scss";
 import App from "./App";
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById("root")
 );

src/layouts/SingleColumn.scss

@@ -1,11 +1,11 @@
 .singleColumnLayout {
-  height: 100%;
+    height: 100%;
 
-  padding: 0 1em;
-  margin: 0 auto;
+    padding: 0 1em;
+    margin: 0 auto;
 
-  max-width: 550px;
+    max-width: 550px;
 
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }

src/layouts/SingleColumn.tsx

@@ -19,9 +19,11 @@ import React from "react";
 import "./SingleColumn.scss";
 
 interface IProps {
-  children?: React.ReactNode;
+    children?: React.ReactNode;
 }
 
-export default (props: IProps) => {
-  return <div className="singleColumnLayout">{props.children}</div>;
+const SingleColumn: React.FC<IProps> = (props: IProps) => {
+    return <div className="singleColumnLayout">{props.children}</div>;
 };
+
+export default SingleColumn;