fix(ui): models and slide-overs to use the same Close (x) icon button styles (#9393)

This commit is contained in:
Andras Bacsai
2026-06-03 12:04:55 +02:00
committed by GitHub
2 changed files with 5 additions and 4 deletions
@@ -53,7 +53,7 @@
<div class="flex items-center justify-between py-6 px-6 shrink-0"> <div class="flex items-center justify-between py-6 px-6 shrink-0">
<h3 class="text-2xl font-bold">{{ $title }}</h3> <h3 class="text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen=false" <button @click="modalOpen=false"
class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base"> class="absolute cursor-pointer top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"> stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -32,11 +32,12 @@ x-init="$watch('slideOverOpen', value => {
<div class="px-4 pb-4 sm:px-5"> <div class="px-4 pb-4 sm:px-5">
<div class="flex items-start justify-between pb-1"> <div class="flex items-start justify-between pb-1">
<h2 class="text-2xl leading-6" id="slide-over-title"> <h2 class="text-2xl leading-6" id="slide-over-title">
{{ $title }}</h2> {{ $title }}
</h2>
<div class="flex items-center h-auto ml-3"> <div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false" <button @click="slideOverOpen=false"
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded-sm"> class="absolute cursor-pointer top-0 right-0 z-30 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path> d="M6 18L18 6M6 6l12 12"></path>