feat: add new popup app to go to login, dashboard, and logout
This commit is contained in:
parent
0e889ded3e
commit
df1895f824
GPG Key ID:
C997C339BE476FF2
|
|
@ -64,5 +64,10 @@
|
||||||
"id": "contact@lumeweb.com",
|
"id": "contact@lumeweb.com",
|
||||||
"strict_min_version": "91.1.0"
|
"strict_min_version": "91.1.0"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"browser_action": {
|
||||||
|
"default_icon": "icon.png",
|
||||||
|
"default_title": "Lume Web",
|
||||||
|
"default_popup": "popup.html"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,144 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Jaldi';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: url("../../fonts/Jaldi-Regular.woff2") format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #1D1D1D;
|
||||||
|
min-width: 15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
background: #3B3B3B;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
margin: auto;
|
||||||
|
//max-width: 13.7em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: flex;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding-left: 1.6em;
|
||||||
|
padding-right: 1.6em;
|
||||||
|
padding-top: 0.8em;
|
||||||
|
padding-bottom: 0.8em;
|
||||||
|
margin: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #F2F2F2;
|
||||||
|
|
||||||
|
> svg, span {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-btn {
|
||||||
|
background: #1B1B1B;
|
||||||
|
box-shadow: 1px 0 5px 0 rgb(27, 27, 27, 0.75);
|
||||||
|
|
||||||
|
|
||||||
|
> svg {
|
||||||
|
margin-right: 1em;
|
||||||
|
height: 1.2em;
|
||||||
|
width: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
background: #1B1B1B;
|
||||||
|
box-shadow: 1px 0 5px 0 rgb(27, 27, 27, 0.75);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #3B3B3B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-text {
|
||||||
|
font-family: Jaldi;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 2.1em;
|
||||||
|
color: #BFBFBF;
|
||||||
|
margin: auto;
|
||||||
|
padding-left: 2em;
|
||||||
|
padding-right: 2em;
|
||||||
|
padding-top: 1em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 7em;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 2.75em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo,
|
||||||
|
.exit,
|
||||||
|
.logout {
|
||||||
|
padding: 1em;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
max-width: 1.2em;
|
||||||
|
max-height: 1.2em;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
fill: #8E8E93; // Set the fill color to gray for both icons
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit, .logout {
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
fill: #62C554;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
&.connected {
|
||||||
|
svg {
|
||||||
|
fill: #62C554;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
import "./App.scss";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { init, loginComplete } from "@lumeweb/libkernel/kernel";
|
||||||
|
import browser from "webextension-polyfill";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import { clearLoginKey } from "../../../shared/keys.js";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [loggedIn, setLoggedIn] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
init().then(() => {
|
||||||
|
loginComplete().then(() => {
|
||||||
|
setLoggedIn(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, [loggedIn]);
|
||||||
|
|
||||||
|
function openDashboard() {
|
||||||
|
browser.tabs.create({
|
||||||
|
url: browser.runtime.getURL("dashboard.html"),
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openAccount() {
|
||||||
|
browser.tabs.create({
|
||||||
|
url: browser.runtime.getURL("account.html"),
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
window.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function logout() {
|
||||||
|
await clearLoginKey();
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="header">
|
||||||
|
<div className={classNames("logo", { connected: loggedIn })}>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 339.18999 339.19"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="translate(-425.68,-251.35)">
|
||||||
|
<g>
|
||||||
|
<path d="m 697.89,382.61 c -0.96,-3.95 -3.58,-7.25 -7.1,-9.09 -1.93,-1.01 -4.13,-1.59 -6.46,-1.59 H 653.6 c -20.14,-0.03 -30.35,-10.26 -30.35,-30.42 0,-0.02 0,-0.04 0,-0.06 v 0 -76.11 c 0,-0.55 -0.04,-1.09 -0.1,-1.62 -0.01,-0.13 -0.04,-0.25 -0.06,-0.37 -0.06,-0.41 -0.13,-0.82 -0.23,-1.22 -0.03,-0.12 -0.06,-0.24 -0.09,-0.36 -0.11,-0.42 -0.24,-0.84 -0.39,-1.25 -0.03,-0.08 -0.05,-0.15 -0.08,-0.23 -0.19,-0.48 -0.4,-0.96 -0.64,-1.41 -0.01,-0.03 -0.04,-0.05 -0.05,-0.08 -0.28,-0.52 -0.58,-1.03 -0.92,-1.51 -0.01,-0.01 -0.02,-0.02 -0.03,-0.04 -0.34,-0.47 -0.7,-0.92 -1.09,-1.34 -0.04,-0.05 -0.08,-0.09 -0.13,-0.14 -0.81,-0.86 -1.72,-1.61 -2.71,-2.24 -0.09,-0.06 -0.19,-0.11 -0.28,-0.17 -0.43,-0.26 -0.88,-0.5 -1.34,-0.71 -0.08,-0.04 -0.15,-0.08 -0.23,-0.11 -0.53,-0.23 -1.07,-0.43 -1.63,-0.6 -0.11,-0.03 -0.22,-0.06 -0.33,-0.09 -0.45,-0.12 -0.92,-0.22 -1.39,-0.3 -0.16,-0.03 -0.31,-0.05 -0.47,-0.07 -0.58,-0.07 -1.18,-0.13 -1.78,-0.13 0,0 0,0 0,0 v 0 c -0.73,0 -1.43,0.07 -2.13,0.18 -0.12,0.02 -0.25,0.03 -0.37,0.06 -0.67,0.12 -1.32,0.29 -1.96,0.5 -0.1,0.03 -0.2,0.07 -0.3,0.11 -1.33,0.48 -2.56,1.15 -3.67,1.99 -0.05,0.04 -0.1,0.08 -0.16,0.12 -0.56,0.43 -1.08,0.91 -1.57,1.42 -0.02,0.02 -0.04,0.04 -0.06,0.07 -1,1.07 -1.84,2.3 -2.46,3.65 0,0 0,0.01 0,0.01 -0.3,0.64 -0.54,1.31 -0.74,2 -0.01,0.04 -0.04,0.09 -0.05,0.13 -0.15,0.55 -0.27,1.12 -0.36,1.7 -0.01,0.08 -0.03,0.16 -0.04,0.24 -0.08,0.6 -0.13,1.2 -0.13,1.82 v 76.17 c 0,0.02 0,0.04 0,0.07 0.02,28.2 15.37,58.31 58.36,58.33 0.01,0 0.02,0 0.03,0 0.01,0 0.02,0 0.03,0 h 30.63 c 3.86,0 7.36,-1.57 9.89,-4.1 2.53,-2.53 4.1,-6.03 4.1,-9.89 v -0.02 c -0.01,-1.15 -0.17,-2.24 -0.43,-3.3 z" />
|
||||||
|
<path d="m 556.94,318.33 c -3.95,0.96 -7.25,3.58 -9.09,7.1 -1.01,1.93 -1.59,4.13 -1.59,6.46 v 30.73 c -0.03,20.14 -10.26,30.35 -30.42,30.35 -0.02,0 -0.04,0 -0.06,0 v 0 h -76.11 c -0.55,0 -1.09,0.04 -1.62,0.1 -0.13,0.01 -0.25,0.04 -0.37,0.06 -0.41,0.06 -0.82,0.13 -1.22,0.23 -0.12,0.03 -0.24,0.06 -0.36,0.09 -0.42,0.11 -0.84,0.24 -1.25,0.39 -0.08,0.03 -0.15,0.05 -0.23,0.08 -0.48,0.19 -0.96,0.4 -1.41,0.64 -0.03,0.01 -0.05,0.04 -0.08,0.05 -0.52,0.28 -1.03,0.58 -1.51,0.92 -0.01,0.01 -0.02,0.02 -0.04,0.03 -0.47,0.34 -0.92,0.7 -1.34,1.09 -0.05,0.04 -0.09,0.08 -0.14,0.13 -0.86,0.81 -1.61,1.72 -2.24,2.71 -0.06,0.09 -0.11,0.19 -0.17,0.28 -0.26,0.43 -0.5,0.88 -0.71,1.34 -0.04,0.08 -0.08,0.15 -0.11,0.23 -0.23,0.53 -0.43,1.07 -0.6,1.63 -0.03,0.11 -0.06,0.22 -0.09,0.33 -0.12,0.45 -0.22,0.92 -0.3,1.39 -0.03,0.16 -0.05,0.31 -0.07,0.47 -0.07,0.58 -0.13,1.18 -0.13,1.78 0,0 0,0 0,0 v 0 c 0,0.73 0.07,1.43 0.18,2.13 0.02,0.12 0.03,0.25 0.06,0.37 0.12,0.67 0.29,1.32 0.5,1.96 0.03,0.1 0.07,0.2 0.11,0.3 0.48,1.33 1.15,2.56 1.99,3.67 0.04,0.05 0.08,0.1 0.12,0.16 0.43,0.56 0.91,1.08 1.42,1.57 0.02,0.02 0.04,0.04 0.07,0.06 1.07,1 2.3,1.84 3.65,2.46 0,0 0.01,0 0.01,0 0.64,0.3 1.31,0.54 2,0.74 0.04,0.01 0.09,0.04 0.13,0.05 0.55,0.15 1.12,0.27 1.7,0.36 0.08,0.01 0.16,0.03 0.24,0.04 0.6,0.08 1.2,0.13 1.82,0.13 h 76.17 c 0.02,0 0.04,0 0.07,0 28.2,-0.02 58.31,-15.37 58.33,-58.36 0,-0.01 0,-0.02 0,-0.03 0,-0.01 0,-0.02 0,-0.03 v -30.63 c 0,-3.86 -1.57,-7.36 -4.1,-9.89 -2.53,-2.53 -6.03,-4.1 -9.89,-4.1 h -0.02 c -1.15,0.01 -2.24,0.17 -3.3,0.43 z" />
|
||||||
|
<path d="m 492.66,459.28 c 0.96,3.95 3.58,7.25 7.1,9.09 1.93,1.01 4.13,1.59 6.46,1.59 h 30.73 c 20.14,0.03 30.35,10.26 30.35,30.42 0,0.02 0,0.04 0,0.06 v 0 76.11 c 0,0.55 0.04,1.09 0.1,1.62 0.01,0.13 0.04,0.25 0.06,0.37 0.06,0.41 0.13,0.82 0.23,1.22 0.03,0.12 0.06,0.24 0.09,0.36 0.11,0.42 0.24,0.84 0.39,1.25 0.03,0.08 0.05,0.15 0.08,0.23 0.19,0.48 0.4,0.96 0.64,1.41 0.01,0.03 0.04,0.05 0.05,0.08 0.28,0.52 0.58,1.03 0.92,1.51 0.01,0.01 0.02,0.02 0.03,0.04 0.34,0.47 0.7,0.92 1.09,1.34 0.04,0.05 0.08,0.09 0.13,0.14 0.81,0.86 1.72,1.61 2.71,2.24 0.09,0.06 0.19,0.11 0.28,0.17 0.43,0.26 0.88,0.5 1.34,0.71 0.08,0.04 0.15,0.08 0.23,0.11 0.53,0.23 1.07,0.43 1.63,0.6 0.11,0.03 0.22,0.06 0.33,0.09 0.45,0.12 0.92,0.22 1.39,0.3 0.16,0.03 0.31,0.05 0.47,0.07 0.58,0.07 1.18,0.13 1.78,0.13 0,0 0,0 0,0 v 0 c 0.73,0 1.43,-0.07 2.13,-0.18 0.12,-0.02 0.25,-0.03 0.37,-0.06 0.67,-0.12 1.32,-0.29 1.96,-0.5 0.1,-0.03 0.2,-0.07 0.3,-0.11 1.33,-0.48 2.56,-1.15 3.67,-1.99 0.05,-0.04 0.1,-0.08 0.16,-0.12 0.56,-0.43 1.08,-0.91 1.57,-1.42 0.02,-0.02 0.04,-0.04 0.06,-0.07 1,-1.07 1.84,-2.3 2.46,-3.65 0,0 0,-0.01 0,-0.01 0.3,-0.64 0.54,-1.31 0.74,-2 0.01,-0.04 0.04,-0.09 0.05,-0.13 0.15,-0.55 0.27,-1.12 0.36,-1.7 0.01,-0.08 0.03,-0.16 0.04,-0.24 0.08,-0.6 0.13,-1.2 0.13,-1.82 v -76.17 c 0,-0.02 0,-0.04 0,-0.07 -0.02,-28.2 -15.37,-58.31 -58.36,-58.33 -0.01,0 -0.02,0 -0.03,0 -0.01,0 -0.02,0 -0.03,0 h -30.63 c -3.86,0 -7.36,1.57 -9.89,4.1 -2.53,2.53 -4.1,6.03 -4.1,9.89 v 0.02 c 0.01,1.15 0.17,2.24 0.43,3.3 z" />
|
||||||
|
<path d="m 633.61,523.56 c 3.95,-0.96 7.25,-3.58 9.09,-7.1 1.01,-1.93 1.59,-4.13 1.59,-6.46 v -30.73 c 0.03,-20.14 10.26,-30.35 30.42,-30.35 0.02,0 0.04,0 0.06,0 v 0 h 76.11 c 0.55,0 1.09,-0.04 1.62,-0.1 0.13,-0.01 0.25,-0.04 0.37,-0.06 0.41,-0.06 0.82,-0.13 1.22,-0.23 0.12,-0.03 0.24,-0.06 0.36,-0.09 0.42,-0.11 0.84,-0.24 1.25,-0.39 0.08,-0.03 0.15,-0.05 0.23,-0.08 0.48,-0.19 0.96,-0.4 1.41,-0.64 0.03,-0.01 0.05,-0.04 0.08,-0.05 0.52,-0.28 1.03,-0.58 1.51,-0.92 0.01,-0.01 0.02,-0.02 0.04,-0.03 0.47,-0.34 0.92,-0.7 1.34,-1.09 0.05,-0.04 0.09,-0.08 0.14,-0.13 0.86,-0.81 1.61,-1.72 2.24,-2.71 0.06,-0.09 0.11,-0.19 0.17,-0.28 0.26,-0.43 0.5,-0.88 0.71,-1.34 0.04,-0.08 0.08,-0.15 0.11,-0.23 0.23,-0.53 0.43,-1.07 0.6,-1.63 0.03,-0.11 0.06,-0.22 0.09,-0.33 0.12,-0.45 0.22,-0.92 0.3,-1.39 0.03,-0.16 0.05,-0.31 0.07,-0.47 0.07,-0.58 0.13,-1.18 0.13,-1.78 0,0 0,0 0,0 v 0 c 0,-0.73 -0.07,-1.43 -0.18,-2.13 -0.02,-0.12 -0.03,-0.25 -0.06,-0.37 -0.12,-0.67 -0.29,-1.32 -0.5,-1.96 -0.03,-0.1 -0.07,-0.2 -0.11,-0.3 -0.48,-1.33 -1.15,-2.56 -1.99,-3.67 -0.04,-0.05 -0.08,-0.1 -0.12,-0.16 -0.43,-0.56 -0.91,-1.08 -1.42,-1.57 -0.02,-0.02 -0.04,-0.04 -0.07,-0.06 -1.07,-1 -2.3,-1.84 -3.65,-2.46 0,0 -0.01,0 -0.01,0 -0.64,-0.3 -1.31,-0.54 -2,-0.74 -0.04,-0.01 -0.09,-0.04 -0.13,-0.05 -0.55,-0.15 -1.12,-0.27 -1.7,-0.36 -0.08,-0.01 -0.16,-0.03 -0.24,-0.04 -0.6,-0.08 -1.2,-0.13 -1.82,-0.13 H 674.7 c -0.02,0 -0.04,0 -0.07,0 -28.2,0.02 -58.31,15.37 -58.33,58.36 0,0.01 0,0.02 0,0.03 0,0.01 0,0.02 0,0.03 V 510 c 0,3.86 1.57,7.36 4.1,9.89 2.53,2.53 6.03,4.1 9.89,4.1 h 0.02 c 1.15,-0.01 2.24,-0.17 3.3,-0.43 z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="icons">
|
||||||
|
{loggedIn && (
|
||||||
|
<div className="logout" onClick={logout}>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
clipRule="evenodd"
|
||||||
|
d="M6.31111 11.2L7.55556 12.4444L12 8L7.55556 3.55556L6.31111 4.8L8.62222 7.11111H0V8.88889H8.62222L6.31111 11.2ZM14.2222 0H1.77778C0.8 0 0 0.8 0 1.77778V5.33333H1.77778V1.77778H14.2222V14.2222H1.77778V10.6667H0V14.2222C0 15.2 0.8 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2 0 14.2222 0Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="exit" onClick={close}>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||||
|
<g>
|
||||||
|
<path d="M12.255 6.992a.75.75 0 1 0-1.023-1.097L9.037 7.94 6.992 5.745a.75.75 0 0 0-1.097 1.023L7.94 8.963l-2.195 2.045a.75.75 0 0 0 1.023 1.097l2.195-2.045 2.045 2.195a.75.75 0 0 0 1.097-1.023L10.06 9.037l2.195-2.045z" />
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M.75 9a8.25 8.25 0 1 1 16.5 0A8.25 8.25 0 1 1 .75 9zM9 15.75a6.75 6.75 0 1 1 0-13.5 6.75 6.75 0 1 1 0 13.5z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="body">
|
||||||
|
<div className="connection">
|
||||||
|
<svg viewBox="0 0 113 113" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clipPath="url(#clip0_625_565)">
|
||||||
|
<path
|
||||||
|
d="M24.7188 63.5625H88.2812C101.912 63.5625 113 52.4744 113 38.8438C113 25.2131 101.912 14.125 88.2812 14.125H28.25C28.25 6.32094 21.9291 0 14.125 0C6.32094 0 0 6.32094 0 14.125C0 21.9291 6.32094 28.25 14.125 28.25C19.3371 28.25 23.843 25.3897 26.2937 21.1875H88.2812C98.0134 21.1875 105.938 29.1116 105.938 38.8438C105.938 48.5759 98.0134 56.5 88.2812 56.5H24.7188C11.0881 56.5 0 67.5881 0 81.2188C0 94.8494 11.0881 105.938 24.7188 105.938H86.7063C89.1499 110.14 93.6558 113 98.875 113C106.679 113 113 106.679 113 98.875C113 91.0709 106.679 84.75 98.875 84.75C91.0709 84.75 84.75 91.0709 84.75 98.875H24.7188C14.9866 98.875 7.0625 90.9509 7.0625 81.2188C7.0625 71.4866 14.9866 63.5625 24.7188 63.5625Z"
|
||||||
|
fill="url(#paint0_linear_625_565)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_625_565"
|
||||||
|
x1="56.5"
|
||||||
|
y1="0"
|
||||||
|
x2="56.5"
|
||||||
|
y2="113"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stopColor="#1F6E46" />
|
||||||
|
<stop offset="1" stopColor="#484848" stopOpacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<clipPath id="clip0_625_565">
|
||||||
|
<rect width="113" height="113" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="connection-text">
|
||||||
|
{!loggedIn && <>Looks like you’re not connected.</>}
|
||||||
|
{loggedIn && <>Connected to Lume Web.</>}
|
||||||
|
</div>
|
||||||
|
<div className="button-container">
|
||||||
|
{loggedIn && (
|
||||||
|
<button className="dashboard-btn" onClick={openDashboard}>
|
||||||
|
<svg
|
||||||
|
width=""
|
||||||
|
height=""
|
||||||
|
viewBox=""
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clipPath="url(#clip0_625_287)">
|
||||||
|
<path
|
||||||
|
d="M0 8C0 9.58225 0.469192 11.129 1.34824 12.4446C2.22729 13.7602 3.47672 14.7855 4.93853 15.391C6.40034 15.9965 8.00887 16.155 9.56072 15.8463C11.1126 15.5376 12.538 14.7757 13.6569 13.6569C14.7757 12.538 15.5376 11.1126 15.8463 9.56072C16.155 8.00887 15.9965 6.40034 15.391 4.93853C14.7855 3.47672 13.7602 2.22729 12.4446 1.34824C11.129 0.469192 9.58225 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8Z"
|
||||||
|
fill="#BFBFBF"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11.4999 10.545V12.0225C11.4999 12.0824 11.4763 12.1399 11.4342 12.1825C11.392 12.2251 11.3348 12.2494 11.2749 12.25H4.4999C4.44 12.2494 4.38277 12.2251 4.34065 12.1825C4.29852 12.1399 4.2749 12.0824 4.2749 12.0225V10.545C4.2749 9.35251 5.8924 8.38501 7.8874 8.38501C9.8824 8.38501 11.4999 9.35251 11.4999 10.545Z"
|
||||||
|
stroke="#1E1F21"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeMiterlimit="10"
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M7.88747 6.84C8.77389 6.84 9.49247 6.14828 9.49247 5.295C9.49247 4.44172 8.77389 3.75 7.88747 3.75C7.00105 3.75 6.28247 4.44172 6.28247 5.295C6.28247 6.14828 7.00105 6.84 7.88747 6.84Z"
|
||||||
|
stroke="#1E1F21"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeMiterlimit="10"
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_625_287">
|
||||||
|
<rect width="16" height="16" fill="white" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
<span>Dashboard</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{!loggedIn && (
|
||||||
|
<button className="login-btn" onClick={openAccount}>
|
||||||
|
<span>Login</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Lume Web</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="./popup.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createRoot } from "react-dom";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import App from "./apps/popup/App.tsx";
|
||||||
|
|
||||||
|
const root = createRoot(document.getElementById("app"));
|
||||||
|
|
||||||
|
root.render(React.createElement(App));
|
||||||
|
|
@ -3,6 +3,7 @@ module.exports = {
|
||||||
"./onboarding.html",
|
"./onboarding.html",
|
||||||
"./account.html",
|
"./account.html",
|
||||||
"./dashboard.html",
|
"./dashboard.html",
|
||||||
|
"./popup.html",
|
||||||
"./src/**/*.{js,ts, tsx}",
|
"./src/**/*.{js,ts, tsx}",
|
||||||
],
|
],
|
||||||
mode: "jit",
|
mode: "jit",
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ export default defineConfig({
|
||||||
onboarding: resolve(__dirname, "onboarding.html"),
|
onboarding: resolve(__dirname, "onboarding.html"),
|
||||||
account: resolve(__dirname, "account.html"),
|
account: resolve(__dirname, "account.html"),
|
||||||
dashboard: resolve(__dirname, "dashboard.html"),
|
dashboard: resolve(__dirname, "dashboard.html"),
|
||||||
|
popup: resolve(__dirname, "popup.html"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
minify: false,
|
minify: false,
|
||||||
|
|
|
||||||
Reference in New Issue