Few small popover fixes (#327)

* Fixed a few more popover issues * 3.2.32
orchestrated-io · Aug 15, 2024 · 701e83b · 701e83b
1 parent 2aad37b
commit 701e83b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 28 deletions.
diff --git a/lib/components/Popover/index.js b/lib/components/Popover/index.js
@@ -92,7 +92,7 @@ const StyledPopover = styled.div`
     border-width: 6px 6px 6px 0;
     border-color: transparent;
     border-right-color: ${themeGet("colors.white")};
-    left: -5px;
+    left: -6px;
     top: 50%;
     margin-top: -6px;
     position: absolute;
@@ -103,12 +103,12 @@ const StyledPopover = styled.div`
     z-index: 1;
     position: absolute;
     border-color: transparent;
-    border-right-color: ${themeGet("colors.grey")};
+    border-right-color: ${themeGet("colors.greyMid")};
     height: 0;
     width: 0;
     border-style: solid;
     border-width: 6px 6px 6px 0;
-    left: -6px;
+    left: -7px;
     top: 50%;
     margin-top: -6px;
   }
@@ -118,15 +118,15 @@ const StyledPopover = styled.div`
       left: 50%;
       top: auto;
       margin-top: 0;
-      bottom: -8px;
+      bottom: -9px;
       margin-left: -3px;
       transform: rotate(-90deg);
     }
     &:after {
       left: 50%;
       top: auto;
       margin-top: 0;
-      bottom: -9px;
+      bottom: -10px;
       margin-left: -3px;
       transform: rotate(-90deg);
     }
@@ -138,17 +138,17 @@ const StyledPopover = styled.div`
       left: 1px;
       top: auto;
       margin-top: 0;
-      bottom: -4px;
-      margin-left: -5px;
+      bottom: -5px;
+      margin-left: -6px;
       transform: rotate(-45deg);
       border-width: 5px 10px 5px 0;
     }
     &:after {
       left: 1px;
       top: auto;
       margin-top: 0;
-      bottom: -5px;
-      margin-left: -6px;
+      bottom: -6px;
+      margin-left: -7px;
       transform: rotate(-45deg);
       border-width: 5px 10px 5px 0;
     }
@@ -160,17 +160,17 @@ const StyledPopover = styled.div`
       left: 1px;
       bottom: auto;
       margin-top: 0;
-      top: -4px;
-      margin-left: -5px;
+      top: -5px;
+      margin-left: -6px;
       transform: rotate(45deg);
       border-width: 5px 10px 5px 0;
     }
     &:after {
       left: 1px;
       bottom: auto;
       margin-top: 0;
-      top: -5px;
-      margin-left: -6px;
+      top: -6px;
+      margin-left: -7px;
       transform: rotate(45deg);
       border-width: 5px 10px 5px 0;
     }
@@ -179,14 +179,14 @@ const StyledPopover = styled.div`
   &.bottom {
     &:before {
       left: 50%;
-      top: -8px;
+      top: -9px;
       margin-top: 0;
       margin-left: -3px;
       transform: rotate(90deg);
     }
     &:after {
       left: 50%;
-      top: -9px;
+      top: -10px;
       margin-top: 0;
       margin-left: -3px;
       transform: rotate(90deg);
@@ -200,8 +200,8 @@ const StyledPopover = styled.div`
       left: auto;
       bottom: auto;
       margin-top: 0;
-      top: -4px;
-      margin-right: -5px;
+      top: -5px;
+      margin-right: -6px;
       transform: rotate(135deg);
       border-width: 5px 10px 5px 0;
     }
@@ -210,8 +210,8 @@ const StyledPopover = styled.div`
       left: auto;
       bottom: auto;
       margin-top: 0;
-      top: -5px;
-      margin-right: -6px;
+      top: -6px;
+      margin-right: -7px;
       transform: rotate(135deg);
       border-width: 5px 10px 5px 0;
     }
@@ -220,12 +220,12 @@ const StyledPopover = styled.div`
   &.left {
     &:before {
       left: auto;
-      right: -5px;
+      right: -6px;
       transform: rotate(180deg);
     }
     &:after {
       left: auto;
-      right: -6px;
+      right: -7px;
       transform: rotate(180deg);
       top: 50%;
       margin-top: -6px;
@@ -239,8 +239,8 @@ const StyledPopover = styled.div`
       left: auto;
       top: auto;
       margin-top: 0;
-      bottom: -4px;
-      margin-right: -5px;
+      bottom: -5px;
+      margin-right: -6px;
       transform: rotate(225deg);
       border-width: 5px 10px 5px 0;
     }
@@ -249,8 +249,8 @@ const StyledPopover = styled.div`
       left: auto;
       top: auto;
       margin-top: 0;
-      bottom: -5px;
-      margin-right: -6px;
+      bottom: -6px;
+      margin-right: -7px;
       transform: rotate(225deg);
       border-width: 5px 10px 5px 0;
     }

diff --git a/lib/systemThemeCollapsed.js b/lib/systemThemeCollapsed.js
@@ -111,6 +111,7 @@ export const colors = {
   white20: rgba(white, 0.2),
   white10: rgba(white, 0.1),
   grey,
+  greyMid: lighten(0.15, grey),
   greyLight: lighten(0.2, grey),
   greyLighter: lighten(0.3, grey),
   greyLightest: lighten(0.35, grey),

diff --git a/lib/systemtheme.js b/lib/systemtheme.js
@@ -110,6 +110,7 @@ export const colors = {
   white20: rgba(white, 0.2),
   white10: rgba(white, 0.1),
   grey,
+  greyMid: lighten(0.15, grey),
   greyLight: lighten(0.2, grey),
   greyLighter: lighten(0.3, grey),
   greyLightest: lighten(0.35, grey),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.31",
+  "version": "3.2.32",
   "engines": {
     "node": "20.12.2"
   },