fear(airdrop): comfirm modal btn

MORIOM70 · Jan 18, 2022 · 5eabdaf · 5eabdaf
1 parent 97a80d2
commit 5eabdaf
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 15 deletions.
diff --git a/src/component/ClaimAirdrop/index.tsx b/src/component/ClaimAirdrop/index.tsx
@@ -1,22 +1,60 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
+import { Modal } from 'antd';
+
+const ComfirmModalButton = ({
+  text='OK',
+  onClick=()=>{},
+  disabled=false,
+}) => (
+  <button className={clsx(styles.btnComfirmModal)} onClick={onClick} disabled={disabled}>
+    <span>{text}</span>
+  </button>
+)
+
+const ComfirmModal = ({
+  visible=false,
+  title=null,
+  footer=null,
+  children=null,
+}) => {
+  return (
+    <Modal
+      visible={visible}
+      title={title}
+      footer={footer}
+      className={clsx(styles.comfirmModal)}
+    >
+      {children}
+    </Modal>
+  );
+};
 
 type Props = {
   className?: string;
 }
 
 const ClaimAirdrop: React.FC<Props> = ({ className }) => {
+  const [visibleComfirmModal, setVisibleComfirmModal] = useState(true);
+
   const handleClickLoginWithGithub = (e: Event) => {
     e.preventDefault();
+    setVisibleComfirmModal(true);
   }
 
   return (
-    <div className={clsx(className)}>
-      <button className={clsx(styles.btnLoginWithGihub)} onClick={handleClickLoginWithGithub}>
-        <span>Log in with Github</span>
-      </button>
-    </div>
+    <>
+      <div className={clsx(className)}>
+        <button className={clsx(styles.btnLoginWithGihub)} onClick={handleClickLoginWithGithub}>
+          <span>Log in with Github</span>
+        </button>
+      </div>
+      <ComfirmModal
+        visible={visibleComfirmModal}
+        footer={<ComfirmModalButton onClick={() => setVisibleComfirmModal(false)} disabled={true} />}
+      />
+    </>
   );
 };
 

diff --git a/src/component/ClaimAirdrop/styles.module.scss b/src/component/ClaimAirdrop/styles.module.scss
@@ -1,13 +1,23 @@
 %-btn-base {
   transition: all 0.3s;
-  opacity: 1;
 
   &:hover {
-    opacity: 0.8;
+    cursor: pointer;
+    box-shadow: 0 0 4px rgba(228, 26, 112, 0.9);
   }
 
   &:active {
-    opacity: 0.6;
+    box-shadow: 0 0 8px rgba(228, 26, 112, 0.9);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: #EEEEEE;
+    box-shadow: none;
+
+    >span {
+      color: #8D8D8D;
+    }
   }
 }
 
@@ -18,16 +28,48 @@
   border-radius: 10px;
   border: 2px solid rgba(228, 26, 112, 0.9);
 
-  &:hover {
-    box-shadow: 0 0 4px rgba(228, 26, 112, 0.9);
+  >span {
+    font-weight: bold;
+    color: rgba(228, 26, 112, 0.9);
   }
+}
 
-  &:active {
-    box-shadow: 0 0 8px rgba(228, 26, 112, 0.9);
-  }
+.btnComfirmModal {
+  @extend %-btn-base;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+  border: none;
+  border-radius: 8px;
+  background: #EC3783;
 
   >span {
+    color: #ffffff;
     font-weight: bold;
-    color: rgba(228, 26, 112, 0.9);
+  }
+}
+
+.comfirmModal {
+  :global {
+    .ant-modal-content {
+      border-radius: 20px;
+    }
+
+    .ant-modal-header {
+      border-radius: 20px 20px 0 0;
+      border-bottom: none;
+      background: #EC3783;
+    }
+
+    .ant-modal-close {
+      color: #ffffff;
+    }
+
+    .ant-modal-footer {
+      border-top: none;
+      border-radius: 0 0 20px 20px;
+    }
   }
 }