clipper: finalize integration with new theming system

extensions/web-clipper/src/app.tsx

@@ -16,18 +16,24 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useAppStore } from "./stores/app-store";
 import { Login } from "./views/login";
 import { Main } from "./views/main";
 import { Settings } from "./views/settings";
-import { EmotionThemeProvider, useThemeEngineStore } from "@notesnook/theme";
+import {
+  EmotionThemeProvider,
+  themeToCSS,
+  useThemeEngineStore
+} from "@notesnook/theme";
+import { Global, css } from "@emotion/react";
 
 export function App() {
   const isLoggedIn = useAppStore((s) => s.isLoggedIn);
   const user = useAppStore((s) => s.user);
   const route = useAppStore((s) => s.route);
   const navigate = useAppStore((s) => s.navigate);
+  const theme = useThemeEngineStore((store) => store.theme);
 
   useEffect(() => {
     if (!isLoggedIn) {
@@ -36,27 +42,34 @@ export function App() {
   }, [isLoggedIn]);
 
   useEffect(() => {
-    console.log(user);
     if (user && user.theme) {
       document.body.style.backgroundColor =
         user.theme.scopes.base.primary.background;
       useThemeEngineStore.getState().setTheme(user.theme);
     }
   }, [user]);
+  const cssTheme = useMemo(() => themeToCSS(theme), [theme]);
 
   return (
-    <EmotionThemeProvider scope="base" injectCssVars>
-      {(() => {
-        switch (route) {
-          case "/login":
-            return <Login />;
-          default:
-          case "/":
-            return <Main />;
-          case "/settings":
-            return <Settings />;
-        }
-      })()}
-    </EmotionThemeProvider>
+    <>
+      <Global
+        styles={css`
+          ${cssTheme}
+        `}
+      />
+      <EmotionThemeProvider scope="base" injectCssVars>
+        {(() => {
+          switch (route) {
+            case "/login":
+              return <Login />;
+            default:
+            case "/":
+              return <Main />;
+            case "/settings":
+              return <Settings />;
+          }
+        })()}
+      </EmotionThemeProvider>
+    </>
   );
 }

extensions/web-clipper/src/components/check-list-item/index.tsx

@@ -60,7 +60,8 @@ export function CheckListItem(props: CheckListItemProps) {
           fontSize: "13px",
           ml: 1,
           fontWeight: 400,
-          color: "paragraph"
+          color: "paragraph",
+          textAlign: "left"
         }}
       >
         {title}

extensions/web-clipper/src/components/note-picker/index.tsx

@@ -96,7 +96,7 @@ export const NotePicker = (props: NotePickerProps) => {
         )}
       </Flex>
 
-      <Picker onClose={close} onDone={() => {}} isOpen={modalVisible}>
+      <Picker onClose={close} onDone={close} isOpen={modalVisible}>
         <FilteredList
           getAll={() => notes}
           filter={(items, query) =>

extensions/web-clipper/src/components/picker/index.tsx

@@ -42,11 +42,13 @@ export const Picker = (props: PropsWithChildren<PickerProps>) => {
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          boxShadow: `0px 1px 10px ${theme.scopes.base.primary.border}`,
+          boxShadow: `0px 0px 25px 5px ${
+            theme.colorScheme === "dark" ? "#000000aa" : "#0000004e"
+          }`,
           border: "none",
           borderRadius: 5,
           backgroundColor: theme.scopes.base.primary.background,
-          padding: "10px",
+          padding: "0px",
 
           height: "80vh",
           width: "85vw",
@@ -62,7 +64,7 @@ export const Picker = (props: PropsWithChildren<PickerProps>) => {
       isOpen={isOpen}
     >
       <EmotionThemeProvider
-        scope="base"
+        scope="dialog"
         injectCssVars
         sx={{
           display: "flex",
@@ -89,7 +91,7 @@ export const Picker = (props: PropsWithChildren<PickerProps>) => {
           </Flex>
           <Flex
             sx={{
-              bg: "var(--background-secondary)",
+              bg: "background-secondary",
               p: 1,
               justifyContent: "end"
             }}

extensions/web-clipper/src/index.css

@@ -5,10 +5,45 @@ body {
   overflow: hidden;
 }
 
+.ms-track:hover,
+.selectable,
+.selectable *,
+input,
+textarea {
+  -webkit-touch-callout: initial;
+  -webkit-user-select: text;
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: initial;
+  user-select: text;
+}
+
+* {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+::-moz-selection {
+  /* Code for Firefox */
+  background-color: var(--textSelection);
+  color: var(--paragraph);
+}
+
+::selection {
+  background-color: var(--textSelection);
+  color: var(--paragraph);
+}
+
 .ms-track:hover,
 .ms-track:active {
-  background: var(--border) !important;
-  border-width: 0px !important;
+  background: var(--background-secondary) !important;
+  border-left: 1px solid var(--border-secondary) !important;
 }
 
 .ms-track {
@@ -20,5 +55,5 @@ body {
 }
 
 .ms-thumb {
-  background: var(--hover) !important;
+  background: var(--paragraph-secondary) !important;
 }

extensions/web-clipper/src/utils/storage.ts

@@ -16,7 +16,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import browser from "webextension-polyfill";
+import { browser } from "webextension-polyfill-ts";
 
 export async function storeClip(data: string) {
   await browser.storage.local.set({ clip: data });