Skip to content

Commit 587c7e0

Browse files
author
Vic G
authored
Merge pull request #442 from appirio-tech/design-styles-3
Design styles 3
2 parents f35c58a + 879f0fe commit 587c7e0

File tree

21 files changed

+446
-127
lines changed

21 files changed

+446
-127
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "1.0.21",
44
"description": "Customer pages in React and Redux",
55
"scripts": {
6-
"start": "webpack-dev-server --history-api-fallback --dev --hot --inline --progress --tc --port 3000",
6+
"start": "webpack-dev-server --history-api-fallback --dev --hot --inline --progress --tc --port 3000 --host 0.0.0.0",
77
"build": "webpack --bail --progress --build --tc",
88
"lint": "eslint --fix --format table --ext .js,.jsx .",
99
"test": "cross-env NODE_ENV=test mocha --colors --reporter nyan --compilers js:babel-core/register --require ignore-styles --recursive \"./src/**/*.spec.js\"",

‎src/assets/images/check-white.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎src/assets/images/ui-16px-1_check-simple.svg‎

Lines changed: 3 additions & 7 deletions
Loading

‎src/assets/images/ui-16px-e_round-e-alert.svg‎

Lines changed: 5 additions & 10 deletions
Loading

‎src/components/ActionCard/ActionCard.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
padding: $base-unit*4 0;
55
box-shadow: 0px 1px 3px 0px #C3C3C8;
66

7+
// FIXME: Hide the top border on the new post composer to be better looking
8+
.new-post-title + .tc-textarea .textarea-footer {border-top: none;}
9+
710
.panel-row,
811
.modal-row{
912
padding: $base-unit*2 $base-unit*6;
@@ -187,7 +190,7 @@
187190
padding: 12px 15px;
188191
background: $tc-gray-neutral-light;
189192
border: 1px solid $tc-gray-20;
190-
border-top: none;
193+
border-top: 1px solid $tc-dark-blue-90;
191194
display: flex;
192195
.textarea-buttons{
193196
display: flex;

‎src/components/ColorSelector/ColorSelector.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
z-index: 2;
2424
right: 0;
2525
top: 50px;
26+
width: 340px;
2627
background: white;
2728
position: absolute;
2829
display: flex;

‎src/components/Grid/GridView.scss‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
width: auto;
99
padding: 0;
1010
margin: 0 20px 20px 20px;
11-
}
11+
box-shadow: 0px 1px 3px 0px #C3C3C8;
12+
}
1213
}
1314

1415
.flex-data {
@@ -39,12 +40,12 @@
3940
min-width: 85px;
4041
}
4142
.width11 {
42-
width: 11%;
43-
min-width: 106px;
43+
width: 15%;
44+
min-width: 150px;
4445
}
4546
.width12 {
46-
width: 12%;
47-
min-width: 118px;
47+
width: 15%;
48+
min-width: 160px;
4849
}
4950
.width13 {
5051
width: 13%;
@@ -53,7 +54,7 @@
5354
width: 38%;
5455
}
5556
.width45 {
56-
width: 45%;
57+
width: 40%;
5758
}
5859
.txt-black {
5960
color: $tc-black;
@@ -63,6 +64,7 @@
6364
margin: 0;
6465
border-bottom: 1px solid $tc-gray-10;
6566
}
67+
6668
.flex-row {
6769
display: box;
6870
display: -webkit-box;
@@ -76,6 +78,12 @@
7678
display: -webkit-inline-flex;
7779
display: inline-flex;
7880
min-height: 71px;
81+
82+
&.item-id .spacing {
83+
color: $tc-gray-30;
84+
font-weight: 400;
85+
}
86+
7987
.spacing {
8088
@include roboto-medium;
8189
font-size: $tc-label-md;
@@ -119,7 +127,7 @@
119127
}
120128

121129
.spacing {
122-
padding: 0 5px;
130+
// padding: 0 5px;
123131
}
124132

125133
.blue-border {
@@ -188,7 +196,8 @@
188196
.orange-block,
189197
.purple-block {
190198
@include roboto-medium;
191-
font-size: $tc-label-md;
199+
font-size: $tc-label-sm;
200+
font-weight: 300;
192201
width: 30px;
193202
height: 30px;
194203
text-align: center;
@@ -197,20 +206,20 @@
197206
border-radius: 2px;
198207
}
199208
.blue-block {
200-
color: $tc-dark-blue-90;
201-
background: $tc-light-blue-30;
209+
210+
background: $tc-light-blue-70;
202211
}
203212
.green-block {
204-
color: $tc-green;
205-
background: $tc-green-30;
213+
214+
background: $tc-green-70;
206215
}
207216
.orange-block {
208-
color: $tc-orange;
209-
background: $tc-orange-10;
217+
218+
background: $tc-orange-30;
210219
}
211220
.purple-block {
212-
color: $tc-purple;
213-
background: $tc-purple-30;
221+
222+
background: $tc-purple-70;
214223
}
215224

216225
/* .txt-italic */
@@ -219,7 +228,7 @@
219228

220229
font-style: italic;
221230
font-size: $tc-label-md;
222-
color: $tc-gray-80;
231+
color: $tc-gray-30;
223232
line-height: $base-unit * 3;
224233
&.txt-normal {
225234
font-style: normal;
@@ -236,9 +245,16 @@
236245
}
237246

238247
.user-block {
248+
white-space: nowrap;
249+
239250
.txt-box span {
240251
font-weight: normal;
241252
}
253+
254+
.linnk-black {
255+
white-space: nowrap;
256+
text-overflow: ellipsis;
257+
}
242258
}
243259
/* .user-block - remove as it is extended at UserWithName.scss */
244260

@@ -548,7 +564,7 @@
548564
}
549565
}
550566
.txt-box .link-black {
551-
letterSpacing: -0.5px;
567+
// letterSpacing: -0.5px;
552568
}
553569
.txt-box .link-black,
554570
.txt-gray-md,

‎src/components/Layout/Layout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Alert from 'react-s-alert'
88
require('./Layout.scss')
99

1010
// Alert styles
11-
import 'react-s-alert/dist/s-alert-default.css'
11+
import '../../styles/vendors/s-alert-default.css'
1212
import 'react-s-alert/dist/s-alert-css-effects/slide.css'
1313

1414
const Layout = (props) => {

‎src/components/Layout/Layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@
1010
}
1111

1212
.content-area {
13-
}
13+
}

‎src/components/ProjectStatus/ProjectStatus.scss‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,23 @@
5050
}
5151
&.red {
5252
background-color: $tc-red;
53+
5354
.status-icon {
5455
position: absolute;
5556
left: 4px;
5657
top: 4px;
5758
display: block;
5859
height: 12px;
5960
width: 12px;
60-
mask: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
61-
-webkit-mask: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
62-
background-color: $tc-white;
63-
mask-size: 12px;
64-
-webkit-mask-size: 12px;
61+
background: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
62+
background-size: 12px 12px;
63+
// -webkit-mask: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
64+
// background-color: $tc-white;
65+
// mask-size: 12px;
66+
// -webkit-mask-size: 12px;
6567
}
6668
}
69+
6770
&.black {
6871
background-color: $tc-gray-70;
6972
.status-icon {
@@ -73,16 +76,18 @@
7376
display: block;
7477
height: 12px;
7578
width: 12px;
76-
mask: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
77-
-webkit-mask: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
78-
background-color: $tc-white;
79-
mask-size: 12px;
80-
-webkit-mask-size: 12px;
79+
background: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
80+
background-size: 12px 12px;
81+
// -webkit-mask: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
82+
// background-color: $tc-white;
83+
// mask-size: 12px;
84+
// -webkit-mask-size: 12px;
8185
}
8286
}
8387
}
8488
}
8589
}
90+
8691
.status-label {
8792
-webkit-user-select: none;
8893
-moz-user-select: none;
@@ -109,19 +114,22 @@
109114
}
110115
&.red {
111116
background-color: $tc-red;
117+
112118
.status-icon {
113119
position: absolute;
114120
left: 5px;
115121
top: 4px;
116122
display: block;
117123
height: 12px;
118124
width: 12px;
119-
mask: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
120-
-webkit-mask: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
121-
background-color: $tc-white;
122-
mask-size: 12px;
123-
-webkit-mask-size: 12px;
125+
background: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
126+
background-size: 12px 12px;
127+
// -webkit-mask: url('../../assets/images/ui-16px-e_round-e-alert.svg') no-repeat 50% 50%;
128+
// background-color: $tc-white;
129+
// mask-size: 12px;
130+
// -webkit-mask-size: 12px;
124131
}
132+
125133
}
126134
&.black {
127135
background-color: $tc-gray-70;
@@ -132,11 +140,12 @@
132140
display: block;
133141
height: 12px;
134142
width: 12px;
135-
mask: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
136-
-webkit-mask: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
137-
background-color: $tc-white;
138-
mask-size: 12px;
139-
-webkit-mask-size: 12px;
143+
background: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
144+
background-size: 12px 12px;
145+
// -webkit-mask: url('../../assets/images/ui-16px-1_check-simple.svg') no-repeat 50% 50%;
146+
// background-color: $tc-white;
147+
// mask-size: 12px;
148+
// -webkit-mask-size: 12px;
140149
}
141150
}
142151
&.editable {

0 commit comments

Comments
 (0)