feature(#191): update UI in extension...

Extension/package-lock.json

@@ -14,7 +14,8 @@
         "axios": "^1.4.0",
         "firebase": "^9.23.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "webextension-polyfill": "^0.10.0"
       },
       "devDependencies": {
         "@babel/core": "^7.20.12",
@@ -11539,6 +11540,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/webextension-polyfill": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz",
+      "integrity": "sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g=="
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -20619,6 +20625,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "webextension-polyfill": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/webextension-polyfill/-/webextension-polyfill-0.10.0.tgz",
+      "integrity": "sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g=="
+    },
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

Extension/package.json

@@ -14,7 +14,8 @@
     "axios": "^1.4.0",
     "firebase": "^9.23.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

Extension/src/manifest.json

@@ -38,9 +38,11 @@
       "resources": [
         "content.styles.css",
         "icon-128.png",
-        "icon-34.png"
+        "icon-34.png",
+        "logo_panel.png",
+        "logo.png"
       ],
-      "matches": []
+      "matches": ["<all_urls>"]
     }
   ]
 }

Extension/src/pages/Panel/Message/index.css

@@ -1,10 +1,10 @@
 [data-theme='light'] {
-    --send-theme-color: #0a164d;
+    --send-theme-color: #8753e9;
     --receive-theme-color: #0d0c0d;
   }
   
   [data-theme='dark'] {
-    --send-theme-color: #0a164d;
+    --send-theme-color: #8753e9;
     --receive-theme-color: #333333;
   }
 

Extension/src/pages/Panel/Panel.css

@@ -23,8 +23,9 @@
 }
 
 .header {
-  padding-left: 10px;
+  height: 55px;
   text-align: left;
+  padding-top: 5px;
 }
 
 .footer {

Extension/src/pages/Panel/Panel.jsx

@@ -6,6 +6,7 @@ import { getDatabase, onValue, ref } from "firebase/database";
 import Message from './Message'
 import './Panel.css';
 import app from './FirebaseApp/firebase-app'
+import Browser from 'webextension-polyfill'
 
 const {Footer, Content} = Layout;
 const URL_BASE = 'https://ttt246-brain.hf.space/'
@@ -26,6 +27,8 @@ const confs = {
         "temperature": 0.6
     }
 }
+const logoUrl = Browser.runtime.getURL('logo_panel.png')
+
 const Panel = () => {
     const [question, setQuestion] = useState("");
     const [messages, setMessages] = useState([]);
@@ -315,7 +318,7 @@ const Panel = () => {
     return (
         <Layout className="main-layout" data-theme={isDarkMode ? 'dark': 'light'}>
             <div className="header">
-                <h4>RisingBrowser</h4>
+                <img src={logoUrl} height="48px" alt="no image" />
             </div>
             <Divider className="divider"/>
             <Content className="content" ref={chat_box}>

Extension/webpack.config.js

@@ -144,7 +144,7 @@ var options = {
           from: 'src/manifest.json',
           to: path.join(__dirname, 'build'),
           force: true,
-          transform: function (content, path) {
+          transform: function (content) {
             // generates the manifest file using the package.json informations
             return Buffer.from(
               JSON.stringify({
@@ -184,6 +184,24 @@ var options = {
         },
       ],
     }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/img/logo_panel.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/img/logo.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
       filename: 'newtab.html',