(ui) Fix button color

app/frontend/src/javascript/components/cart/abstract-item.tsx

@@ -76,7 +76,7 @@ export const AbstractItem: React.FC<AbstractItemProps> = ({ item, errors, cart,
           <span>{t('app.public.abstract_item.total')}</span>
           <p>{FormatLib.price(OrderLib.itemAmount(item))}</p>
         </div>
-        <FabButton className="main-action-btn" onClick={handleRemoveItem(item)}>
+        <FabButton className="is-alert" onClick={handleRemoveItem(item)}>
           <i className="fa fa-trash" />
         </FabButton>
       </div>

app/frontend/src/javascript/components/events/event-form.tsx

@@ -361,7 +361,7 @@ export const EventForm: React.FC<EventFormProps> = ({ action, event, onError, on
                              formState={formState}
                              label={t('app.admin.event_form.price')}
                              addOn={FormatLib.currencySymbol()} />
-                  <FabButton className="remove-price is-main" onClick={() => handlePriceRemove(price, index)} icon={<Trash size={20} />} />
+                  <FabButton className="remove-price is-alert" onClick={() => handlePriceRemove(price, index)} icon={<Trash size={20} />} />
                 </div>
               ))}
               <FabButton className="add-price is-secondary" onClick={() => append({})}>

app/frontend/src/javascript/components/form/form-file-upload.tsx

@@ -103,7 +103,7 @@ export const FormFileUpload = <TFieldValues extends FieldValues>({ id, label, re
                    onChange={onFileSelected}
                    placeholder={placeholder()}/>
         {showRemoveButton && hasFile() &&
-          <FabButton onClick={onRemoveFile} icon={<Trash size={20} weight="fill" />} className="is-main" />
+          <FabButton onClick={onRemoveFile} icon={<Trash size={20} weight="fill" />} className="is-alert" />
         }
       </div>
     </div>

app/frontend/src/javascript/components/form/form-image-upload.tsx

@@ -127,7 +127,7 @@ export const FormImageUpload = <TFieldValues extends FieldValues, TContext exten
                    onChange={onFileSelected}
                    placeholder={placeholder()}
                    tooltip={tooltip} />
-        {hasImage() && <FabButton onClick={onRemoveFile} icon={<Trash size={20} weight="fill" />} className="is-main" />}
+        {hasImage() && <FabButton onClick={onRemoveFile} icon={<Trash size={20} weight="fill" />} className="is-alert" />}
       </div>
     </div>
   );

app/frontend/src/javascript/components/store/product-item.tsx

@@ -73,7 +73,6 @@ export const ProductItem: React.FC<ProductItemProps> = ({ product, onEdit, onDel
       </div>
       <div className='actions'>
         <EditDestroyButtons onDeleteSuccess={onDelete}
-                            className="manage"
                             onError={onError}
                             onEdit={editProduct(product)}
                             itemId={product.id}

app/frontend/src/stylesheets/modules/base/edit-destroy-buttons.scss

@@ -9,7 +9,7 @@
     border-radius: 0;
     color: var(--gray-soft-lightest);
     &.edit-btn {background: var(--gray-hard-darkest) }
-    &.delete-btn {background: var(--main) }
+    &.delete-btn {background: var(--alert) }
     &:hover,
     &:focus {
       opacity: 0.75;

app/frontend/src/stylesheets/modules/cart/store-cart.scss

@@ -207,11 +207,11 @@
         padding: 1.6rem 0.8rem;
         background-color: var(--main);
         border: none;
-        color: var(--gray-soft-lightest);
+        color: var(--main-text-color);
         justify-content: center;
         text-transform: uppercase;
         &:hover {
-          color: var(--gray-soft-lightest);
+          color: var(--main-text-color);
           opacity: 0.75;
           cursor: pointer;
         }

app/frontend/src/stylesheets/modules/store/_utilities.scss

@@ -17,11 +17,11 @@
 
 .main-action-btn {
   background-color: var(--main);
-  color: var(--gray-soft-lightest);
+  color: var(--main-text-color);
   border: none;
   &:hover {
     background-color: var(--main);
-    color: var(--gray-soft-lightest);
+    color: var(--main-text-color);
     opacity: 0.75;
   }
 }

app/frontend/src/stylesheets/modules/store/product-categories.scss

@@ -73,7 +73,7 @@
             &:hover { opacity: 0.75; }
           }
           .edit-btn { background: var(--gray-hard-darkest); }
-          .delete-btn { background: var(--main); }
+          .delete-btn { background: var(--alert); }
         }
       }
     }

app/frontend/src/stylesheets/modules/store/products-list.scss

@@ -72,19 +72,6 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      .manage {
-        overflow: hidden;
-        display: flex;
-        border-radius: var(--border-radius-sm);
-        button {
-          @include btn;
-          border-radius: 0;
-          color: var(--gray-soft-lightest);
-          &:hover { opacity: 0.75; }
-        }
-        .edit-btn {background: var(--gray-hard-darkest) }
-        .delete-btn {background: var(--main) }
-      }
     }
 
     @media (min-width: 1024px) {