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 ( + <> +
+
+ + + + + + + + + + +
+
+ {loggedIn && ( +
+ + + +
+ )} +
+ + + + + + +
+
+
+
+
+ + + + + + + + + + + + + + +
+
+ {!loggedIn && <>Looks like you’re not connected.} + {loggedIn && <>Connected to Lume Web.} +
+
+ {loggedIn && ( + + )} + {!loggedIn && ( + + )} +
+
+ + ); +} diff --git a/ui/popup.html b/ui/popup.html new file mode 100644 index 0000000..490391c --- /dev/null +++ b/ui/popup.html @@ -0,0 +1,11 @@ + + + + + Lume Web + + +
+ + + diff --git a/ui/popup.js b/ui/popup.js new file mode 100644 index 0000000..7137982 --- /dev/null +++ b/ui/popup.js @@ -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)); diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index 467038d..a39dfb4 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -3,6 +3,7 @@ module.exports = { "./onboarding.html", "./account.html", "./dashboard.html", + "./popup.html", "./src/**/*.{js,ts, tsx}", ], mode: "jit", diff --git a/ui/vite.config.js b/ui/vite.config.js index b4b66a6..1a122f6 100644 --- a/ui/vite.config.js +++ b/ui/vite.config.js @@ -12,6 +12,7 @@ export default defineConfig({ onboarding: resolve(__dirname, "onboarding.html"), account: resolve(__dirname, "account.html"), dashboard: resolve(__dirname, "dashboard.html"), + popup: resolve(__dirname, "popup.html"), }, }, minify: false,