From 5155d9e799d45f2fb7c75f62242334f2341f8738 Mon Sep 17 00:00:00 2001
From: Nancy <68706811+nancy-dassana@users.noreply.github.com>
Date: Fri, 20 Nov 2020 19:27:55 -0800
Subject: [PATCH] v0.7.0 -> v0.7.1 (#150)

* feat #147, #148 - Update background colors and avatar styles (#149)
---
 package.json                           |  2 +-
 src/components/Avatar/index.tsx        | 29 +++++++++++++++++++++-----
 src/components/assets/styles/themes.ts |  8 +++----
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index f3e56854..62cd1744 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.7.0",
+	"version": "0.7.1",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
diff --git a/src/components/Avatar/index.tsx b/src/components/Avatar/index.tsx
index d6f84c14..376e22b1 100644
--- a/src/components/Avatar/index.tsx
+++ b/src/components/Avatar/index.tsx
@@ -1,8 +1,23 @@
 import 'antd/lib/avatar/style/index.css'
 import { Avatar as AntDAvatar } from 'antd'
 import { AvatarProps as AntDAvatarProps } from 'antd/lib/avatar'
+import { createUseStyles } from 'react-jss'
+import { styleguide } from 'components/assets/styles'
 import React, { FC, ReactNode } from 'react'
 
+const {
+	colors: { blacks }
+} = styleguide
+
+const useStyles = createUseStyles({
+	'@global': {
+		'.ant-avatar': {
+			background: blacks['lighten-30'],
+			color: blacks['lighten-80']
+		}
+	}
+})
+
 interface SharedAvatarProps {
 	/**
 	 * Letter type unit distance between left and right sides.
@@ -37,8 +52,12 @@ export const Avatar: FC<AvatarProps> = ({
 	gap,
 	icon,
 	size
-}: AvatarProps) => (
-	<AntDAvatar gap={gap} icon={icon} size={size}>
-		{children}
-	</AntDAvatar>
-)
+}: AvatarProps) => {
+	useStyles()
+
+	return (
+		<AntDAvatar gap={gap} icon={icon} size={size}>
+			{children}
+		</AntDAvatar>
+	)
+}
diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts
index 6592e11b..f7e5c637 100644
--- a/src/components/assets/styles/themes.ts
+++ b/src/components/assets/styles/themes.ts
@@ -35,8 +35,8 @@ export interface Theme {
 
 const lightPalette: Theme = {
 	background: {
-		primary: whites.base,
-		secondary: grays.base
+		primary: grays['lighten-70'],
+		secondary: whites.base
 	},
 	border: blacks['lighten-80'],
 	primary: blacks.base,
@@ -62,8 +62,8 @@ const lightPalette: Theme = {
 
 const darkPalette: Theme = {
 	background: {
-		primary: blacks.base,
-		secondary: blacks['darken-20']
+		primary: blacks['darken-40'],
+		secondary: blacks.base
 	},
 	border: blacks['lighten-20'],
 	primary: blacks['lighten-50'],