Add styles for firefox scrollbar (#1277)

* Add styles for firefox scrollbar * Rewrite mixin with css function and teplate string since typescript doesn't know scrollbar width, update snapshots * Update snapshots
epam · Feb 22, 2022 · f70adbe · f70adbe
1 parent 339722e
commit f70adbe
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 25 deletions.
diff --git a/packages/ketcher-polymer-editor-react/src/__snapshots__/Editor.test.tsx.snap b/packages/ketcher-polymer-editor-react/src/__snapshots__/Editor.test.tsx.snap
@@ -309,7 +309,7 @@ Object {
                       class="css-1il5ut8"
                     >
                       <textarea
-                        class="css-248371"
+                        class="css-7w0kcs"
                         style="height: 0px;"
                       />
                       <span
@@ -434,7 +434,7 @@ Object {
                     class="MuiBox-root css-0"
                   >
                     <div
-                      class="css-cm25ye"
+                      class="css-1pgdic1"
                     />
                   </div>
                 </div>
@@ -763,7 +763,7 @@ Object {
                     class="css-1il5ut8"
                   >
                     <textarea
-                      class="css-248371"
+                      class="css-7w0kcs"
                       style="height: 0px;"
                     />
                     <span
@@ -888,7 +888,7 @@ Object {
                   class="MuiBox-root css-0"
                 >
                   <div
-                    class="css-cm25ye"
+                    class="css-1pgdic1"
                   />
                 </div>
               </div>

diff --git a/...s/ketcher-polymer-editor-react/src/components/modal/Open/__snapshots__/Open.test.tsx.snap b/...s/ketcher-polymer-editor-react/src/components/modal/Open/__snapshots__/Open.test.tsx.snap
@@ -59,7 +59,7 @@ Object {
             </button>
           </h2>
           <div
-            class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
+            class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
           >
             <div
               class="css-9brf46"

diff --git a/...s/ketcher-polymer-editor-react/src/components/modal/save/__snapshots__/Save.test.tsx.snap b/...s/ketcher-polymer-editor-react/src/components/modal/save/__snapshots__/Save.test.tsx.snap
@@ -59,7 +59,7 @@ Object {
             </button>
           </h2>
           <div
-            class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
+            class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
           >
             <form
               class="css-1g4yje1"
@@ -138,7 +138,7 @@ Object {
                 </div>
               </div>
               <textarea
-                class="css-6en6at"
+                class="css-17sxpbp"
                 readonly=""
               >
                 

diff --git a/...rc/components/notationInput/inputArea/__tests__/__snapshots__/notationInput.test.tsx.snap b/...rc/components/notationInput/inputArea/__tests__/__snapshots__/notationInput.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`NotationInput component should render textarea and a hidden textarea in
       class="css-j5t9yq"
     >
       <textarea
-        class="css-248371"
+        class="css-7w0kcs"
         style="height: 0px;"
       >
         Some input here

diff --git a/...etcher-polymer-editor-react/src/components/shared/modal/__snapshots__/Modal.test.tsx.snap b/...etcher-polymer-editor-react/src/components/shared/modal/__snapshots__/Modal.test.tsx.snap
@@ -59,7 +59,7 @@ Object {
             </button>
           </h2>
           <div
-            class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
+            class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
           >
             Content
           </div>

diff --git a/packages/ketcher-polymer-editor-react/src/theming/mixins/mixins.ts b/packages/ketcher-polymer-editor-react/src/theming/mixins/mixins.ts
@@ -15,21 +15,24 @@
  ***************************************************************************/
 
 import { ThemeType } from 'theming/defaultTheme'
+import { css } from '@emotion/react'
 
-export const scrollbarThin = ({ ketcher: theme }: ThemeType) => ({
-  '&::-webkit-scrollbar': {
-    width: '4px',
-    height: '4px',
-    backgroundColor: theme.color.scroll.inactive,
-    borderRadius: '2px',
-    webkitBorderRadius: '2px'
-  },
-  '&::-webkit-scrollbar-thumb': {
-    backgroundColor: theme.color.scroll.regular,
-    borderRadius: '2px',
-    webkitBorderRadius: '2px'
-  },
-  '&::-webkit-scrollbar-thumb:active': {
-    backgroundColor: theme.color.scroll.regular
+export const scrollbarThin = ({ ketcher: theme }: ThemeType) => css`
+  scrollbar-width: thin;
+  scrollbar-color: ${theme.color.scroll.regular} ${theme.color.scroll.inactive};
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background-color: ${theme.color.scroll.inactive};
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
   }
-})
+  &::-webkit-scrollbar-thumb {
+    background-color: ${theme.color.scroll.regular};
+    border-radius: 2px;
+    -webkit-border-radius: 2px;
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: ${theme.color.scroll.regular};
+  }
+`
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,7 @@ Object { @@
                 </button>
               </h2>
               <div
-                class="MuiDialogContent-root css-19mk2hi-MuiDialogContent-root"
+                class="MuiDialogContent-root css-1n1tez8-MuiDialogContent-root"
               >
                 Content
               </div>
@@ Expand Down @@