From 12da502e993385a2e34b1bd61c9618abdc7c2ced Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Tue, 14 Feb 2023 17:50:36 +0100
Subject: [PATCH] Edit button style

---
 assets/styles/main.scss              |  9 ++++-----
 components/AppError.vue              | 12 +-----------
 components/ContactFormValidation.vue |  2 +-
 3 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index b409e75..1aad360 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -40,7 +40,7 @@
     --regular-icon-size: 2rem;
     --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
     --small-icon-size: calc(var(--text-font-size) * var(--line-height));
-    --button-gap: 0.5rem;
+    --button-with-icon-gap: 0.5rem;
 
 
     // Colors
@@ -192,22 +192,21 @@ button {
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: var(--button-with-icon-gap);
 
     &__text,
     &-text {
-        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
+        transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
         transition: transform 200ms ease-in-out;
     }
 
     &__icon,
     &-icon {
-        display: inherit;
         flex-shrink: 0;
         opacity: 0;
         width: var(--small-icon-size);
         height: var(--small-icon-size);
-        margin: 0 0 0 var(--button-gap);
-        transform: translateX(calc((var(--button-gap) + var(--small-icon-size)) / 2));
+        transform: translateX(calc((var(--button-with-icon-gap) + var(--small-icon-size)) / 2));
         transition:
             opacity 200ms ease-in-out,
             transform 200ms ease-in-out; 
diff --git a/components/AppError.vue b/components/AppError.vue
index dce585a..bca43e8 100644
--- a/components/AppError.vue
+++ b/components/AppError.vue
@@ -99,19 +99,9 @@
         }
 
         &__button {
+            @include button-with-icon;
             grid-area: button;
             margin: 0 2rem;
-
-            &-icon {
-                display: none;
-            }
-        }
-        
-        @media screen and (min-width: $tablet-media-query) {
-
-            &__button {
-                @include button-with-icon;
-            }
         }
     }
     
diff --git a/components/ContactFormValidation.vue b/components/ContactFormValidation.vue
index 3f43320..093da65 100644
--- a/components/ContactFormValidation.vue
+++ b/components/ContactFormValidation.vue
@@ -80,8 +80,8 @@
         row-gap: 0.5rem;
 
         &__button {
-            grid-area: button;
             @include button-with-icon;
+            grid-area: button;
         }
 
         &__loader {