From 4647bb2cc1ae86f569ac4edc074338b3d3389da7 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Mon, 19 Oct 2020 23:11:37 +0200
Subject: [PATCH] add proper style for primary button

---
 resources/components/favourites/save.html |  9 ++++++---
 resources/components/ui/dialog.html       | 12 +++++++-----
 resources/styles/_controls.scss           | 11 +++++++++++
 resources/styles/main.scss                |  3 ++-
 resources/styles/ui/_popup.scss           |  4 ++++
 templates/app.html.twig                   |  2 +-
 6 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/resources/components/favourites/save.html b/resources/components/favourites/save.html
index 8607252..6f31d62 100644
--- a/resources/components/favourites/save.html
+++ b/resources/components/favourites/save.html
@@ -5,9 +5,6 @@
             <input class="form-control form-control-sm" placeholder="np. Z pracy"
                    :class="{ 'is-invalid': errors.name.length > 0 }" id="favourite_add_name"
                    v-model="name" v-autofocus/>
-            <button class="btn btn-sm btn-dark" type="submit">
-                <ui-icon icon="add" />
-            </button>
             <div v-if="errors.name.length > 0" class="invalid-feedback">
                 <p v-for="error in errors.name">{{ error }}</p>
             </div>
@@ -18,4 +15,10 @@
             <stop :stop="stop"/>
         </li>
     </ul>
+    <div class="favourite-add-form__actions">
+        <button class="btn btn-sm btn-primary" type="submit">
+            <ui-icon icon="add" />
+            zapisz
+        </button>
+    </div>
 </form>
diff --git a/resources/components/ui/dialog.html b/resources/components/ui/dialog.html
index 8117b2e..8a8f2d8 100644
--- a/resources/components/ui/dialog.html
+++ b/resources/components/ui/dialog.html
@@ -1,9 +1,9 @@
-<div class="ui-backdrop" @click="handleBackdropClick" v-if="currentBehaviour === 'modal'">
+<div class="ui-backdrop" @click="handleBackdropClick" v-if="currentBehaviour === 'modal'" role="dialog">
     <div class="ui-modal" v-bind="attrs" v-on="$listeners">
         <div class="ui-modal__top-bar">
             <div class="ui-modal__header">
                 <slot name="header">
-                    <div class="ui-modal__title"><slot name="title">{{ title }}</slot></div>
+                    <div class="ui-modal__title" role="heading"><slot name="title">{{ title }}</slot></div>
                 </slot>
             </div>
             <button class="btn btn-action ui-modal__close" @click.prevent="handleCloseClick">
@@ -16,10 +16,12 @@
         </div>
     </div>
 </div>
-<div :class="[ 'ui-popup', arrow && 'ui-popup--arrow' ]" v-bind="attrs" :style="{ zIndex: zIndex }" v-on="$listeners" v-else>
+<div :class="[ 'ui-popup', arrow && 'ui-popup--arrow' ]" v-bind="attrs" :style="{ zIndex: zIndex }" v-on="$listeners" role="dialog" v-else>
     <div class="ui-popup__arrow" ref="arrow" v-if="arrow"></div>
-    <div class="ui-popup__header" v-if="hasHeader">
-        <slot name="header" />
+    <div class="ui-popup__header" v-if="hasHeader || title">
+        <slot name="header">
+            <div class="ui-popup__heading" role="heading"><slot name="title">{{ title }}</slot></div>
+        </slot>
     </div>
     <slot />
     <div class="ui-popup__footer" v-if="hasFooter">
diff --git a/resources/styles/_controls.scss b/resources/styles/_controls.scss
index 818cfae..6a479c8 100644
--- a/resources/styles/_controls.scss
+++ b/resources/styles/_controls.scss
@@ -13,9 +13,20 @@
     }
   }
 
+  border-radius: 1.5px;
+
   display: inline-block;
 
   &.btn-outline-action {
     @extend .btn-outline-dark;
   }
+
+  &.btn-primary {
+    background: $primary-gradient;
+    border-color: transparent;
+
+    &:hover {
+      border: 1px $primary solid;
+    }
+  }
 }
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 4f5aeee..67dc67a 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -1,4 +1,4 @@
-$border-radius: 0;
+$border-radius:    0;
 $border-radius-lg: $border-radius;
 $border-radius-sm: $border-radius;
 
@@ -7,6 +7,7 @@ $border-radius-sm: $border-radius;
 @import "~bootstrap/scss/variables";
 
 $primary: #005ea8;
+$primary-gradient: linear-gradient(120deg, #0083c5 10%, #005ea8 90%);
 
 $custom-control-indicator-checked-bg: $dark;
 $custom-control-indicator-active-bg: $dark;
diff --git a/resources/styles/ui/_popup.scss b/resources/styles/ui/_popup.scss
index 384d6c2..90a42d6 100644
--- a/resources/styles/ui/_popup.scss
+++ b/resources/styles/ui/_popup.scss
@@ -84,6 +84,10 @@
     padding: 0;
   }
 
+  *.ui-popup__header {
+    margin-bottom: 0.5rem;
+  }
+
   .ui-popup__heading {
     font-size: $font-size-sm;
     font-weight: bold;
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 90677c8..493012c 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -105,7 +105,7 @@
                         </button>
                     </div>
 
-                    <ui-dialog reference="save" v-if="visibility.save" arrow placement="bottom-end" @leave="visibility.save = false">
+                    <ui-dialog reference="save" v-if="visibility.save" arrow placement="bottom-end" @leave="visibility.save = false" title="Dodaj do ulubionych">
                         <favourites-adder @saved="visibility.save = false"/>
                     </ui-dialog>
                 </section>