diff --git a/src/components/alert/style.scss b/src/components/alert/style.scss index 7ad80ae919b4d4c7e030ebbed425c5c0c0a47cee..30edc2556045efee121e23630e074f2ef2f5c2dc 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 6501e1605bb175b7f1a82f5c960c03e702358d20..c7334010182758f2f90ef4d0e3c20645c36f8ed2 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 6a0c898e6c9948b0d82fe2d1acde18ae2703bed4..6fc7dd1c49e5107e96ad716bdabf4961ddc82d4f 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; + } } }