feat: add login dialog

src/components/Layout/Footer/style.module.css

@@ -1,3 +1,6 @@
+@value colors: "~styles/colors.module.css";
+@value red from colors;
+
 .root {
   width: 100%;
   height: 60px;
@@ -46,14 +49,14 @@
   & .next svg {
     width: 20px;
     height: 20px;
-    color: rgb(208, 53, 49);
+    color: red;
   }
 
   & .pause {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: rgb(208, 53, 49);
+    background-color: red;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/Layout/Sidebar/LoginDialog/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Dialog, InputGroup, Button, IDialogProps } from '@blueprintjs/core'
+
+import styles from './style.module.css'
+
+const LoginDialog: React.FC<IDialogProps> = ({ isOpen, onClose }) => {
+  const handleLogin = () => {
+    console.log('login')
+  }
+
+  return (
+    <Dialog
+      style={{ width: '400px' }}
+      title='登录'
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <div className={styles.content}>
+        <InputGroup
+          placeholder='请输入手机号'
+          leftIcon='mobile-phone'
+        />
+        <InputGroup
+          placeholder='请输入密码'
+          leftIcon='lock'
+          type='password'
+        />
+
+        <div className={styles.loginBtn}>
+          <Button onClick={handleLogin}>登录</Button>
+        </div>
+      </div>
+    </Dialog>
+  )
+}
+
+export default LoginDialog

src/components/Layout/Sidebar/LoginDialog/style.module.css

@@ -0,0 +1,15 @@
+.content {
+  padding: 30px 30px 0;
+
+  > div {
+    margin-bottom: 20px;
+  }
+
+  .loginBtn {
+    text-align: right;
+
+    button {
+      width: 30%;
+    }
+  }
+}

src/components/Layout/Sidebar/index.tsx

@@ -2,18 +2,30 @@ import React from 'react'
 import { Icon } from '@blueprintjs/core'
 import cn from 'classnames'
 
+import LoginDialog from './LoginDialog'
 import styles from './style.module.css'
 
+const { useState } = React
+
 const Sidebar = () => {
   const isLogged = true
+  const [showLoginDialog, setShowLoginDialog] = useState(false)
+
+  const handleNameClicke = () => {
+    setShowLoginDialog(true)
+  }
+
+  const handleLoginDialogClose = () => {
+    setShowLoginDialog(false)
+  }
 
   return (
     <div className={styles.root}>
       <div className={styles.user}>
         <div className={styles.avatar}>
           {isLogged ? <Icon icon='person' /> : <img />}
         </div>
-        <div className={styles.name}>
+        <div className={styles.name} onClick={handleNameClicke}>
           <span>momo_Unique</span>
           <Icon icon='play' />
         </div>
@@ -47,6 +59,11 @@ const Sidebar = () => {
           </div>
         </div>
       </div>
+
+      <LoginDialog
+        isOpen={showLoginDialog}
+        onClose={handleLoginDialogClose}
+      />
     </div>
   )
 }

src/index.tsx

@@ -5,7 +5,7 @@ import App from './pages/App'
 import 'normalize.css/normalize.css'
 import '@blueprintjs/icons/lib/css/blueprint-icons.css'
 import '@blueprintjs/core/lib/css/blueprint.css'
-import './global.module.css'
+import './styles/global.module.css'
 
 const Root = () => {
   return (

src/styles/colors.module.css

@@ -0,0 +1 @@
+@value red: #c7332f;

src/styles/global.module.css

@@ -0,0 +1,7 @@
+html {
+  font-size: 100px;
+}
+
+button {
+  outline: none !important;
+}