Skip to content

Commit

Permalink
Merge pull request #395 from netlify/visual-tweaks
Browse files Browse the repository at this point in the history
Small update to the UI's look and feel
  • Loading branch information
Shawn Erquhart committed May 18, 2017
2 parents aac5339 + 62a8de9 commit 2a1e9b4
Show file tree
Hide file tree
Showing 23 changed files with 395 additions and 288 deletions.
8 changes: 6 additions & 2 deletions src/components/AppHeader/AppHeader.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
@import '../UI/theme';

.appBar {
padding: 8px 24px;
height: auto;
background-color: var(--backgroundAltColor);
color: var(--defaultColorLight);
}

/* Gross stuff below, React Toolbox hacks */

.homeLink,
.iconMenu {
margin-left: 2%;
Expand All @@ -19,8 +23,8 @@
.leftIcon span {
/* stylelint-disable */

color: var(--foregroundAltColor) !important;
font-size: 30px !important;
color: var(--defaultColorLight) !important;
font-size: 24px !important;

/* stylelint-enable */
}
25 changes: 19 additions & 6 deletions src/components/ControlPanel/ControlPane.css
Original file line number Diff line number Diff line change
@@ -1,32 +1,41 @@
@import "../UI/theme";

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

& input,
& textarea,
& select {
font-family: monospace;
font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
display: block;
width: 100%;
padding: 12px;
margin: 0;
border: none;
border: var(--textFieldBorder);
border-radius: var(--borderRadius);
outline: 0;
box-shadow: none;
background-color: var(--controlBGColor);
font-size: 18px;
color: #7c8382;
font-size: 16px;
color: var(--textColor);
transition: border-color .3s ease;

&:focus,
&:active {
border-color: var(--primaryColor);
}
}
}

.label {
display: block;
color: var(--controlLabelColor);
font-size: 14px;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
}

.labelWithError {
Expand All @@ -40,3 +49,7 @@
color: #FF706F;
margin-bottom: 5px;
}

p {
font-size: 16px;
}
10 changes: 7 additions & 3 deletions src/components/EntryEditor/EntryEditor.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
}

.controlPane {
height: calc(100% - 55px);
overflow: auto;
padding: 20px 20px 0;
height: calc(100% - 55px);
border-right: 1px solid var(--defaultColorLight);
background-color: var(--backgroundTertiaryColorDark);
background-color: var(--backgroundColor);
}

.previewPane {
Expand All @@ -41,7 +41,7 @@
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid var(--defaultColorLight);
border-top: var(--border);
background: var(--backgroundColor);
text-align: right;
}
Expand All @@ -52,3 +52,7 @@
right: 0;
height: 100%;
}

.ProseMirror {
border: var(--textFieldBorder);
}
17 changes: 12 additions & 5 deletions src/components/EntryListing/EntryListing.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
.card {
flex: 0 300px;
overflow: hidden;
margin-bottom: 10px;
margin-left: 15px;
margin-bottom: 16px;
margin-left: 16px;
max-width: 50%;
max-height: 290px;
width: 240px;
cursor: pointer;
}

.card:hover {
background: #f8f9fa;
transform: translateY(-8px);
}

.cardImage {
width: 240px;
margin: -16px -24px 16px -24px;
width: calc(100% + 24px + 24px);
height: 135px;
background-position: center center;
background-size: cover;
Expand All @@ -18,7 +25,7 @@
.cardsGrid {
display: flex;
flex-flow: row wrap;
margin-left: -15px;
margin-left: -16px;
}

.cardList {
Expand Down
8 changes: 4 additions & 4 deletions src/components/FindBar/FindBar.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
}

.inputField {
width: 80%;
max-width: 800px;
width: 100%;
max-width: 500px;
display: block;
margin: 0 auto;
margin: 0 24px;
padding: 10px 14px;
border: 0;
border-radius: var(--borderRadius);
box-shadow: none;
outline: none;
font-size: 18px;
font-size: 14px;
}
2 changes: 1 addition & 1 deletion src/components/UI/Sticky/Sticky.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

.stickyActive:not(.stickyAtBottom) {
position: fixed !important;
top: 64px !important;
top: 54px !important;
}

.stickyAtBottom {
Expand Down
6 changes: 6 additions & 0 deletions src/components/UI/Sticky/Sticky.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,11 @@ export class Sticky extends Component {
static propTypes = {
className: PropTypes.string,

/**
* classNameActive: class to apply when Sticky is active.
*/
classNameActive: PropTypes.string,

/**
* fillContainerWidth: allows the sticky width to be dynamically set to the width of it's
* StickyContainer when sticky (fixed positioning).
Expand Down Expand Up @@ -201,6 +206,7 @@ export class Sticky extends Component {
styles.sticky,
{
[styles.stickyActive]: state.shouldStick,
[props.classNameActive]: state.shouldStick,
[styles.stickyAtBottom]: state.shouldStickAtBottom,
},
)}
Expand Down
47 changes: 32 additions & 15 deletions src/components/UI/card/Card.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,39 @@
@import '../theme.css';

.card {
composes: base container rounded depth;
composes: base container rounded;
overflow: hidden;
border: var(--textFieldBorder);
transition: all .1s ease-in-out;
transform: translateY(0);
padding: 16px 24px;
}

.card > iframe,
.card > video,
.card > img {
margin: -16px -24px 16px;
width: calc(100% + 16px + 16px);
}

.card h1 {
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 24px;
margin: 0;
padding: 0;
border: none;
color: var(--defaultColor);
}

.card p {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: 24px;
padding: 0;
color: var(--textMutedColor);
}

.card > *:not(iframe, video, img, header, footer) {
Expand All @@ -17,17 +48,3 @@
.card > *:not(iframe, video, img, header, footer):last-child {
margin-bottom: 10px;
}

.card > iframe,
.card > video,
.card > img {
max-width: 100%;
}

.card h1 {
margin: 15px 0;
padding: 0;
border: none;
color: var(--defaultColor);
font-size: 18px;
}
32 changes: 18 additions & 14 deletions src/components/UI/theme.css
Original file line number Diff line number Diff line change
@@ -1,31 +1,35 @@
:root {
--defaultColor: #333;
--defaultColorLight: #eee;
--defaultColorLight: #fff;
--backgroundColor: #fff;
--backgroundColorShaded: #eee;
--shadowColor: rgba(0, 0, 0, .25);
--shadowColor: rgba(19, 39, 48, .24);
--infoColor: #69c;
--primaryColor: #4990e2;
--successColor: #1c7;
--warningColor: #fa0;
--errorColor: #f52;
--textColor: #272e30;
--borderRadius: 2px;
--borderRadiusLarge: 10px;
--dropShadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
--textColor: #191919;
--textMutedColor: #8c8c8c;
--borderRadius: 4px;
--borderRadiusLarge: 8px;
--secondaryColor: #d9d9d9;
--dropShadow: 0 2px 8px 0 var(--secondaryColor);
--topmostZindex: 99999;
--foregroundAltColor: #fff;
--backgroundAltColor: #272e30;
--textFieldBorderColor: #e7e7e7;
--backgroundAltColor: #232528;
--textFieldBorderColor: var(--secondaryColor);
--highlightFGColor: #fff;
--highlightBGColor: #3ab7a5;
--highlightFGAltColor: #eee;
--controlLabelColor: var(--textColor);
--controlLabelColor: #8b8b8b;
--controlBGColor: #fff;
--backgroundTertiaryColor: #f2f5f4;
--backgroundTertiaryColor: #fff;
--backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
--richTextEditorMinHeight: 300px;
--borderWidth: 2px;
--border: solid var(--borderWidth) var(--secondaryColor);
--textFieldBorder: var(--border);
}

.base {
Expand All @@ -42,7 +46,7 @@
}

.depth {
box-shadow: var(--shadowColor) 0 1px 6px;
box-shadow: var(--dropShadow);
}

.clearfix:after {
Expand Down
5 changes: 5 additions & 0 deletions src/components/UI/toast/Toast.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
--iconSize: 30px;
}

/* redux-notifications override */
:global(.notif__container) {
z-index: 10000;
}

.root {
composes: base container rounded depth from '../theme.css';
overflow: hidden;
Expand Down
16 changes: 14 additions & 2 deletions src/components/UnpublishedListing/UnpublishedListing.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import '../UI/theme.css';

:root {
--highlightColor: #e1eeea;
--highlightColor: #38ab9b;
--defaultFontSize: 1em;
}

Expand All @@ -11,14 +13,16 @@
.column {
flex: 1 33%;
margin: -10px;
margin-top: 24px;
padding: 10px;
max-width: 33%;
transition: background-color .5s ease;
}

.columnHovered {
composes: column;
background-color: var(--highlightColor);
border: 2px dashed var(--highlightColor);
border-radius: 4px;
}

.columnHeading {
Expand All @@ -32,3 +36,11 @@
.card {
margin-bottom: 10px;
}

/* Gross stuff below, React Toolbox hacks */

.cardTitle h5 {
color: var(--backgroundAltColor) !important;
font-weight: 500 !important;
font-size: 21px !important;
}
1 change: 1 addition & 0 deletions src/components/UnpublishedListing/UnpublishedListing.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ class UnpublishedListing extends React.Component {
<CardTitle
title={entry.getIn(['data', 'title'])}
subtitle={`by ${ author }`}
className={styles.cardTitle}
/>
<CardText>
Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
font-size: .75em;
text-transform: uppercase;

background: var(--backgroundColorShaded);
background: var(--backgroundAltColor);
color: #fff;
}

.meta {}
Expand Down

0 comments on commit 2a1e9b4

Please sign in to comment.