style(sidebar): align /sidebar screen with Flutter original
Match the Dart lib/ui/sidebar/sidebar_screen.dart + profile_view.dart
exactly:
- White inner shell with 24px padding
- Back button row (arrow icon + "Back" text, no "Profile" header)
- Single "Other" section with one "Log out" row
- Drop profile card, Account/Data/Session sections, and Sign-in CTA
Match Flutter row visuals in the shared SettingsSection:
- Gray (#f5f5f5) rounded row pill on a white card
- 20px chevron, 1px rgba(61,49,74,0.5) divider
- Destructive color #ff6b6b, 14px/600 black section title
Add tokens: --color-settings-card-background, --color-settings-row-background,
--color-settings-divider, --color-chevron-icon, --color-destructive.
Wire the BlocConsumer listener equivalent: on currentUser transitioning to
null, dispatch ChatAuthStatusChanged + AuthReset and router.replace("/chat").
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,159 +1,49 @@
|
||||
.shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--color-page-background, #ffffff);
|
||||
color: #000;
|
||||
min-height: 100dvh;
|
||||
background: var(--color-sidebar-background, #fafafa);
|
||||
color: var(--color-text-primary, #111);
|
||||
padding: var(--spacing-xxl, 24px);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
.backRow {
|
||||
padding: var(--spacing-md, 12px);
|
||||
}
|
||||
|
||||
.backLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3, 12px);
|
||||
padding: var(--spacing-4, 16px);
|
||||
border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.08));
|
||||
background: var(--color-surface, #fff);
|
||||
}
|
||||
|
||||
.backButton {
|
||||
font-size: 20px;
|
||||
gap: var(--spacing-xs, 4px);
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
}
|
||||
|
||||
.backButton:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-lg, 18px);
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
padding: var(--spacing-4, 16px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-5, 20px);
|
||||
}
|
||||
|
||||
.profileCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3, 12px);
|
||||
background: var(--color-surface, #fff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
padding: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-accent, #4f46e5);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatarInitial {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.userInfo {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.userInfo h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base, 16px);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.userInfo p {
|
||||
margin: 4px 0 0;
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
color: var(--color-text-secondary, #666);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signInButton {
|
||||
flex-shrink: 0;
|
||||
background: var(--color-accent, #4f46e5);
|
||||
color: #fff;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-4, 16px);
|
||||
}
|
||||
|
||||
.section {
|
||||
background: var(--color-surface, #fff);
|
||||
border-radius: var(--radius-lg, 12px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0;
|
||||
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
||||
font-size: var(--font-size-xs, 11px);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary, #666);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.sectionList {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sectionList li + li {
|
||||
border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.settingsItem,
|
||||
.dangerItem {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
font-size: var(--font-size-lg, 16px);
|
||||
font-weight: 400;
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
|
||||
font-size: var(--font-size-base, 14px);
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settingsItem:hover,
|
||||
.dangerItem:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
.backLink:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dangerItem {
|
||||
color: var(--color-danger, #dc2626);
|
||||
.backIcon {
|
||||
color: #000;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.backText {
|
||||
color: #000;
|
||||
font-size: var(--font-size-lg, 16px);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.settingsArea {
|
||||
padding: 0 var(--spacing-md, 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-lg, 16px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user