fix(#1311): small defects about hover style (#1313)

This PR fixes the border radius in some small interactions, also new global border-radius variable is applied in other components Closes #1311 (cherry picked from commit ee8ac9a)
argilla-io · Mar 28, 2022 · 0eda53e · 0eda53e
1 parent e91e674
commit 0eda53e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/frontend/components/commons/results/RecordExtraActions.vue b/frontend/components/commons/results/RecordExtraActions.vue
@@ -163,12 +163,15 @@ export default {
       color: $font-secondary-dark;
       cursor: pointer;
       display: block;
-      border-bottom: 1px solid palette(grey, smooth);
-      border-radius: $border-radius;
       background: white;
       transition: background 0.3s ease-in-out;
+      &:first-child {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
       &:last-child {
-        border-bottom: none;
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
       }
       &:hover {
         transition: background 0.3s ease-in-out;

diff --git a/frontend/components/commons/sidebar/SidebarPanel.vue b/frontend/components/commons/sidebar/SidebarPanel.vue
@@ -51,7 +51,7 @@ export default {
 .sidebar {
   top: 0;
   min-height: 300px;
-  border-radius: 5px;
+  border-radius: $border-radius;
   width: 280px;
   position: absolute;
   right: 100px;

diff --git a/frontend/components/commons/sidebar/StatsSelector.vue b/frontend/components/commons/sidebar/StatsSelector.vue
@@ -84,7 +84,7 @@ export default {
   &__header {
     cursor: pointer;
     border: 1px solid palette(grey, smooth);
-    border-radius: 5px;
+    border-radius: $border-radius;
     padding: 0.5em 1em;
     color: $font-secondary-dark;
     @include font-size(13px);

diff --git a/frontend/components/core/RePagination.vue b/frontend/components/core/RePagination.vue
@@ -287,6 +287,7 @@ $pagination-size: 30px;
       text-decoration: none;
       min-width: $pagination-size;
       height: $pagination-size;
+      border-radius: $border-radius;
       margin: auto 0.5em;
       outline: none;
       padding: 5px;

diff --git a/frontend/components/token-classifier/results/EntitiesSelector.vue b/frontend/components/token-classifier/results/EntitiesSelector.vue
@@ -164,7 +164,7 @@ export default {
     background: palette(grey, smooth);
     font-weight: 600;
     padding: 0.8em;
-    border-radius: 5px;
+    border-radius: $border-radius;
     &__container {
       @include font-size(14px);
       line-height: 1em;