Trading screen

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "history": "^4.6.3",
     "marked": "^0.3.6",
+    "miragejs": "^0.1.41",
     "prop-types": "^15.5.10",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
@@ -19,6 +20,7 @@
     "redux": "^3.6.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.1",
+    "styled-components": "^5.3.0",
     "superagent": "^3.8.2",
     "superagent-promise": "^1.1.0"
   },

src/components/AddButton.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import AddRoundedIcon from '@material-ui/icons/AddRounded';
+import styled from 'styled-components'
+
+
+function AddButton() {
+    const IconAdd = styled.div`
+        width:40px;
+        height:40px;
+        background:transparent;
+        text-align:center;
+        position:relative;
+        padding:3px;
+        &:hover{
+            border-radius:50%;
+            background: #D3D3D3 radial-gradient(circle, transparent 1%, #D3D3D3 1%) center/15000%;
+            background-position: center;
+            transition: background 0.5s;
+
+        }
+    `
+    return (
+        <IconAdd>
+            <AddRoundedIcon fontSize="Large" color="black"/>
+        </IconAdd>
+    )
+}
+
+export default AddButton

src/components/Trading/App.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import Cards from '../../components/Trading/Cards';
+
+
+class App extends Component {
+  state = {
+    DataList: []
+  };
+
+  async componentDidMount() {
+    this.getData();
+  }
+  getData = async () => {
+    const apiUrl = "https://raw.githubusercontent.com/Gayathri-p32/DeckData/main/Data.json"
+    const response = await fetch(apiUrl);
+    const data = await response.json();
+    this.setState({
+      DataList: data
+    });
+  }
+  render() {
+    const DeckData = this.state.DataList;
+    return (
+      <div className="App">
+        <Cards decks={DeckData} />
+
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/Trading/Button.js

@@ -0,0 +1,15 @@
+
+import styled from 'styled-components';
+export default styled.button`
+  min-width: 200px;
+  font-size: 18px;
+  padding: 7px 10px;
+  background-color: ${props => props.inputBg || "palevioletred"};
+  margin: 0.5em;
+ color:white;
+ borderWidth: 1;
+ border-radius: 1px;
+ border: none;
+ display: inline-block;
+`;
+

src/components/Trading/Card.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  width: 100px;
+  height: 150px;
+  border: 3px solid ${props => props.color};
+  border-radius: 0px;
+  justify-content: space-around;
+  font-size: 5em;
+  color: ${props => props.color};
+`;
+
+const Content = styled.div`
+  align-self: center;
+`;
+
+const Card = ({ children, color = 'black' }) => (
+  <Container color={color}>
+    <Content>
+      {children}
+    </Content>
+  </Container>
+);
+
+export default Card;

src/components/Trading/Cards.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import styled from 'styled-components'
+
+function Cards(props) {
+    const CardList = styled.div`
+        display:flex;
+        flex-wrap : wrap;
+        @media only screen and (max-width:480px){
+            flex-direction:column;
+        }
+    `
+    const Card = styled.div`
+        width: 300px;
+        height : 300px;
+        text-align:center;
+        background:gray;
+        margin:20px;
+        position:relative;
+        @media only screen and (max-width:480px){
+            width:100%;
+            height:200px;
+            margin:10px;
+            overflow-y:scroll;
+        }
+    `
+    const CardName = styled.h2`
+        font-family:font-family: Arial, Helvetica, sans-serif;
+        font-size:24px;
+        position:absolute;
+        top:30%;
+        left:40%;
+    `
+    return (
+        <CardList>
+            {props.decks.map(deck => (
+                <Card>
+                    <CardName>{deck.name}</CardName>
+                </Card>
+            ))}
+        </CardList>
+    )
+}
+
+export default Cards

src/components/Trading/ListToGrid.js

@@ -0,0 +1,77 @@
+import React from 'react'
+import styled from 'styled-components'
+
+function ListToGrid() {
+    const Container = styled.div`
+        position:absolute;
+        transform:translated(-50%, -50%);
+        width:500px;
+        height:100%;
+        margin: 100px auto;
+    `
+    const Icon = styled.div`
+        width:100px;
+        height:80px;
+        padding:10px;
+        position: absolute;
+        right:-10px;
+        display:flex;
+    `
+    const List  = styled.div`
+        width:65px;
+        height:45px;
+        position:relative;
+        cursor:pointer;
+        margin:0 10px 0 0;
+    `
+    const ListSpan = styled.span`
+        width:20px;
+        height:4px;
+        background:black;
+        position:absolute;
+        top:5px;
+        left:20px;
+        &:nth-child(2){
+            top:11px;
+        }
+        &:nth-child(3){
+            top:18px;
+        }
+    `
+    const Grid = styled.div`
+        width:35px;
+        height:35px;
+        position:relative;
+        cursor:pointer;
+        margin:0 10px 0 0;
+    `
+    const GridSpan = styled.div`
+        width : 7px;
+        height : 7px;
+        background:black;
+        position:absolute;
+        left:10px;
+        top:5px;
+        &:nth-child(1){
+            top:15px;
+        }
+    `
+    return (
+        <Container>
+            <Icon>
+                <List>
+                    <ListSpan></ListSpan>
+                    <ListSpan></ListSpan>
+                    <ListSpan></ListSpan>
+                    <Grid>
+                        <GridSpan></GridSpan>
+                        <GridSpan></GridSpan>
+                    </Grid>
+                </List>
+
+            </Icon>
+        </Container>
+    )
+}
+
+export default ListToGrid

src/components/Trading/Modal.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { Component } from 'react';
+import ReactDOM from "react-dom";
+import styled from "styled-components";
+import Modal, { ModalProvider, BaseModalBackground } from "styled-react-modal";
+
+const StyledModal = Modal.styled`
+  width: 20rem;
+  height: 20rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  opacity: ${(props) => props.opacity};
+  transition : all 0.3s ease-in-out;`;
+
+function FancyModalButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [opacity, setOpacity] = useState(0);
+
+  function toggleModal(e) {
+    setOpacity(0);
+    setIsOpen(!isOpen);
+  }
+
+  function afterOpen() {
+    setTimeout(() => {
+      setOpacity(1);
+    }, 100);
+  }
+
+  function beforeClose() {
+    return new Promise((resolve) => {
+      setOpacity(0);
+      setTimeout(resolve, 300);
+    });
+  }
+
+  return (
+    <div>
+      <button onClick={toggleModal}>Start chat</button>
+      <StyledModal
+        isOpen={isOpen}
+        afterOpen={afterOpen}
+        beforeClose={beforeClose}
+        onBackgroundClick={toggleModal}
+        onEscapeKeydown={toggleModal}
+        opacity={opacity}
+        backgroundProps={{ opacity }}
+      >
+        <span>chat pop-up</span>
+        <button onClick={toggleModal}>x</button>
+      </StyledModal>
+    </div>
+  );
+}
+
+const FadingBackground = styled(BaseModalBackground)`
+  opacity: ${(props) => props.opacity};
+  transition: all 0.3s ease-in-out;
+`;
+
+export default class Modal1 extends Component {
+  render() {
+  return (
+    <ModalProvider backgroundComponent={FadingBackground}>
+      <div className="Modal">
+
+        <FancyModalButton />
+      </div>
+    </ModalProvider>
+  );
+}}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<Modal1 />, rootElement);
+
+