Skip to content

Commit 2a1e9b4

Browse files
author
Shawn Erquhart
authored
Merge pull request #395 from netlify/visual-tweaks
Small update to the UI's look and feel
2 parents aac5339 + 62a8de9 commit 2a1e9b4

File tree

23 files changed

+395
-288
lines changed

23 files changed

+395
-288
lines changed

‎src/components/AppHeader/AppHeader.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
@import '../UI/theme';
22

33
.appBar {
4+
padding: 8px 24px;
5+
height: auto;
46
background-color: var(--backgroundAltColor);
7+
color: var(--defaultColorLight);
58
}
69

710
/* Gross stuff below, React Toolbox hacks */
11+
812
.homeLink,
913
.iconMenu {
1014
margin-left: 2%;
@@ -19,8 +23,8 @@
1923
.leftIcon span {
2024
/* stylelint-disable */
2125

22-
color: var(--foregroundAltColor) !important;
23-
font-size: 30px !important;
26+
color: var(--defaultColorLight) !important;
27+
font-size: 24px !important;
2428

2529
/* stylelint-enable */
2630
}

‎src/components/ControlPanel/ControlPane.css

+19-6
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,41 @@
11
@import "../UI/theme";
22

33
.control {
4-
color: #7c8382;
4+
color: var(--textColor);
55
position: relative;
66
padding: 20px 0 10px 0;
7+
margin-top: 16px;
78

89
& input,
910
& textarea,
1011
& select {
11-
font-family: monospace;
12+
font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
1213
display: block;
1314
width: 100%;
1415
padding: 12px;
1516
margin: 0;
16-
border: none;
17+
border: var(--textFieldBorder);
1718
border-radius: var(--borderRadius);
1819
outline: 0;
1920
box-shadow: none;
2021
background-color: var(--controlBGColor);
21-
font-size: 18px;
22-
color: #7c8382;
22+
font-size: 16px;
23+
color: var(--textColor);
24+
transition: border-color .3s ease;
25+
26+
&:focus,
27+
&:active {
28+
border-color: var(--primaryColor);
29+
}
2330
}
2431
}
2532

2633
.label {
2734
display: block;
2835
color: var(--controlLabelColor);
29-
font-size: 14px;
36+
font-size: 12px;
37+
text-transform: uppercase;
38+
font-weight: 600;
3039
}
3140

3241
.labelWithError {
@@ -40,3 +49,7 @@
4049
color: #FF706F;
4150
margin-bottom: 5px;
4251
}
52+
53+
p {
54+
font-size: 16px;
55+
}

‎src/components/EntryEditor/EntryEditor.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@
1818
}
1919

2020
.controlPane {
21-
height: calc(100% - 55px);
2221
overflow: auto;
2322
padding: 20px 20px 0;
23+
height: calc(100% - 55px);
2424
border-right: 1px solid var(--defaultColorLight);
25-
background-color: var(--backgroundTertiaryColorDark);
25+
background-color: var(--backgroundColor);
2626
}
2727

2828
.previewPane {
@@ -41,7 +41,7 @@
4141
left: 0;
4242
right: 0;
4343
bottom: 0;
44-
border-top: 1px solid var(--defaultColorLight);
44+
border-top: var(--border);
4545
background: var(--backgroundColor);
4646
text-align: right;
4747
}
@@ -52,3 +52,7 @@
5252
right: 0;
5353
height: 100%;
5454
}
55+
56+
.ProseMirror {
57+
border: var(--textFieldBorder);
58+
}

‎src/components/EntryListing/EntryListing.css

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
.card {
2+
flex: 0 300px;
23
overflow: hidden;
3-
margin-bottom: 10px;
4-
margin-left: 15px;
4+
margin-bottom: 16px;
5+
margin-left: 16px;
6+
max-width: 50%;
57
max-height: 290px;
6-
width: 240px;
78
cursor: pointer;
89
}
910

11+
.card:hover {
12+
background: #f8f9fa;
13+
transform: translateY(-8px);
14+
}
15+
1016
.cardImage {
11-
width: 240px;
17+
margin: -16px -24px 16px -24px;
18+
width: calc(100% + 24px + 24px);
1219
height: 135px;
1320
background-position: center center;
1421
background-size: cover;
@@ -18,7 +25,7 @@
1825
.cardsGrid {
1926
display: flex;
2027
flex-flow: row wrap;
21-
margin-left: -15px;
28+
margin-left: -16px;
2229
}
2330

2431
.cardList {

‎src/components/FindBar/FindBar.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
}
77

88
.inputField {
9-
width: 80%;
10-
max-width: 800px;
9+
width: 100%;
10+
max-width: 500px;
1111
display: block;
12-
margin: 0 auto;
12+
margin: 0 24px;
1313
padding: 10px 14px;
1414
border: 0;
1515
border-radius: var(--borderRadius);
1616
box-shadow: none;
1717
outline: none;
18-
font-size: 18px;
18+
font-size: 14px;
1919
}

‎src/components/UI/Sticky/Sticky.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
.stickyActive:not(.stickyAtBottom) {
1010
position: fixed !important;
11-
top: 64px !important;
11+
top: 54px !important;
1212
}
1313

1414
.stickyAtBottom {

‎src/components/UI/Sticky/Sticky.js

+6
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,11 @@ export class Sticky extends Component {
163163
static propTypes = {
164164
className: PropTypes.string,
165165

166+
/**
167+
* classNameActive: class to apply when Sticky is active.
168+
*/
169+
classNameActive: PropTypes.string,
170+
166171
/**
167172
* fillContainerWidth: allows the sticky width to be dynamically set to the width of it's
168173
* StickyContainer when sticky (fixed positioning).
@@ -201,6 +206,7 @@ export class Sticky extends Component {
201206
styles.sticky,
202207
{
203208
[styles.stickyActive]: state.shouldStick,
209+
[props.classNameActive]: state.shouldStick,
204210
[styles.stickyAtBottom]: state.shouldStickAtBottom,
205211
},
206212
)}

‎src/components/UI/card/Card.css

+32-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,39 @@
11
@import '../theme.css';
22

33
.card {
4-
composes: base container rounded depth;
4+
composes: base container rounded;
55
overflow: hidden;
6+
border: var(--textFieldBorder);
7+
transition: all .1s ease-in-out;
8+
transform: translateY(0);
9+
padding: 16px 24px;
10+
}
11+
12+
.card > iframe,
13+
.card > video,
14+
.card > img {
15+
margin: -16px -24px 16px;
16+
width: calc(100% + 16px + 16px);
17+
}
18+
19+
.card h1 {
20+
font-size: 16px;
21+
font-weight: 600;
22+
letter-spacing: 0;
23+
line-height: 24px;
24+
margin: 0;
25+
padding: 0;
26+
border: none;
27+
color: var(--defaultColor);
28+
}
29+
30+
.card p {
31+
font-size: 14px;
32+
font-weight: 400;
33+
letter-spacing: 0;
34+
line-height: 24px;
35+
padding: 0;
36+
color: var(--textMutedColor);
637
}
738

839
.card > *:not(iframe, video, img, header, footer) {
@@ -17,17 +48,3 @@
1748
.card > *:not(iframe, video, img, header, footer):last-child {
1849
margin-bottom: 10px;
1950
}
20-
21-
.card > iframe,
22-
.card > video,
23-
.card > img {
24-
max-width: 100%;
25-
}
26-
27-
.card h1 {
28-
margin: 15px 0;
29-
padding: 0;
30-
border: none;
31-
color: var(--defaultColor);
32-
font-size: 18px;
33-
}

‎src/components/UI/theme.css

+18-14
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
:root {
22
--defaultColor: #333;
3-
--defaultColorLight: #eee;
3+
--defaultColorLight: #fff;
44
--backgroundColor: #fff;
55
--backgroundColorShaded: #eee;
6-
--shadowColor: rgba(0, 0, 0, .25);
6+
--shadowColor: rgba(19, 39, 48, .24);
77
--infoColor: #69c;
8+
--primaryColor: #4990e2;
89
--successColor: #1c7;
910
--warningColor: #fa0;
1011
--errorColor: #f52;
11-
--textColor: #272e30;
12-
--borderRadius: 2px;
13-
--borderRadiusLarge: 10px;
14-
--dropShadow:
15-
0 2px 2px 0 rgba(0, 0, 0, 0.14),
16-
0 3px 1px -2px rgba(0, 0, 0, 0.2),
17-
0 1px 5px 0 rgba(0, 0, 0, 0.12);
12+
--textColor: #191919;
13+
--textMutedColor: #8c8c8c;
14+
--borderRadius: 4px;
15+
--borderRadiusLarge: 8px;
16+
--secondaryColor: #d9d9d9;
17+
--dropShadow: 0 2px 8px 0 var(--secondaryColor);
1818
--topmostZindex: 99999;
1919
--foregroundAltColor: #fff;
20-
--backgroundAltColor: #272e30;
21-
--textFieldBorderColor: #e7e7e7;
20+
--backgroundAltColor: #232528;
21+
--textFieldBorderColor: var(--secondaryColor);
2222
--highlightFGColor: #fff;
2323
--highlightBGColor: #3ab7a5;
2424
--highlightFGAltColor: #eee;
25-
--controlLabelColor: var(--textColor);
25+
--controlLabelColor: #8b8b8b;
2626
--controlBGColor: #fff;
27-
--backgroundTertiaryColor: #f2f5f4;
27+
--backgroundTertiaryColor: #fff;
2828
--backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
29+
--richTextEditorMinHeight: 300px;
30+
--borderWidth: 2px;
31+
--border: solid var(--borderWidth) var(--secondaryColor);
32+
--textFieldBorder: var(--border);
2933
}
3034

3135
.base {
@@ -42,7 +46,7 @@
4246
}
4347

4448
.depth {
45-
box-shadow: var(--shadowColor) 0 1px 6px;
49+
box-shadow: var(--dropShadow);
4650
}
4751

4852
.clearfix:after {

‎src/components/UI/toast/Toast.css

+5
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
--iconSize: 30px;
55
}
66

7+
/* redux-notifications override */
8+
:global(.notif__container) {
9+
z-index: 10000;
10+
}
11+
712
.root {
813
composes: base container rounded depth from '../theme.css';
914
overflow: hidden;

‎src/components/UnpublishedListing/UnpublishedListing.css

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
@import '../UI/theme.css';
2+
13
:root {
2-
--highlightColor: #e1eeea;
4+
--highlightColor: #38ab9b;
35
--defaultFontSize: 1em;
46
}
57

@@ -11,14 +13,16 @@
1113
.column {
1214
flex: 1 33%;
1315
margin: -10px;
16+
margin-top: 24px;
1417
padding: 10px;
1518
max-width: 33%;
1619
transition: background-color .5s ease;
1720
}
1821

1922
.columnHovered {
2023
composes: column;
21-
background-color: var(--highlightColor);
24+
border: 2px dashed var(--highlightColor);
25+
border-radius: 4px;
2226
}
2327

2428
.columnHeading {
@@ -32,3 +36,11 @@
3236
.card {
3337
margin-bottom: 10px;
3438
}
39+
40+
/* Gross stuff below, React Toolbox hacks */
41+
42+
.cardTitle h5 {
43+
color: var(--backgroundAltColor) !important;
44+
font-weight: 500 !important;
45+
font-size: 21px !important;
46+
}

‎src/components/UnpublishedListing/UnpublishedListing.js

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ class UnpublishedListing extends React.Component {
8888
<CardTitle
8989
title={entry.getIn(['data', 'title'])}
9090
subtitle={`by ${ author }`}
91+
className={styles.cardTitle}
9192
/>
9293
<CardText>
9394
Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}

‎src/components/UnpublishedListing/UnpublishedListingCardMeta.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
font-size: .75em;
1313
text-transform: uppercase;
1414

15-
background: var(--backgroundColorShaded);
15+
background: var(--backgroundAltColor);
16+
color: #fff;
1617
}
1718

1819
.meta {}

0 commit comments

Comments
 (0)