chore(extensions): redesign login screen

packages/extensions/src/manifest.json

@@ -13,7 +13,12 @@
   "homepage_url": "https://maildog.dev",
   "short_name": "maildog",
 
-  "permissions": ["activeTab", "storage", "http://*/*", "https://*/*"],
+  "permissions": [
+    "activeTab",
+    "storage",
+    "https://maildog.dev/*",
+    "http://localhost:3000/*"
+  ],
 
   "content_security_policy": "script-src 'self'; object-src 'self'",
 

packages/extensions/src/popup/LoginScreen.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface Props {
+  isLoading: boolean;
+  onLogin: () => void;
+  onLearnMore: () => void;
+}
+
+function LoginScreen({
+  isLoading,
+  onLogin,
+  onLearnMore,
+}: Props): React.ReactElement {
+  return (
+    <main className="flex flex-col items-center w-72 h-96 bg-primary">
+      <figure className="flex-grow flex items-center">
+        <img
+          className={`w-32 h-32 text-secondary ${
+            isLoading ? 'animate-spin' : ''
+          }`}
+          src="./assets/logo.svg"
+          alt="logo"
+        />
+        <figcaption className="hidden">maildog</figcaption>
+      </figure>
+      <footer className={`w-full py-2 text-sm ${isLoading ? 'invisible' : ''}`}>
+        <div className="py-1 px-4">
+          <button
+            className="w-full p-2 rounded text-primary bg-white focus:outline-white"
+            type="button"
+            onClick={onLogin}
+          >
+            Login with GitHub
+          </button>
+        </div>
+        <div className="py-1 px-4">
+          <button
+            className="w-full p-2 text-white focus:outline-white"
+            type="button"
+            onClick={onLearnMore}
+          >
+            Learn more
+          </button>
+        </div>
+      </footer>
+    </main>
+  );
+}
+
+export default LoginScreen;

packages/extensions/src/popup/Popup.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { browser, Tabs } from 'webextension-polyfill-ts';
+import LoginScreen from './LoginScreen';
+
+async function showOfficialWebsite(): Promise<void> {
+  await browser.tabs.create({ url: 'https://github.com/edmundhung/maildog' });
+}
+
+function Popup(): React.ReactElement {
+  return (
+    <LoginScreen
+      isLoading={false}
+      onLogin={() => {}}
+      onLearnMore={showOfficialWebsite}
+    />
+  );
+}
+
+export default Popup;

packages/extensions/src/popup/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { persistQueryClient } from 'react-query/persistQueryClient-experimental';
+import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental';
+import { browser } from 'webextension-polyfill-ts';
+import Popup from './Popup';
+import '../style.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+const persistor = createAsyncStoragePersistor({
+  storage: {
+    getItem: async (key: string): Promise<string | null> => {
+      const item = await browser.storage.local.get(key);
+
+      if (typeof item?.[key] === 'undefined') {
+        return null;
+      }
+
+      return item?.[key];
+    },
+    setItem: async (key: string, value: string): Promise<void> => {
+      await browser.storage.local.set({
+        [key]: value,
+      });
+    },
+    removeItem: async (key: string): Promise<void> => {
+      await browser.storage.local.remove(key);
+    },
+  },
+});
+
+const popup = (
+  <QueryClientProvider client={queryClient}>
+    <Popup />
+  </QueryClientProvider>
+);
+
+persistQueryClient({ queryClient, persistor });
+ReactDOM.render(popup, document.getElementById('popup-root'));

packages/extensions/tailwind.config.js

@@ -1,11 +1,14 @@
 module.exports = {
   purge: ['./public/*.html', './src/**/*.ts', './src/**/*.tsx'],
-  darkMode: 'media',
-  theme: {},
-  variants: {
+  darkMode: false,
+  theme: {
     extend: {
-      borderColor: ['dark'],
+      colors: {
+        primary: '#537780',
+        secondary: '#fffcca',
+      },
     },
   },
+  variants: {},
   plugins: [],
 };

packages/extensions/webpack.config.js

@@ -92,7 +92,7 @@ module.exports = {
   entry: {
     manifest: path.join(sourcePath, 'manifest.json'),
     background: path.join(sourcePath, 'background.ts'),
-    popup: path.join(sourcePath, 'popup.tsx'),
+    popup: path.join(sourcePath, 'popup', 'index.tsx'),
   },
 
   output: {