fix mobile buttons

src/app/widget-modules/components/button/button.component.html

@@ -1,6 +1,6 @@
-<button [disabled]="disabled" mat-button>
+<button [disabled]="disabled">
   @if (icon) {
-  <span><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
+    <span><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
   }
   <span class="button-content">
     <ng-content></ng-content>

src/app/widget-modules/components/button/button.component.less

@@ -8,8 +8,16 @@
 }
 
 button {
-  color: var(--text);
+  display: flex;
+  color: var(--primary-color);
   transition: var(--transition);
+  border-radius: 4px;
+  font-size: 1rem;
+  background: var(--surface-strong);
+
+  border: 1px solid var(--primary-color);
+  padding: var(--gap-s);
+  cursor: pointer;
 
   :host(.full-width) & {
     width: 100%;
@@ -18,18 +26,19 @@ button {
 
   &:hover {
     color: var(--primary-active);
+    background: var(--surface-subtle);
   }
 
   @media screen and (max-width: 860px) {
-    font-size: 30px;
+    font-size: 1.2rem;
+    width: 100%;
+    justify-content: center;
+    .button-content {
+      flex-grow: 1;
+    }
   }
 }
 
-.button-content {
-  @media screen and (max-width: 860px) {
-    display: none ;
-  }
-}
 
 fa-icon {
   width: 20px;

src/app/widget-modules/components/button/button.component.ts

@@ -1,6 +1,5 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {MatButton} from '@angular/material/button';
 
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 
@@ -8,7 +7,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
   selector: 'app-button',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.less'],
-  imports: [MatButton, FaIconComponent],
+  imports: [FaIconComponent],
   host: {
     '[class.full-width]': 'fullWidth',
   },