book/* changes related to #156

async-labs · May 20, 2021 · 354b944 · 354b944
1 parent 172de89
commit 354b944
Show file tree

Hide file tree

Showing 128 changed files with 629 additions and 822 deletions.
diff --git a/book/10-begin/api/server/models/Post.ts b/book/10-begin/api/server/models/Post.ts
@@ -50,9 +50,6 @@ function markdownToHtml(content) {
  return `
  <a target="_blank" href="${href}" rel="noopener noreferrer"${t}>
  ${text}
- <i class="material-icons" style="font-size: 16px; vertical-align: baseline">
- launch
- </i>
  </a>
  `;
  };

diff --git a/book/10-begin/app/components/common/Confirmer.tsx b/book/10-begin/app/components/common/Confirmer.tsx
@@ -34,10 +34,10 @@ class Confirmer extends React.Component {
  <DialogContentText id="alert-dialog-description">{this.state.message}</DialogContentText>
  </DialogContent>
  <DialogActions style={{ padding: '10px' }}>
- <Button onClick={this.handleClose} variant="outlined" color="primary" autoFocus>
+ <Button onClick={this.handleClose} variant="contained" color="primary" autoFocus>
  Cancel
  </Button>
- <Button onClick={this.handleYes} variant="contained" color="primary">
+ <Button onClick={this.handleYes} variant="contained" color="secondary">
  OK
  </Button>
  </DialogActions>

diff --git a/book/10-begin/app/components/common/LoginButton.tsx b/book/10-begin/app/components/common/LoginButton.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 
 import { emailLoginLinkApiMethod } from '../../lib/api/public';
 import notify from '../../lib/notify';
-import { styleLoginButton } from '../../lib/sharedStyles';
 import { makeQueryString } from '../../lib/api/makeQueryString';
 
 type Props = { invitationToken?: string };
@@ -27,7 +26,7 @@ class LoginButton extends React.PureComponent<Props, State> {
 
  return (
  <React.Fragment>
- <Button variant="contained" style={styleLoginButton} href={url}>
+ <Button variant="contained" color="secondary" href={url}>
  <img
  src="https://storage.googleapis.com/async-await-all/G.svg"
  alt="Log in with Google"

diff --git a/book/10-begin/app/components/common/MenuWithMenuItems.tsx b/book/10-begin/app/components/common/MenuWithMenuItems.tsx
@@ -7,17 +7,17 @@ class MenuWithMenuItems extends React.PureComponent<{
  itemOptions: any[];
 }> {
  public state = {
- menuElm: null,
+ menuElem: null,
  };
 
  public render() {
  const { menuOptions, itemOptions } = this.props;
- const { menuElm } = this.state;
+ const { menuElem } = this.state;
 
  return (
  <div style={{ verticalAlign: 'middle' }}>
  <i
- aria-controls={menuElm ? menuOptions.id : null}
+ aria-controls={menuElem ? menuOptions.id : null}
  data-id={menuOptions.dataId}
  aria-haspopup="true"
  style={{ fontSize: '14px', opacity: 0.7, cursor: 'pointer' }}
@@ -29,8 +29,8 @@ class MenuWithMenuItems extends React.PureComponent<{
 
  <Menu
  id={menuOptions.id}
- anchorEl={menuElm}
- open={Boolean(menuElm)}
+ anchorEl={menuElem}
+ open={Boolean(menuElem)}
  onClose={this.handleClose}
  >
  {itemOptions.map((option, i) => (
@@ -39,7 +39,7 @@ class MenuWithMenuItems extends React.PureComponent<{
  data-id={option.dataId}
  data-more-id={option.dataMoreId}
  onClick={(e) => {
- this.setState({ menuElm: null });
+ this.setState({ menuElem: null });
  option.onClick(e);
  }}
  >
@@ -53,11 +53,11 @@ class MenuWithMenuItems extends React.PureComponent<{
 
  public handleClick = (event) => {
  event.preventDefault();
- this.setState({ menuElm: event.currentTarget });
+ this.setState({ menuElem: event.currentTarget });
  };
 
  public handleClose = () => {
- this.setState({ menuElm: null });
+ this.setState({ menuElem: null });
  };
 }
 

diff --git a/book/10-begin/app/components/posts/PostEditor.tsx b/book/10-begin/app/components/posts/PostEditor.tsx
@@ -208,9 +208,6 @@ class PostEditor extends React.Component<Props, State> {
  return `
  <a target="_blank" href="${href}" rel="noopener noreferrer"${t}>
  ${text}
- <i class="material-icons" style="font-size: 13px; vertical-align: baseline">
- launch
- </i>
  </a>
  `;
  };

diff --git a/book/10-begin/app/lib/sharedStyles.ts b/book/10-begin/app/lib/sharedStyles.ts
@@ -15,15 +15,6 @@ const styleToolbar = {
  paddingRight: '20px',
 };
 
-const styleLoginButton = {
- borderRadius: '2px',
- font: '16px Roboto',
- fontWeight: 400,
- letterSpacing: '0.01em',
- color: '#fff',
- backgroundColor: '#DF4930',
-};
-
 const styleTextField = {
  font: '15px Roboto',
  color: '#222',
@@ -35,11 +26,4 @@ const styleForm = {
  width: '360px',
 };
 
-export {
- styleBigAvatar,
- styleRaisedButton,
- styleToolbar,
- styleLoginButton,
- styleTextField,
- styleForm,
-};
+export { styleBigAvatar, styleRaisedButton, styleToolbar, styleTextField, styleForm };
diff --git a/book/10-begin/app/lib/theme.ts b/book/10-begin/app/lib/theme.ts
@@ -1,19 +1,30 @@
-import grey from '@material-ui/core/colors/grey';
 import { createMuiTheme } from '@material-ui/core/styles';
 
 const themeDark = createMuiTheme({
  palette: {
- primary: { main: grey[200] },
- secondary: { main: grey[400] },
+ primary: { main: '#238636' },
+ secondary: { main: '#b62324' },
  type: 'dark',
+ background: { default: '#0d1117' },
+ },
+ typography: {
+ button: {
+ textTransform: 'none',
+ },
  },
 });
 
 const themeLight = createMuiTheme({
  palette: {
- primary: { main: grey[800] },
- secondary: { main: grey[900] },
+ primary: { main: '#238636' },
+ secondary: { main: '#b62324' },
  type: 'light',
+ background: { default: '#fff' },
+ },
+ typography: {
+ button: {
+ textTransform: 'none',
+ },
  },
 });
 

diff --git a/book/10-begin/app/pages/_app.tsx b/book/10-begin/app/pages/_app.tsx
@@ -107,12 +107,21 @@ class MyApp extends App<{ isMobile: boolean }> {
  const { Component, pageProps } = this.props;
  const store = this.store;
 
+ const isThemeDark = store.currentUser ? store.currentUser.darkTheme : true;
+
  return (
- <ThemeProvider
- theme={store.currentUser && store.currentUser.darkTheme ? themeDark : themeLight}
- >
+ <ThemeProvider theme={isThemeDark ? themeDark : themeLight}>
  <Head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <link
+ rel="stylesheet"
+ href={
+ isThemeDark
+ ? 'https://storage.googleapis.com/async-await/nprogress-light.min.css?v=1'
+ : 'https://storage.googleapis.com/async-await/nprogress-dark.min.css?v=1'
+ }
+ />
  </Head>
  <CssBaseline />
  <Provider store={store}>

diff --git a/book/10-begin/app/pages/_document.tsx b/book/10-begin/app/pages/_document.tsx
@@ -47,16 +47,6 @@ class MyDocument extends Document {
  />
 
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
- <link rel="stylesheet" href="https://storage.googleapis.com/async-await/vs2015.min.css" />
-
- <link
- rel="stylesheet"
- href={
- isThemeDark
- ? 'https://storage.googleapis.com/async-await/nprogress-light.min.css?v=1'
- : 'https://storage.googleapis.com/async-await/nprogress-dark.min.css?v=1'
- }
- />
 
  <link
  rel="stylesheet"
@@ -69,18 +59,12 @@ class MyDocument extends Document {
 
  <style>
  {`
- a,
- a:focus {
- font-weight: 600;
- color: #000;
+ a {
+ font-weight: 400;
+ color: #58a6ff;
  text-decoration: none;
  outline: none;
  }
- a:hover,
- button:hover {
- opacity: 0.6;
- cursor: pointer;
- }
  hr {
  border: 0.5px #707070 solid;
  color: #000;
@@ -132,7 +116,12 @@ class MyDocument extends Document {
  `}
  </style>
  </Head>
- <body>
+ <body
+ style={{
+ padding: '0px 0px 0px 0px !important',
+ color: isThemeDark ? '#c9d1d9' : '#222',
+ }}
+ >
  <Main />
  <NextScript />
  </body>

diff --git a/book/10-begin/app/pages/team-settings.tsx b/book/10-begin/app/pages/team-settings.tsx
@@ -157,6 +157,7 @@ class TeamSettings extends React.Component<Props, State> {
  <TableRow>
  <TableCell>Person</TableCell>
  <TableCell>Role</TableCell>
+ <TableCell>Action</TableCell>
  </TableRow>
  </TableHead>
 

diff --git a/book/10-end/api/server/models/Post.ts b/book/10-end/api/server/models/Post.ts
@@ -50,9 +50,6 @@ function markdownToHtml(content) {
  return `
  <a target="_blank" href="${href}" rel="noopener noreferrer"${t}>
  ${text}
- <i class="material-icons" style="font-size: 16px; vertical-align: baseline">
- launch
- </i>
  </a>
  `;
  };

diff --git a/book/10-end/app/components/common/Confirmer.tsx b/book/10-end/app/components/common/Confirmer.tsx
@@ -34,10 +34,10 @@ class Confirmer extends React.Component {
  <DialogContentText id="alert-dialog-description">{this.state.message}</DialogContentText>
  </DialogContent>
  <DialogActions style={{ padding: '10px' }}>
- <Button onClick={this.handleClose} variant="outlined" color="primary" autoFocus>
+ <Button onClick={this.handleClose} variant="contained" color="primary" autoFocus>
  Cancel
  </Button>
- <Button onClick={this.handleYes} variant="contained" color="primary">
+ <Button onClick={this.handleYes} variant="contained" color="secondary">
  OK
  </Button>
  </DialogActions>

diff --git a/book/10-end/app/components/common/LoginButton.tsx b/book/10-end/app/components/common/LoginButton.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 
 import { emailLoginLinkApiMethod } from '../../lib/api/public';
 import notify from '../../lib/notify';
-import { styleLoginButton } from '../../lib/sharedStyles';
 import { makeQueryString } from '../../lib/api/makeQueryString';
 
 const dev = process.env.NODE_ENV !== 'production';
@@ -29,7 +28,7 @@ class LoginButton extends React.PureComponent<Props, State> {
 
  return (
  <React.Fragment>
- <Button variant="contained" style={styleLoginButton} href={url}>
+ <Button variant="contained" color="secondary" href={url}>
  <img
  src="https://storage.googleapis.com/async-await-all/G.svg"
  alt="Log in with Google"

diff --git a/book/10-end/app/components/common/MenuWithMenuItems.tsx b/book/10-end/app/components/common/MenuWithMenuItems.tsx
@@ -1,36 +1,34 @@
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import React from 'react';
 
 class MenuWithMenuItems extends React.PureComponent<{
  menuOptions: any;
  itemOptions: any[];
 }> {
  public state = {
- menuElm: null,
+ menuElem: null,
  };
 
  public render() {
  const { menuOptions, itemOptions } = this.props;
- const { menuElm } = this.state;
+ const { menuElem } = this.state;
 
  return (
  <div style={{ verticalAlign: 'middle' }}>
- <i
- aria-controls={menuElm ? menuOptions.id : null}
+ <MoreVertIcon
+ aria-controls={menuElem ? menuOptions.id : null}
  data-id={menuOptions.dataId}
  aria-haspopup="true"
  style={{ fontSize: '14px', opacity: 0.7, cursor: 'pointer' }}
- className="material-icons"
  onClick={(e) => this.handleClick(e)}
- >
- more_vert
- </i>
+ />
 
  <Menu
  id={menuOptions.id}
- anchorEl={menuElm}
- open={Boolean(menuElm)}
+ anchorEl={menuElem}
+ open={Boolean(menuElem)}
  onClose={this.handleClose}
  >
  {itemOptions.map((option, i) => (
@@ -39,7 +37,7 @@ class MenuWithMenuItems extends React.PureComponent<{
  data-id={option.dataId}
  data-more-id={option.dataMoreId}
  onClick={(e) => {
- this.setState({ menuElm: null });
+ this.setState({ menuElem: null });
  option.onClick(e);
  }}
  >
@@ -53,11 +51,11 @@ class MenuWithMenuItems extends React.PureComponent<{
 
  public handleClick = (event) => {
  event.preventDefault();
- this.setState({ menuElm: event.currentTarget });
+ this.setState({ menuElem: event.currentTarget });
  };
 
  public handleClose = () => {
- this.setState({ menuElm: null });
+ this.setState({ menuElem: null });
  };
 }
 

diff --git a/book/10-end/app/components/discussions/DiscussionList.tsx b/book/10-end/app/components/discussions/DiscussionList.tsx
@@ -1,4 +1,5 @@
 import Tooltip from '@material-ui/core/Tooltip';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
 import { observer } from 'mobx-react';
 import React from 'react';
 
@@ -37,13 +38,10 @@ class DiscussionList extends React.Component<Props> {
  Discussions
  <Tooltip title="Add Discussion" placement="right" disableFocusListener disableTouchListener>
  <a onClick={this.addDiscussion} style={{ float: 'right', padding: '0px 10px' }}>
- <i
- className="material-icons"
+ <AddCircleOutlineIcon
  color="action"
  style={{ fontSize: 14, opacity: 0.7, color: isThemeDark ? '#fff' : '#000' }}
- >
- add_circle_outline
- </i>{' '}
+ />{' '}
  </a>
  </Tooltip>
  <p />