From 01cf06537ed5f65c5efd29d3689be10a7f3ab1ce Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Wed, 14 Oct 2020 13:16:04 -0700
Subject: [PATCH] feat #114 - Update input border radius, refac

---
 src/components/Input/utils.ts              | 11 +++++++++--
 src/components/RadioGroup/utils.ts         |  5 +++--
 src/components/assets/styles/styleguide.ts |  1 +
 src/components/assets/styles/themes.ts     |  3 +--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts
index 072a6c65..8e80dbed 100644
--- a/src/components/Input/utils.ts
+++ b/src/components/Input/utils.ts
@@ -1,9 +1,15 @@
 import {
+	border,
 	borderRadius,
 	fieldErrorStyles
 } from 'components/assets/styles/styleguide'
 import { themedStyles, ThemeType } from 'components/assets/styles/themes'
 
+const borderStyles = {
+	border,
+	borderRadius
+}
+
 export const generateInputStyles = (themeType: ThemeType) => {
 	const { base, disabled, error, focus, hover, placeholder } = themedStyles[
 		themeType
@@ -22,6 +28,7 @@ export const generateInputStyles = (themeType: ThemeType) => {
 				borderColor: hover.borderColor
 			},
 			backgroundColor: base.backgroundColor,
+			...borderStyles,
 			borderColor: base.borderColor,
 			color: base.color
 		},
@@ -42,8 +49,8 @@ export const generateInputSkeletonStyles = (themeType: ThemeType) => {
 	const { loading } = themedStyles[themeType]
 
 	return {
-		border: loading.border,
-		borderRadius: borderRadius,
+		...borderStyles,
+		borderColor: loading.border,
 		padding: '6px 14px'
 	}
 }
diff --git a/src/components/RadioGroup/utils.ts b/src/components/RadioGroup/utils.ts
index 0655a878..f2ae1dd8 100644
--- a/src/components/RadioGroup/utils.ts
+++ b/src/components/RadioGroup/utils.ts
@@ -1,11 +1,12 @@
-import { borderRadius } from 'components/assets/styles/styleguide'
+import { border, borderRadius } from 'components/assets/styles/styleguide'
 import { themedStyles, ThemeType } from 'components/assets/styles/themes'
 
 export const generateRadioSkeletonStyles = (themeType: ThemeType) => {
 	const { loading } = themedStyles[themeType]
 
 	return {
-		border: loading.border,
+		border,
+		borderColor: loading.border,
 		borderRadius: borderRadius,
 		display: 'flex',
 		margin: '0 1px'
diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts
index f02e6fe3..488a57d2 100644
--- a/src/components/assets/styles/styleguide.ts
+++ b/src/components/assets/styles/styleguide.ts
@@ -1,5 +1,6 @@
 import colors from './colors'
 
+export const border = '1px solid'
 export const borderRadius = 4
 export const defaultFieldWidth = '300px'
 export const fieldErrorStyles = {
diff --git a/src/components/assets/styles/themes.ts b/src/components/assets/styles/themes.ts
index 311ef3f1..a6bbe451 100644
--- a/src/components/assets/styles/themes.ts
+++ b/src/components/assets/styles/themes.ts
@@ -37,7 +37,6 @@ const lightPalette: Theme = {
 		secondary: blacks['lighten-90']
 	},
 	border: blacks['lighten-80'],
-
 	primary: blues.base,
 	state: {
 		active: blacks.base,
@@ -108,7 +107,7 @@ const generateThemedStyles = ({ state, background, border, text }: Theme) => {
 	}
 
 	const loading = {
-		border: `1px solid ${state.loading.primary}`
+		border: state.loading.primary
 	}
 
 	const placeholder = {