From fed878bb5fe54833062d43e5627126e2e37a1204 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Wed, 1 Jul 2026 09:42:21 +0000
Subject: [PATCH] Remove divider lines across the meeting room interface.

Drop header, footer, panel, and tile borders in favor of spacing, shadows, and rounded surfaces for a cleaner borderless layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/js/meet-room.js                |  4 +--
 resources/views/meet/room/show.blade.php | 34 ++++++++++++------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/resources/js/meet-room.js b/resources/js/meet-room.js
index bb84fa8..df651e0 100644
--- a/resources/js/meet-room.js
+++ b/resources/js/meet-room.js
@@ -309,11 +309,11 @@ function meetRoom() {
             if (!tile) {
                 tile = document.createElement('div');
                 tile.dataset.participantTile = identity;
-                tile.className = 'relative aspect-video w-full overflow-hidden rounded-xl bg-slate-900 ring-1 ring-white/10';
+                tile.className = 'relative aspect-video w-full overflow-hidden rounded-xl bg-slate-900';
                 tile.innerHTML = `
                     <div data-tile-stage class="absolute inset-0 flex items-center justify-center"></div>
                     <div data-tile-avatar class="absolute inset-0 flex flex-col items-center justify-center gap-3 px-4">
-                        <div data-tile-avatar-circle class="flex h-20 w-20 items-center justify-center rounded-full text-2xl font-semibold text-white shadow-lg ring-2 ring-white/10"></div>
+                        <div data-tile-avatar-circle class="flex h-20 w-20 items-center justify-center rounded-full text-2xl font-semibold text-white shadow-lg"></div>
                     </div>
                     <div class="absolute inset-x-0 bottom-0 flex items-center justify-between gap-2 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pb-2 pt-8">
                         <span data-tile-name class="truncate text-xs font-medium text-white"></span>
diff --git a/resources/views/meet/room/show.blade.php b/resources/views/meet/room/show.blade.php
index 9108795..38385c0 100644
--- a/resources/views/meet/room/show.blade.php
+++ b/resources/views/meet/room/show.blade.php
@@ -55,14 +55,14 @@
 
     <div class="flex h-full min-w-0">
         <div class="relative flex min-h-0 min-w-0 flex-1 flex-col">
-        <header class="flex shrink-0 items-center justify-between border-b border-slate-800/80 bg-slate-950/90 px-4 py-3 backdrop-blur">
+        <header class="flex shrink-0 items-center justify-between bg-slate-950 px-4 py-3">
             <div class="min-w-0">
                 <h1 class="truncate text-sm font-semibold">{{ $room->title }}</h1>
                 <p class="text-xs text-slate-400" x-text="connectionStatus"></p>
             </div>
             <div class="flex shrink-0 items-center gap-2 text-xs text-slate-400">
                 <button @click="openShare()" type="button"
-                        class="inline-flex items-center gap-1.5 rounded-lg border border-slate-700 bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
+                        class="inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-slate-200 transition-colors hover:bg-slate-800"
                         title="Share meeting link">
                     @include('meet.room.partials.meet-icon', ['icon' => 'share', 'class' => 'h-4 w-4'])
                     Share
@@ -74,7 +74,7 @@
         </header>
 
         <div x-show="shareOpen" x-cloak @click.outside="shareOpen = false"
-             class="absolute right-4 top-14 z-50 w-80 rounded-xl border border-slate-700 bg-slate-900 p-4 shadow-xl">
+             class="absolute right-4 top-14 z-50 w-80 rounded-xl bg-slate-900 p-4 shadow-2xl">
             <div class="flex items-start justify-between gap-2">
                 <div>
                     <p class="text-sm font-medium text-white">Invite others</p>
@@ -86,7 +86,7 @@
             </div>
             <div class="mt-3 flex gap-2">
                 <input type="text" readonly :value="joinUrl"
-                       class="min-w-0 flex-1 rounded-lg border-slate-700 bg-slate-950 px-3 py-2 text-xs text-slate-200">
+                       class="min-w-0 flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-xs text-slate-200 ring-1 ring-slate-700/60">
                 <button @click="copyJoinLink()" type="button"
                         class="shrink-0 rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500"
                         x-text="shareCopied ? 'Copied' : 'Copy'"></button>
@@ -108,7 +108,7 @@
 
                 <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2">
                     <template x-for="reaction in floatingReactions" :key="reaction.id">
-                        <span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90 ring-1 ring-white/20">
+                        <span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90">
                             <img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}?v={{ @filemtime(public_path('images/meet-icons/applause.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
                             <img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}?v={{ @filemtime(public_path('images/meet-icons/react.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
                         </span>
@@ -116,7 +116,7 @@
                 </div>
         </main>
 
-        <footer class="relative shrink-0 border-t border-slate-800/80 bg-slate-950/95 px-4 py-4 backdrop-blur">
+        <footer class="relative shrink-0 bg-slate-950 px-4 py-4">
             <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-center gap-2 sm:gap-3">
                 <button @click="toggleMute()" type="button"
                         class="rounded-full p-3 transition-colors"
@@ -167,7 +167,7 @@
                 </form>
                 @if ($participant->isHost())
                     <button @click="openEndMeetingConfirm()" type="button"
-                            class="rounded-full border border-red-500 px-4 py-3 text-sm text-red-400 hover:bg-red-950">End</button>
+                            class="rounded-full bg-red-950 px-4 py-3 text-sm text-red-400 hover:bg-red-900">End</button>
                     <form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
                         @csrf
                     </form>
@@ -181,8 +181,8 @@
                  x-transition:leave="transition ease-in duration-100"
                  x-transition:leave-start="translate-y-0 opacity-100"
                  x-transition:leave-end="translate-y-2 opacity-0"
-                 class="absolute bottom-full left-1/2 z-40 mb-3 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-2xl border border-slate-700/80 bg-slate-900/98 shadow-2xl backdrop-blur-md">
-                <div class="flex items-center justify-between border-b border-slate-800 px-4 py-3">
+                 class="absolute bottom-full left-1/2 z-40 mb-3 w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-2xl bg-slate-900/98 p-1 shadow-2xl backdrop-blur-md">
+                <div class="flex items-center justify-between px-3 py-3">
                     <div>
                         <p class="text-sm font-semibold text-white">More options</p>
                         <p class="text-xs text-slate-400">Meeting tools and extras</p>
@@ -236,7 +236,7 @@
                 </div>
 
                 @if ($isWebinar ?? false)
-                    <div class="border-t border-slate-800 px-4 py-3">
+                    <div class="px-3 py-3">
                         <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Q&amp;A</p>
                         <ul class="mt-2 max-h-36 space-y-2 overflow-y-auto">
                             <template x-for="item in qaItems" :key="item.uuid">
@@ -249,27 +249,27 @@
                         </ul>
                         <form @submit.prevent="submitQuestion" class="mt-3 flex gap-2">
                             <input type="text" x-model="qaInput" placeholder="Ask a question…"
-                                   class="flex-1 rounded-lg border-slate-700 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500">
+                                   class="flex-1 rounded-lg border-0 bg-slate-950 px-3 py-2 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/60">
                             <button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium hover:bg-indigo-500">Send</button>
                         </form>
                     </div>
                 @endif
 
-                <p x-show="breakoutBroadcast" class="border-t border-slate-800 bg-amber-950/40 px-4 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
+                <p x-show="breakoutBroadcast" class="mx-2 mb-2 rounded-xl bg-amber-950/40 px-3 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
             </div>
         </footer>
 
         <div x-show="breakoutModalOpen" x-cloak
              class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
              @keydown.escape.window="breakoutModalOpen = false">
-            <div class="w-full max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false">
+            <div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="breakoutModalOpen = false">
                 <h3 class="text-base font-semibold text-white">Start breakout rooms</h3>
                 <p class="mt-1 text-sm text-slate-400">How many breakout rooms should be created?</p>
                 <form @submit.prevent="submitBreakouts()" class="mt-4 space-y-4">
                     <div>
                         <label for="breakout-count" class="sr-only">Number of rooms</label>
                         <input id="breakout-count" type="number" min="1" max="20" x-model="breakoutCount"
-                               class="w-full rounded-xl border-slate-700 bg-slate-950 px-3 py-2.5 text-sm text-white focus:border-indigo-500 focus:ring-indigo-500">
+                               class="w-full rounded-xl border-0 bg-slate-950 px-3 py-2.5 text-sm text-white ring-1 ring-slate-700/60 focus:ring-indigo-500">
                     </div>
                     <div class="flex justify-end gap-2">
                         <button type="button" @click="breakoutModalOpen = false"
@@ -284,7 +284,7 @@
         <div x-show="endMeetingConfirmOpen" x-cloak
              class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
              @keydown.escape.window="endMeetingConfirmOpen = false">
-            <div class="w-full max-w-sm rounded-2xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false">
+            <div class="w-full max-w-sm rounded-2xl bg-slate-900 p-5 shadow-2xl" @click.outside="endMeetingConfirmOpen = false">
                 <h3 class="text-base font-semibold text-white">End meeting for everyone?</h3>
                 <p class="mt-2 text-sm text-slate-400">All participants will be disconnected and the session will close.</p>
                 <div class="mt-5 flex justify-end gap-2">
@@ -310,7 +310,7 @@
                     <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                 </button>
             </div>
-            <div class="flex min-h-0 flex-1 flex-col rounded-2xl bg-slate-900/90 p-3 ring-1 ring-slate-800/60">
+            <div class="flex min-h-0 flex-1 flex-col rounded-2xl bg-slate-900/90 p-3">
                 <div class="flex-1 space-y-3 overflow-y-auto" id="chat-messages">
                     @foreach ($messages as $message)
                         @php $isOwn = $message->sender_name === $participant->display_name; @endphp
@@ -328,7 +328,7 @@
                 <form @submit.prevent="sendChat" class="mt-3 shrink-0">
                     <div class="flex items-end gap-2">
                         <input type="text" x-model="chatInput" placeholder="Write a message…"
-                               class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/80 focus:ring-indigo-500">
+                               class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:ring-2 focus:ring-indigo-500">
                         <button type="submit"
                                 class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
                                 :disabled="!chatInput.trim()">Send</button>