Remission Filter Button Styling, Filter Overlay Max Width Changed

apps/page/remission/src/lib/remission-list/remission-list.component.html

@@ -1,7 +1,14 @@
-<button class="filter" (click)="shellFilterOverlay.open()">
-  <ui-icon size="20px" icon="filter_alit"></ui-icon>
-  <span class="label">Filter</span>
-</button>
+<div class="flex flex-row items-center h-16 bg-white relative rounded-t font-bold shadow-lg">
+  <h3 class="text-center grow font-bold text-h3">Remission</h3>
+  <button
+    class="filter absolute right-0 top-0 h-14 rounded px-5 text-lg bg-cadet-blue grid grid-flow-col gap-2 items-center"
+    type="button"
+    (click)="shellFilterOverlay.open()"
+  >
+    <shared-icon icon="filter-variant"></shared-icon>
+    <span class="label">Filter</span>
+  </button>
+</div>
 
 <shell-filter-overlay #shellFilterOverlay>
   <page-remission-filter *ngIf="shellFilterOverlay.isOpen" (close)="shellFilterOverlay.close()"></page-remission-filter>
@@ -16,7 +23,6 @@
   (scrolledIndexChange)="scrolledIndexChange($event)"
 >
   <div>
-    <h1 class="text-h3 font-bold text-center">Remission</h1>
     <div class="text-center">
       <p class="text-xl mt-4">
         Wählen Sie den Bereich aus dem <br />
@@ -93,7 +99,7 @@
   <div class="h-px-100"></div>
 </cdk-virtual-scroll-viewport>
 
-<div class="actions">
+<div class="actions flex items-center justify-center bottom-40 sticky gap-7">
   <ng-container>
     <a
       *ngIf="showStartRemissionAction$ | async"

apps/page/remission/src/lib/remission-list/remission-list.component.scss

@@ -15,16 +15,8 @@
 }
 
 .filter {
-  @apply absolute font-sans flex items-center font-bold bg-inactive-branch border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
-
-  min-width: 106px;
-
-  .label {
-    @apply ml-px-5;
-  }
-
   &.active {
-    @apply bg-active-branch text-white ml-px-5;
+    @apply bg-active-branch text-white;
   }
 }
 
@@ -33,19 +25,13 @@
 }
 
 .actions {
-  @apply fixed inline-grid grid-flow-col gap-7;
-  bottom: 7.25rem;
-  left: 50%;
-  transform: translateX(-50%);
-
   .disabled {
     @apply cursor-not-allowed bg-inactive-branch;
   }
 }
 
 .cta-scroll {
-  @apply absolute shadow-cta border-none outline-none bg-white w-12 h-12 rounded-full grid items-center justify-center;
-  bottom: 26px;
+  @apply bottom-[5.5rem] absolute shadow-cta border-none outline-none bg-white w-12 h-12 rounded-full grid items-center justify-center;
   right: 5%;
 
   ui-icon {

apps/page/remission/src/lib/remission-list/remission-list.module.ts

@@ -10,6 +10,7 @@ import { RouterModule } from '@angular/router';
 import { RequiredCapacitiesModule } from '../required-capacities/required-capacities.module';
 import { SharedShippingDocumentDetailsModule } from '../shared/shipping-document-details/shipping-document-details.module';
 import { RemissionListItemLoadingModule } from './remission-list-item-loading/remission-list-item-loading.module';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { RemissionListItemLoadingModule } from './remission-list-item-loading/re
     SharedShippingDocumentDetailsModule,
     RemissionListItemLoadingModule,
     ScrollingModule,
+    IconModule,
   ],
   exports: [RemissionListComponent],
   declarations: [RemissionListComponent],

apps/shared/components/filter-overlay/src/lib/filter-overlay.component.scss

@@ -6,16 +6,4 @@ div {
   @screen desktop-small {
     @apply w-desktop-small;
   }
-
-  @screen desktop {
-    @apply w-desktop;
-  }
-
-  @screen desktop-x-large {
-    @apply w-desktop-x-large;
-  }
-
-  @screen desktop-xx-large {
-    @apply w-desktop-xx-large;
-  }
 }