feat: show settings in popup page

wang-jianliang · Apr 4, 2024 · 5378714 · 5378714
1 parent 62888c1
commit 5378714
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/src/pages/popup/Popup.css b/src/pages/popup/Popup.css
@@ -11,18 +11,18 @@
 }
 
 .App-logo {
-  height: 30vmin;
+  height: 120px;
   pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 10s linear;
-  }
-}
+/*@media (prefers-reduced-motion: no-preference) {*/
+/*  .App-logo {*/
+/*    animation: App-logo-spin infinite 10s linear;*/
+/*  }*/
+/*}*/
 
 .App-header {
-  height: 100%;
+  height: 140px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -35,11 +35,11 @@
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+/*@keyframes App-logo-spin {*/
+/*  from {*/
+/*    transform: rotate(0deg);*/
+/*  }*/
+/*  to {*/
+/*    transform: rotate(360deg);*/
+/*  }*/
+/*}*/
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
@@ -5,6 +5,7 @@ import useStorage from '@src/shared/hooks/useStorage';
 import exampleThemeStorage from '@src/shared/storages/exampleThemeStorage';
 import withSuspense from '@src/shared/hoc/withSuspense';
 import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
+import Settings from '@pages/content/Settings/Settings';
 
 const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
@@ -18,6 +19,7 @@ const Popup = () => {
       <header className="App-header" style={{ color: theme === 'light' ? '#000' : '#fff' }}>
         <img src={logo} className="App-logo" alt="logo" />
       </header>
+      <Settings />
     </div>
   );
 };

diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
@@ -1,5 +1,5 @@
 body {
-  width: 300px;
+  width: 580px;
   height: 260px;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',

diff --git a/src/pages/popup/index.tsx b/src/pages/popup/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import '@pages/popup/index.css';
 import Popup from '@pages/popup/Popup';
 import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+import { ChakraProvider } from '@chakra-ui/react';
 
 refreshOnUpdate('pages/popup');
 
@@ -12,7 +13,12 @@ function init() {
     throw new Error('Can not find #app-container');
   }
   const root = createRoot(appContainer);
-  root.render(<Popup />);
+  // root.render(<Popup />);
+  root.render(
+    <ChakraProvider>
+      <Popup />
+    </ChakraProvider>,
+  );
 }
 
 init();