apply styles

Author: raduwen

src/components/TextWidget/editor.tsx

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import { TextField, Button, Typography } from '@material-ui/core';
 import { FirebaseDatabaseMutation } from '@react-firebase/database'
 import type { TextWidgetProps } from '@/components/TextWidget/types';
 
@@ -7,6 +9,18 @@ type Props = {
   props: TextWidgetProps;
 };
 
+const FormGroup = styled.div`
+  display: flex;
+  margin-bottom: 1rem;
+  width: 480px;
+  & > label {
+    width: 20%;
+  }
+  & > input {
+    flex-grow: 1;
+  }
+`;
+
 class TextWidgetEditor extends Component<Props, TextWidgetProps> {
   constructor(props) {
     super(props);
@@ -16,28 +30,41 @@ class TextWidgetEditor extends Component<Props, TextWidgetProps> {
   render() {
     return (
       <div>
-        <label>
-          text:
-          <input
+        <Typography variant="h6">
+          TextWidget : {this.props.id}
+        </Typography>
+        <FormGroup>
+          <TextField
             type="text"
+            label="text"
+            fullWidth
+            multiline={true}
+            variant="outlined"
             onChange={(e) => {
               this.setState({ ...this.state, text: e.target.value });
             }}
             value={this.state.text}
           />
-        </label>
+        </FormGroup>
 
-        <FirebaseDatabaseMutation type="set" path={`/widgets/${this.props.id}/props`}>
+        <FirebaseDatabaseMutation
+          type="set"
+          path={`/widgets/${this.props.id}/props`}
+        >
           {({ runMutation }) => {
             return (
-              <button
-                onClick={async (e: Event) => {
-                  e.preventDefault();
-                  await runMutation(this.state);
-                }}
-              >
-                Save
-              </button>
+              <FormGroup>
+                <Button
+                  color="primary"
+                  variant="contained"
+                  onClick={async (e: Event) => {
+                    e.preventDefault();
+                    await runMutation(this.state);
+                  }}
+                >
+                  Save
+                </Button>
+              </FormGroup>
             );
           }}
         </FirebaseDatabaseMutation>

src/components/admin/SignInForm/index.tsx

@@ -1,18 +1,8 @@
 import React, { VFC, useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { TextField, Button } from '@material-ui/core';
 import { auth } from '@/lib/firebase';
 
-const Button = styled.button`
-  padding: 0.5rem 1rem;
-  color: #fff;
-  background-color: #33bbff;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  &:hover {
-    background-color: #1188dd;
-  }
-`;
-
 const FormGroup = styled.div`
   display: flex;
   margin-bottom: 1rem;
@@ -25,11 +15,6 @@ const FormGroup = styled.div`
   }
 `;
 
-const Input = styled.input`
-  outline: 1px solid #eee;
-  padding: 0.25rem 0.5rem;
-`;
-
 type SignInFormProps = {
   redirectTo: string;
 };
@@ -50,22 +35,24 @@ const SignInForm: VFC<SignInFormProps> = ({ redirectTo }) => {
   return (
     <form onSubmit={signin}>
       <FormGroup>
-        <label>Email</label>
-        <Input
+        <TextField
           type="email"
+          label="Email"
           placeholder="example@example.com"
+          fullWidth
           onChange={(e) => setEmail(e.target.value)}
         />
       </FormGroup>
       <FormGroup>
-        <label>Password</label>
-        <Input
+        <TextField
           type="password"
+          label="Password"
+          fullWidth
           onChange={(e) => setPassword(e.target.value)}
         />
       </FormGroup>
       <div>
-        <Button type="submit">
+        <Button variant="contained" color="primary" type="submit">
           Sign In
         </Button>
       </div>

src/components/admin/index.tsx

@@ -1,4 +1,14 @@
 import React, { VFC, useEffect, useState } from 'react';
+import {
+  makeStyles,
+  CssBaseline,
+  Container,
+  Box,
+  AppBar,
+  Toolbar,
+  Typography,
+  Button
+} from '@material-ui/core';
 import { User } from '@firebase/auth-types';
 import { FirebaseDatabaseNode } from '@react-firebase/database';
 import { AuthProvider } from '@/lib/AuthProvider';
@@ -10,6 +20,15 @@ const Editors = {
   'text': TextWidgetEditor,
 };
 
+const useStyles = makeStyles((theme) => ({
+  root: {
+    flexGrow: 1,
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
 const Widgets: VFC = () => {
   return (
     <div>
@@ -32,6 +51,7 @@ const Widgets: VFC = () => {
 }
 
 const Index: VFC = () => {
+  const classes = useStyles();
   const [currentUser, setCurrentUser] = useState<User | null>(null);
 
   useEffect(() => {
@@ -49,16 +69,31 @@ const Index: VFC = () => {
   };
 
   return currentUser !== null ? (
-      <AuthProvider>
-        <h1>Admin</h1>
-        <div>{currentUser?.displayName}</div>
-        <button onClick={signout}>Sign Out</button>
-        <Widgets />
-      </AuthProvider>
-    ) : (
-      <Signin />
-    )
-  ;
+    <AuthProvider>
+      <CssBaseline />
+      <div className={classes.root}>
+        <AppBar position="static">
+          <Toolbar>
+            <Typography variant="h6" className={classes.title}>
+              Admin
+            </Typography>
+            <Typography>{currentUser.email}</Typography>
+            <Button color="inherit" onClick={signout}>
+              Logout
+            </Button>
+          </Toolbar>
+        </AppBar>
+
+        <Container>
+          <Box my={4}>
+            <Widgets />
+          </Box>
+        </Container>
+      </div>
+    </AuthProvider>
+  ) : (
+    <Signin />
+  );
 };
 
 export { Index };