fix: contextual component (#141)

- Use theming instead of custom background prop - Remove backgroundcolor prop from Contextual styles - Fix hover flickering errors - Remove styles provider
Circle-Back · Dec 17, 2019 · ae50d4d · ae50d4d · vercel · Dec 17, 2019
1 parent e42beb8
commit ae50d4d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 37 deletions.
diff --git a/src/MuiTheme.ts b/src/MuiTheme.ts
@@ -17,10 +17,6 @@ const theme = createMuiTheme({
  background: {
  default: "#fff",
  },
- text: {
- primary: "#7f39fb",
- secondary: "rgba(0, 0, 0, 0.74)",
- },
  },
  overrides: {
  MuiMenuItem: {

diff --git a/src/components/Contextual.styles.ts b/src/components/Contextual.styles.ts
@@ -6,19 +6,11 @@ export interface BackgroundImageProps {
  image: string;
 }
 
-interface ContextualButtonProps {
- textcolor?: string | undefined;
- backgroundcolor?: string | undefined;
-}
-
 export const ContextualContainer = styled.div`
  position: relative;
 `;
 
-export const ContextualButton = styled(Button)<ContextualButtonProps>`
- height: 36px;
- background-color: ${({ backgroundcolor }): string => backgroundcolor || "white"};
- color: ${({ textcolor }): string => textcolor || "white"};
+export const ContextualButton = styled(Button)`
  top: 140%;
  left: 50%;
  margin-right: -50%;

diff --git a/src/components/Contextual.tsx b/src/components/Contextual.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import Grid from "@material-ui/core/Grid";
-import { ThemeProvider, StylesProvider } from "@material-ui/core/styles";
+import { StylesProvider } from "@material-ui/core/styles";
 import {
  BackgroundImage,
  Title,
@@ -11,7 +11,6 @@ import {
  Body,
  ContextualButton,
 } from "./Contextual.styles";
-import theme from "../MuiTheme";
 
 export interface ContextualProps {
  name: string;
@@ -29,27 +28,25 @@ export const Contextual: React.FC<ContextualProps> = ({
  button,
 }: ContextualProps) => (
  <StylesProvider injectFirst>
- <ThemeProvider theme={theme}>
- <ContextualContainer>
- <StyledGrid container direction="column" spacing={1}>
- <Grid item>
- <Name>{name}</Name>
- </Grid>
- <Grid item>
- <Title>{title}</Title>
- </Grid>
- <Grid item>
- <Body>{body}</Body>
- </Grid>
- </StyledGrid>
- <BackgroundImage image={image} />
- <Overlay />
- {button ? (
- <ContextualButton backgroundcolor={theme.palette.primary.main}>
- Start a topic
- </ContextualButton>
- ) : null}
- </ContextualContainer>
- </ThemeProvider>
+ <ContextualContainer>
+ <StyledGrid container direction="column" spacing={1}>
+ <Grid item>
+ <Name>{name}</Name>
+ </Grid>
+ <Grid item>
+ <Title>{title}</Title>
+ </Grid>
+ <Grid item>
+ <Body>{body}</Body>
+ </Grid>
+ </StyledGrid>
+ <BackgroundImage image={image} />
+ <Overlay />
+ {button ? (
+ <ContextualButton variant="contained" color="primary">
+ Start a topic
+ </ContextualButton>
+ ) : null}
+ </ContextualContainer>
  </StylesProvider>
 );