Modal dialog to present description - css

Question

I am trying to make a popup window with a description for the project whenever someone clicks the description button.
I can't figure out how to do it. I have looked for components in react-mdl but I don't know how to insert it to my program.
The hirarchy of the button is:
-App
---NAVBAR
---Pages
-------Projects
---------ProjectCard
------------description button
I have tried to integrate components from react-mdl, semantic-ui etc, but I couldn't figure out how to adapt it to my program.
Thanks in advance guys!
import React from "react";
import { Layout, Content } from "react-mdl";
import Pages from "./Pages";
import { NavBar } from "./NavBar";
import { LeftDrawer } from "./LeftDrawer";
class App extends React.Component {
render() {
return (
<div>
<Layout>
<NavBar />
<LeftDrawer />
<Content className="app-content">
<Pages />
</Content>
</Layout>
</div>
);
}
}
export default App;
import React from "react";
import { Tabs, Tab } from "react-mdl";
import { CProjects } from "./CProjects";
import { ReactProjects } from "./ReactProjects";
import { SwiftProjects } from "./SwiftProjects";
import { TypescriptProjects } from "./TypescriptProjects";
import { JavaProjects } from "./JavaProjects";
import { CPPProjects } from "./CPPProjects";
import { PythonProjects } from "./PythonProjects";
import { AssemblyProjects } from "./AssemblyProjects";
class Projects extends React.Component {
state = { activeTab: 0 };
handleChange = tabId => {
this.setState({ activeTab: tabId });
};
toggleCategiries = () => {
switch (this.state.activeTab) {
case 0:
return (
<div className="react-projects">
<ReactProjects />
</div>
);
case 1:
return (
<div className="typescript-projects">
<TypescriptProjects />
</div>
);
case 2:
return (
<div className="java-projects">
<JavaProjects />
</div>
);
case 3:
return (
<div className="c-projects">
<CProjects />
</div>
);
case 4:
return (
<div className="c++-projects">
<CPPProjects />
</div>
);
case 5:
return (
<div className="swift-projects">
<SwiftProjects />
</div>
);
case 6:
return (
<div className="python-projects">
<PythonProjects />
</div>
);
case 7:
return (
<div className="assembly-projects">
<AssemblyProjects />
</div>
);
default:
return <div>lala</div>;
}
};
render() {
return (
<div className="page">
<div className="categories">
<Tabs
activeTab={this.state.activeTab}
onChange={this.handleChange}
ripple
>
<Tab className="tab">React</Tab>
<Tab className="tab">TypeScript</Tab>
<Tab className="tab">Java</Tab>
<Tab className="tab">C</Tab>
<Tab className="tab">C++</Tab>
<Tab className="tab">Swift</Tab>
<Tab className="tab">Python</Tab>
<Tab className="tab">Assembly</Tab>
</Tabs>
{this.toggleCategiries()}
</div>
</div>
);
}
}
export default Projects;
import React from "react";
import {
Card,
CardTitle,
CardActions,
Button,
CardMenu,
IconButton,
CardText
} from "react-mdl";
import { Link } from "react-router-dom";
class ProjectCard extends React.Component {
render() {
const titleStyle = {
backgroundImage: "url(" + this.props.background + ")",
backgroundSize: "100% 100%",
color: "#fff",
height: "176px"
};
return (
<div>
<Card shadow={6} style={{ borderRadius: "6px" }}>
<CardTitle style={titleStyle}>{this.props.name}</CardTitle>
<CardText>{this.props.shortDescription}</CardText>
<CardActions border>
<div style={{ display: "flex", justifyContent: "center" }}>
<a href={this.props.github} target="_blank">
<Button colored>GitHub</Button>
</a>
<Button colored>Description</Button>
</div>
</CardActions>
<CardMenu style={{ color: "#fff" }}>
<IconButton name="share" />
</CardMenu>
</Card>
</div>
);
}
}
export default ProjectCard;
import React from "react";
import { Spring } from "react-spring/renderprops";
import ProjectCard from "./ProjectCard";
import backgroundImage from "../../additional-files/images/React_background.png";
export const ReactProjects = () => {
return (
<Spring
config={{ duration: 1000 }}
from={{ opacity: 0 }}
to={{ opacity: 1 }}
>
{props => (
<div style={props}>
<div className="projects">
<div className="project">
<ProjectCard
name="Lab1"
shortDescription="Encoder and Debug mode"
description="This is the desired description in Modal"
github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
background={backgroundImage}
/>
</div>
<div className="project">
<ProjectCard
name="Lab1"
shortDescription="Encoder and Debug mode"
description="This is the desired description in Modal"
github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
background={backgroundImage}
/>
</div>
<div className="project">
<ProjectCard
name="Lab1"
shortDescription="Encoder and Debug mode"
description="This is the desired description in Modal"
github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
background={backgroundImage}
/>
</div>
</div>
</div>
)}
</Spring>
);
};

Answer 1

I managed to do it with a Dialog component of evergreen ui.
Inserted it where the Description button was and inside it, I inserted the button
import React from "react";
import {
Card,
CardTitle,
CardActions,
Button,
CardMenu,
IconButton,
CardText
} from "react-mdl";
import Component from "#reach/component-component";
import { Pane, Dialog } from "evergreen-ui";
class ProjectCard extends React.Component {
state = {
active: false
};
handleToggle = () => {
this.setState({ active: !this.state.active });
};
actions = [
{ label: "Cancel", onClick: this.handleToggle },
{ label: "Save", onClick: this.handleToggle }
];
render() {
const titleStyle = {
backgroundImage: "url(" + this.props.background + ")",
backgroundSize: "100% 100%",
color: "#fff",
height: "176px"
};
return (
<div>
<Card shadow={6} style={{ borderRadius: "6px" }}>
<CardTitle style={titleStyle}>{this.props.name}</CardTitle>
<CardText>{this.props.shortDescription}</CardText>
<CardActions border>
<div style={{ display: "flex", justifyContent: "center" }}>
<a href={this.props.github} target="_blank">
<Button colored>GitHub</Button>
</a>
<Component initialState={{ isShown: false }}>
{({ state, setState }) => (
<Pane>
<Dialog
isShown={state.isShown}
title={this.props.name + " description"}
onCloseComplete={() => setState({ isShown: false })}
confirmLabel="close"
hasFooter={false}
>
<Pane height={1800} width="100%" backgroundColor="#ddd" style={{ borderRadius: '6px' }}>
<div style={{ padding: "1vw 0 0 1vw" }}>
{this.props.description}
</div>
</Pane>
</Dialog>
<Button colored onClick={() => setState({ isShown: true })}>
Description
</Button>
</Pane>
)}
</Component>
</div>
</CardActions>
<CardMenu style={{ color: "#fff" }}>
<IconButton name="share" />
</CardMenu>
</Card>
</div>
);
}
}
export default ProjectCard;