styles edits for saas/app and book (#156)

async-labs · May 24, 2021 · 3be5f67 · 3be5f67
1 parent c961374
commit 3be5f67
Show file tree

Hide file tree

Showing 79 changed files with 3,398 additions and 3,979 deletions.
diff --git a/book/10-begin/app/components/posts/PostEditor.tsx b/book/10-begin/app/components/posts/PostEditor.tsx
@@ -63,33 +63,31 @@ class PostEditor extends React.Component<Props, State> {
  const membersMinusCurrentUser = members.filter((member) => member._id !== currentUser._id);
 
  const isThemeDark = store && store.currentUser && store.currentUser.darkTheme === true;
- const textareaBackgroundColor = isThemeDark ? '#303030' : '#fff';
+ const textareaBackgroundColor = isThemeDark ? '#0d1117' : '#fff';
 
  return (
  <div style={{ marginTop: '20px' }}>
  <div style={{ display: 'inline-flex' }}>
  <Button
- color="primary"
  onClick={this.showMarkdownContent}
  variant="text"
- style={{ fontWeight: htmlContent ? 300 : 600 }}
+ style={{ fontWeight: htmlContent ? 300 : 600, color: '#58a6ff' }}
  >
  Markdown
  </Button>{' '}
  <Button
- color="primary"
  onClick={this.showHtmlContent}
  variant="text"
- style={{ fontWeight: htmlContent ? 600 : 300 }}
+ style={{ fontWeight: htmlContent ? 600 : 300, color: '#58a6ff' }}
  >
  HTML
  </Button>
  </div>
 
  <div style={{ display: 'inline', float: 'left' }}>
  <label htmlFor="upload-file">
- <Button color="primary" component="span">
- <i className="material-icons" style={{ fontSize: '22px' }}>
+ <Button component="span">
+ <i className="material-icons" style={{ fontSize: '22px', color: '#58a6ff' }}>
  insert_photo
  </i>
  </Button>

diff --git a/book/10-begin/app/lib/theme.ts b/book/10-begin/app/lib/theme.ts
@@ -6,8 +6,12 @@ const themeDark = createMuiTheme({
  secondary: { main: '#b62324' },
  type: 'dark',
  background: { default: '#0d1117' },
+ text: {
+ primary: '#c9d1d9',
+ },
  },
  typography: {
+ fontFamily: ['Roboto', 'sans-serif'].join(','),
  button: {
  textTransform: 'none',
  },
@@ -20,8 +24,12 @@ const themeLight = createMuiTheme({
  secondary: { main: '#b62324' },
  type: 'light',
  background: { default: '#fff' },
+ text: {
+ primary: '#222',
+ },
  },
  typography: {
+ fontFamily: ['Roboto', 'sans-serif'].join(','),
  button: {
  textTransform: 'none',
  },

diff --git a/book/10-begin/app/pages/_document.tsx b/book/10-begin/app/pages/_document.tsx
@@ -25,9 +25,9 @@ class MyDocument extends Document {
  public render() {
  // console.log('rendered on the server');
 
- const isThemeDark =
- this.props.__NEXT_DATA__.props.initialState.user &&
- this.props.__NEXT_DATA__.props.initialState.user.darkTheme;
+ const isThemeDark = this.props.__NEXT_DATA__.props.initialState.user
+ ? this.props.__NEXT_DATA__.props.initialState.user.darkTheme
+ : true;
 
  return (
  <Html lang="en">
@@ -116,12 +116,7 @@ class MyDocument extends Document {
  `}
  </style>
  </Head>
- <body
- style={{
- padding: '0px 0px 0px 0px !important',
- color: isThemeDark ? '#c9d1d9' : '#222',
- }}
- >
+ <body>
  <Main />
  <NextScript />
  </body>

diff --git a/book/10-begin/app/pages/team-settings.tsx b/book/10-begin/app/pages/team-settings.tsx
@@ -12,7 +12,6 @@ import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
 
 import Layout from '../components/layout';
 import InviteMember from '../components/teams/InviteMember';
@@ -100,8 +99,13 @@ class TeamSettings extends React.Component<Props, State> {
  />
  <br />
  <br />
- <Button variant="outlined" color="primary" type="submit" disabled={this.state.disabled}>
- Update name
+ <Button
+ variant="contained"
+ color="primary"
+ type="submit"
+ disabled={this.state.disabled}
+ >
+ Update username
  </Button>
  </form>
  <p />
@@ -119,7 +123,7 @@ class TeamSettings extends React.Component<Props, State> {
  />
  <label htmlFor="upload-file">
  <Button
- variant="outlined"
+ variant="contained"
  color="primary"
  component="span"
  disabled={this.state.disabled}
@@ -143,15 +147,15 @@ class TeamSettings extends React.Component<Props, State> {
  </h4>
  <Button
  onClick={this.openInviteMember}
- variant="outlined"
+ variant="contained"
  color="primary"
  style={{ float: 'right', marginTop: '-20px' }}
  disabled={this.state.disabled}
  >
  Invite member
  </Button>
  <p />
- <TableContainer component={Paper}>
+ <TableContainer>
  <Table>
  <TableHead>
  <TableRow>
@@ -219,7 +223,7 @@ class TeamSettings extends React.Component<Props, State> {
  <React.Fragment>
  <h4>Invited users</h4>
  <p />
- <TableContainer component={Paper}>
+ <TableContainer>
  <Table>
  <TableHead>
  <TableRow>

diff --git a/book/10-begin/app/pages/your-settings.tsx b/book/10-begin/app/pages/your-settings.tsx
@@ -63,23 +63,28 @@ class YourSettings extends React.Component<Props, State> {
  Your email: <b>{currentUser.email}</b>
  </li>
  <li>
- Your name: <b>{currentUser.displayName}</b>
+ Your username: <b>{currentUser.displayName}</b>
  </li>
  </div>
  <form onSubmit={this.onSubmit} autoComplete="off">
- <h4>Your name</h4>
+ <h4>Your username</h4>
  <TextField
  autoComplete="off"
  value={newName}
- helperText="Your name as seen by your team members"
+ helperText="Your username as seen by your team members"
  onChange={(event) => {
  this.setState({ newName: event.target.value });
  }}
  />
  <br />
  <br />
- <Button variant="outlined" color="primary" type="submit" disabled={this.state.disabled}>
- Update name
+ <Button
+ variant="contained"
+ color="primary"
+ type="submit"
+ disabled={this.state.disabled}
+ >
+ Update username
  </Button>
  </form>
 

diff --git a/book/10-begin/app/server/server.ts b/book/10-begin/app/server/server.ts
@@ -46,10 +46,7 @@ app.prepare().then(() => {
  handle(req, res);
  });
 
- server.listen(process.env.PORT_APP, (err: Error) => {
- if (err) {
- throw err;
- }
+ server.listen(process.env.PORT_APP, () => {
  console.log(`> Ready on ${process.env.URL_APP}`);
  });
 });