fix(button): projects filter button styles (#5250)

magicznyleszek · web-flow · commit a0cb1b576709 · 2024-11-11T11:30:01.000Z
Fix paddings on all text-type buttons. Fix paddings on highlighted
Projects Filter button.
diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
@@ -102,7 +102,8 @@ $button-border-radius: 6px;
     left: calc(50% - #{$iconAlone * 0.5});
   }
 
-  &.k-button--type-text {
+  // We need bigger specificity here to override paddings for has-label
+  &.k-button--type-text.k-button--type-text {
     // We need the text button to align better with other UI elements, so we
     // want to avoid the transparent space on both sides.
     padding-left: 0;
diff --git a/jsapp/js/projects/projectViews/projectsFilter.module.scss b/jsapp/js/projects/projectViews/projectsFilter.module.scss
@@ -35,6 +35,10 @@
   }
 }
 
+// We want the button to look distinct if there are any filters enabled, so that
+// user is not confused why some of their projects might not appear on the list.
 .buttonHasFilters {
   background-color: colors.$kobo-bg-blue;
+  padding-left: 8px !important;
+  padding-right: 8px !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,8 @@ $button-border-radius: 6px;`
`102`	`102`	`left: calc(50% - #{$iconAlone * 0.5});`
`103`	`103`	`}`
`104`	`104`
`105`		`- &.k-button--type-text {`
	`105`	`+ // We need bigger specificity here to override paddings for has-label`
	`106`	`+ &.k-button--type-text.k-button--type-text {`
`106`	`107`	`// We need the text button to align better with other UI elements, so we`
`107`	`108`	`// want to avoid the transparent space on both sides.`
`108`	`109`	`padding-left: 0;`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,10 @@`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
	`38`	`+// We want the button to look distinct if there are any filters enabled, so that`
	`39`	`+// user is not confused why some of their projects might not appear on the list.`
`38`	`40`	`.buttonHasFilters {`
`39`	`41`	`background-color: colors.$kobo-bg-blue;`
	`42`	`+ padding-left: 8px !important;`
	`43`	`+ padding-right: 8px !important;`
`40`	`44`	`}`