Colour Scheming: Update Chat Window (#30125)

* Update Chat Colours * Make Submit Button Primary * Favour Default Primary Button Styles * Attempt to Fix Button * Update Hover of Close Button
Automattic · Jan 17, 2019 · 7182119 · 7182119
1 parent aafa04d
commit 7182119
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 19 deletions.
diff --git a/client/components/happychat/composer.jsx b/client/components/happychat/composer.jsx
@@ -12,6 +12,7 @@ import { get, isEmpty, throttle } from 'lodash';
 /**
  * Internal dependencies
  */
+import Button from 'components/button';
 import scrollbleed from './scrollbleed';
 
 const sendThrottledTyping = throttle(
@@ -88,11 +89,11 @@ export const Composer = createReactClass( {
 						value={ message }
 					/>
 				</div>
-				<button className="happychat__submit" disabled={ disabled } onClick={ this.sendMessage }>
+				<Button primary className="happychat__submit" disabled={ disabled } onClick={ this.sendMessage }>
 					<svg viewBox="0 0 24 24" width="24" height="24">
 						<path d="M2 21l21-9L2 3v7l15 2-15 2z" />
 					</svg>
-				</button>
+				</Button>
 			</div>
 		);
 	},

diff --git a/client/components/happychat/style.scss b/client/components/happychat/style.scss
@@ -17,7 +17,7 @@
 	}
 
 	> div:hover {
-		background: lighten( $blue-medium, 5% );
+		background: var( --color-primary-0 );
 	}
 
 	svg {
@@ -46,9 +46,8 @@
 	.happychat__title {
 		cursor: default;
 		padding: 0;
-		background: var( --color-accent );
-		border-bottom: 1px solid darken( $blue-medium, 5% );
-		color: $white;
+		background: var( --color-surface );
+		color: var( --color-neutral-dark );
 		flex: 0 0 auto;
 		display: flex;
 		align-items: center;
@@ -245,8 +244,6 @@
 	align-self: flex-start;
 	flex: 0 0 auto;
 	border-radius: 8px;
-	background: var( --color-accent );
-	color: $white;
 	padding: 4px 8px;
 	margin: 8px 12px 0 0;
 	cursor: pointer;
@@ -256,10 +253,6 @@
 		display: block;
 	}
 
-	&:hover {
-		background: lighten( $blue-medium, 10% );
-	}
-
 	&:disabled {
 		display: none;
 	}
@@ -302,8 +295,8 @@
 	}
 
 	.is-user-message & {
-		color: $white;
-		background: var( --color-accent );
+		color: var( --color-primary-dark );
+		background: var( --color-primary-50 );
 		border-radius: 8px 8px 0;
 
 		&::after {
@@ -313,7 +306,7 @@
 			// draw a triangle
 			width: 0;
 			height: 0;
-			border-bottom: 8px solid var( --color-accent );
+			border-bottom: 8px solid var( --color-primary-50 );
 			border-left: none;
 			border-right: 8px solid transparent;
 		}
@@ -421,10 +414,6 @@
 			border-left: 1px solid lighten( $gray, 25% );
 		}
 
-		.happychat__active-toolbar {
-			border-left: 1px solid darken( $blue-medium, 2% );
-		}
-
 		.happychat__title {
 			line-height: 46px;
 		}