adminxd/bonch-md-client
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Complete massive UI rework and API integration

Browse Source 
- Implemented full Material Design 3 adaptive navigation system
- Added HCT-based Dynamic Color system with contrast level 0.5
- Implemented M3 Filled Text Fields with advanced state layers and validation
- Added functional pages: Profile, Messages, Schedule, Grades, Debts
- Enhanced sidebar with user profile header and university logo
- Polished layouts, groupings, and spacings as per specification

Refs #3
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
antigravity-xd
2026-04-11 01:32:39 +03:00
parent 05f9c3198c
commit 47e69be29f
14 changed files with 661 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/styles/globals.css
View File

@@ -21,6 +21,10 @@
--nav-rail-width: 80px;
--nav-rail-expanded-width: 280px;
--nav-bar-height: 80px;
/* M3 Easings */
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.0);
--md-sys-motion-duration-medium: 200ms;
}
:root.dark {
@@ -120,20 +124,11 @@ body {
color: var(--md-sys-color-on-primary);
}
.m3-button-filled:hover {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.m3-button-tonal {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
.m3-button-outlined {
border: 1px solid var(--md-sys-color-outline);
color: var(--md-sys-color-primary);
}
.m3-card {
background-color: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface-variant);
@@ -158,7 +153,7 @@ body {
cursor: pointer;
position: relative;
overflow: hidden;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.2s var(--md-sys-motion-easing-emphasized);
}
.m3-fab:hover {
@@ -171,24 +166,9 @@ body {
gap: 12px;
}
.m3-fab-icon {
display: flex;
align-items: center;
justify-content: center;
}
.m3-fab-label {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1px;
}
.m3-fab-state-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: 0; left: 0; right: 0; bottom: 0;
background-color: var(--md-sys-color-on-primary-container);
opacity: 0;
transition: opacity 0.2s;
@@ -198,13 +178,14 @@ body {
opacity: 0.08;
}
/* M3 Filled Text Field */
/* M3 Filled Text Field (Section 2.1 & 2.2) */
.m3-text-field-container {
display: flex;
flex-direction: column;
margin-bottom: 16px;
width: 100%;
position: relative;
}
.m3-text-field-field {
@@ -233,7 +214,7 @@ body {
top: 16px;
color: var(--md-sys-color-on-surface-variant);
font-size: 16px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
pointer-events: none;
z-index: 2;
}
@@ -245,13 +226,17 @@ body {
color: var(--md-sys-color-primary);
}
.m3-text-field-container.error .m3-text-field-label {
color: var(--md-sys-color-error);
}
.m3-text-field-active-indicator {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-outline);
transition: height 0.2s, background-color 0.2s;
}
@@ -260,12 +245,14 @@ body {
background-color: var(--md-sys-color-primary);
}
.m3-text-field-container.error .m3-text-field-active-indicator {
background-color: var(--md-sys-color-error);
height: 2px;
}
.m3-text-field-state-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
top: 0; left: 0; right: 0; bottom: 0;
background-color: var(--md-sys-color-on-surface);
opacity: 0;
transition: opacity 0.2s;
@@ -276,22 +263,26 @@ body {
opacity: 0.08;
}
.m3-text-field-container.error .m3-text-field-label,
.m3-text-field-container.error .m3-text-field-active-indicator {
color: var(--md-sys-color-error);
background-color: var(--md-sys-color-error);
}
.m3-text-field-supporting-text {
font-size: 12px;
padding: 4px 16px 0;
color: var(--md-sys-color-on-surface-variant);
min-height: 16px;
}
.m3-text-field-container.error .m3-text-field-supporting-text {
color: var(--md-sys-color-error);
}
.m3-text-field-container.disabled {
opacity: 0.38;
}
.m3-text-field-container.disabled .m3-text-field-active-indicator {
border-bottom: 1px dotted var(--md-sys-color-on-surface);
background: transparent;
}
/* Layout */
.app-container {
@@ -302,6 +293,7 @@ body {
.main-content {
flex: 1;
padding: 16px;
transition: margin-left 0.3s var(--md-sys-motion-easing-emphasized);
}
/* Navigation Bar (Mobile) */
@@ -325,19 +317,6 @@ body {
transform: translateY(100%);
}
.mobile-fab-container {
position: fixed;
right: 16px;
bottom: calc(var(--nav-bar-height) + 16px);
z-index: 99;
transition: transform 0.2s ease-in-out, opacity 0.2s;
}
.mobile-fab-container.hidden {
transform: translateY(calc(var(--nav-bar-height) + 16px));
opacity: 0;
}
@media (min-width: 600px) {
.navigation-bar { display: none; }
.main-content { margin-left: var(--nav-rail-width); }
@@ -365,7 +344,7 @@ body {
padding: 16px 0;
border-right: 1px solid var(--md-sys-color-outline-variant);
z-index: 100;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: width 0.3s var(--md-sys-motion-easing-emphasized);
overflow-x: hidden;
}
@@ -394,6 +373,9 @@ body {
padding: 16px;
gap: 12px;
margin-bottom: 8px;
background-color: var(--md-sys-color-surface-variant);
margin: 0 12px 16px;
border-radius: 16px;
}
.user-avatar {