feat(profile)!: replace sidebar and add avatar navigation
Rename the global Sidebar route, UI, assets, analytics, and payment return context to Profile. Add accessible message-avatar navigation and preserve the source character across auth and logout flows. BREAKING CHANGE: /sidebar has been removed; use /profile instead.
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
.shell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--page-section-gap, 14px);
|
||||
overflow: hidden;
|
||||
min-height: var(--app-viewport-height, 100dvh);
|
||||
box-sizing: border-box;
|
||||
padding:
|
||||
var(--app-safe-top, 0px)
|
||||
calc(var(--page-padding-x, 28px) + var(--app-safe-right, 0px))
|
||||
calc(var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px))
|
||||
calc(var(--page-padding-x, 28px) + var(--app-safe-left, 0px));
|
||||
background:
|
||||
radial-gradient(circle at 18% 6%, rgba(255, 206, 160, 0.22), transparent 28%),
|
||||
radial-gradient(circle at 92% 0%, rgba(246, 87, 160, 0.22), transparent 30%),
|
||||
linear-gradient(180deg, #fcf3f4 0%, #fffafa 44%, #ffffff 100%);
|
||||
color: #191316;
|
||||
}
|
||||
|
||||
.bgOrbOne,
|
||||
.bgOrbTwo {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
border-radius: 999px;
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.bgOrbOne {
|
||||
top: clamp(72px, 15.926vw, 86px);
|
||||
right: clamp(-72px, -13.333vw, -58px);
|
||||
width: clamp(140px, 31.111vw, 168px);
|
||||
height: clamp(140px, 31.111vw, 168px);
|
||||
background: rgba(246, 87, 160, 0.11);
|
||||
}
|
||||
|
||||
.bgOrbTwo {
|
||||
bottom: clamp(46px, 10.37vw, 56px);
|
||||
left: clamp(-88px, -16.296vw, -70px);
|
||||
width: clamp(148px, 33.333vw, 180px);
|
||||
height: clamp(148px, 33.333vw, 180px);
|
||||
background: rgba(248, 184, 62, 0.1);
|
||||
}
|
||||
|
||||
.topBar,
|
||||
.userSlot,
|
||||
.cardSlot,
|
||||
.settingsSlot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.topBar {
|
||||
margin: var(--page-padding-y, 18px) 0 -2px;
|
||||
}
|
||||
|
||||
.userSlot {
|
||||
padding: var(--responsive-card-padding, 18px);
|
||||
border: 1px solid rgba(25, 19, 22, 0.06);
|
||||
border-radius: var(--responsive-card-radius, 26px);
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
box-shadow: 0 16px 40px rgba(55, 36, 44, 0.08);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.cardSlot {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settingsSlot {
|
||||
margin-top: 2px;
|
||||
padding: 2px 0 0;
|
||||
}
|
||||
|
||||
.settingsLabel {
|
||||
margin: 0 0 clamp(7px, 1.667vw, 9px);
|
||||
padding: 0 clamp(3px, 0.741vw, 4px);
|
||||
color: #817076;
|
||||
font-size: var(--responsive-caption, 13px);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.settingsActions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(10px, 2.222vw, 12px);
|
||||
}
|
||||
|
||||
.logoutCard {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md, 12px);
|
||||
box-sizing: border-box;
|
||||
padding: var(--responsive-card-padding, 16px);
|
||||
border: 1px solid rgba(25, 19, 22, 0.06);
|
||||
border-radius: var(--responsive-card-radius-sm, 22px);
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: #171114;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
box-shadow: 0 12px 30px rgba(55, 36, 44, 0.06);
|
||||
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
|
||||
}
|
||||
|
||||
.installCard {
|
||||
border-color: rgba(246, 87, 160, 0.14);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.feedbackCard {
|
||||
border-color: rgba(208, 150, 91, 0.16);
|
||||
background: rgba(255, 253, 250, 0.92);
|
||||
}
|
||||
|
||||
.logoutCard:hover {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 16px 34px rgba(55, 36, 44, 0.1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.logoutCard:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.logoutCard:focus-visible {
|
||||
outline: 2px solid #f657a0;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.logoutIcon {
|
||||
display: inline-flex;
|
||||
width: var(--responsive-icon-button-size, 40px);
|
||||
height: var(--responsive-icon-button-size, 40px);
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: clamp(13px, 2.778vw, 15px);
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
color: #ef4d64;
|
||||
}
|
||||
|
||||
.installIcon {
|
||||
background: rgba(246, 87, 160, 0.12);
|
||||
color: #f657a0;
|
||||
}
|
||||
|
||||
.feedbackIcon {
|
||||
background: rgba(208, 150, 91, 0.13);
|
||||
color: #b8783f;
|
||||
}
|
||||
|
||||
.logoutText {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.logoutTitle {
|
||||
color: #ef4d64;
|
||||
font-size: var(--responsive-body, 16px);
|
||||
font-weight: 760;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.installTitle {
|
||||
color: #171114;
|
||||
font-size: var(--responsive-body, 16px);
|
||||
font-weight: 760;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.feedbackTitle {
|
||||
color: #171114;
|
||||
font-size: var(--responsive-body, 16px);
|
||||
font-weight: 760;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.logoutSubtitle {
|
||||
color: #817076;
|
||||
font-size: var(--responsive-caption, 13px);
|
||||
font-weight: 620;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.installSubtitle {
|
||||
color: #817076;
|
||||
font-size: var(--responsive-caption, 13px);
|
||||
font-weight: 620;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.revealOne,
|
||||
.revealTwo,
|
||||
.revealThree {
|
||||
animation: revealUp 0.42s ease both;
|
||||
}
|
||||
|
||||
.revealOne {
|
||||
animation-delay: 40ms;
|
||||
}
|
||||
|
||||
.revealTwo {
|
||||
animation-delay: 95ms;
|
||||
}
|
||||
|
||||
.revealThree {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
|
||||
@keyframes revealUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.shell {
|
||||
gap: var(--page-section-gap, 12px);
|
||||
padding-right: calc(var(--page-padding-x, 20px) + var(--app-safe-right, 0px));
|
||||
padding-left: calc(var(--page-padding-x, 20px) + var(--app-safe-left, 0px));
|
||||
}
|
||||
|
||||
.userSlot {
|
||||
padding: var(--responsive-card-padding, 16px);
|
||||
border-radius: var(--responsive-card-radius-sm, 22px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user