chore(icons): icons size increased for mobile devices (#2190)

* popover icons size increased on mobile devices

* update icon size on mobile

* some mobile styles improvements

* inline tools click on mobile devices improved

docs/CHANGELOG.md

@@ -15,6 +15,7 @@
 - `Fix` — Pasting from Microsoft Word to Chrome (Mac OS) fixed. Now if there are no image-tools connected, regular text content will be pasted.
 - `Fix` — Workaround for the HTMLJanitor bug with Tables (https://github.com/guardian/html-janitor/issues/3) added
 - `Fix` — Toolbox shortcuts appearance and execution fixed [#2112](https://github.com/codex-team/editor.js/issues/2112)
+- `Fix` — Inline Tools click handling on mobile devices improved
 - `Improvement` — *Tools API* — `pasteConfig().tags` now support sanitizing configuration. It allows you to leave some explicitly specified attributes for pasted content.
 - `Improvement` — *CodeStyle* — [CodeX ESLint Config](https://github.com/codex-team/eslint-config) has bee updated. All ESLint/Spelling issues resolved
 - `Improvement` — *ToolsAPI* — The `icon` property of the `toolbox` getter became optional.

src/components/modules/toolbar/inline.ts

@@ -68,7 +68,8 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
   /**
    * Margin above/below the Toolbar
    */
-  private readonly toolbarVerticalMargin: number = 5;
+  // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  private readonly toolbarVerticalMargin: number = _.isMobileScreen() ? 20 : 6;
 
   /**
    * TODO: Get rid of this

src/styles/export.css

@@ -46,6 +46,17 @@
   &--active {
     color: var(--color-active-icon);
   }
+
+  svg {
+    width: auto;
+    height: auto;
+  }
+
+  @media (--mobile) {
+    width: var(--toolbox-buttons-size--mobile);
+    height: var(--toolbox-buttons-size--mobile);
+    border-radius: 8px;
+  }
 }
 
 /**
@@ -93,9 +104,11 @@
   text-align: center;
   cursor: pointer;
 
-  &:hover {
+  @media (--can-hover) {
-    background: #FBFCFE;
+    &:hover {
-    box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
+      background: #FBFCFE;
+      box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
+    }
   }
 
   svg {

src/styles/inline-toolbar.css

@@ -1,6 +1,8 @@
 .ce-inline-toolbar {
+  --y-offset: 8px;
+
   @apply --overlay-pane;
-  transform: translateX(-50%) translateY(8px) scale(0.9);
+  transform: translateX(-50%) translateY(8px) scale(0.94);
   opacity: 0;
   visibility: hidden;
   transition: transform 150ms ease, opacity 250ms ease;
@@ -16,7 +18,7 @@
   }
 
   &--left-oriented {
-    transform: translateX(-23px) translateY(8px) scale(0.9);
+    transform: translateX(-23px) translateY(8px) scale(0.94);
   }
 
   &--left-oriented&--showed {
@@ -24,7 +26,7 @@
   }
 
   &--right-oriented {
-    transform: translateX(-100%) translateY(8px) scale(0.9);
+    transform: translateX(-100%) translateY(8px) scale(0.94);
     margin-left: 23px;
   }
 
@@ -58,8 +60,10 @@
     border-right: 1px solid var(--color-gray-border);
     box-sizing: border-box;
 
-    &:hover {
+    @media (--can-hover) {
-      background: var(--bg-light);
+      &:hover {
+        background: var(--bg-light);
+      }
     }
 
     &--hidden {
@@ -88,7 +92,6 @@
 
   border-radius: 0;
   line-height: normal;
-  padding: 0 1px !important;
 
 
   &--link {
@@ -119,6 +122,13 @@
     display: none;
     font-weight: 500;
     border-top: 1px solid rgba(201,201,204,.48);
+    -webkit-appearance: none;
+    font-family: inherit;
+
+    @media (--mobile){
+      font-size: 15px;
+      font-weight: 500;
+    }
 
     &::placeholder {
       color: var(--grayText);

src/styles/variables.css

@@ -59,6 +59,8 @@
    * Size of svg icons got from the CodeX Icons pack
    */
   --icon-size: 20px;
+  --icon-size--mobile: 28px;
+
 
   /**
    * The main `.cdx-block` wrapper has such vertical paddings
@@ -82,11 +84,6 @@
     border-radius: 6px;
     z-index: 2;
 
-    @media (--mobile){
-      box-shadow: 0 8px 6px -6px rgb(33 48 73 / 19%);
-      border-bottom-color: #c7c7c7;
-    }
-
     &--left-oriented {
       &::before {
         left: 15px;
@@ -160,7 +157,7 @@
     align-items: center;
     justify-content: center;
 
-    padding: 0;
+    padding: 6px 1px;
     border-radius: 3px;
     cursor: pointer;
     border: 0;
@@ -173,10 +170,17 @@
     svg {
       width: var(--icon-size);
       height: var(--icon-size);
+
+      @media (--mobile) {
+        width: var(--icon-size--mobile);
+        height: var(--icon-size--mobile);
+      }
     }
 
-    &:hover {
+    @media (--can-hover) {
-      background-color: var(--bg-light);
+      &:hover {
+        background-color: var(--bg-light);
+      }
     }
 
     &--active {
@@ -236,16 +240,21 @@
     flex-shrink: 0;
     margin-right: 10px;
 
-    @media (--mobile) {
-      width: var(--toolbox-buttons-size--mobile);
-      height: var(--toolbox-buttons-size--mobile);
-      border-radius: 8px;
-    }
-
     svg {
       width: var(--icon-size);
       height: var(--icon-size);
     }
+
+    @media (--mobile) {
+      width: var(--toolbox-buttons-size--mobile);
+      height: var(--toolbox-buttons-size--mobile);
+      border-radius: 8px;
+
+      svg {
+        width: var(--icon-size--mobile);
+        height: var(--icon-size--mobile);
+      }
+    }
   }
 }