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>