devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: input depth styling, missed fields, and header button order

Browse Source 
- Add subtle border + inset shadow to input tiers for resting-state visibility
- Fix DmSearchBar and SearchPopover containers missing input depth treatment
- Fix focus ring clipping in settings panel scroll container
- Swap search and member list toggle button positions in channel/DM headers
This commit is contained in:
Jannis Braun
2026-03-14 14:04:14 +01:00
parent 836f0acef6
commit 1750f12c85
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/SearchPopover.tsx
+1 -1
View File
@@ -162,7 +162,7 @@ export function SearchPopover({ open, onClose, anchorRef, channelId, isDm, onJum
>
{/* Search input */}
<div className="p-3 border-b border-white/[0.07]">
<div className="flex items-center gap-2 bg-surface-input rounded-lg px-3 py-2">
<div className="flex items-center gap-2 bg-surface-input rounded-lg px-3 py-2 border border-white/[0.06] shadow-input">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0">
<path d="M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" />
</svg>
packages/web/src/components/layout/DmSearchBar.tsx
+2 -2
View File
@@ -359,7 +359,7 @@ export function DmSearchBar() {
return (
<div ref={anchorRef} className="flex-1 min-w-0">
{active ? (
<div className="flex-1 min-h-8 bg-surface-base rounded-[4px] flex items-center px-2 gap-1.5">
<div className="flex-1 min-h-8 bg-surface-input rounded-[4px] flex items-center px-2 gap-1.5 border border-white/[0.06] shadow-input">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0">
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
</svg>
@@ -376,7 +376,7 @@ export function DmSearchBar() {
) : (
<button
onClick={open}
className="w-full min-h-8 bg-surface-base text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left hover:bg-surface-base transition-colors"
className="w-full min-h-8 bg-surface-input text-txt-tertiary text-[13px] font-medium py-[5px] px-2 rounded-[4px] text-left border border-white/[0.06] shadow-input hover:border-white/[0.1] transition-colors"
>
Find or start a conversation
</button>
packages/web/src/components/layout/MainContent.tsx
+4 -4
View File
@@ -206,8 +206,6 @@ export function MainContent() {
<path d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006ZM20 20.006H22V19.006C22 16.451 20.178 14.471 17.532 13.471C19.461 14.601 20 16.561 20 19.006V20.006Z" />
</svg>
</button>
<MemberListToggleButton />
<div className="w-[1px] h-5 bg-border-soft mx-1" />
<button
ref={searchButtonRef}
onClick={() => setSearchOpen(!searchOpen)}
@@ -218,6 +216,8 @@ export function MainContent() {
<path d="M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" />
</svg>
</button>
<div className="w-[1px] h-5 bg-border-soft mx-1" />
<MemberListToggleButton />
</div>
</div>
<MessageList channelId={currentChannelId} jumpToMessageId={jumpToMessageId} onJumpComplete={() => setJumpToMessageId(null)} />
@@ -347,8 +347,6 @@ export function MainContent() {
<path d="M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" />
</svg>
</button>
<MemberListToggleButton />
<div className="w-[1px] h-5 bg-border-soft mx-1" />
<button
ref={searchButtonRef}
onClick={() => setSearchOpen(!searchOpen)}
@@ -359,6 +357,8 @@ export function MainContent() {
<path d="M21.707 20.293l-5.395-5.395A7.457 7.457 0 0018 10.5 7.5 7.5 0 1010.5 18c1.575 0 3.027-.486 4.228-1.31l5.476 5.476a.997.997 0 001.414 0l.089-.089a1 1 0 000-1.414l.001-.37zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z" />
</svg>
</button>
<div className="w-[1px] h-5 bg-border-soft mx-1" />
<MemberListToggleButton />
</div>
</div>
<MessageList channelId={currentChannelId} jumpToMessageId={jumpToMessageId} onJumpComplete={() => setJumpToMessageId(null)} />