feat: add changes in modal window styles

epam · Aug 13, 2024 · 408171b · 408171b
1 parent 073c20d
commit 408171b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 32 deletions.
diff --git a/packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.module.less b/packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.module.less
@@ -23,7 +23,7 @@
    cursor: pointer;
    height: 28px!important;
    white-space: nowrap;
-   font-size: 12px;
+   font-size: 14px;
    color: @color-grey-6!important;
    background-color: #F3F8F9!important;
    text-transform: none!important;
@@ -62,23 +62,13 @@
  .textButtonGroupRow {
    flex-direction: row;
  }
-
- .buttonGroupContainerSpecific {
-   width: auto!important;
-   box-sizing: border-box!important;
- }
-
- .buttonSpecific {
-   height: 28px!important;
- }
-
- .contexify {
-   min-width: 0 !important;
- }
-
+
+.buttonSpecific {
+  height: 28px!important;
+} 
+
  .contexify_submenu[data-target-label-submenu="true"] {
-   min-width: 0 !important;
-   width: 109px !important;
-   padding: 4px;
- }
-
+  min-width: 0 !important;
+  width: 109px !important;
+  padding: 4px;
+}
diff --git a/packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.module.less b/packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.module.less
@@ -21,20 +21,20 @@
 .contextMenu {
   // Reference https://fkhadra.github.io/react-contexify/how-to-style
   --contexify-menu-bgColor: @color-background-primary;
-  --contexify-item-color: @color-text-secondary;
+  --contexify-item-color: @color-text-primary;
   --contexify-activeItem-color: @color-text-secondary;
-  --contexify-activeItem-bgColor: @color-dropdown-hover;
+  --contexify-activeItem-bgColor: @color-grey-3;
   --contexify-rightSlot-color: @color-text-secondary;
   --contexify-activeRightSlot-color: @color-text-secondary;
-  --contexify-arrow-color: @color-grey-5;
-  --contexify-activeArrow-color: @color-grey-5;
+  --contexify-arrow-color: @color-text-primary;
+  --contexify-activeArrow-color: @color-text-primary;
   --contexify-menu-shadow: 0 2px 5px 0 rgba(@main-color, 0.54);
   --contexify-zIndex: 1;
   --contexify-menu-minWidth: 160px;
   --contexify-menu-padding: 4px;
   --contexify-menu-radius: 4px;
   --contexify-menu-negatePadding: var(--contexify-menu-padding);
-  --contexify-itemContent-padding: 3px 20px;
+  --contexify-itemContent-padding: @item-content-padding;
   --contexify-activeItem-radius: 0;
 
   position: fixed;
@@ -81,9 +81,4 @@
       margin: 3px 0;
   }
 
-  .subMenu {
-    :global(.contexify_rightSlot) {
-      margin-right: -15px;
-    }
-  }
 }
diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less
@@ -36,7 +36,7 @@
 @margin-left-right: 12px;
 
 @padding-modal: 12px;
-
+@item-content-padding: 3px 0 3px 13px;
 @color-gray: #dddddd;
 
 //using for changing color of SVG for checkboxes and radiobuttons
@@ -213,4 +213,4 @@
 @atom-periodic-noble-gas: #c2ffff;
 @atom-periodic-lanthanide: #f4c8f4;
 @atom-periodic-actinide: #fd98cb;
-@atom-periodic-unknown-properties: #e8e8e8;
+@atom-periodic-unknown-properties: #e8e8e8;