style: update notification in light theme

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>

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 = {

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 = {

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
   }
 }

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'

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>
+          )
         }
       ]
     }

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"