OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

upgrade to next Chakra RC

Browse source 
some regressions in here with global styles and color mode! I think we got it fixed though!
This commit is contained in:
Emi Matchu 2020-09-07 20:59:38 -07:00
parent bebb8e2d11
commit 0c3d9443c2
4 changed files with 516 additions and 452 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package.json
View file

@ -6,9 +6,9 @@
"@apollo/client": "^3.1.1", "@apollo/client": "^3.1.1",
"@apollographql/graphql-playground-html": "^1.6.24", "@apollographql/graphql-playground-html": "^1.6.24",
"@auth0/auth0-react": "^1.0.0", "@auth0/auth0-react": "^1.0.0",
"@chakra-ui/core": "^1.0.0-rc.0", "@chakra-ui/core": "^1.0.0-rc.3",
"@chakra-ui/icons": "^1.0.0-rc.0", "@chakra-ui/icons": "^1.0.0-rc.3",
"@chakra-ui/theme": "^1.0.0-rc.0", "@chakra-ui/theme": "^1.0.0-rc.3",
"@loadable/component": "^5.12.0", "@loadable/component": "^5.12.0",
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2", "@testing-library/react": "^9.3.2",

34
public/index.html
View file

@ -53,6 +53,40 @@
/> />
</head> </head>
<body> <body>
<script>
// HACK: This is copy-pasted output from Chakra's <ColorModeScript />. It
// initializes our color mode to match the system color mode. The
// component is built for a special Document element like in
// Next.js, but in create-react-app this is the best we can do!
(function setColorModeVar(initialValue) {
var mql = window.matchMedia("(prefers-color-scheme: dark)");
var systemPreference = mql.matches ? "dark" : "light";
var persistedPreference;
try {
persistedPreference = localStorage.getItem("chakra-ui-color-mode");
} catch (error) {
console.log(
"Chakra UI: localStorage is not available. Color mode persistence might not work as expected"
);
}
var isInStorage = typeof persistedPreference === "string";
var colorMode;
if (isInStorage) {
colorMode = persistedPreference;
} else {
colorMode =
initialValue === "system" ? systemPreference : initialValue;
}
if (colorMode) {
var root = document.documentElement;
root.style.setProperty("--chakra-ui-color-mode", colorMode);
}
})("system");
</script>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--

11
src/app/App.js
View file

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { ApolloProvider } from "@apollo/client"; import { ApolloProvider } from "@apollo/client";
import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0Provider } from "@auth0/auth0-react";
import { CSSReset, ChakraProvider } from "@chakra-ui/core"; import { CSSReset, ChakraProvider, useColorMode } from "@chakra-ui/core";
import defaultTheme from "@chakra-ui/theme"; import defaultTheme from "@chakra-ui/theme";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import loadable from "@loadable/component"; import loadable from "@loadable/component";
@ -21,8 +21,17 @@ const theme = {
...defaultTheme.styles, ...defaultTheme.styles,
global: ({ colorMode, ...rest }) => ({ global: ({ colorMode, ...rest }) => ({
...defaultTheme.styles.global({ colorMode, ...rest }), ...defaultTheme.styles.global({ colorMode, ...rest }),
html: {
// HACK: Chakra sets body as the relative position element, which is
// fine, except its `min-height: 100%` doesn't actually work
// unless paired with height on the root element too!
height: "100%",
},
body: {
background: colorMode === "light" ? "white" : "gray.800",
color: colorMode === "light" ? "green.800" : "green.50", color: colorMode === "light" ? "green.800" : "green.50",
transition: "all 0.25s", transition: "all 0.25s",
},
}), }),
}, },
}; };

913
yarn.lock
View file

File diff suppressed because it is too large Load diff