@konfuzio/document-validation-ui 0.1.2-pre-release-4 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.2-pre-release-4",
+  "version": "0.1.2",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "src/main.js",
   "scripts": {

package/src/assets/images/CategoryIconImg.vue

@@ -6,7 +6,7 @@
     viewBox="0 0 22 22"
   >
     <path
-      fill="#2B3545"
+      fill="#1A1A1A"
       d="M20.47,7.37s0,0,0-.08l-.06-.15a.71.71,0,0,0-.07-.09.94.94,0,0,0-.09-.12l-.09-.07L20,6.78l-7.5-4.63a1,1,0,0,0-1.06,0L4,6.78l-.09.08-.09.07a.94.94,0,0,0-.09.12.71.71,0,0,0-.07.09l-.06.15s0,0,0,.08a1.15,1.15,0,0,0,0,.26v8.74a1,1,0,0,0,.47.85l7.5,4.63h0a.47.47,0,0,0,.15.06s.05,0,.08,0a.86.86,0,0,0,.52,0s.05,0,.08,0a.47.47,0,0,0,.15-.06h0L20,17.22a1,1,0,0,0,.47-.85V7.63A1.15,1.15,0,0,0,20.47,7.37ZM11,19.21l-5.5-3.4V9.43L11,12.82Zm1-8.12L6.4,7.63,12,4.18l5.6,3.45Zm6.5,4.72L13,19.21V12.82l5.5-3.39Z"
     />
   </svg>

package/src/assets/images/CheckMark.vue

@@ -1,7 +1,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
-      fill="#dfe0e4"
+      fill="#E1E1E1"
       d="M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z"
     />
   </svg>

package/src/assets/images/KeyboardIcon.vue

@@ -10,7 +10,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M4.30187 0.167969H15.6994C16.1387 0.167955 16.5177 0.167942 16.8298 0.193445C17.1593 0.220362 17.487 0.279792 17.8023 0.440454C18.2727 0.680138 18.6552 1.06259 18.8948 1.53299C19.0555 1.84831 19.1149 2.17599 19.1418 2.50545C19.1673 2.81759 19.1673 3.19655 19.1673 3.63583V8.36678C19.1673 8.80606 19.1673 9.18502 19.1418 9.49716C19.1149 9.82661 19.0555 10.1543 18.8948 10.4696C18.6552 10.94 18.2727 11.3225 17.8023 11.5622C17.487 11.7228 17.1593 11.7822 16.8298 11.8092C16.5177 11.8347 16.1387 11.8347 15.6994 11.8346H4.30188C3.86259 11.8347 3.48361 11.8347 3.17146 11.8092C2.84201 11.7822 2.51433 11.7228 2.19901 11.5622C1.7286 11.3225 1.34615 10.94 1.10647 10.4696C0.945808 10.1543 0.886378 9.82661 0.85946 9.49716C0.833957 9.18502 0.83397 8.80605 0.833985 8.36676V3.63585C0.83397 3.19656 0.833957 2.81759 0.85946 2.50545C0.886378 2.17599 0.945808 1.84831 1.10647 1.53299C1.34615 1.06259 1.7286 0.680137 2.19901 0.440454C2.51433 0.279792 2.84201 0.220362 3.17146 0.193445C3.48361 0.167942 3.86258 0.167955 4.30187 0.167969ZM3.30718 1.85458C3.0808 1.87307 2.99686 1.90447 2.95566 1.92546C2.79886 2.00536 2.67138 2.13284 2.59148 2.28964C2.57049 2.33085 2.53909 2.41478 2.52059 2.64117C2.5013 2.87728 2.50065 3.18751 2.50065 3.66797V8.33464C2.50065 8.8151 2.5013 9.12533 2.52059 9.36144C2.53909 9.58783 2.57049 9.67176 2.59148 9.71296C2.67138 9.86976 2.79886 9.99725 2.95566 10.0771C2.99686 10.0981 3.0808 10.1295 3.30718 10.148C3.5433 10.1673 3.85352 10.168 4.33399 10.168H15.6673C16.1478 10.168 16.458 10.1673 16.6941 10.148C16.9205 10.1295 17.0044 10.0981 17.0456 10.0771C17.2024 9.99725 17.3299 9.86977 17.4098 9.71296C17.4308 9.67176 17.4622 9.58783 17.4807 9.36144C17.5 9.12533 17.5007 8.8151 17.5007 8.33464V3.66797C17.5007 3.18751 17.5 2.87728 17.4807 2.64117C17.4622 2.41478 17.4308 2.33085 17.4098 2.28964C17.3299 2.13284 17.2024 2.00536 17.0456 1.92546C17.0044 1.90447 16.9205 1.87307 16.6941 1.85458C16.458 1.83528 16.1478 1.83464 15.6673 1.83464H4.33399C3.85352 1.83464 3.5433 1.83528 3.30718 1.85458ZM4.16732 4.33464C4.16732 3.8744 4.54042 3.5013 5.00065 3.5013H5.00899C5.46922 3.5013 5.84232 3.8744 5.84232 4.33464C5.84232 4.79487 5.46922 5.16797 5.00899 5.16797H5.00065C4.54042 5.16797 4.16732 4.79487 4.16732 4.33464ZM7.50065 4.33464C7.50065 3.8744 7.87375 3.5013 8.33399 3.5013H8.34232C8.80256 3.5013 9.17565 3.8744 9.17565 4.33464C9.17565 4.79487 8.80256 5.16797 8.34232 5.16797H8.33399C7.87375 5.16797 7.50065 4.79487 7.50065 4.33464ZM10.834 4.33464C10.834 3.8744 11.2071 3.5013 11.6673 3.5013H11.6757C12.1359 3.5013 12.509 3.8744 12.509 4.33464C12.509 4.79487 12.1359 5.16797 11.6757 5.16797H11.6673C11.2071 5.16797 10.834 4.79487 10.834 4.33464ZM14.1673 4.33464C14.1673 3.8744 14.5404 3.5013 15.0007 3.5013H15.009C15.4692 3.5013 15.8423 3.8744 15.8423 4.33464C15.8423 4.79487 15.4692 5.16797 15.009 5.16797H15.0007C14.5404 5.16797 14.1673 4.79487 14.1673 4.33464ZM5.00065 8.08464C5.00065 7.6244 5.37375 7.2513 5.83399 7.2513H14.1673C14.6276 7.2513 15.0007 7.6244 15.0007 8.08464C15.0007 8.54487 14.6276 8.91797 14.1673 8.91797H5.83399C5.37375 8.91797 5.00065 8.54487 5.00065 8.08464Z"
-      fill="#2B3545"
+      fill="#1A1A1A"
     />
   </svg>
 </template>

package/src/assets/images/QuestionMark.vue

@@ -5,7 +5,7 @@
     viewBox="0 0 24 24"
   >
     <path
-      fill="#dfe0e4"
+      fill="#E1E1E1"
       d="M15.33252,9.5A3.5001,3.5001,0,0,0,8.80127,7.75a1.00016,1.00016,0,0,0,1.73242,1A1.50266,1.50266,0,0,1,11.83252,8a1.5,1.5,0,1,1,0,3h-.00244a.94984.94984,0,0,0-.18927.0387,1.03181,1.03181,0,0,0-.19861.04065.98275.98275,0,0,0-.15552.10485,1.00813,1.00813,0,0,0-.162.10975,1.00464,1.00464,0,0,0-.11706.1737.97789.97789,0,0,0-.09668.14417,1.02252,1.02252,0,0,0-.04285.21191A.94847.94847,0,0,0,10.83252,12v1l.00232.01135.0011.49109a1.00016,1.00016,0,0,0,1,.99756h.00244a1.00006,1.00006,0,0,0,.99756-1.00244l-.00153-.66138A3.49363,3.49363,0,0,0,15.33252,9.5Zm-4.20264,6.79A1,1,0,0,0,11.82959,18a1.036,1.036,0,0,0,.71045-.29,1.01517,1.01517,0,0,0,0-1.41992A1.03425,1.03425,0,0,0,11.12988,16.29Z"
     />
   </svg>

package/src/assets/images/SplitZigZag.vue

@@ -8,7 +8,7 @@
   >
     <path
       d="M1 1L5 7.875L1 14.75L5 21.625L1 28.5L5 35.375L1 42.25L5 49.125L1 56"
-      stroke="#2B3545"
+      stroke="#1A1A1A"
       stroke-linecap="round"
       stroke-linejoin="round"
     />

package/src/assets/images/StatusImg.vue

@@ -8,7 +8,7 @@
   >
     <path
       d="M17.0917 1.07462C17.0142 0.996517 16.9221 0.934522 16.8205 0.892214C16.719 0.849907 16.61 0.828125 16.5 0.828125C16.39 0.828125 16.2811 0.849907 16.1795 0.892214C16.078 0.934522 15.9858 0.996517 15.9084 1.07462L10.6667 6.32462L7.0917 2.74129C7.01423 2.66318 6.92206 2.60119 6.82051 2.55888C6.71896 2.51657 6.61004 2.49479 6.50003 2.49479C6.39002 2.49479 6.2811 2.51657 6.17955 2.55888C6.078 2.60119 5.98583 2.66318 5.90836 2.74129L0.908364 7.74129C0.830257 7.81876 0.768262 7.91093 0.725954 8.01248C0.683647 8.11403 0.661865 8.22295 0.661865 8.33296C0.661865 8.44297 0.683647 8.55189 0.725954 8.65344C0.768262 8.75499 0.830257 8.84715 0.908364 8.92462C0.985833 9.00273 1.078 9.06473 1.17955 9.10703C1.2811 9.14934 1.39002 9.17112 1.50003 9.17112C1.61004 9.17112 1.71896 9.14934 1.82051 9.10703C1.92206 9.06473 2.01423 9.00273 2.0917 8.92462L6.50003 4.50796L10.075 8.09129C10.1525 8.1694 10.2447 8.23139 10.3462 8.2737C10.4478 8.31601 10.5567 8.33779 10.6667 8.33779C10.7767 8.33779 10.8856 8.31601 10.9872 8.2737C11.0887 8.23139 11.1809 8.1694 11.2584 8.09129L17.0917 2.25796C17.1698 2.18049 17.2318 2.08832 17.2741 1.98677C17.3164 1.88522 17.3382 1.7763 17.3382 1.66629C17.3382 1.55628 17.3164 1.44736 17.2741 1.34581C17.2318 1.24426 17.1698 1.15209 17.0917 1.07462Z"
-      fill="#2B3545"
+      fill="#1A1A1A"
     />
   </svg>
 </template>

package/src/assets/images/UserIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
-      fill="#dfe0e4"
+      fill="#E1E1E1"
       d="M15.71,12.71a6,6,0,1,0-7.42,0,10,10,0,0,0-6.22,8.18,1,1,0,0,0,2,.22,8,8,0,0,1,15.9,0,1,1,0,0,0,1,.89h.11a1,1,0,0,0,.88-1.1A10,10,0,0,0,15.71,12.71ZM12,12a4,4,0,1,1,4-4A4,4,0,0,1,12,12Z"
     />
   </svg>

package/src/assets/scss/choose_label_set_modal.scss

@@ -53,7 +53,7 @@
       font-size: 12px;
       line-height: 18px;
       text-align: center;
-      color: $dark-blue;
+      color: $text-color;
       margin-top: 8px;
     }
 

package/src/assets/scss/document_action_bar.scss

@@ -9,7 +9,7 @@
   z-index: 100;
 
   .action-bar-elements {
-    background-color: $dark-blue;
+    background-color: $text-color;
     height: 40px;
     width: fit-content;
     padding: 4px 4px 4px 12px;

package/src/assets/scss/document_annotations.scss

@@ -243,29 +243,23 @@
 
           &.hovered-empty-labels {
             background-color: $grey-lightest;
-            outline: 1px solid $grey-detail;
-            margin-bottom: 1px;
+            border-bottom-color: $grey-detail;
           }
 
           &.hovered-pending-annotations {
-            background-color: $green-hover-background;
-            outline: 1px solid $green-border;
-            margin-bottom: 1px;
-
-            .annotation-row-right {
-              .annotation-content {
-                .annotation {
-                  min-height: 43px;
-                  padding-top: 1px;
-                }
-              }
-            }
+            position: relative;
+            border-bottom-color: $primary;
 
-            .annotation-row-left {
-              .annotation-details,
-              .label-name {
-                margin-bottom: -1px;
-              }
+            &:before {
+              display: block;
+              content: "";
+              width: 100%;
+              height: 100%;
+              background: $primary;
+              opacity: 0.1;
+              position: absolute;
+              top: 0;
+              left: 0;
             }
           }
 
@@ -344,7 +338,8 @@
 
         &:hover {
           text-decoration: none !important;
-          color: $primary-dark !important;
+          color: $primary !important;
+          filter: $hover-style;
         }
 
         &:focus {
@@ -390,7 +385,7 @@
 
         &:hover {
           text-decoration: none !important;
-          color: $dark-blue !important;
+          color: $text-color !important;
         }
 
         &:focus {
@@ -416,7 +411,7 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
-        color: $dark-blue;
+        color: $text-color;
         padding-bottom: 15px;
         margin: 0;
         padding-left: 15px;

package/src/assets/scss/document_edit.scss

@@ -41,7 +41,7 @@
 
           &.selected {
             .img-thumbnail {
-              border-color: $dark-blue;
+              border-color: $text-color;
               filter: contrast(0.7);
             }
           }
@@ -131,7 +131,7 @@
 
               .action-icon {
                 border-radius: 60px;
-                background-color: $dark-blue;
+                background-color: $text-color;
                 width: 32px;
                 height: 32px;
                 color: $white;
@@ -185,7 +185,7 @@
         height: 50%;
 
         h3 {
-          color: $dark-blue;
+          color: $text-color;
           font-weight: 600;
           font-size: 16px;
           line-height: 24px;
@@ -296,7 +296,7 @@
       }
 
       .overview-title {
-        color: $dark-blue;
+        color: $text-color;
         font-size: 16px;
         font-weight: 600;
       }
@@ -348,7 +348,7 @@
 
                 .action-icon {
                   border-radius: 60px;
-                  background-color: $dark-blue;
+                  background-color: $text-color;
                   width: 28px;
                   height: 28px;
                   color: $white;

package/src/assets/scss/document_error.scss

@@ -42,7 +42,7 @@
 
           .content {
             padding-top: 15px;
-            color: $dark-blue !important;
+            color: $text-color !important;
 
             h3 {
               font-weight: 500 !important;

package/src/assets/scss/document_top_bar.scss

@@ -23,7 +23,7 @@
     flex: 1;
     top: 0;
     font-size: 14px;
-    color: $dark-blue;
+    color: $text-color;
     font-weight: 400px;
 
     .left-bar-components {

package/src/assets/scss/document_viewport_modal.scss

@@ -8,7 +8,7 @@
       font-weight: 600 !important;
       font-size: 20px !important;
       line-height: 26px !important;
-      color: $dark-blue !important;
+      color: $text-color !important;
       padding-bottom: 5px;
     }
 
@@ -22,4 +22,4 @@
       font-size: 14px;
     }
   }
-}
+}

package/src/assets/scss/documents_list.scss

@@ -43,12 +43,23 @@ $documents-list-height: 52px;
         align-self: center;
         width: 75%;
         height: 100%;
-        background-color: $primary-low-opacity;
         display: flex;
         justify-content: center;
         align-items: flex-start;
         position: relative;
 
+        &:before {
+          display: block;
+          content: "";
+          width: 100%;
+          height: 100%;
+          background: $primary;
+          opacity: 0.1;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+
         span {
           margin-top: 20px;
           font-weight: 600;

package/src/assets/scss/extracting_data.scss

@@ -22,7 +22,7 @@
       font-size: 16px;
       font-weight: 500;
       line-height: 24px;
-      color: $dark-blue;
+      color: $text-color;
       margin-bottom: 3px;
     }
 

package/src/assets/scss/new_annotation.scss

@@ -2,7 +2,7 @@
 
 .annotation-popup {
   border-radius: 12px;
-  background-color: $dark-blue;
+  background-color: $text-color;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -14,7 +14,7 @@
   padding: 8px;
 
   .popup-input {
-    background-color: $dark-blue;
+    background-color: $text-color;
     color: $white;
     font-size: 14px;
     font-weight: 400;
@@ -83,4 +83,4 @@
       border-radius: 8px;
     }
   }
-}
+}

package/src/assets/scss/variables.scss

@@ -6,7 +6,6 @@ $green-low-opacity: rgba(75, 181, 67, 0.11);
 $green-border: #67d19f;
 $green-hover-background: rgba(18, 183, 106, 0.05);
 $darker-green: #3a9c76;
-$dark-green-hover: #0c4b33;
 $primary-low-opacity: rgba(52, 171, 125, 0.16);
 
 $red: #e7423a;
@@ -15,12 +14,12 @@ $lightest-red: #fdf4f6;
 $error-background: #d4453d;
 
 $grey-dark: #344054;
-$grey: #798190;
+$grey: #858585;
 $grey-low-opacity: rgba(133, 140, 154, 0.4);
 $grey-lighter-low-opacity: rgba(223, 224, 228, 0.5);
 $grey-lightest: #f0f0f0;
 $grey-outline: #d0d5dd;
-$grey-detail: #dfe0e4;
+$grey-detail: #e1e1e1;
 $subtle-grey: #f2f4f7;
 $subtlest-grey: #e3e4e5;
 $grey-darker: #101828;
@@ -38,27 +37,23 @@ $yellow: #ffd600;
 $warning-yellow: #fec84b;
 
 $blue: #2f80ed;
-$dark-blue: #2b3545;
+$text-color: #1a1a1a;
 
 :root {
-  --font-family: #{"Inter", sans-serif};
-  --background-color: #{$white};
   --primary-color: #{$konfuzio-green};
-  --primary-hover: #{$dark-green-hover};
-  --toolbar-color: #{$dark-blue};
-  --toolbar-elements: #{$white};
-  --tooltip-color: #{$dark};
-  --error-background: #{$error-background};
-  --error-text: #{$white};
+
+  --primary-button: 4px;
+  --secondary-button: 8px;
+  --tertiary-button: 20px;
 }
 
-$font-family: var(--font-family);
-$background: var(--background-color);
-$toolbar: var(--toolbar-color);
 $primary: var(--primary-color);
-$primary-dark: var(--primary-hover);
-$tooltip: var(--tooltip-color);
-$toolbar-elements: var(--toolbar-elements);
+$hover-style: brightness(0.8) contrast(160%) grayscale(0.4);
+$font-family: "Inter", sans-serif;
+$background: $white;
+$toolbar: $text-color;
+$tooltip: $dark;
+$toolbar-elements: $white;
 
 $link: $primary;
 $info: $blue;
@@ -80,7 +75,7 @@ button {
     color: $white !important;
 
     &:hover:enabled {
-      background-color: $primary-dark !important;
+      filter: $hover-style;
     }
 
     &:disabled {
@@ -98,7 +93,7 @@ button {
     &:not([disabled]) {
       &:hover {
         text-decoration: none;
-        color: $dark-blue !important;
+        color: $text-color !important;
       }
     }
 
@@ -109,7 +104,7 @@ button {
 
   &:not(.is-text, .is-primary, .reject-btn) {
     background-color: $white;
-    color: $dark-blue;
+    color: $text-color;
   }
 
   &.is-text {
@@ -139,7 +134,6 @@ button {
   }
 
   &.action-bar-save-btn {
-    border-radius: 20px;
     height: 32px;
     padding: 6px 12px 6px 12px !important;
     font-size: 14px;
@@ -147,7 +141,6 @@ button {
   }
 
   &.finish-review-btn {
-    border-radius: 4px;
     margin-right: 2px;
 
     &:focus {
@@ -173,6 +166,18 @@ button {
       text-decoration: none;
     }
   }
+
+  &.primary-button {
+    border-radius: var(--primary-button) !important;
+  }
+
+  &.secondary-button {
+    border-radius: var(--secondary-button) !important;
+  }
+
+  &.tertiary-button {
+    border-radius: var(--tertiary-button) !important;
+  }
 }
 
 .carousel-list {
@@ -208,8 +213,8 @@ button {
   }
 
   .message-body {
-    background-color: var(--error-background);
-    color: var(--error-text);
+    background-color: $error-background;
+    color: $white;
     font-size: 14px;
     border: 0;
     border-radius: 0%;
@@ -298,7 +303,7 @@ button {
 
   &.dropdown-menu-animation {
     a.navbar-item {
-      color: $dark-blue;
+      color: $text-color;
       font-size: 16px;
       line-height: 24px;
 
@@ -427,7 +432,7 @@ button {
 
 .notices {
   .snackbar {
-    background-color: $dark-blue;
+    background-color: $text-color;
     min-height: 40px;
 
     .text {
@@ -461,7 +466,7 @@ button {
 
 .b-tooltip {
   .tooltip-content {
-    background-color: $dark-blue !important;
+    background-color: $text-color !important;
 
     a {
       color: $white;
@@ -479,8 +484,8 @@ button {
       &::before {
         left: 16px !important;
         right: auto !important;
-        border-top-color: $dark-blue !important;
-        border-bottom-color: $dark-blue !important;
+        border-top-color: $text-color !important;
+        border-bottom-color: $text-color !important;
       }
     }
   }
@@ -495,7 +500,7 @@ button {
       &::before {
         right: 16px !important;
         left: auto !important;
-        border-bottom-color: $dark-blue !important;
+        border-bottom-color: $text-color !important;
       }
     }
 
@@ -525,12 +530,12 @@ button {
       font-size: 14px;
       padding: 12px 12px;
       top: 45px;
-      background-color: $dark-blue;
+      background-color: $text-color;
       border-radius: 4px !important;
 
       &::before {
         top: 17px;
-        border-left-color: $dark-blue !important;
+        border-left-color: $text-color !important;
       }
     }
   }
@@ -540,7 +545,7 @@ button {
 
     .tooltip-content {
       &::before {
-        border-bottom-color: $dark-blue !important;
+        border-bottom-color: $text-color !important;
       }
     }
   }
@@ -548,7 +553,7 @@ button {
   &.top-aligned {
     .tooltip-content {
       &::before {
-        border-top-color: $dark-blue !important;
+        border-top-color: $text-color !important;
       }
     }
   }

package/src/components/DocumentAnnotations/ActionButtons.vue

@@ -15,6 +15,7 @@
       :class="[
         'annotation-save-btn text-btn',
         actionBar && 'action-bar-save-btn',
+        actionBar ? 'tertiary-button' : 'secondary-button',
       ]"
       type="is-primary"
       @click.stop="save"
@@ -47,7 +48,7 @@
     <!-- accept button -->
     <b-button
       v-if="acceptBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
-      class="annotation-accept-btn"
+      class="annotation-accept-btn secondary-button"
       type="is-primary"
       @click.stop="accept"
     >
@@ -115,7 +116,7 @@
     >
       <b-button
         v-if="finishReviewBtn && !publicView"
-        :class="['finish-review-btn', 'text-btn']"
+        :class="['finish-review-btn', 'text-btn', 'primary-button']"
         type="is-primary"
         :disabled="finishDisabled"
         @click.stop="finishReview"

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -73,7 +73,7 @@
             {{ $t("select_category") }}
           </div>
           <b-button
-            class="submit-category"
+            class="submit-category primary-button"
             type="is-primary"
             :disabled="!selectedCategory"
             @click="submit"

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -77,7 +77,7 @@
             }}</span>
           </div>
           <b-button
-            class="submit-ann-set"
+            class="submit-ann-set primary-button"
             type="is-primary"
             :disabled="!selectedLabelSet"
             @click="submit"

package/src/components/DocumentEdit/EditSidebar.vue

@@ -18,52 +18,34 @@
           {{ selectedPages.length }} {{ $t("selected") }}
         </p>
         <b-button
-          class="rotate-button"
+          class="rotate-button primary-button"
           :disabled="buttonDisabled"
           @click="rotateLeft"
         >
           <div class="button-content">
-            <b-icon
-              icon="arrow-rotate-left"
-              class="is-small"
-            />
+            <b-icon icon="arrow-rotate-left" class="is-small" />
             <span class="button-text">{{ $t("rotate_selected") }}</span>
           </div>
         </b-button>
         <b-button
-          class="rotate-button"
+          class="rotate-button primary-button"
           :disabled="buttonDisabled"
           @click="rotateRight"
         >
           <div class="button-content">
-            <b-icon
-              icon="arrow-rotate-right"
-              class="is-small"
-            />
+            <b-icon icon="arrow-rotate-right" class="is-small" />
             <span class="button-text">{{ $t("rotate_selected") }}</span>
           </div>
         </b-button>
       </div>
 
       <div class="rotate-all rotate">
-        <b-button
-          class="rotate-button"
-          @click="rotateAllLeft"
-        >
-          <b-icon
-            icon="arrow-rotate-left"
-            class="is-small"
-          />
+        <b-button class="rotate-button primary-button" @click="rotateAllLeft">
+          <b-icon icon="arrow-rotate-left" class="is-small" />
           <span class="button-text">{{ $t("rotate_all") }}</span>
         </b-button>
-        <b-button
-          class="rotate-button"
-          @click="rotateAllRight"
-        >
-          <b-icon
-            icon="arrow-rotate-right"
-            class="is-small"
-          />
+        <b-button class="rotate-button primary-button" @click="rotateAllRight">
+          <b-icon icon="arrow-rotate-right" class="is-small" />
           <span class="button-text">{{ $t("rotate_all") }}</span>
         </b-button>
       </div>
@@ -83,11 +65,11 @@ export default {
   name: "EditSidebar",
   data() {
     return {
-      buttonDisabled: true
+      buttonDisabled: true,
     };
   },
   computed: {
-    ...mapState("edit", ["selectedPages"])
+    ...mapState("edit", ["selectedPages"]),
   },
   watch: {
     selectedPages(newValue) {
@@ -96,7 +78,7 @@ export default {
       } else {
         this.buttonDisabled = true;
       }
-    }
+    },
   },
   methods: {
     rotateLeft() {
@@ -110,8 +92,8 @@ export default {
     },
     rotateAllRight() {
       this.$emit("rotate-all-right");
-    }
-  }
+    },
+  },
 };
 </script>