@rtsee/ngx 0.0.112 → 0.0.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,302 +1,111 @@
1
1
  // ═══════════════════════════════════════════════════════════════════
2
- // MESSENGER — Profile
2
+ // MESSENGER — Profile (Aligned with Chat Info)
3
3
  // ═══════════════════════════════════════════════════════════════════
4
4
  @import "./variables";
5
+ @import "./create-chat";
5
6
 
6
7
  .rts-messenger-profile {
7
- padding: $rtsu-space-sm;
8
- background-color: var(--rts-bg-primary);
8
+ padding: $rtsu-space-md;
9
9
  color: var(--rts-text-primary);
10
10
  font-family: $rtsu-font-family;
11
11
  min-height: 100%;
12
+ overflow-y: auto;
13
+ max-height: calc(100vh - #{$rts-messenger-header-height});
14
+ -webkit-overflow-scrolling: touch;
12
15
 
13
- /* ── GLASS CARD ───────────────────────────────────────────── */
14
16
 
15
- .rts-messenger-profile-glass-card {
16
- background: linear-gradient(
17
- 135deg,
18
- var(--rts-card-bg-start) 0%,
19
- var(--rts-card-bg-end) 100%
20
- );
21
- border: 1px solid var(--rts-border-dim);
22
- border-radius: $rtsu-radius-lg;
23
- backdrop-filter: $rtsu-glass-blur;
24
- padding: $rtsu-space-md;
25
- margin-bottom: $rtsu-space-md;
26
- transition: transform $rtsu-transition-base,
27
- border-color $rtsu-transition-base,
28
- box-shadow $rtsu-transition-base;
29
- animation: rts-fade-up 0.6s ease-out both;
30
-
31
- &:hover {
32
- border-color: rgba(108, 92, 231, 0.2);
33
- box-shadow: 0 6px 24px rgba(108, 92, 231, 0.08);
34
- }
35
- }
36
-
37
- /* ── PROFILE INFO ─────────────────────────────────────────── */
38
-
39
- .rts-messenger-profile-info {
40
- .rts-messenger-profile-info-name {
41
- margin: 0 0 $rtsu-space-md;
42
- font-size: $rtsu-font-size-xl;
43
- font-weight: $rtsu-font-weight-bold;
44
- color: var(--rts-text-primary);
45
- white-space: nowrap;
46
- overflow: hidden;
47
- text-overflow: ellipsis;
48
- letter-spacing: $rtsu-tracking-tight;
49
- line-height: $rtsu-line-height-tight;
50
- }
51
17
 
52
- .rts-messenger-profile-info-language {
53
- display: flex;
54
- flex-direction: row;
55
- align-items: center;
56
- justify-content: space-between;
57
- padding: $rtsu-space-sm 0;
18
+ /* ── SECTIONS & FIELDS ────────────────────────────────────── */
58
19
 
59
- .rts-messenger-profile-info-language-label {
60
- font-size: $rtsu-font-size-base;
61
- font-weight: $rtsu-font-weight-medium;
62
- color: var(--rts-text-secondary);
63
- margin: 0;
64
- }
65
- }
20
+ .rts-profile-section {
21
+ padding: $rtsu-space-xs 0;
66
22
  }
67
23
 
68
- /* ── EDIT PROFILE / MANAGE PLAN BUTTONS ───────────────────── */
24
+ .rts-profile-field-row {
25
+ display: flex;
26
+ flex-direction: row;
27
+ align-items: center;
28
+ justify-content: space-between;
29
+ gap: $rtsu-space-md;
69
30
 
70
- .rts-messenger-profile-edit-btn {
71
- padding-top: $rtsu-space-sm;
31
+ .rts-profile-field-label {
32
+ font-size: $rtsu-font-size-sm;
33
+ font-weight: $rtsu-font-weight-medium;
34
+ color: var(--rts-text-secondary);
35
+ margin: 0;
36
+ }
72
37
  }
73
38
 
74
- .rts-messenger-profile-edit-btn,
75
- .rts-messenger-profile-manage-plan-btn {
76
- margin-top: $rtsu-space-sm;
77
- text-align: right;
39
+ .rts-profile-language-select {
40
+ min-width: 140px;
78
41
 
79
- ::ng-deep .p-button {
80
- width: 100%;
81
- background: transparent;
82
- border: 1px solid var(--rts-border-bright);
42
+ ::ng-deep .p-select {
43
+ background: var(--rts-bg-surface);
44
+ border: 1px solid var(--rts-border-med);
45
+ border-radius: $rtsu-radius-sm;
83
46
  color: var(--rts-text-primary);
84
- border-radius: $rtsu-radius-sm + 2px;
85
- font-weight: $rtsu-font-weight-semibold;
86
- font-size: 0.88rem;
87
- padding: 10px 20px;
88
- transition: background $rtsu-transition-fast,
89
- border-color $rtsu-transition-fast,
90
- transform $rtsu-transition-fast;
91
-
92
- &:hover {
93
- background: var(--rts-bg-surface-hover);
94
- border-color: rgba(108, 92, 231, 0.4);
95
- transform: translateY(-1px);
96
- }
97
47
 
98
- &:active {
99
- transform: translateY(0);
48
+ .p-select-label {
49
+ font-size: $rtsu-font-size-sm;
50
+ padding: 6px 12px;
100
51
  }
101
52
  }
102
53
  }
103
54
 
104
- /* ── PLAN STATUS ──────────────────────────────────────────── */
55
+ /* ── PLAN BADGE ───────────────────────────────────────────── */
105
56
 
106
- .rts-messenger-profile-plan-status {
57
+ .rts-profile-plan-badge {
58
+ display: inline-flex;
59
+ align-items: center;
60
+ gap: $rtsu-space-xs;
61
+ padding: 6px 12px;
62
+ background: rgba(16, 185, 129, 0.12);
63
+ border: 1px solid rgba(16, 185, 129, 0.25);
64
+ border-radius: $rtsu-radius-md;
65
+ color: #10b981;
66
+ font-size: $rtsu-font-size-sm;
67
+ font-weight: $rtsu-font-weight-semibold;
107
68
  margin-bottom: $rtsu-space-sm;
108
- }
109
-
110
- /* ── SUBSCRIBE BUTTON — PRIMARY CTA ───────────────────────── */
111
69
 
112
- .rts-messenger-profile-subscribe-btn {
113
- animation: rts-fade-up 0.7s ease-out both;
114
- animation-delay: 0.1s;
115
- text-align: right;
116
-
117
- ::ng-deep .p-button {
118
- width: 100%;
119
- background: linear-gradient(
120
- 135deg,
121
- $rtsu-accent-purple 0%,
122
- $rtsu-accent-purple-light 100%
123
- );
124
- border: none;
125
- color: #fff;
126
- border-radius: $rtsu-radius-md;
127
- font-weight: $rtsu-font-weight-bold;
128
- font-size: 1rem;
129
- padding: 14px 28px;
130
- letter-spacing: $rtsu-tracking-wide;
131
- box-shadow: $rtsu-shadow-accent-md;
132
- transition: transform $rtsu-transition-base,
133
- box-shadow $rtsu-transition-base;
134
- position: relative;
135
- overflow: hidden;
136
-
137
- &::before {
138
- content: '';
139
- position: absolute;
140
- inset: 0;
141
- background: linear-gradient(
142
- 105deg,
143
- transparent 40%,
144
- rgba(255, 255, 255, 0.15) 50%,
145
- transparent 60%
146
- );
147
- animation: rts-shimmer 3s ease-in-out infinite;
148
- }
149
-
150
- &:hover {
151
- transform: translateY(-2px);
152
- box-shadow: $rtsu-shadow-accent-lg;
153
- }
154
-
155
- &:active {
156
- transform: translateY(0);
157
- box-shadow: $rtsu-shadow-accent-sm;
158
- }
70
+ .material-icons-outlined {
71
+ font-size: 18px;
159
72
  }
160
73
  }
161
74
 
162
- /* ── CALL/VIDEO ACTIONS (other profile) ───────────────────── */
75
+ /* ── ANONYMOUS ALERT ──────────────────────────────────────── */
163
76
 
164
- .rts-messenger-profile-actions {
165
- list-style-type: none;
166
- padding-left: 0;
167
- margin: 0 0 $rtsu-space-md 0;
168
- gap: $rtsu-space-md;
77
+ .rts-profile-anon-box {
169
78
  display: flex;
170
- flex-direction: row;
171
- align-items: center;
172
- justify-content: center;
173
-
174
- .rts-messenger-profile-actions-item {
175
- ::ng-deep .p-button {
176
- background: rgba(255, 255, 255, 0.06);
177
- border: 1px solid var(--rts-border-med);
178
- color: var(--rts-accent-light, #a29bfe);
179
- border-radius: 50%;
180
- width: 52px;
181
- height: 52px;
182
- transition: background $rtsu-transition-fast,
183
- transform $rtsu-transition-fast,
184
- box-shadow $rtsu-transition-fast;
185
-
186
- &:hover {
187
- background: rgba(108, 92, 231, 0.15);
188
- transform: translateY(-2px);
189
- box-shadow: 0 4px 16px rgba(108, 92, 231, 0.2);
190
- }
191
-
192
- &:active {
193
- transform: translateY(0);
194
- }
195
- }
196
- }
197
- }
198
-
199
- /* ── LOGOUT BUTTON — DANGER GHOST ─────────────────────────── */
200
-
201
- .rts-messenger-profile-logout-btn {
202
- margin-top: $rtsu-space-sm;
203
- animation: rts-fade-up 0.7s ease-out both;
204
- animation-delay: 0.15s;
205
- text-align: right;
206
-
207
- ::ng-deep .p-button {
208
- width: 100%;
209
- background: var(--rts-danger-bg);
210
- border: 1px solid var(--rts-danger-border);
211
- color: var(--rts-danger, #e84118);
212
- border-radius: $rtsu-radius-sm + 2px;
213
- font-weight: $rtsu-font-weight-semibold;
214
- font-size: 0.88rem;
215
- padding: 10px 20px;
216
- transition: background $rtsu-transition-fast,
217
- border-color $rtsu-transition-fast,
218
- transform $rtsu-transition-fast;
79
+ align-items: flex-start;
80
+ gap: $rtsu-space-sm;
81
+ padding: $rtsu-space-sm $rtsu-space-md;
82
+ background: rgba(245, 158, 11, 0.1);
83
+ border: 1px solid rgba(245, 158, 11, 0.25);
84
+ border-radius: $rtsu-radius-md;
85
+ margin-bottom: $rtsu-space-md;
219
86
 
220
- &:hover {
221
- background: rgba(232, 65, 24, 0.2);
222
- border-color: rgba(232, 65, 24, 0.4);
223
- transform: translateY(-1px);
224
- }
87
+ .rts-profile-anon-icon {
88
+ color: #f59e0b;
89
+ margin-top: 2px;
225
90
 
226
- &:active {
227
- transform: translateY(0);
91
+ .material-icons-outlined {
92
+ font-size: 20px;
228
93
  }
229
94
  }
230
- }
231
95
 
232
- /* ── AUTH SECTION (ANONYMOUS USERS) ───────────────────────── */
233
-
234
- .rts-messenger-profile-auth {
235
- .rts-messenger-profile-anon-message {
236
- margin-bottom: $rtsu-space-md;
237
- }
238
-
239
- .rts-messenger-profile-auth-buttons {
240
- display: flex;
241
- flex-direction: row;
242
- align-items: center;
243
- justify-content: center;
244
- gap: $rtsu-space-md;
245
- margin-bottom: $rtsu-space-md;
246
-
247
- .rts-messenger-profile-auth-button {
248
- flex: 1;
249
-
250
- ::ng-deep .p-button {
251
- width: 100%;
252
- border-radius: $rtsu-radius-sm + 2px;
253
- font-weight: $rtsu-font-weight-semibold;
254
- padding: 10px 20px;
255
- transition: transform $rtsu-transition-fast,
256
- box-shadow $rtsu-transition-fast;
257
-
258
- &:hover {
259
- transform: translateY(-1px);
260
- }
261
-
262
- &:active {
263
- transform: translateY(0);
264
- }
265
- }
266
-
267
- // Sign Up — primary CTA
268
- &:first-child ::ng-deep .p-button {
269
- background: linear-gradient(
270
- 135deg,
271
- $rtsu-accent-purple 0%,
272
- $rtsu-accent-purple-light 100%
273
- );
274
- border: none;
275
- color: #fff;
276
- box-shadow: $rtsu-shadow-accent-md;
277
-
278
- &:hover {
279
- box-shadow: $rtsu-shadow-accent-lg;
280
- }
281
- }
282
-
283
- // Sign In — secondary ghost
284
- &:last-child ::ng-deep .p-button {
285
- background: transparent;
286
- border: 1px solid var(--rts-border-bright);
287
- color: var(--rts-text-primary);
288
-
289
- &:hover {
290
- background: var(--rts-bg-surface-hover);
291
- border-color: rgba(108, 92, 231, 0.4);
292
- }
293
- }
96
+ .rts-profile-anon-text {
97
+ p {
98
+ margin: 0;
99
+ font-size: $rtsu-font-size-xs;
100
+ color: var(--rts-text-secondary);
101
+ line-height: $rtsu-line-height-snug;
294
102
  }
295
103
  }
296
104
  }
297
105
 
298
- @media screen and (min-width: $rtsu-break-md) {
299
- max-width: 560px;
300
- margin: 0 auto;
106
+ .rts-profile-auth-actions {
107
+ display: flex;
108
+ flex-direction: column;
109
+ gap: $rtsu-space-xs;
301
110
  }
302
111
  }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.0.112",
2
+ "version": "0.0.114",
3
3
  "name": "@rtsee/ngx",
4
4
  "module": "./dist/ngx/fesm2022/rtsee-ngx.mjs",
5
5
  "types": "./dist/ngx/index.d.ts",
@@ -40,15 +40,15 @@
40
40
  "@angular/platform-browser-dynamic": "^20.1.2",
41
41
  "@angular/router": "^20.1.2",
42
42
  "@primeuix/themes": "^1.2.3",
43
- "@rtsee/common": "^0.0.83",
44
- "@rtsee/conference": "^0.0.84",
45
- "@rtsee/core": "^0.0.127",
46
- "@rtsee/events-dashboard": "^0.0.117",
47
- "@rtsee/factory": "^0.0.126",
48
- "@rtsee/messenger": "^0.0.117",
49
- "@rtsee/presentation": "^0.0.116",
50
- "@rtsee/signaling-client": "^0.0.130",
51
- "@rtsee/utilities-ui": "^0.0.48",
43
+ "@rtsee/common": "^0.0.85",
44
+ "@rtsee/conference": "^0.0.86",
45
+ "@rtsee/core": "^0.0.129",
46
+ "@rtsee/events-dashboard": "^0.0.119",
47
+ "@rtsee/factory": "^0.0.128",
48
+ "@rtsee/messenger": "^0.0.119",
49
+ "@rtsee/presentation": "^0.0.118",
50
+ "@rtsee/signaling-client": "^0.0.132",
51
+ "@rtsee/utilities-ui": "^0.0.50",
52
52
  "@stripe/stripe-js": "^8.6.1",
53
53
  "@types/gtag.js": "^0.0.20",
54
54
  "@types/node": "~24.0.14",
@@ -71,5 +71,5 @@
71
71
  "publishConfig": {
72
72
  "access": "public"
73
73
  },
74
- "gitHead": "ad8f6ddbd40db595856c7c039e49cfef87743ef4"
74
+ "gitHead": "f3d882d660658d49be4ee71c55bb7895a6b15195"
75
75
  }