Skip to content

Commit bd8cd0f

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
refactor: improve styles to align the UI with rest of Phoenix
1 parent 9a1e210 commit bd8cd0f

File tree

4 files changed

+249
-32
lines changed

4 files changed

+249
-32
lines changed

‎src/extensionsIntegrated/Phoenix/html/login-dialog.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<h1 class="popup-title">{{welcomeTitle}}</h1>
44
</div>
55
<div class="popup-body">
6-
<button id="phoenix-signin-btn" class="btn btn-primary" style="width: 100%; margin: 5px 0; padding: 10px 0;">
7-
<i class="fa fa-sign-in-alt" style="margin-right: 5px;"></i>
6+
<button id="phoenix-signin-btn" class="btn btn-primary">
7+
<i class="fa fa-sign-in-alt"></i>
88
{{signInBtnText}}
99
</button>
10-
<div style="margin-top: 20px; text-align: center;">
11-
<button id="phoenix-support-btn" class="btn btn-link" style="color: #adb9bd;">
12-
<i class="fa fa-question-circle" style="margin-right: 5px;"></i>
10+
<div class="support-link">
11+
<button id="phoenix-support-btn" class="btn btn-link">
12+
<i class="fa fa-question-circle"></i>
1313
{{supportBtnText}}
1414
</button>
1515
</div>

‎src/extensionsIntegrated/Phoenix/html/profile-panel.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
<div class="profile-popup">
22
<div class="popup-header">
3-
<div style="display: flex; align-items: center;">
4-
<div style="width: 40px; height: 40px; border-radius: 50%; background-color: #0099ff; color: white; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-weight: bold; font-size: 16px;">
3+
<div class="user-profile-header">
4+
<div class="user-avatar">
55
{{initials}}
66
</div>
7-
<div>
8-
<div>{{userName}}</div>
9-
<div style="color: #3c3; font-weight: normal; font-size: 16px;">{{planName}}</div>
7+
<div class="user-info">
8+
<div class="user-name">{{userName}}</div>
9+
<div class="user-plan">{{planName}}</div>
1010
</div>
1111
</div>
1212
</div>
1313
<div class="popup-body">
14-
<div style="margin-bottom: 20px;">
15-
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
14+
<div class="quota-section">
15+
<div class="quota-header">
1616
<span>{{quotaLabel}}</span>
1717
<span>{{quotaUsed}} / {{quotaTotal}} {{quotaUnit}}</span>
1818
</div>
19-
<div style="width: 100%; height: 8px; background-color: #444; border-radius: 4px; overflow: hidden;">
20-
<div style="width: {{quotaPercent}}%; height: 100%; background-color: #3c3; border-radius: 4px;"></div>
19+
<div class="progress-bar">
20+
<div class="progress-fill" style="width: {{quotaPercent}}%;"></div>
2121
</div>
2222
</div>
2323

24-
<button id="phoenix-account-btn" class="btn btn-default" style="width: 100%; margin: 5px 0; padding: 8px 0; text-align: left;">
25-
<i class="fa fa-user" style="margin-right: 8px; width: 20px; text-align: center;"></i>
24+
<button id="phoenix-account-btn" class="btn btn-default menu-button">
25+
<i class="fa fa-user"></i>
2626
{{accountBtnText}}
2727
</button>
2828

29-
<button id="phoenix-support-btn" class="btn btn-default" style="width: 100%; margin: 5px 0; padding: 8px 0; text-align: left;">
30-
<i class="fa fa-question-circle" style="margin-right: 8px; width: 20px; text-align: center;"></i>
29+
<button id="phoenix-support-btn" class="btn btn-default menu-button">
30+
<i class="fa fa-question-circle"></i>
3131
{{supportBtnText}}
3232
</button>
3333

34-
<button id="phoenix-signout-btn" class="btn btn-default" style="width: 100%; margin: 5px 0; padding: 8px 0; text-align: left; color: #f55;">
35-
<i class="fa fa-sign-out-alt" style="margin-right: 8px; width: 20px; text-align: center;"></i>
34+
<button id="phoenix-signout-btn" class="btn btn-default menu-button signout">
35+
<i class="fa fa-sign-out-alt"></i>
3636
{{signOutBtnText}}
3737
</button>
3838
</div>

‎src/extensionsIntegrated/Phoenix/profile-menu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ define(function (require, exports, module) {
1212
let isPopupVisible = false;
1313

1414
// if user is logged in we show the profile menu, otherwise we show the login menu
15-
const isLoggedIn = true;
15+
const isLoggedIn = false;
1616

1717
const defaultLoginData = {
1818
welcomeTitle: "Welcome to Phoenix Code",

‎src/styles/user-profile.less‎

Lines changed: 228 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,246 @@
1+
@import "brackets_variables.less";
2+
13
.profile-popup {
2-
background-color: #2c2c2c;
3-
color: #ffffff;
4-
border-radius: 6px;
5-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
4+
background-color: @bc-menu-bg;
5+
color: @bc-menu-text;
6+
border-radius: @bc-border-radius;
7+
box-shadow: 0 3px 9px @bc-shadow;
68
width: 300px;
79
overflow: hidden;
810
position: absolute;
9-
z-index: 9999;
11+
z-index: @z-index-brackets-context-menu-base;
12+
animation: dropdown 90ms cubic-bezier(0, .97, .2, .99);
13+
transform-origin: 0 0;
1014

1115
.popup-header {
12-
padding: 15px;
13-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
16+
padding: 12px 15px;
17+
border-bottom: 1px solid @bc-menu-separator;
1418
}
1519

1620
.popup-body {
17-
padding: 15px;
21+
padding: 12px 15px;
1822
}
1923

2024
.popup-title {
2125
margin: 0;
22-
font-size: 18px;
23-
font-weight: normal;
26+
font-size: 16px;
27+
font-weight: @font-weight-semibold;
28+
color: @bc-menu-text;
29+
}
30+
31+
.user-profile-header {
32+
display: flex;
33+
align-items: center;
34+
}
35+
36+
.user-avatar {
37+
width: 40px;
38+
height: 40px;
39+
border-radius: 50%;
40+
background-color: @bc-primary-btn-bg;
41+
color: @bc-text-alt;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
margin-right: 15px;
46+
font-weight: @font-weight-semibold;
47+
font-size: 16px;
48+
}
49+
50+
.user-info {
51+
display: flex;
52+
flex-direction: column;
53+
}
54+
55+
.user-name {
56+
font-weight: @font-weight-semibold;
57+
color: @bc-menu-text;
58+
}
59+
60+
.user-plan {
61+
color: #3c3;
62+
font-size: 16px;
63+
}
64+
65+
.quota-section {
66+
margin-bottom: 20px;
67+
}
68+
69+
.quota-header {
70+
display: flex;
71+
justify-content: space-between;
72+
margin-bottom: 5px;
73+
font-size: 13px;
74+
}
75+
76+
.progress-bar {
77+
width: 100%;
78+
height: 8px;
79+
background-color: @bc-input-bg;
80+
border-radius: 4px;
81+
overflow: hidden;
82+
83+
.progress-fill {
84+
height: 100%;
85+
background-color: @bc-primary-btn-bg;
86+
border-radius: 4px;
87+
}
88+
}
89+
90+
.support-link {
91+
margin-top: 20px;
92+
text-align: center;
93+
}
94+
95+
.menu-button {
96+
width: 100%;
97+
text-align: left;
98+
padding: 8px 12px;
99+
100+
i {
101+
margin-right: 8px;
102+
width: 20px;
103+
text-align: center;
104+
}
105+
106+
&.signout {
107+
color: #f55;
108+
}
109+
}
110+
111+
.btn {
112+
margin: 5px 0;
113+
transition: background-color 0.2s ease;
114+
115+
&.btn-primary {
116+
background-color: @bc-primary-btn-bg;
117+
border: 1px solid @bc-primary-btn-border;
118+
box-shadow: inset 0 1px 0 @bc-highlight;
119+
color: @bc-text-alt;
120+
width: 100%;
121+
padding: 10px 0;
122+
123+
i {
124+
margin-right: 5px;
125+
}
126+
127+
&:hover {
128+
background-color: lighten(@bc-primary-btn-bg, 10%);
129+
}
130+
131+
&:active {
132+
background-color: @bc-primary-btn-bg-down;
133+
box-shadow: inset 0 1px 0 @bc-shadow-small;
134+
}
135+
}
136+
137+
&.btn-default {
138+
background-color: @bc-btn-bg;
139+
border: 1px solid @bc-btn-border;
140+
box-shadow: inset 0 1px 0 @bc-highlight;
141+
142+
&:hover {
143+
background-color: lighten(@bc-btn-bg, 10%);
144+
}
145+
146+
&:active {
147+
background-color: @bc-btn-bg-down;
148+
box-shadow: inset 0 1px 0 @bc-shadow-small;
149+
}
150+
}
151+
152+
&.btn-link {
153+
background: none;
154+
border: none;
155+
box-shadow: none;
156+
color: @bc-text-thin-quiet;
157+
158+
i {
159+
margin-right: 5px;
160+
}
161+
162+
&:hover {
163+
color: @bc-text;
164+
text-decoration: none;
165+
}
166+
}
24167
}
25168
}
26169

27170
.dark .profile-popup {
28-
background-color: #1d1f21;
171+
background-color: @dark-bc-menu-bg;
172+
color: @dark-bc-menu-text;
173+
box-shadow: 0 3px 9px @dark-bc-shadow;
174+
175+
.popup-header {
176+
border-bottom: 1px solid @dark-bc-menu-separator;
177+
}
178+
179+
.popup-title {
180+
color: @dark-bc-menu-text;
181+
}
182+
183+
.user-avatar {
184+
background-color: @dark-bc-primary-btn-bg;
185+
color: @dark-bc-text-alt;
186+
}
187+
188+
.user-name {
189+
color: @dark-bc-menu-text;
190+
}
191+
192+
.progress-bar {
193+
background-color: @dark-bc-input-bg;
194+
195+
.progress-fill {
196+
background-color: @dark-bc-primary-btn-bg;
197+
}
198+
}
199+
200+
.btn {
201+
&.btn-primary {
202+
background-color: @dark-bc-primary-btn-bg;
203+
border: 1px solid @dark-bc-primary-btn-border;
204+
box-shadow: inset 0 1px 0 @dark-bc-highlight;
205+
color: @dark-bc-text-alt;
206+
207+
&:hover {
208+
background-color: lighten(@dark-bc-primary-btn-bg, 10%);
209+
}
210+
211+
&:active {
212+
background-color: @dark-bc-primary-btn-bg-down;
213+
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
214+
}
215+
}
216+
217+
&.btn-default {
218+
background-color: @dark-bc-btn-bg;
219+
border: 1px solid @dark-bc-btn-border;
220+
box-shadow: inset 0 1px 0 @dark-bc-highlight;
221+
color: @dark-bc-text;
222+
223+
&:hover {
224+
background-color: lighten(@dark-bc-btn-bg, 10%);
225+
}
226+
227+
&:active {
228+
background-color: @dark-bc-btn-bg-down;
229+
box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
230+
}
231+
}
232+
233+
&.btn-link {
234+
color: @dark-bc-text-thin-quiet;
235+
236+
&:hover {
237+
color: @dark-bc-text;
238+
}
239+
}
240+
}
241+
}
242+
243+
@keyframes dropdown {
244+
0% { opacity: 0.5; transform: translate3d(0, 0, 0) scale(0.5); }
245+
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
29246
}

0 commit comments

Comments
 (0)