fix mobile buttons

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

@@ -1,6 +1,11 @@
 .row {
   display: flex;
   flex-direction: row-reverse;
+  @media screen and (max-width: 860px) {
+    flex-direction: column-reverse;
+  }
+  gap: var(--gap-m);
   width: 100%;
   flex-wrap: wrap;
+  padding-top: var(--gap-l);
 }

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',
   },

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

@@ -1,7 +1,7 @@
 @import "../../../../styles/shadow";
 
 .card {
-  margin: 20px 20px 0;
+  margin: var(--gap-l) var(--gap-l) 0;
   border-radius: 8px;
   background: var(--surface);
   backdrop-filter: blur(15px);
@@ -10,7 +10,7 @@
   width: 800px;
   position: relative;
   color: var(--text);
-  padding: 10px 0;
+  padding: var(--gap-m) 0;
   box-shadow: var(--shadow-card-3);
 
   @media screen and (max-width: 860px) {
@@ -20,7 +20,7 @@
   }
 
   &.padding {
-    padding: 20px;
+    padding: var(--gap-l);
   }
 
   box-sizing: border-box;