From fa8689940a8d1974395110a2e563fedfc466e8d8 Mon Sep 17 00:00:00 2001
From: Jeremiasz Major <jrh.mjr@gmail.com>
Date: Tue, 17 Dec 2024 21:07:35 +0100
Subject: [PATCH] replace custom classes with inset-ring utils

---
 resources/css/style.css                                   | 8 --------
 .../Artists/Components/Form/FormExternalPhoto.svelte      | 4 ++--
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/resources/css/style.css b/resources/css/style.css
index 6d85391..60eb090 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -2,14 +2,6 @@
 @import './headers.css';
 @import './placeholders.css';
 
-@utility inset-shadow-light {
-  box-shadow: inset 0 0 0 var(--spacing-1) var(--colors-brand-lighter);
-}
-
-@utility inset-shadow-hard {
-  box-shadow: inset 0 0 0 var(--spacing-1) var(--colors-brand-primary);
-}
-
 @utility form-input {
   @apply rounded-md border-gray-300;
   @apply dark:bg-gray-800 dark:border-gray-900 dark:focus:border-gray-700;
diff --git a/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte b/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
index b058447..44be72e 100644
--- a/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
+++ b/resources/js/Pages/Artists/Components/Form/FormExternalPhoto.svelte
@@ -42,9 +42,9 @@
 
 	<div
 		class="
-			absolute inset-0 rounded-lg group-focus:inset-shadow-light
+			absolute inset-0 rounded-lg group-focus:inset-ring-4 group-focus:inset-ring-brand-lighter
 			transition-all duration-300
-			{isSelected ? 'inset-shadow-hard opacity-100' : ''}
+			{isSelected ? 'inset-ring-4 inset-ring-brand-primary' : ''}
 		"
 	></div>
 </button>