From 64816558c1c93460117e8141566734cdcdd14a2c Mon Sep 17 00:00:00 2001
From: nitrix <me@nitrix.one>
Date: Mon, 9 Mar 2026 18:47:57 +0100
Subject: [PATCH] Apply glass utility class to form fields and buttons

Use .glass class on form fields and buttons on gradient backgrounds.
Buttons get gradient glow border via background-clip trick. Solid
white fallback preserved for BottomSheet context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/assets/main.css           | 34 ++++++++++++++++++--------
 frontend/src/views/EventCreateView.vue | 12 ++++-----
 frontend/src/views/EventDetailView.vue |  2 +-
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index aa1a138..3814fe9 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -117,21 +117,24 @@ body::before {
 /* Card-style form fields */
 .form-field {
   background: var(--color-card);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-md);
-  box-shadow: var(--shadow-card);
   width: 100%;
   font-family: inherit;
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text);
   outline: none;
-  transition: box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
+}
+
+.form-field.glass {
+  color: var(--color-text-on-gradient);
 }
 
 .form-field:focus {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  border-color: var(--color-glass-border-hover);
 }
 
 .form-field::placeholder {
@@ -139,6 +142,10 @@ body::before {
   font-weight: 400;
 }
 
+.form-field.glass::placeholder {
+  color: var(--color-text-muted);
+}
+
 textarea.form-field {
   resize: vertical;
   min-height: 5rem;
@@ -163,22 +170,29 @@ textarea.form-field {
   display: block;
   width: 100%;
   padding: var(--spacing-md) var(--spacing-lg);
-  background: var(--color-accent);
+  background: var(--color-card);
   color: var(--color-text);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-button);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
-  box-shadow: var(--shadow-button);
-  transition: opacity 0.2s ease, transform 0.1s ease;
+  transition: border-color 0.2s ease, transform 0.1s ease;
   text-align: center;
   text-decoration: none;
 }
 
+.btn-primary.glass {
+  color: var(--color-text-on-gradient);
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--color-glass-inner), var(--color-glass-inner)) padding-box,
+    var(--gradient-glow) border-box;
+}
+
 .btn-primary:hover {
-  opacity: 0.92;
+  border-color: var(--color-glass-border-hover);
 }
 
 .btn-primary:active {
@@ -222,7 +236,7 @@ textarea.form-field {
   -webkit-backdrop-filter: blur(16px);
 }
 
-.glass:hover {
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
   background: var(--color-glass-hover);
   border-color: var(--color-glass-border-hover);
 }
diff --git a/frontend/src/views/EventCreateView.vue b/frontend/src/views/EventCreateView.vue
index 7b06c63..5d7363e 100644
--- a/frontend/src/views/EventCreateView.vue
+++ b/frontend/src/views/EventCreateView.vue
@@ -12,7 +12,7 @@
           id="title"
           v-model="form.title"
           type="text"
-          class="form-field"
+          class="form-field glass"
           required
           maxlength="200"
           placeholder="What's the event?"
@@ -27,7 +27,7 @@
         <textarea
           id="description"
           v-model="form.description"
-          class="form-field"
+          class="form-field glass"
           maxlength="2000"
           placeholder="Tell people more about it…"
           :aria-invalid="!!errors.description"
@@ -42,7 +42,7 @@
           id="dateTime"
           v-model="form.dateTime"
           type="datetime-local"
-          class="form-field"
+          class="form-field glass"
           required
           :aria-invalid="!!errors.dateTime"
           :aria-describedby="errors.dateTime ? 'dateTime-error' : undefined"
@@ -56,7 +56,7 @@
           id="location"
           v-model="form.location"
           type="text"
-          class="form-field"
+          class="form-field glass"
           maxlength="500"
           placeholder="Where is it?"
           :aria-invalid="!!errors.location"
@@ -71,7 +71,7 @@
           id="expiryDate"
           v-model="form.expiryDate"
           type="date"
-          class="form-field"
+          class="form-field glass"
           required
           :min="tomorrow"
           :aria-invalid="!!errors.expiryDate"
@@ -80,7 +80,7 @@
         <span v-if="errors.expiryDate" id="expiryDate-error" class="field-error" role="alert">{{ errors.expiryDate }}</span>
       </div>
 
-      <button type="submit" class="btn-primary" :disabled="submitting">
+      <button type="submit" class="btn-primary glass" :disabled="submitting">
         {{ submitting ? 'Creating…' : 'Create Event' }}
       </button>
 
diff --git a/frontend/src/views/EventDetailView.vue b/frontend/src/views/EventDetailView.vue
index 4d9b390..3c2b50f 100644
--- a/frontend/src/views/EventDetailView.vue
+++ b/frontend/src/views/EventDetailView.vue
@@ -70,7 +70,7 @@
       <!-- Error state -->
       <div v-else-if="state === 'error'" class="detail__content detail__content--center" role="alert">
         <p class="detail__message">Something went wrong.</p>
-        <button class="btn-primary" type="button" @click="fetchEvent">Retry</button>
+        <button class="btn-primary glass" type="button" @click="fetchEvent">Retry</button>
       </div>
     </div>