feat(ui): standardize design system, modals, sidebar, and form inputs

- Implement unified design system tokens, 10px radius, and IRANSans typography
- Modernize sidebar with Gemini-style collapsed expander, square 1:1 items, and elevated profile flyout
- Standardize all modal dialogs with 16px padding, fixed header/footer, 16px medium title, and sticky bottom actions
- Refactor DealFormView and CustomFieldsSection with standard UiField, UiInput, and UiSelect components
- Add draggable bottom-left QuickCreate floating action button
This commit is contained in:
s.esmaeili
2026-09-12 01:33:07 +03:30
parent 9a991fc1f1
commit 1ae87c97b7
87 changed files with 7844 additions and 5718 deletions
@@ -296,8 +296,8 @@ onBeforeUnmount(() => {
.head h2 {
margin: 0;
text-align: center;
font-size: 1.05rem;
font-weight: 800;
font-size: 16px;
font-weight: 500;
color: #0f172a;
}
@@ -332,7 +332,7 @@ onBeforeUnmount(() => {
align-items: flex-start;
padding: 0.9rem 0.95rem;
border: 1px solid #e2e8f0;
border-radius: 18px;
border-radius: var(--radius);
background: #fff;
}
@@ -370,7 +370,7 @@ onBeforeUnmount(() => {
.ctx-copy h3 {
margin: 0.1rem 0 0;
font-size: 0.98rem;
font-weight: 800;
font-weight: 600;
line-height: 1.55;
}
@@ -404,7 +404,7 @@ onBeforeUnmount(() => {
.editor {
border: 1px solid #e2e8f0;
border-radius: 16px;
border-radius: var(--radius);
background: #fff;
min-height: 11.5rem;
display: flex;
@@ -448,13 +448,13 @@ onBeforeUnmount(() => {
width: 36px;
height: 36px;
border: 1px solid #e2e8f0;
border-radius: 10px;
border-radius: var(--radius);
background: #fff;
color: #0f766e;
display: grid;
place-items: center;
font: inherit;
font-weight: 800;
font-weight: 600;
cursor: pointer;
}
@@ -473,7 +473,7 @@ onBeforeUnmount(() => {
font-size: 0.74rem;
font-weight: 700;
padding: 0.42rem 0.65rem;
border-radius: 10px;
border-radius: var(--radius);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
@@ -497,7 +497,7 @@ onBeforeUnmount(() => {
max-height: 12rem;
overflow: auto;
background: #fff;
border-radius: 12px;
border-radius: var(--radius);
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
z-index: 2;
}
@@ -510,7 +510,7 @@ onBeforeUnmount(() => {
text-align: start;
font: inherit;
padding: 0.55rem 0.65rem;
border-radius: 8px;
border-radius: var(--radius);
color: #0f172a;
cursor: pointer;
}
@@ -536,7 +536,7 @@ onBeforeUnmount(() => {
align-items: flex-start;
gap: 0.5rem;
padding: 0.72rem 0.8rem;
border-radius: 12px;
border-radius: var(--radius);
background: #ecfdf5;
color: #0f766e;
font-size: 0.8rem;
@@ -559,7 +559,7 @@ onBeforeUnmount(() => {
height: var(--control-h);
border-radius: var(--radius);
font: inherit;
font-weight: 800;
font-weight: 600;
cursor: pointer;
}
@@ -600,7 +600,7 @@ onBeforeUnmount(() => {
position: relative;
max-width: 480px;
height: min(92dvh, 860px);
border-radius: 22px;
border-radius: var(--radius, 10px);
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}
}
@@ -274,8 +274,8 @@ onBeforeUnmount(() => {
}
.titles h2 {
font-size: 1.02rem;
font-weight: 800;
font-size: 16px;
font-weight: 500;
color: #0f172a;
}
@@ -319,7 +319,7 @@ onBeforeUnmount(() => {
min-height: 72px;
padding: 0.7rem 0.9rem;
border: 1px solid #e8eef3;
border-radius: 16px;
border-radius: var(--radius);
background: #fff;
font: inherit;
text-align: start;
@@ -340,7 +340,7 @@ onBeforeUnmount(() => {
.label,
.copy strong {
font-size: 0.95rem;
font-weight: 800;
font-weight: 600;
color: #0f172a;
}
@@ -365,7 +365,7 @@ onBeforeUnmount(() => {
.ico-box {
width: 40px;
height: 40px;
border-radius: 10px;
border-radius: var(--radius);
background: #e6f7f4;
color: #0d9488;
display: grid;
@@ -375,13 +375,13 @@ onBeforeUnmount(() => {
.when {
color: #0d9488;
font-size: 0.74rem;
font-weight: 800;
font-weight: 600;
white-space: nowrap;
}
.custom-box {
border: 1px solid #e8eef3;
border-radius: 16px;
border-radius: var(--radius);
padding: 0.85rem 0.9rem;
display: grid;
gap: 0.55rem;
@@ -419,7 +419,7 @@ onBeforeUnmount(() => {
align-items: flex-start;
gap: 0.55rem;
padding: 0.85rem 0.9rem;
border-radius: 14px;
border-radius: var(--radius);
background: #f8fafc;
color: #475569;
font-size: 0.8rem;
@@ -452,7 +452,7 @@ onBeforeUnmount(() => {
position: relative;
max-width: 480px;
height: min(92dvh, 860px);
border-radius: 22px;
border-radius: var(--radius, 10px);
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}
}