Upgrade box and change color scheme. (#371)

* add in new version of box

* new version of box is rendering

* add in new colors and a bunch of fixes for box

* add in new snapshots with new version

* update some more snapshots

Author: jcblw

packages/extension/package.json

@@ -7,7 +7,7 @@
     "@babel/core": "7.6.0",
     "@emotion/cache": "^10.0.19",
     "@emotion/core": "^10.0.17",
-    "@mujo/box": "^3.0.1",
+    "@mujo/box": "^4",
     "@mujo/eslint-config": "^1.0.4",
     "@mujo/ingress": "^0.1.1",
     "@mujo/plugins": "^2.2.0",

packages/extension/plugins/mujo-end-screen-affirmations/end-screen-affirmation.js

@@ -1,6 +1,5 @@
-import { Box } from '@mujo/box'
 import { context, EndScreen } from '@mujo/plugins'
-import { HeaderL, useTheme } from '@mujo/ui'
+import { HeaderL, useTheme, Box } from '@mujo/ui'
 import React, { useEffect, useMemo, useContext } from 'react'
 import { HappyFace } from './happy-face'
 

packages/extension/plugins/mujo-end-screen-affirmations/happy-face.js

@@ -1,4 +1,4 @@
-import { Box } from '@mujo/box'
+import { Box } from '@mujo/ui'
 import React from 'react'
 
 export const HappyFace = ({

packages/extension/scripts/plugins-resolver.js

@@ -57,8 +57,6 @@ const doesExist = async pluginPath => {
 }
 
 const createPluginFile = async plugins => {
-  log('creating plugin file')
-  console.log(plugins)
   const content = `module.exports = [${plugins
     .map(plugin => {
       const pluginPath = path.relative(

packages/extension/src/__snapshots__/app.test.js.snap

@@ -2,6 +2,6 @@
 
 exports[`should match the snapshot 1`] = `
 <div
-  className="css-wnvqk7"
+  className="css-l9leyy"
 />
 `;

packages/extension/src/app.js

@@ -1,7 +1,6 @@
 import { css, Global } from '@emotion/core'
-import { Box } from '@mujo/box'
 import { IngressTarget } from '@mujo/ingress'
-import { colors, useTheme } from '@mujo/ui'
+import { colors, useTheme, Box } from '@mujo/ui'
 import React, { memo } from 'react'
 import { Header } from './components/header'
 import { InfoModal } from './components/info-modal'
@@ -23,12 +22,9 @@ const radialGradient = (centerColor, outerColor) => {
 }
 
 const bodyBackgrounds = {
-  outerSpace: radialGradient(colors.gravel, colors.outerSpace),
-  mischka: radialGradient(colors.white, colors.mischka),
+  dark: radialGradient(colors.black, colors.dark),
+  light: radialGradient(colors.white, colors.light),
 }
-
-const appWrapper = css({ height: '100vh' })
-
 const DEFAULT_SIZE = 40
 const factor = x => x * 0.0025
 const factorMin = size => Math.max(size, DEFAULT_SIZE)
@@ -55,9 +51,9 @@ const App = memo(() => {
     <Box
       color={theme.foreground}
       display="flex"
-      direction="column"
+      flexDirection="column"
       position="relative"
-      {...appWrapper}
+      css={{ height: '100vh' }}
     >
       <Global
         styles={css`
@@ -93,7 +89,7 @@ const App = memo(() => {
             layer="3"
             position="relative"
           >
-            <Box flex={0} display="flex" direction="row">
+            <Box flex={0} display="flex" flexDirection="row">
               <Tabs />
             </Box>
           </Box>

packages/extension/src/components/error-box/frames.js

@@ -1,5 +1,4 @@
-import { Box } from '@mujo/box'
-import { FixedS, FixedL } from '@mujo/ui'
+import { FixedS, FixedL, Box } from '@mujo/ui'
 import React from 'react'
 
 const FN_SIZE = 25
@@ -19,7 +18,7 @@ export const Frames = ({ frames, error }) => (
         marginBottom="xxs"
         key={index}
         display="flex"
-        direction="row"
+        flexDirection="row"
       >
         <FixedS
           Component="pre"

packages/extension/src/components/error-box/index.js

@@ -1,6 +1,4 @@
-import { css } from '@emotion/core'
-import { Box } from '@mujo/box'
-import { HeaderL } from '@mujo/ui'
+import { HeaderL, Box } from '@mujo/ui'
 import ErrorStackParser from 'error-stack-parser'
 import React from 'react'
 import { ENVIRONMENT } from '../../env'
@@ -44,14 +42,14 @@ export class ErrorBox extends React.Component {
           position="fixed"
           backgroundColor="outerSpace"
           padding="xl"
-          {...css({
+          css={{
             top: 0,
             left: 0,
             bottom: 0,
             right: 0,
             height: '100vh',
             width: '100vw',
-          })}
+          }}
         >
           <HeaderL
             maxWidth="500px"

packages/extension/src/components/error-box/message.js

@@ -1,5 +1,4 @@
-import { Box } from '@mujo/box'
-import { BodyS, HeaderS } from '@mujo/ui'
+import { BodyS, HeaderS, Box } from '@mujo/ui'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { TRANSLATION_FILE } from '../../constants'

packages/extension/src/components/fav-button/__snapshots__/index.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`FavButton component matches snapshot 1`] = `
 <a
-  className="css-1wtzem9"
+  className="css-1px3l"
   disable={false}
   disabled={true}
   href="foo"
@@ -21,16 +21,16 @@ exports[`FavButton component matches snapshot 1`] = `
     src="https://getmujo.com/api/icon?site=foo"
   />
   <div
-    className="css-19sk4h4"
+    className="css-l5xv05"
   >
     <div
       className="css-aq08jq"
     >
       <span
-        className="css-7son14"
+        className="css-zfsq8m"
       >
         <div
-          className="css-1ht175c"
+          className="css-ngp4q"
         />
         <div
           className="css-wuflo1"