From dbc2764760591d79717bff6e088e8bcf90810d35 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Wed, 7 Nov 2018 21:32:00 +0100
Subject: [PATCH] style: update notification in light theme

---
 app/components/UI/Notification.js             |  4 +--
 app/themes/base.js                            |  5 +++-
 app/themes/dark.js                            | 10 +++----
 app/themes/light.js                           | 28 +++++++++----------
 stories/_general/color.stories.js             |  3 +-
 stories/components/notification.stories.js    |  6 +++-
 .../__snapshots__/Notification.spec.js.snap   |  5 ++--
 7 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/app/components/UI/Notification.js b/app/components/UI/Notification.js
index 422a37af..a71efd56 100644
--- a/app/components/UI/Notification.js
+++ b/app/components/UI/Notification.js
@@ -58,7 +58,7 @@ class Notification extends React.Component {
       >
         <Flex justifyContent="space-between">
           <Flex alignItems="center">
-            <Text fontSize="xl">
+            <Text fontSize={17}>
               {processing && <Spinner size="2em" mr="0.5em" />}
               {!processing && variant === 'success' && <Success />}
               {!processing && variant === 'warning' && <Warning />}
@@ -68,7 +68,7 @@ class Notification extends React.Component {
               {children}
             </Text>
           </Flex>
-          <Text fontSize="xs">
+          <Text fontSize="xs" mt={1}>
             <X strokeWidth={hover ? 5 : 4} />
           </Text>
         </Flex>
diff --git a/app/themes/base.js b/app/themes/base.js
index b0967674..b4401214 100644
--- a/app/themes/base.js
+++ b/app/themes/base.js
@@ -16,7 +16,10 @@ export const palette = {
   pineGreen: '#0d331a',
   superRed: '#e63939',
   mudBrown: '#330d0d',
-  gray: '#959595'
+  gray: '#959595',
+  lightGreen: '#eefff4',
+  lightOrange: '#fff3e1',
+  lightRed: '#ffeded'
 }
 
 export const fontSizes = {
diff --git a/app/themes/dark.js b/app/themes/dark.js
index 0e771423..d397d326 100644
--- a/app/themes/dark.js
+++ b/app/themes/dark.js
@@ -16,6 +16,10 @@ const {
 } = palette
 
 const colors = {
+  primaryColor: deepseaBlue,
+  secondaryColor: underwaterBlue,
+  tertiaryColor: seaBlue,
+  highlight: hoverSeaBlue,
   primaryText: white,
   lightningOrange,
   lightningBrown,
@@ -23,11 +27,7 @@ const colors = {
   pineGreen,
   superRed,
   mudBrown,
-  gray,
-  primaryColor: deepseaBlue,
-  secondaryColor: underwaterBlue,
-  tertiaryColor: seaBlue,
-  highlight: hoverSeaBlue
+  gray
 }
 
 const buttons = {
diff --git a/app/themes/light.js b/app/themes/light.js
index 60d8a72e..658bd406 100644
--- a/app/themes/light.js
+++ b/app/themes/light.js
@@ -4,30 +4,30 @@ const {
   white,
   black,
   lightningOrange,
-  lightningBrown,
+  lightOrange,
   seaGray,
   hoverSeaGray,
   underwaterGray,
   superGreen,
-  pineGreen,
+  lightGreen,
   superRed,
-  mudBrown,
+  lightRed,
   gray
 } = palette
 
 const colors = {
+  primaryColor: white,
+  secondaryColor: underwaterGray,
+  tertiaryColor: seaGray,
+  highlight: hoverSeaGray,
   primaryText: black,
   lightningOrange,
-  lightningBrown,
+  lightOrange,
   superGreen,
-  pineGreen,
+  lightGreen,
   superRed,
-  mudBrown,
-  gray,
-  primaryColor: white,
-  secondaryColor: underwaterGray,
-  tertiaryColor: seaGray,
-  highlight: hoverSeaGray
+  lightRed,
+  gray
 }
 
 const buttons = {
@@ -59,15 +59,15 @@ const buttons = {
 }
 const cards = {
   success: {
-    backgroundColor: colors.pineGreen,
+    backgroundColor: colors.lightGreen,
     color: colors.superGreen
   },
   warning: {
-    backgroundColor: colors.lightningBrown,
+    backgroundColor: colors.lightOrange,
     color: colors.lightningOrange
   },
   error: {
-    backgroundColor: colors.mudBrown,
+    backgroundColor: colors.lightRed,
     color: colors.superRed
   }
 }
diff --git a/stories/_general/color.stories.js b/stories/_general/color.stories.js
index 7fede8f5..f3e4dd98 100644
--- a/stories/_general/color.stories.js
+++ b/stories/_general/color.stories.js
@@ -15,8 +15,7 @@ const Swatch = ({ name, color }) => (
         width={50}
         mr={21}
         borderRadius={8}
-        borderColor="primaryText"
-        border="solid 1px"
+        boxShadow="0 2px 6px rgba(0, 0, 0, 0.3)"
         css={{
           background: color,
           height: '50px'
diff --git a/stories/components/notification.stories.js b/stories/components/notification.stories.js
index e37d2fff..a1119e88 100644
--- a/stories/components/notification.stories.js
+++ b/stories/components/notification.stories.js
@@ -21,7 +21,11 @@ storiesOf('Components', module).addWithChapters('Notification', {
         },
         {
           title: 'Processing',
-          sectionFn: () => <Notification processing>Processing notification</Notification>
+          sectionFn: () => (
+            <Notification variant="warning" processing>
+              Processing notification
+            </Notification>
+          )
         }
       ]
     }
diff --git a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap
index b591ffc2..11e9f9b3 100644
--- a/test/unit/components/UI/__snapshots__/Notification.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Notification.spec.js.snap
@@ -24,7 +24,7 @@ exports[`component.UI.Notification should render correctly 1`] = `
 }
 
 .c3 {
-  font-size: xl;
+  font-size: 17px;
 }
 
 .c4 {
@@ -33,6 +33,7 @@ exports[`component.UI.Notification should render correctly 1`] = `
 }
 
 .c5 {
+  margin-top: 4px;
   font-size: xs;
 }
 
@@ -59,7 +60,7 @@ exports[`component.UI.Notification should render correctly 1`] = `
     >
       <div
         className="c3"
-        fontSize="xl"
+        fontSize={17}
       >
         <svg
           height="1em"