From 2ef9b273f431cc1f6757a320e21d00d58bca832d Mon Sep 17 00:00:00 2001 From: Kasper Seweryn <github@wvffle.net> Date: Tue, 28 Nov 2023 14:01:37 +0100 Subject: [PATCH] fix: apply @mjourdan's suggestions Part-of: <https://dev.funkwhale.audio/funkwhale/ui/-/merge_requests/93> --- src/components/alert/style.scss | 5 ++--- src/components/modal/Modal.vue | 7 ++++--- src/components/modal/style.scss | 28 +++++++++++++++++++++------- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/components/alert/style.scss b/src/components/alert/style.scss index 7ad80ae..30edc25 100644 --- a/src/components/alert/style.scss +++ b/src/components/alert/style.scss @@ -18,11 +18,10 @@ } @include dark-theme { - background-color: var(--fw-pastel-4, var(--fw-bg-color)); + background-color: var(--fw-pastel-3, var(--fw-bg-color)); > .actions .funkwhale.button { - --fw-bg-color: var(--fw-pastel-3); - box-shadow: 0 2px 4px 2px rgba(#000, 0.1); + --fw-bg-color: var(--fw-pastel-4); &:hover, &.is-hovered { --fw-bg-color: var(--fw-pastel-2); diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue index 6501e16..c733401 100644 --- a/src/components/modal/Modal.vue +++ b/src/components/modal/Modal.vue @@ -8,7 +8,10 @@ const open = defineModel<boolean>({ required: true }) <Transition mode="out-in"> <div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay"> <div @click.stop class="funkwhale modal"> - <h2>{{ title }}</h2> + <h2> + {{ title }} + <FwButton icon="bi-x-lg" color="secondary" variant="ghost" @click="open = false" /> + </h2> <Transition> <div v-if="$slots.alert" class="alert-container"> @@ -17,12 +20,10 @@ const open = defineModel<boolean>({ required: true }) </div> </div> </Transition> - <hr /> <div class="modal-content"> <slot /> </div> - <hr v-if="$slots.actions" /> <div v-if="$slots.actions" class="modal-actions"> <slot name="actions" /> </div> diff --git a/src/components/modal/style.scss b/src/components/modal/style.scss index 6a0c898..6fc7dd1 100644 --- a/src/components/modal/style.scss +++ b/src/components/modal/style.scss @@ -6,15 +6,9 @@ min-width: 32rem; max-width: 90vw; - > hr { - padding: 0; - margin: 0; - } - > .alert-container { display: grid; grid-template-rows: 1fr; - margin-bottom: -1px; &.v-enter-active, &.v-leave-active { @@ -33,9 +27,18 @@ > h2 { font-size: 1.25em; - padding: 1.625rem 4.5rem 1rem; + padding: 1.625rem 4.5rem; line-height: 1.2; text-align: center; + position: relative; + + > .funkwhale.button { + font-size: 1rem; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-49%); + } } .modal-content { @@ -44,6 +47,17 @@ .modal-actions { padding: 0.75rem 2rem 1rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + + > :first-child { + margin-left: 0px !important; + } + + > :last-child { + margin-right: 0px !important; + } } } -- GitLab