-
+
Current theme:
- {JSON.stringify(currentSCTheme, null, 2)}
+ {JSON.stringify(currentMuiTheme, null, 2)}
);
};
diff --git a/src/components/ui/StyledComponentsButton.tsx b/src/components/ui/EmotionButton.tsx
similarity index 94%
rename from src/components/ui/StyledComponentsButton.tsx
rename to src/components/ui/EmotionButton.tsx
index b51c5679..e421dfa4 100644
--- a/src/components/ui/StyledComponentsButton.tsx
+++ b/src/components/ui/EmotionButton.tsx
@@ -1,6 +1,6 @@
/**
* Demo of a button with some custom style,
- * combining styled-components and material-ui
+ * combining emotion/styled and material-ui
*
*/
// NOTE: you don't need to import React, it will be added at build time by Babel/Next
@@ -10,7 +10,7 @@ import {
ButtonProps as MuiButtonProps,
} from "@material-ui/core";
import colors from "~/lib/style/colors";
-import styled from "styled-components";
+import { styled } from "@material-ui/core/styles";
import { lighten } from "polished";
const technologyToColor = {
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index e62ff277..3982e4fb 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -5,35 +5,37 @@
* - with react-spring, for physics based animation
*/
import colors from "~/lib/style/colors";
-import styled from "styled-components";
-import {
- applyStyleModifiers,
- ModifiersConfig,
- ModifiersProp,
- ModifierKeys,
-} from "styled-components-modifiers";
+import { styled } from "@material-ui/core/styles";
import { useSpring, animated } from "react-spring";
-const MODAL_MODIFIERS: ModifiersConfig = {
- // TODO: not style autocompletion
- // @see https://github.com/Decisiv/styled-components-modifiers/issues/51
- vulcan: () => `
- background-color: ${colors.orangeVulcan};
- `,
- themeDefault: (props) => `
- background-color: ${props.theme.backgroundColor};
- color: ${props.theme.color};
- `,
-};
+// Demo using styled components and modifier
+// We currently prefer using em
+// import {
+// applyStyleModifiers,
+// ModifiersConfig,
+// ModifiersProp,
+// ModifierKeys,
+// } from "styled-components-modifiers";
+// const MODAL_MODIFIERS: ModifiersConfig = {
+// // TODO: not style autocompletion
+// // @see https://github.com/Decisiv/styled-components-modifiers/issues/51
+// vulcan: () => `
+// background-color: ${colors.orangeVulcan};
+// `,
+// themeDefault: (props) => `
+// background-color: ${props.theme.backgroundColor};
+// color: ${props.theme.color};
+// `,
+// };
// This type should be included out-of-the bow in future versions of styled-components-modifiers
// @see https://github.com/Decisiv/styled-components-modifiers/pull/52
// @see https://github.com/Decisiv/styled-components-modifiers/pull/53/files
-interface WithModifiers {
- modifiers?: ModifierKeys;
-}
+//interface WithModifiers {
+// modifiers?: ModifierKeys;
+//}
-const ModalWrapper = styled(animated.div)