From cd1b80283cbc8c671c7b643852b817a4afb304b3 Mon Sep 17 00:00:00 2001
From: Orr Gottlieb <orr@monday.com>
Date: Thu, 20 May 2021 15:23:38 +0300
Subject: [PATCH] update monday-ui-style

---
 package-lock.json                            |  8 ++++----
 package.json                                 |  4 ++--
 src/general-stories/colors/ColorItem.scss    | 14 +++++++-------
 src/general-stories/colors/colors.stories.js | 10 +++++-----
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 49b2097d4c..2cba13def9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.25",
+  "version": "0.3.29",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -23216,9 +23216,9 @@
       }
     },
     "monday-ui-style": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.6.tgz",
-      "integrity": "sha512-EaXM14vblz0UgAJmzpFcTRveVc1kF+QknX1BBNPa2SF2rUzBnhkwVyHHaiAVsKaKxy9NAdIK7SK84wADygvu4g=="
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.7.tgz",
+      "integrity": "sha512-8D91vCXrj6TquO25ju6sBVZ2pUqqhq0waR5PXmRomcS1Ihl7RV7pp3JyyduCWTEJopKFcxZzSgYmfGNHPmK0hw=="
     },
     "mout": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index 664074fb3a..c31a1f15de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {
@@ -47,7 +47,7 @@
     "autosize": "4.0.2",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
-    "monday-ui-style": "0.1.6",
+    "monday-ui-style": "0.1.7",
     "prop-types": "^15.7.2",
     "react-inlinesvg": "^2.1.1",
     "react-popper": "^2.2.3",
diff --git a/src/general-stories/colors/ColorItem.scss b/src/general-stories/colors/ColorItem.scss
index c71c0dfe37..eb1cf49ffc 100644
--- a/src/general-stories/colors/ColorItem.scss
+++ b/src/general-stories/colors/ColorItem.scss
@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0 var(--spacing-small);
   .color-element {
     height: 100%;
   }
@@ -35,9 +34,6 @@
   }
 }
 
-
-
-
 .colors-container {
   max-width: 900px;
   margin: 0 auto;
@@ -45,6 +41,12 @@
   align-items: center;
   flex-direction: column;
 }
+.colors-container-content {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
 .themes-icon-container {
   position: sticky;
   top: 0;
@@ -71,7 +73,7 @@
   padding: 0 16px;
 }
 .theme-icon {
-  margin-right: 4px
+  margin-right: 4px;
 }
 
 .all-colors-container {
@@ -89,7 +91,6 @@
     border-bottom: 1px solid var(--ui-border-color);
     margin-bottom: 16px;
     .all-color-element {
-
       width: 100%;
       height: 100%;
     }
@@ -99,5 +100,4 @@
       margin: 8px 0;
     }
   }
-
 }
diff --git a/src/general-stories/colors/colors.stories.js b/src/general-stories/colors/colors.stories.js
index 0383cfac63..021e8e846e 100644
--- a/src/general-stories/colors/colors.stories.js
+++ b/src/general-stories/colors/colors.stories.js
@@ -205,7 +205,7 @@ export const Colors = () => {
             <Moon className="theme-icon" /> Dark
           </span>
           <span className="theme-container black-app-theme" style={{ width: "175" }}>
-            <Bolt className="theme-icon" /> Dark
+            <Bolt className="theme-icon" /> Dim
           </span>
         </div>
         {colorsMap.map(({ color, description }) => (
@@ -222,17 +222,17 @@ export const Colors = () => {
         gives understanding and indication of orientation and belonging. The board’s main strength is its simple and
         visual appearance. That’s why the status colors should appear on the board and nowhere else in the UI.
       </DescriptionLabel>
-      <div className="colors-container">
+      <div className="colors-container-content">
         <div className="themes-icon-container">
           <div className="theme-name-spacer">Color Keys</div>
-          <span className="theme-container light-app-theme" style={{ width: "175px" }}>
+          <span className="theme-container light-app-theme" style={{ width: "190px" }}>
             <Sun className="theme-icon" /> Light
           </span>
-          <span className="theme-container dark-app-theme" style={{ width: "175px" }}>
+          <span className="theme-container dark-app-theme" style={{ width: "166px" }}>
             <Moon className="theme-icon" /> Dark
           </span>
           <span className="theme-container black-app-theme" style={{ width: "175px" }}>
-            <Bolt className="theme-icon" /> Dark
+            <Bolt className="theme-icon" /> Dim
           </span>
         </div>
       </div>