feat: extension login ui

apps/extension/src/components/popup/login.module.css

@@ -0,0 +1,43 @@
+.container{
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 300px;
+  height: 288px;
+  padding: 24px;
+}
+
+.welcome{
+  margin-top: 20px;
+}
+
+.btnContainer{
+  position: absolute;
+  display: flex;
+  bottom: 0px;
+  height: 100px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.loginBtn{
+  width: 70%;
+  height: 38px;
+  background: #262525;
+  color: #fff;
+  border-radius: 3px;
+  border: none;
+  cursor: pointer;
+}
+
+.loginBtn:hover {
+  background: #000000;
+  cursor: pointer;
+}
+
+.loginBtn:active {
+  background: #262525;
+}

apps/extension/src/components/popup/login.tsx

@@ -0,0 +1,27 @@
+import logo from '../../../assets/logo.png'
+import styles from './login.module.css'
+
+interface LoginProps {
+  loginCallback(): void
+}
+
+export function Login(props: LoginProps) {
+  const onLogin = () => {
+    console.log('onLogin')
+    props.loginCallback()
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.welcome} style={{ marginTop: '20px' }}>
+        <img src={logo} width={100} alt="penx icon" />
+        <h1>Welcome</h1>
+      </div>
+      <div className={styles.btnContainer}>
+        <button className={styles.loginBtn} onClick={onLogin}>
+          Login to penx
+        </button>
+      </div>
+    </div>
+  )
+}

apps/extension/src/components/popup/main.module.css

@@ -35,7 +35,7 @@
 .saveBtn {
   width: 150px;
   height: 30px;
-  background: #9c27b0;
+  background: #262525;
   color: #fff;
   border-radius: 3px;
   border: none;
@@ -43,10 +43,10 @@
 }
 
 .saveBtn:hover {
-  background: #bd21d8;
+  background: #000000;
   cursor: pointer;
 }
 
 .saveBtn:active {
-  background: #da5ff0;
+  background: #262525;
 }

apps/extension/src/components/popup/main.tsx

@@ -7,7 +7,7 @@ import styles from './main.module.css'
 
 import './globals.css'
 
-export function Main({ name = 'Extension' }) {
+export function Main() {
   const [tab, setTab] = useState<TabInfo>(null)
 
   const getCurrentTab = async () => {