From bd888dcde21e24f18297814b81c3dfe9f871c90f Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Fri, 11 Oct 2024 16:18:11 +0200
Subject: [PATCH] :bug: Fix constraints buttons

---
 CHANGES.md                                    |  1 +
 .../sidebar/options/menus/constraints.scss    | 56 ++++++++++---------
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 94da9261a..d1f27cfbe 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -28,6 +28,7 @@
 
 ### :bug: Bugs fixed
 
+- Fix problem with constraints buttons [Taiga #8465](https://tree.taiga.io/project/penpot/issue/8465)
 - Fix problem with go back button on error page [Taiga #8887](https://tree.taiga.io/project/penpot/issue/8887)
 - Fix problem with shadows in text for Safari [Taiga #8770](https://tree.taiga.io/project/penpot/issue/8770)
 - Fix a regression with feedback form subject and content limits [Taiga #8908](https://tree.taiga.io/project/penpot/issue/8908)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
index 88da9410d..2384facf2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
@@ -36,32 +36,37 @@
 .constraints-bottom {
   @include flexCenter;
   grid-area: top;
-  .constraint-btn,
-  .constraint-btn-special,
-  .constraint-btn-rotated {
-    @include buttonStyle;
-    @include flexCenter;
-    width: 100%;
-    height: 100%;
-    .resalted-area {
-      width: $s-32;
-      height: $s-3;
-      border-radius: $br-8;
-      background-color: var(--button-constraint-background-color-rest);
-      padding: 0;
-      margin: 0;
-    }
-    &.active .resalted-area {
-      outline: $s-4 solid var(--button-constraint-border-color-hover);
-      background-color: var(--button-constraint-background-color-hover);
-    }
-    &:hover .resalted-area,
-    &:focus .resalted-area {
-      outline: $s-4 solid var(--button-constraint-border-color-hover);
-      background-color: var(--button-constraint-background-color-hover);
-    }
+}
+.constraint-btn,
+.constraint-btn-special,
+.constraint-btn-rotated {
+  @include buttonStyle;
+  @include flexCenter;
+  width: 100%;
+  height: 100%;
+  --resalted-area-background-color: var(--button-constraint-background-color-rest);
+  --resalted-area-border-color: none;
+  &.active {
+    --resalted-area-border-color: var(--button-constraint-border-color-hover);
+    --resalted-area-background-color: var(--button-constraint-background-color-hover);
+  }
+  &:hover,
+  &:focus-visible {
+    --resalted-area-border-color: var(--button-constraint-border-color-hover);
+    --resalted-area-background-color: var(--button-constraint-background-color-hover);
   }
 }
+
+.resalted-area {
+  width: $s-32;
+  height: $s-3;
+  border-radius: $br-8;
+  background-color: var(--resalted-area-background-color);
+  outline: $s-4 solid var(--resalted-area-border-color);
+  padding: 0;
+  margin: 0;
+}
+
 .constraints-left {
   grid-area: left;
   .constraint-btn-rotated {
@@ -73,6 +78,7 @@
     }
   }
 }
+
 .constraints-center {
   grid-area: center;
   position: relative;
@@ -113,7 +119,7 @@
   grid-area: bottom;
 }
 
-.contraints-selects {
+.constraints-selects {
   @include flexColumn;
 }