Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): refresh Montact brand and sidebar chrome

Browse Source 
Ship the new logo assets, set primary to #10897d, and polish sidebar/home-hero UX around roles, org switcher, and the ask bar.
This commit is contained in:
Mahdi
2026-11-05 17:10:03 +03:30
parent 34d3689448
commit 4979aa8b75
11 changed files with 511 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/dashboard/HomeHero.vue
+54 -68
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { SearchOutlined, SendOutlined } from '@/icons/ant-bridge';
import { SendOutlined } from '@/icons/ant-bridge';
import {
Button as AButton,
Input as AInput,
@@ -57,17 +57,15 @@ const statusMessage = computed(() => {
<div class="home-hero__row">
<div class="home-hero__greet">
<div class="home-hero__identity" :aria-label="firstName">
<div class="home-hero__frame">
<img
v-if="hasCustomPhoto"
:src="auth.avatarSrc"
:alt="firstName"
class="home-hero__photo"
/>
<span v-else class="home-hero__monogram" aria-hidden="true">
{{ userInitial }}
</span>
</div>
<img
v-if="hasCustomPhoto"
:src="auth.avatarSrc"
:alt="firstName"
class="home-hero__photo"
/>
<span v-else class="home-hero__monogram" aria-hidden="true">
{{ userInitial }}
</span>
<span class="home-hero__online" title="آنلاین" aria-hidden="true" />
</div>
<div class="home-hero__copy">
@@ -82,9 +80,6 @@ const statusMessage = computed(() => {
</div>
<div class="home-hero__ask">
<span class="home-hero__ask-ico" aria-hidden="true">
<SearchOutlined />
</span>
<a-input
id="home-hero-ask"
:value="askQuery"
@@ -99,13 +94,16 @@ const statusMessage = computed(() => {
<a-button
type="primary"
shape="round"
class="home-hero__ask-btn"
:disabled="asking"
:loading="asking"
aria-label="ارسال"
@click="emit('ask')"
>
<template #icon><SendOutlined /></template>
<span class="home-hero__ask-label">بپرس</span>
<span class="home-hero__ask-btn-inner">
<SendOutlined />
<span class="home-hero__ask-label">بپرس</span>
</span>
</a-button>
</div>
</div>
@@ -143,7 +141,7 @@ const statusMessage = computed(() => {
box-sizing: border-box;
overflow: hidden;
border-radius: 1rem;
border: 1px solid rgb(110 231 183 / 0.5);
border: 1px solid rgb(16 137 125 / 0.28);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
@@ -163,10 +161,10 @@ const statusMessage = computed(() => {
background:
linear-gradient(
115deg,
#ecfdf5 0%,
#d1fae5 28%,
#ccfbf1 55%,
#f0fdfa 78%,
#eef8f7 0%,
#d0ebe8 28%,
#c5e6e2 55%,
#eef8f7 78%,
#ffffff 100%
);
}
@@ -174,14 +172,14 @@ const statusMessage = computed(() => {
.home-hero__pattern {
opacity: 0.45;
background-image:
radial-gradient(circle at 1px 1px, rgba(16, 185, 129, 0.28) 1px, transparent 0),
radial-gradient(circle at 1px 1px, rgba(16, 137, 125, 0.28) 1px, transparent 0),
linear-gradient(
135deg,
rgba(20, 184, 166, 0.08) 25%,
rgba(16, 137, 125, 0.08) 25%,
transparent 25%,
transparent 50%,
rgba(20, 184, 166, 0.08) 50%,
rgba(20, 184, 166, 0.08) 75%,
rgba(16, 137, 125, 0.08) 50%,
rgba(16, 137, 125, 0.08) 75%,
transparent 75%,
transparent
);
@@ -201,7 +199,7 @@ const statusMessage = computed(() => {
top: -6rem;
width: 13rem;
height: 13rem;
background: rgb(52 211 153 / 0.2);
background: rgb(22 193 168 / 0.22);
}
.home-hero__orb--end {
@@ -209,7 +207,7 @@ const statusMessage = computed(() => {
bottom: -5rem;
width: 12rem;
height: 12rem;
background: rgb(20 184 166 / 0.15);
background: rgb(16 137 125 / 0.16);
}
.home-hero__row {
@@ -237,19 +235,8 @@ const statusMessage = computed(() => {
.home-hero__identity {
position: relative;
flex-shrink: 0;
width: 3.25rem;
height: 3.25rem;
}
.home-hero__frame {
width: 100%;
height: 100%;
border-radius: 1rem;
padding: 2px;
background: linear-gradient(145deg, #34d399 0%, #0d9488 48%, #059669 100%);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.85),
0 8px 18px -10px rgba(4, 120, 87, 0.55);
width: 3rem;
height: 3rem;
}
.home-hero__photo,
@@ -257,33 +244,30 @@ const statusMessage = computed(() => {
display: flex;
width: 100%;
height: 100%;
border-radius: calc(1rem - 2px);
border-radius: 0.85rem;
object-fit: cover;
}
.home-hero__monogram {
align-items: center;
justify-content: center;
font-size: 1.15rem;
font-size: 1.1rem;
font-weight: 800;
color: #ecfdf5;
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 45%),
linear-gradient(160deg, #10b981 0%, #0f766e 100%);
color: #eef8f7;
background: linear-gradient(160deg, #16c1a8 0%, #10897d 100%);
letter-spacing: -0.02em;
user-select: none;
}
.home-hero__online {
position: absolute;
inset-inline-start: -1px;
bottom: -1px;
width: 0.85rem;
height: 0.85rem;
inset-inline-start: 0;
bottom: 0;
width: 0.7rem;
height: 0.7rem;
border-radius: 999px;
background: #10b981;
background: #10897d;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
}
.home-hero__copy {
@@ -340,22 +324,10 @@ const statusMessage = computed(() => {
}
.home-hero__ask:focus-within {
border-color: #6ee7b7;
border-color: #16c1a8;
box-shadow:
0 0 0 2px rgb(167 243 208 / 0.7),
0 4px 12px rgb(6 78 59 / 0.05);
}
.home-hero__ask-ico {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
border-radius: 0.75rem;
background: #ecfdf5;
color: #059669;
0 0 0 2px rgb(16 137 125 / 0.18),
0 4px 12px rgb(10 92 84 / 0.06);
}
.home-hero__ask-input {
@@ -377,6 +349,20 @@ const statusMessage = computed(() => {
font-family: ui-sans-serif, system-ui, sans-serif;
}
.home-hero__ask-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.home-hero__ask-btn-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
line-height: 1;
}
.home-hero__ask-label {
display: none;
}