Skip to content

Commit 6e145ee

Browse files
shaunmaharajshaunmaharaj
authored
Fix nav bar and styles across pages (#67)
* Fix nav bar and styles * Fix styles for Login/Register pages
1 parent 2a866d0 commit 6e145ee

21 files changed

+192
-83
lines changed

‎src/components/addressform.main.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@
9595
font-size: 14px;
9696
font-weight: normal;
9797
text-shadow: none;
98-
color: #00a3dd;
98+
color: @complimentBlueColor;
9999
background-color: #ffffff;
100-
border: solid 1px #00a3dd;
100+
border: solid 1px @complimentBlueColor;
101101
border-radius: 0;
102102
text-align: middle;
103103
box-shadow: none;
@@ -107,7 +107,7 @@
107107

108108
&.btn-primary {
109109
padding: 8px 14px;
110-
background-color: #40b1f3;
110+
background-color: @mainBlueColor;
111111
font-size: 12px;
112112
font-weight: bold;
113113
color: #ffffff;

‎src/components/appheader.main.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ class AppHeaderMain extends React.Component {
114114

115115
</div>
116116

117-
<div className="collapsable-container collapse">
117+
<div className="collapsable-container collapse collapsed">
118118
<div className="mobile-search-container">
119119
<AppHeaderSearchMain isMobileView />
120120
</div>
@@ -125,15 +125,17 @@ class AppHeaderMain extends React.Component {
125125
<Link
126126
className="cart-link"
127127
to="/mycart"
128-
data-toggle="collapse"
129-
data-target=".collapsable-container"
130128
>
131-
{intl.get('shopping-bag-nav')}
129+
<div data-toggle="collapse" data-target=".collapsable-container">
130+
{intl.get('shopping-bag-nav')}
131+
</div>
132132
</Link>
133133
</div>
134+
<hr className="mobile-navigation-separator" />
134135
<div className="mobile-navigation-container">
135136
<AppHeaderNavigationMain isOfflineCheck={this.handleIsOffline} isMobileView />
136137
</div>
138+
<hr className="mobile-navigation-separator" />
137139
<div className="mobile-login-container">
138140
<AppHeaderLoginMain isMobileView />
139141
</div>

‎src/components/appheader.main.less‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -171,21 +171,34 @@
171171
.mobile-cart-link-container {
172172
text-align: center;
173173
text-transform: uppercase;
174-
border-bottom: 2px solid @mainColor;
175-
padding: 10px 30px 30px;
174+
padding: 5px 0px 5px 0px;
176175

177176
a {
178177
color: @mainColor;
179178
font-size: 19px;
180179
font-weight: bold;
181180
display: block;
181+
text-decoration: none;
182+
height: 47px;
183+
184+
div {
185+
padding: 10px 0px 10px 0px;
186+
}
182187
}
183188
}
184189

190+
.mobile-navigation-separator {
191+
border-top: 1px solid @mainColor;
192+
width: 85%;
193+
}
194+
185195
.mobile-navigation-container {
186-
padding-top: 30px;
187-
padding-top: 30px;
188-
border-bottom: 2px solid @mainColor;
196+
padding-top: 10px;
197+
padding-bottom: 10px;
198+
}
199+
200+
.cart-link:active {
201+
background-color: #ccc;
189202
}
190203

191204
.mobile-login-container {

‎src/components/appheaderlogin.main.less‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
@import './../style/common.less';
2323

2424
.app-login-component {
25+
.auth-profile-menu-list {
26+
margin-bottom: 0;
27+
}
28+
2529
.login-btn {
2630
background-color: transparent;
2731
border: 0;
@@ -58,8 +62,32 @@
5862
}
5963
}
6064

65+
.logout-link,
66+
.profile-link, {
67+
padding: 5px 0px;
68+
text-align: left;
69+
border: none;
70+
background-color: transparent;
71+
color: #555;
72+
text-transform: uppercase;
73+
text-decoration: none;
74+
}
75+
76+
.profile-link, {
77+
div {
78+
padding: 5px 0px;
79+
}
80+
}
81+
82+
.dropdown-item:hover {
83+
background-color: #e2e2e2;
84+
}
85+
6186
.dropdown-menu {
6287
.dropdown-item {
88+
height: 38px;
89+
vertical-align: middle;
90+
6391
.dropdown-header {
6492
border-bottom: 1px solid #eee;
6593
}
@@ -77,7 +105,8 @@
77105
}
78106

79107
.dropdown {
80-
padding-top: 10px;
108+
padding-top: 15px;
109+
padding-bottom: 15px;
81110

82111
&.show {
83112
background-color: #eee;
@@ -122,6 +151,7 @@
122151
text-decoration: none;
123152
}
124153

154+
.profile-link,
125155
.logout-link {
126156
padding: 5px 0px;
127157
text-align: center;
@@ -130,6 +160,12 @@
130160
color: @mainColor;
131161
text-transform: uppercase;
132162
}
163+
164+
.profile-link, {
165+
div {
166+
padding: 0px;
167+
}
168+
}
133169
}
134170
}
135171
}

‎src/components/appheadersearch.main.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969

7070
&.mobile-view {
7171
width: 100%;
72-
border-bottom: 1px solid @mainColor;
72+
border-bottom: solid 1px #dedede;
7373

7474
.search-form {
7575
display: block;

‎src/components/appmodallogin.main.jsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -128,14 +128,12 @@ class AppModalLoginMain extends React.Component {
128128
{
129129
(isLoading) ? <div className="miniLoader" /> : ('')
130130
}
131-
<div className="login-cell">
132-
<button className="btn-auth-login" id="login_modal_login_button" data-cmd="login" data-toggle="collapse" data-target=".navbar-collapse" type="submit">
131+
<div className="form-input btn-container">
132+
<button className="btn-auth-login btn btn-primary" id="login_modal_login_button" data-cmd="login" data-toggle="collapse" data-target=".navbar-collapse" type="submit">
133133
{intl.get('login')}
134134
</button>
135-
</div>
136-
<div className="register-cell">
137135
<Link to="/registration">
138-
<button className="btn-auth-register btn btn-link" id="login_modal_register_button" data-toggle="collapse" data-target=".navbar-collapse" type="button" onClick={AppModalLoginMain.registerNewUser}>
136+
<button className="btn-auth-register btn" id="login_modal_register_button" data-toggle="collapse" data-target=".navbar-collapse" type="button" onClick={AppModalLoginMain.registerNewUser}>
139137
{intl.get('register')}
140138
</button>
141139
</Link>

‎src/components/appmodallogin.main.less‎

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@
2828
margin-bottom: 5px;
2929
font-weight: bold;
3030
}
31+
32+
.form-control {
33+
display: block;
34+
height: 34px;
35+
padding: 6px 12px;
36+
font-size: 14px;
37+
color: #555555;
38+
background-color: #ffffff;
39+
border: 1px solid #cccccc;
40+
border-radius: 4px;
41+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
42+
}
3143
}
3244

3345
#simplemodal-container {
@@ -36,21 +48,43 @@
3648
padding: 12px;
3749
}
3850

39-
.btn-auth-login {
40-
display: inline-block;
41-
text-align: center;
42-
vertical-align: middle;
43-
cursor: pointer;
44-
border: 1px solid @mainColor;
45-
border-radius: 4px;
51+
#login_modal_close_button {
52+
font-size: 30px;
53+
}
54+
55+
.form-input.btn-container {
56+
padding-top: 15px;
57+
}
58+
59+
.btn-auth-login,
60+
.btn {
61+
width: 100px;
62+
margin-right: 10px;
63+
padding: 6px 12px;
64+
font-size: 14px;
65+
font-weight: normal;
66+
text-shadow: none;
67+
color: @complimentBlueColor;
68+
background-color: #ffffff;
69+
border: solid 1px @complimentBlueColor;
70+
border-radius: 0;
71+
text-align: middle;
72+
box-shadow: none;
4673
white-space: nowrap;
47-
user-select: none;
48-
padding: 10px 16px;
49-
font-size: 18px;
50-
border-radius: 2px;
51-
margin-bottom: 2px;
52-
color: #ffffff;
53-
background-color: @mainColor;
74+
height: auto;
75+
display: inline-block;
76+
77+
&.btn-primary {
78+
padding: 8px 14px;
79+
background-color: @mainBlueColor;
80+
font-size: 12px;
81+
font-weight: bold;
82+
color: #ffffff;
83+
border: 0;
84+
border-radius: 0;
85+
text-transform: uppercase;
86+
max-width: 280px;
87+
}
5488
}
5589

5690
.btn-auth-login {
@@ -91,7 +125,7 @@
91125
}
92126

93127
.btn-link {
94-
color: #00a3dd;
128+
color: @complimentBlueColor;
95129
font-size: 14px;
96130
cursor: pointer;
97131

‎src/components/cart.lineitem.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
@import './../style/common.less';
2323

2424
.cart-lineitem-row {
25-
border-bottom: 1px solid #d0d0d0;
25+
border-bottom: 1px solid @mainGrey;
2626
padding-top: 15px;
2727
padding-bottom: 15px;
2828

@@ -115,9 +115,9 @@
115115
float:right;
116116
.btn-cart-removelineitem {
117117
text-shadow: none;
118-
color: #00a3dd;
118+
color: @complimentBlueColor;
119119
background-color: #ffffff;
120-
border: solid 1px #00a3dd;
120+
border: solid 1px @complimentBlueColor;
121121
border-radius: 0;
122122
text-align: middle;
123123
box-shadow: none;
@@ -133,7 +133,7 @@
133133
}
134134
}
135135
.btn-cart-removelineitem:hover {
136-
background-color: #00a3dd;
136+
background-color: @complimentBlueColor;
137137
color: #ffffff;
138138
}
139139
}

‎src/components/ordertable.main.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191

9292
tbody {
9393
tr {
94-
border-bottom: 1px solid #d0d0d0;
94+
border-bottom: 1px solid @mainGrey;
9595
padding-top: 15px;
9696
padding-bottom: 15px;
9797
}

‎src/components/paymentform.main.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,9 @@
103103
font-size: 14px;
104104
font-weight: normal;
105105
text-shadow: none;
106-
color: #00a3dd;
106+
color: @complimentBlueColor;
107107
background-color: #ffffff;
108-
border: solid 1px #00a3dd;
108+
border: solid 1px @complimentBlueColor;
109109
border-radius: 0;
110110
text-align: middle;
111111
box-shadow: none;
@@ -115,7 +115,7 @@
115115

116116
&.btn-primary {
117117
padding: 8px 14px;
118-
background-color: #40b1f3;
118+
background-color: @mainBlueColor;
119119
font-size: 12px;
120120
font-weight: bold;
121121
color: #ffffff;

0 commit comments

Comments
 (0)