diff --git a/lib/components/controls.tsx b/lib/components/controls.tsx index 0f5bd60..a2207e5 100644 --- a/lib/components/controls.tsx +++ b/lib/components/controls.tsx @@ -3,8 +3,8 @@ import { Button, useTheme, Select, Spacer } from 'components' import { useConfigs } from 'lib/config-context' import useLocale from 'lib/use-locale' import Router, { useRouter } from 'next/router' -import MoonIcon from './icons/moon' -import SunIcon from './icons/sun' +import MoonIcon from '@zeit-ui/react-icons/moon' +import SunIcon from '@zeit-ui/react-icons/sun' const Controls: React.FC<{}> = React.memo(({ }) => { @@ -47,12 +47,12 @@ const Controls: React.FC<{}> = React.memo(({ title={isChinese ? '切换主题' : 'Switch Themes'}>
- {isChinese ? '明亮' : 'Light'} + {isChinese ? '明亮' : 'Light'}
- {isChinese ? '暗黑' : 'Dark'} + {isChinese ? '暗黑' : 'Dark'}
diff --git a/lib/components/icons/arrow.tsx b/lib/components/icons/arrow.tsx deleted file mode 100644 index 5bd8359..0000000 --- a/lib/components/icons/arrow.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { useTheme } from 'components/index' - -export interface ArrowProps { - rotate?: number -} - -export const ArrowIcon: React.FC = React.memo(({ rotate }) => { - const theme = useTheme() - return ( - - - - - ) -}) - -export default ArrowIcon diff --git a/lib/components/icons/copy.tsx b/lib/components/icons/copy.tsx deleted file mode 100644 index 1897ab1..0000000 --- a/lib/components/icons/copy.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 20, - height: 20, -} - -export type CopyIconProps = Props & typeof defaultProps & React.SVGAttributes - -const CopyIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - const theme = useTheme() - return ( - - - - - ) -}) - -export default withDefaults(CopyIcon, defaultProps) diff --git a/lib/components/icons/full-screen-close.tsx b/lib/components/icons/full-screen-close.tsx deleted file mode 100644 index d1f853f..0000000 --- a/lib/components/icons/full-screen-close.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 20, - height: 20, -} - -export type FullScreenCloseIconProps = Props & typeof defaultProps & React.SVGAttributes - -const FullScreenCloseIcon: React.FC> = ({ - width, height, ...props -}) => { - return ( - - - - ) -} - -export default withDefaults(FullScreenCloseIcon, defaultProps) diff --git a/lib/components/icons/full-screen.tsx b/lib/components/icons/full-screen.tsx deleted file mode 100644 index 723bf00..0000000 --- a/lib/components/icons/full-screen.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 20, - height: 20, -} - -export type FullScreenIconProps = Props & typeof defaultProps & React.SVGAttributes - -const FullScreenIcon: React.FC> = ({ - width, height, ...props -}) => { - return ( - - - - ) -} - -export default withDefaults(FullScreenIcon, defaultProps) diff --git a/lib/components/icons/github.tsx b/lib/components/icons/github.tsx deleted file mode 100644 index 8cd5502..0000000 --- a/lib/components/icons/github.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 24, - height: 24, -} - -export type SunIconProps = Props & typeof defaultProps - -const SunIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - const theme = useTheme() - return ( - - - - ) -}) - -export default withDefaults(SunIcon, defaultProps) diff --git a/lib/components/icons/moon.tsx b/lib/components/icons/moon.tsx deleted file mode 100644 index b015d0d..0000000 --- a/lib/components/icons/moon.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 24, - height: 24, -} - -export type MoonIconProps = Props & typeof defaultProps - -const MoonIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - const theme = useTheme() - return ( - - - - ) -}) - -export default withDefaults(MoonIcon, defaultProps) diff --git a/lib/components/icons/react.tsx b/lib/components/icons/react.tsx deleted file mode 100644 index a82b2a0..0000000 --- a/lib/components/icons/react.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -// import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 24, - height: 24, -} - -export type ReactIconProps = Props & typeof defaultProps - -const ReactIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - // const theme = useTheme() - return ( - - - - - - - ) -}) - -export default withDefaults(ReactIcon, defaultProps) diff --git a/lib/components/icons/refresh.tsx b/lib/components/icons/refresh.tsx deleted file mode 100644 index 695665e..0000000 --- a/lib/components/icons/refresh.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 16, - height: 16, -} - -export type RefreshIconProps = Props & typeof defaultProps & React.SVGAttributes - -const RefreshIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - const theme = useTheme() - return ( - - - - - - ) -}) - -export default withDefaults(RefreshIcon, defaultProps) diff --git a/lib/components/icons/right.tsx b/lib/components/icons/right.tsx deleted file mode 100644 index 2b0045e..0000000 --- a/lib/components/icons/right.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number - active?: boolean -} - -const defaultProps = { - width: 14, - height: 14, - active: false -} - -export type RightIconProps = Props & typeof defaultProps - -const RightIcon: React.FC = React.memo(({ - width, height, active, ...props -}) => { - const theme = useTheme() - return ( - - - - - ) -}) - -export default withDefaults(RightIcon, defaultProps) diff --git a/lib/components/icons/sun.tsx b/lib/components/icons/sun.tsx deleted file mode 100644 index e1e9853..0000000 --- a/lib/components/icons/sun.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 24, - height: 24, -} - -export type SunIconProps = Props & typeof defaultProps - -const SunIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - const theme = useTheme() - return ( - - - - - - - - - - - - ) -}) - -export default withDefaults(SunIcon, defaultProps) diff --git a/lib/components/icons/toggle.tsx b/lib/components/icons/toggle.tsx deleted file mode 100644 index 7cd2f4a..0000000 --- a/lib/components/icons/toggle.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width?: number - height?: number - color?: string -} - -const defaultProps = { - width: 15, - height: 15, -} - -export type ToggleIconProps = Props & typeof defaultProps & React.SVGAttributes - -const ToggleIcon: React.FC = React.memo(({ - width, height, color, ...props -}) => { - const theme = useTheme() - return ( - - - - - - - - - - - - - - ) -}) - -export default withDefaults(ToggleIcon, defaultProps) diff --git a/lib/components/icons/zeit.tsx b/lib/components/icons/zeit.tsx deleted file mode 100644 index 07aa89f..0000000 --- a/lib/components/icons/zeit.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react' -import withDefaults from 'components/utils/with-defaults' -import useTheme from 'components/styles/use-theme' - -interface Props { - width: number - height: number -} - -const defaultProps = { - width: 24, - height: 24, -} - -export type ZEITIconProps = Props & typeof defaultProps - -const ZEITIcon: React.FC = React.memo(({ - width, height, ...props -}) => { - const theme = useTheme() - return ( - - - - - - - - - - - ) -}) - -export default withDefaults(ZEITIcon, defaultProps) diff --git a/lib/components/playground/index.tsx b/lib/components/playground/index.tsx index 097478a..330b1f1 100644 --- a/lib/components/playground/index.tsx +++ b/lib/components/playground/index.tsx @@ -5,8 +5,10 @@ import useClipboard from 'components/utils/use-clipboard' import { useTheme, useToasts } from 'components' import { useConfigs } from '../../config-context' import makeCodeTheme from './code-theme' -import RightIcon from 'lib/components/icons/right' -import CopyIcon from 'lib/components/icons/copy' +import RightIcon from '@zeit-ui/react-icons/chevronRight' +import CopyIcon from '@zeit-ui/react-icons/copy' +// import RightIcon from 'lib/components/icons/right' +// import CopyIcon from 'lib/components/icons/copy' import Title from './title' interface Props { @@ -49,13 +51,15 @@ const editor = (code: string, copy: Function, isChinese: boolean) => {
- + + + {isChinese ? '编辑代码' : 'Code Editor'}
{visible && ( - + )}
@@ -115,9 +119,22 @@ const editor = (code: string, copy: Function, isChinese: boolean) => { padding: ${theme.layout.gapHalf}; } + .right-icon { + transition: all .2s ease; + transform: rotate(${visible ? 90 : 0}deg); + display: inline-flex; + align-items: center; + } + .copy { display: inline-flex; align-items: center; + color: ${theme.palette.accents_4}; + transition: color .2s ease; + } + + .copy:hover { + color: ${theme.palette.accents_6}; } `} diff --git a/lib/components/sidebar/tabbar-mobile.tsx b/lib/components/sidebar/tabbar-mobile.tsx index 1426586..77b95ac 100644 --- a/lib/components/sidebar/tabbar-mobile.tsx +++ b/lib/components/sidebar/tabbar-mobile.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Button, useTheme } from 'components' -import ToggleIcon from '../icons/toggle' +import SlidersIcon from '@zeit-ui/react-icons/sliders' interface Props { onClick?: (e: React.MouseEvent) => void @@ -15,7 +15,7 @@ const TabbarMobile:React.FC = ({ onClick }) => { return (
ZEIT-UI React