FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-23 03:25:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Redesign the UI

Browse Source
This commit is contained in:
denis0001-dev
2025-11-07 11:44:27 +03:00
Unverified
parent 4f79e03fd0
commit 59472ea1d7
21 changed files with 1306 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/css/_components.scss
-75
View File
@@ -1,26 +1,6 @@
@use "material" as *;
@use "sass:color";
.text-center {
text-align: center;
}
.alert {
padding: 0.8rem 1rem;
border-radius: 6px;
margin-bottom: 1rem;
&.alert-success {
background-color: #C6F6D5;
color: #22543D;
}
&.alert-danger {
background-color: #FED7D7;
color: #742A2A;
}
}
.link {
color: $color-dark-primary;
font-weight: 600;
@@ -30,27 +10,6 @@ button, input {
font: inherit;
}
// Dialog content styles
.dialog-content {
h3 {
margin: 0 0 1rem 0;
color: $color-dark-on-surface;
font-size: 1.2rem;
font-weight: 600;
}
mdui-text-field {
width: 100%;
}
.dialog-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
margin-top: 1rem;
}
}
.rich-text-area {
width: 100%;
resize: none;
@@ -83,33 +42,6 @@ button, input {
}
}
// Verified badge styles
.verified-badge {
display: inline-flex;
align-items: center;
color: $color-dark-primary;
vertical-align: middle;
user-select: none;
&.small {
font-size: 14px;
width: 14px;
height: 14px;
}
&.medium {
font-size: 18px;
width: 18px;
height: 18px;
}
&.large {
font-size: 24px;
width: 24px;
height: 24px;
}
}
// Status badge styles (unified for verified and warning)
.status-badge {
display: inline-flex;
@@ -143,13 +75,6 @@ button, input {
}
}
// Profile dialog specific styles
.username-with-badge {
display: flex;
align-items: center;
gap: 8px;
}
.similarity-warning {
display: flex;
align-items: center;
frontend/src/css/_material.scss
+44 -43
View File
@@ -1,55 +1,56 @@
@use "sass:color";
// Dark
$color-dark-primary: rgb(145 206 244);
$color-dark-surface-tint: rgb(145 206 244);
$color-dark-on-primary: rgb(0 52 74);
$color-dark-primary-container: rgb(0 76 106);
$color-dark-on-primary-container: rgb(197 231 255);
$color-dark-secondary: rgb(182 201 216);
$color-dark-on-secondary: rgb(32 51 62);
$color-dark-secondary-container: rgb(55 73 85);
$color-dark-on-secondary-container: rgb(210 229 244);
$color-dark-tertiary: rgb(203 193 233);
$color-dark-on-tertiary: rgb(51 44 76);
$color-dark-tertiary-container: rgb(73 66 99);
$color-dark-on-tertiary-container: rgb(231 222 255);
// Generated from base color #9333EA (rgb(147, 51, 234))
$color-dark-primary: rgb(219 185 249);
$color-dark-surface-tint: rgb(219 185 249);
$color-dark-on-primary: rgb(62 36 88);
$color-dark-primary-container: rgb(86 59 113);
$color-dark-on-primary-container: rgb(240 219 255);
$color-dark-secondary: rgb(208 193 218);
$color-dark-on-secondary: rgb(54 44 63);
$color-dark-secondary-container: rgb(77 67 86);
$color-dark-on-secondary-container: rgb(237 221 246);
$color-dark-tertiary: rgb(243 183 190);
$color-dark-on-tertiary: rgb(75 37 43);
$color-dark-tertiary-container: rgb(101 58 64);
$color-dark-on-tertiary-container: rgb(255 217 221);
$color-dark-error: rgb(255 180 171);
$color-dark-on-error: rgb(105 0 5);
$color-dark-error-container: rgb(147 0 10);
$color-dark-on-error-container: rgb(255 218 214);
$color-dark-background: rgb(15 20 23);
$color-dark-on-background: rgb(223 227 231);
$color-dark-surface: rgb(15 20 23);
$color-dark-on-surface: rgb(223 227 231);
$color-dark-surface-variant: rgb(65 72 77);
$color-dark-on-surface-variant: rgb(193 199 206);
$color-dark-outline: rgb(139 146 151);
$color-dark-outline-variant: rgb(65 72 77);
$color-dark-background: rgb(21 18 24);
$color-dark-on-background: rgb(232 224 232);
$color-dark-surface: rgb(21 18 24);
$color-dark-on-surface: rgb(232 224 232);
$color-dark-surface-variant: rgb(74 69 78);
$color-dark-on-surface-variant: rgb(204 196 206);
$color-dark-outline: rgb(150 142 152);
$color-dark-outline-variant: rgb(74 69 78);
$color-dark-shadow: rgb(0 0 0);
$color-dark-scrim: rgb(0 0 0);
$color-dark-inverse-surface: rgb(223 227 231);
$color-dark-inverse-on-surface: rgb(44 49 52);
$color-dark-inverse-primary: rgb(31 101 134);
$color-dark-primary-fixed: rgb(197 231 255);
$color-dark-on-primary-fixed: rgb(0 30 45);
$color-dark-primary-fixed-dim: rgb(145 206 244);
$color-dark-on-primary-fixed-variant: rgb(0 76 106);
$color-dark-secondary-fixed: rgb(210 229 244);
$color-dark-on-secondary-fixed: rgb(10 30 40);
$color-dark-secondary-fixed-dim: rgb(182 201 216);
$color-dark-on-secondary-fixed-variant: rgb(55 73 85);
$color-dark-tertiary-fixed: rgb(231 222 255);
$color-dark-on-tertiary-fixed: rgb(29 23 53);
$color-dark-tertiary-fixed-dim: rgb(203 193 233);
$color-dark-on-tertiary-fixed-variant: rgb(73 66 99);
$color-dark-surface-dim: rgb(15 20 23);
$color-dark-surface-bright: rgb(53 58 61);
$color-dark-surface-container-lowest: rgb(10 15 18);
$color-dark-surface-container-low: rgb(24 28 31);
$color-dark-surface-container: rgb(28 32 36);
$color-dark-surface-container-high: rgb(38 43 46);
$color-dark-surface-container-highest: rgb(49 53 57);
$color-dark-inverse-surface: rgb(232 224 232);
$color-dark-inverse-on-surface: rgb(51 47 53);
$color-dark-inverse-primary: rgb(111 82 138);
$color-dark-primary-fixed: rgb(240 219 255);
$color-dark-on-primary-fixed: rgb(40 13 66);
$color-dark-primary-fixed-dim: rgb(219 185 249);
$color-dark-on-primary-fixed-variant: rgb(86 59 113);
$color-dark-secondary-fixed: rgb(237 221 246);
$color-dark-on-secondary-fixed: rgb(33 24 41);
$color-dark-secondary-fixed-dim: rgb(208 193 218);
$color-dark-on-secondary-fixed-variant: rgb(77 67 86);
$color-dark-tertiary-fixed: rgb(255 217 221);
$color-dark-on-tertiary-fixed: rgb(50 16 22);
$color-dark-tertiary-fixed-dim: rgb(243 183 190);
$color-dark-on-tertiary-fixed-variant: rgb(101 58 64);
$color-dark-surface-dim: rgb(21 18 24);
$color-dark-surface-bright: rgb(60 56 62);
$color-dark-surface-container-lowest: rgb(16 13 18);
$color-dark-surface-container-low: rgb(30 26 32);
$color-dark-surface-container: rgb(34 30 36);
$color-dark-surface-container-high: rgb(44 41 46);
$color-dark-surface-container-highest: rgb(55 51 57);
$color-dark-surface-primary-container-lightened: color.adjust($color-dark-primary-container, $lightness: 5%);
$color-dark-surface-container-lightened: color.adjust($color-dark-surface-container, $lightness: 5%);