Fix buttons changing size and make text in search maller (#22)

Author: philipsens

projects/angular-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankframework/angular-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A collection of reusable components designed for use in Frank!Framework projects",
   "main": "",
   "author": "Vivy Booman",

projects/angular-components/src/lib/button/button.component.scss

@@ -2,22 +2,14 @@ button {
   display: inline-flex;
   border-radius: 50px;
   padding: 10px 16px;
-  border: initial;
+  border: 2px solid transparent;
   justify-content: center;
   align-items: center;
   gap: 8px;
   font-size: 16px;
   font-weight: 600;
   text-transform: capitalize;
 
-  &:active:not(:disabled) {
-    padding: 7px 13px;
-  }
-
-  &.active {
-    padding: 9px 15px;
-  }
-
   &:disabled {
     cursor: not-allowed;
   }

projects/angular-components/src/lib/search/search.component.scss

@@ -9,8 +9,8 @@ label {
   border-radius: 50px;
   align-items: center;
   gap: 8px;
-  font-family: Inter;
-  font-size: 24px;
+  font-family: Inter, serif;
+  font-size: 1.25em;
   font-weight: 500;
 
   &.slim {

projects/angular-components/src/styles/_dark_theme.scss

@@ -4,15 +4,16 @@ ff-button > button {
   &:disabled {
     color: variables.$ff-color-gray;
     background-color: variables.$ff-bgcolor-dark-gray;
+    border-color: variables.$ff-bgcolor-dark-gray;
   }
 
   &.active {
     color: variables.$ff-color-light;
-    background-color: variables.$ff-bgcolor-dark-gray;
+    border-color: variables.$ff-bgcolor-dark-gray;
 
     &:hover {
       color: variables.$ff-color-dark;
-      background-color: variables.$ff-bgcolor-yellow;
+      border-color: variables.$ff-bgcolor-yellow;
     }
   }
 }

projects/angular-components/src/styles/_light_theme.scss

@@ -12,6 +12,7 @@ ff-datatable * {
 ff-button > button {
   color: variables.$ff-color-light;
   background-color: variables.$ff-bgcolor-dark-gray;
+  border-color: variables.$ff-bgcolor-dark-gray;
 
   &:hover {
     color: variables.$ff-color-dark;
@@ -21,23 +22,25 @@ ff-button > button {
   &:active:not(:disabled) {
     color: variables.$ff-color-dark;
     background-color: variables.$ff-bgcolor-yellow;
-    border: 3px solid variables.$ff-border-yellow;
+    border: 2px solid variables.$ff-border-yellow;
   }
 
   &:disabled {
     color: variables.$ff-color-gray;
     background-color: variables.$ff-bgcolor-gray;
+    border-color: variables.$ff-bgcolor-gray;
   }
 
   &.active {
     color: variables.$ff-color-dark;
     background-color: variables.$ff-color-light;
-    border: 1px dashed variables.$ff-border-gray;
+    border: 2px dashed variables.$ff-border-gray;
     gap: 8px;
 
     &:hover {
       color: variables.$ff-color-dark;
       background-color: variables.$ff-bgcolor-yellow;
+      border-color: variables.$ff-bgcolor-yellow;
     }
   }
 }