Reduce use of style=

src/components/Dashboard/Identity.tsx

@@ -14,9 +14,7 @@ export interface IIdentity {
     fingerprint: string
 }
 interface Props extends IIdentity {
-    /* Design variant */
     avatar?: string
-    atSymbolBefore?: boolean
     onClick?(): void
 }
 const FixedWidth = createBox({ fontFamily: FixedWidthFonts })
@@ -39,34 +37,34 @@ export default withStylesTyped(theme =>
         avatarDisabled: {
             marginRight: 0,
         },
+        emptyAvatar: {
+            width: 0,
+            height: 0,
+        },
     }),
-)<Props>(function Identity(props) {
-    const { avatar, onClick } = props
+)<Props>(function({ avatar, onClick, classes, nickname, fingerprint, username }) {
     return (
-        <Card onClick={onClick} className={props.classes.card}>
+        <Card onClick={onClick} className={classes.card}>
             <CardHeader
-                classes={{ avatar: classNames({ [props.classes.avatarDisabled]: !avatar }) }}
+                classes={{ avatar: classNames({ [classes.avatarDisabled]: !avatar }) }}
                 avatar={
                     avatar ? (
-                        <Avatar aria-label={props.nickname} src={avatar.length > 3 ? avatar : undefined}>
+                        <Avatar aria-label={nickname} src={avatar.length > 3 ? avatar : undefined}>
                             {avatar.length <= 3 ? avatar : undefined}
                         </Avatar>
                     ) : (
-                        <Avatar style={{ width: 0, height: 0 }} />
+                        <Avatar className={classes.emptyAvatar} />
                     )
                 }
                 title={
                     <>
-                        <Typography inline className={props.classes.text}>
-                            {props.nickname}
-                        </Typography>
-                        <Typography inline>
-                            {props.atSymbolBefore && '@'}
-                            {props.username}
+                        <Typography inline className={classes.text}>
+                            {nickname}
                         </Typography>
+                        <Typography inline>{username}</Typography>
                     </>
                 }
-                subheader={<FixedWidth>{props.fingerprint}</FixedWidth>}
+                subheader={<FixedWidth>{fingerprint}</FixedWidth>}
             />
         </Card>
     )

src/components/InjectedComponents/AddToKeyStore.tsx

@@ -22,7 +22,7 @@ export const AddToKeyStoreUI = {
     success: <AdditionalContent title="Maskbook public key added to keystore ✔" />,
     awaiting: <AdditionalContent title="Maskbook public key found, verifying..." />,
     failed: (props: { error: Error }) => (
-        <AdditionalContent title={<span style={{ color: 'red' }}>Maskbook public key NOT verified ❌</span>}>
+        <AdditionalContent title="Maskbook public key NOT verified ❌">
             {props.error.message} This public key won't be saved.{console.error(props.error)}
         </AdditionalContent>
     ),

src/components/InjectedComponents/AdditionalPostContent.tsx

@@ -2,24 +2,44 @@ import * as React from 'react'
 import Divider from '@material-ui/core/Divider/Divider'
 import Typography from '@material-ui/core/Typography/Typography'
 import { getUrl } from '../../utils/utils'
+import { withStylesTyped } from '../../utils/theme'
 
 interface Props {
     title: React.ReactNode
     children?: any
 }
-export const AdditionalContent = (props: Props) => {
+export const AdditionalContent = withStylesTyped({
+    upDivider: {
+        marginBottom: 6,
+        // TODO: ? is this useful?
+        marginBlock: 6,
+    },
+    title: {
+        display: 'flex',
+    },
+    icon: {
+        transform: 'translate(-1px, -1px)',
+        width: 16,
+        height: 16,
+    },
+    content: {
+        marginBottom: 6,
+        marginTop: 6,
+        lineHeight: 1.2,
+    },
+})<Props>(({ classes, ...props }) => {
     const icon = getUrl('/maskbook-icon-padded.png')
     return (
         <>
-            <Divider style={{ marginBottom: 6, marginBlock: 6 }} />
-            <Typography variant="caption" style={{ display: 'flex' }}>
-                <img src={icon} style={{ transform: 'translate(-1px, -1px)' }} width={16} height={16} />
+            <Divider className={classes.upDivider} />
+            <Typography variant="caption" className={classes.title}>
+                <img src={icon} className={classes.icon} />
                 {props.title}
             </Typography>
-            <Typography variant="body1" style={{ marginBottom: 6, marginTop: 6, lineHeight: 1.2 }}>
+            <Typography variant="body1" className={classes.content}>
                 {props.children}
             </Typography>
             <Divider />
         </>
     )
-}
+})

src/components/InjectedComponents/DecryptedPost.tsx

@@ -6,40 +6,35 @@ import { CryptoService } from '../../extension/content-script/rpc'
 import { useShareMenu } from './SelectPeopleDialog'
 import { Person } from '../../extension/background-script/PeopleService'
 import Link from '@material-ui/core/Link'
+import { withStylesTyped } from '../../utils/theme'
 
-interface Props {
-    postBy: string
-    whoAmI: string
-    encryptedText: string
-    people: Person[]
-}
-function DecryptPostSuccess({
-    data,
-    displayAddDecryptor,
-    requestAddDecryptor,
-    people,
-}: {
+interface DecryptPostSuccessProps {
     data: { signatureVerifyResult: boolean; content: string }
     displayAddDecryptor: boolean
     requestAddDecryptor(to: Person[]): Promise<void>
     people: Person[]
-}) {
-    const { ShareMenu, hideShare, showShare } = useShareMenu(people, requestAddDecryptor)
+}
+const DecryptPostSuccess = withStylesTyped({
+    link: { marginRight: '1em', cursor: 'pointer' },
+    pass: { color: 'green' },
+    fail: { color: 'red' },
+})<DecryptPostSuccessProps>(({ data, displayAddDecryptor, requestAddDecryptor, people, classes }) => {
+    const { ShareMenu, showShare } = useShareMenu(people, requestAddDecryptor)
     return (
         <AdditionalContent
             title={
                 <>
                     {ShareMenu}
                     Maskbook decrypted content: <FullWidth />
                     {displayAddDecryptor ? (
-                        <Link color="primary" onClick={showShare} style={{ marginRight: '1em', cursor: 'pointer' }}>
+                        <Link color="primary" onClick={showShare} className={classes.link}>
                             Add decryptor
                         </Link>
                     ) : null}
                     {data.signatureVerifyResult ? (
-                        <span style={{ color: 'green' }}>Signature verified ✔</span>
+                        <span className={classes.pass}>Signature verified ✔</span>
                     ) : (
-                        <span style={{ color: 'red' }}>Signature NOT verified ❌</span>
+                        <span className={classes.fail}>Signature NOT verified ❌</span>
                     )}
                 </>
             }
@@ -52,7 +47,7 @@ function DecryptPostSuccess({
             )}
         />
     )
-}
+})
 
 const DecryptPostAwaiting = <AdditionalContent title="Maskbook decrypting..." />
 function DecryptPostFailed({ error }: { error: Error }) {
@@ -66,7 +61,13 @@ function DecryptPostFailed({ error }: { error: Error }) {
     )
 }
 
-function DecryptPost({ postBy, whoAmI, encryptedText, people }: Props) {
+interface DecryptPostProps {
+    postBy: string
+    whoAmI: string
+    encryptedText: string
+    people: Person[]
+}
+function DecryptPost({ postBy, whoAmI, encryptedText, people }: DecryptPostProps) {
     const [_, a] = encryptedText.split('🎼')
     const [b, _2] = a.split(':||')
     return (

src/components/InjectedComponents/SelectPeopleDialog.tsx

@@ -7,13 +7,18 @@ import Button from '@material-ui/core/Button/Button'
 import DialogTitle from '@material-ui/core/DialogTitle/DialogTitle'
 import DialogActions from '@material-ui/core/DialogActions/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent/DialogContent'
+import { withStylesTyped } from '../../utils/theme'
 interface Props {
     open: boolean
     people: Person[]
     onClose(): void
     onSelect(people: Person[]): Promise<void>
 }
-export function SelectPeopleDialog(props: Props) {
+export const SelectPeopleDialog = withStylesTyped({
+    title: { paddingBottom: 0 },
+    content: { padding: '0 12px' },
+    progress: { marginRight: 6 },
+})<Props>(({ classes, ...props }) => {
     const [people, select] = useState<Person[]>([] as Person[])
     const [committed, setCommitted] = useState(false)
     const onClose = useCallback(() => {
@@ -29,22 +34,22 @@ export function SelectPeopleDialog(props: Props) {
     // useEsc(() => (committed ? void 0 : onClose))
     return (
         <Dialog onClose={onClose} open={props.open} scroll="paper" fullWidth maxWidth="sm">
-            <DialogTitle style={{ paddingBottom: 0 }}>Share to ...</DialogTitle>
-            <DialogContent style={{ padding: '0 12px' }}>
+            <DialogTitle className={classes.title}>Share to ...</DialogTitle>
+            <DialogContent className={classes.content}>
                 <SelectPeopleUI disabled={committed} all={props.people} selected={people} onSetSelected={select} />
             </DialogContent>
             <DialogActions>
                 <Button size="large" disabled={committed} onClick={onClose}>
                     Cancel
                 </Button>
                 <Button size="large" disabled={committed || people.length === 0} color="primary" onClick={share}>
-                    {committed && <CircularProgress style={{ marginRight: 6 }} size={16} variant="indeterminate" />}
+                    {committed && <CircularProgress className={classes.progress} size={16} variant="indeterminate" />}
                     {committed ? 'Sharing' : 'Share'}
                 </Button>
             </DialogActions>
         </Dialog>
     )
-}
+})
 
 export function useShareMenu(people: Person[], onSelect: (people: Person[]) => Promise<void>) {
     const [show, setShow] = useState(false)
@@ -53,7 +58,7 @@ export function useShareMenu(people: Person[], onSelect: (people: Person[]) => P
 
     return {
         showShare,
-        hideShare,
+        // hideShare,
         ShareMenu: <SelectPeopleDialog people={people} open={show} onClose={hideShare} onSelect={onSelect} />,
     }
 }

src/components/Welcomes/1a2.tsx

@@ -23,12 +23,16 @@ export default withStylesTyped(theme =>
         button: {
             minWidth: 180,
         },
+        img: {
+            border: '1px solid #ddd',
+            borderRadius: 5,
+        },
     }),
 )<Props>(function Welcome({ classes, next }) {
     return (
         <Paper className={classes.paper}>
             <Typography variant="h5">Encrypt message use this postbox</Typography>
-            <img src={getUrl(require('./1a2.jpg'))} width="75%" style={{ border: '1px solid #ddd', borderRadius: 5 }} />
+            <img src={getUrl(require('./1a2.jpg'))} width="75%" className={classes.img} />
             <Typography variant="subtitle1">
                 Then only people you selected with Maskbook can see the post content
             </Typography>

src/components/Welcomes/1a4.tsx

@@ -42,6 +42,12 @@ export default withStylesTyped(theme =>
         button: {
             minWidth: 180,
         },
+        textFieldShort: {
+            minHeight: '10em',
+        },
+        textFieldLong: {
+            minHeight: '11em',
+        },
     }),
 )<Props>(function Welcome({ classes, copyToClipboard, provePost }) {
     const full = `I'm using https://maskbook.io/ to encrypt my posts to prevent Facebook from peeping into them.
@@ -71,7 +77,7 @@ ${provePost}`
                 onFocus={onFocus}
                 onBlur={onBlur}
                 value={showShort ? provePost : full}
-                style={{ minHeight: showShort ? '10em' : '11em' }}
+                className={showShort ? classes.textFieldShort : classes.textFieldLong}
             />
             <Typography variant="subtitle1">
                 {showShort

src/components/Welcomes/1b1.tsx

@@ -54,6 +54,16 @@ export default withStylesTyped(theme =>
         button: {
             minWidth: 180,
         },
+        file: {
+            display: 'none',
+        },
+        restoreBox: {
+            color: 'gray',
+            transition: '0.4s',
+            '&[data-active=true]': {
+                color: 'black',
+            },
+        },
     }),
 )<Props>(function Welcome({ classes, back, restore }) {
     const ref = React.useRef<HTMLInputElement>(null)
@@ -70,16 +80,15 @@ export default withStylesTyped(theme =>
                 <Typography variant="h5">Restore your keypair</Typography>
                 <form>
                     <input
-                        style={{ display: 'none' }}
+                        className={classes.file}
                         type="file"
                         accept="application/json"
                         ref={ref}
                         onChange={fileReceiver}
                     />
                     <RestoreBox
-                        style={{
-                            color: dragStatus === 'drag-enter' ? 'black' : 'gray',
-                        }}
+                        className={classes.restoreBox}
+                        data-active={dragStatus === 'drag-enter'}
                         onClick={() => ref.current && ref.current.click()}>
                         {dragStatus === 'drag-enter'
                             ? 'Drag your key backup into this dialog'

src/stories/index.tsx

@@ -69,7 +69,6 @@ storiesOf('Dashboard (unused)', module)
             fingerprint={text('Fingerprint', 'FDFE333CE20ED446AD88F3C8BA3AD1AA5ECAF521')}
             nickname={text('Name', 'Jack Works')}
             username={text('Username', 'jackworks_vfs')}
-            atSymbolBefore={boolean('Add a @ on username?', false)}
         />
     ))
     .add('Dashboard (unused)', () => (
@@ -133,7 +132,7 @@ storiesOf('Injections', module)
     })
     .add('Select people dialog', () => {
         function SelectPeople() {
-            const { ShareMenu, hideShare, showShare } = useShareMenu(demoPeople, async people => sleep(3000))
+            const { ShareMenu, showShare } = useShareMenu(demoPeople, async people => sleep(3000))
             return (
                 <>
                     {ShareMenu}

src/utils/theme.ts

@@ -1,8 +1,8 @@
 import withStyles, {
     WithStyles,
     WithStylesOptions,
-    StyleRules,
     StyleRulesCallback,
+    StyleRules,
 } from '@material-ui/core/styles/withStyles'
 import React from 'react'
 import createMuiTheme, { ThemeOptions, Theme } from '@material-ui/core/styles/createMuiTheme'
@@ -67,9 +67,10 @@ const baseTheme = (theme: 'dark' | 'light') =>
 export const MaskbookLightTheme = createMuiTheme(baseTheme('light'))
 export const MaskbookDarkTheme = createMuiTheme(baseTheme('dark'))
 export const FixedWidthFonts = `Droid Sans Mono', Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif`
+
 // 类型安全的 withStyles
 export function withStylesTyped<ClassKey extends string, Options extends WithStylesOptions<ClassKey> = {}>(
-    style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey>,
+    style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey> = {} as any,
     options?: Options,
 ) {
     return function<Props, Ref = null>(