diff --git a/assets/manifest.json b/assets/manifest.json index 8a49158..7307d17 100644 --- a/assets/manifest.json +++ b/assets/manifest.json @@ -64,5 +64,10 @@ "id": "contact@lumeweb.com", "strict_min_version": "91.1.0" } + }, + "browser_action": { + "default_icon": "icon.png", + "default_title": "Lume Web", + "default_popup": "popup.html" } } diff --git a/ui/apps/popup/App.scss b/ui/apps/popup/App.scss new file mode 100644 index 0000000..9072b2a --- /dev/null +++ b/ui/apps/popup/App.scss @@ -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; + } +} + diff --git a/ui/apps/popup/App.tsx b/ui/apps/popup/App.tsx new file mode 100644 index 0000000..3c8c942 --- /dev/null +++ b/ui/apps/popup/App.tsx @@ -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 ( + <> +