Showing
1 changed file
with
19 additions
and
1 deletions
... | @@ -3,6 +3,7 @@ import { Link } from "react-router-dom"; | ... | @@ -3,6 +3,7 @@ import { Link } from "react-router-dom"; |
3 | import styled from "styled-components"; | 3 | import styled from "styled-components"; |
4 | import Header from "../../Components/Header"; | 4 | import Header from "../../Components/Header"; |
5 | import Footer from "../../Components/Footer"; | 5 | import Footer from "../../Components/Footer"; |
6 | +import Button from "../../Components/Button"; | ||
6 | 7 | ||
7 | const ContentWrapper = styled.div` | 8 | const ContentWrapper = styled.div` |
8 | display: flex; | 9 | display: flex; |
... | @@ -30,9 +31,23 @@ const ContentMain = styled.main` | ... | @@ -30,9 +31,23 @@ const ContentMain = styled.main` |
30 | `; | 31 | `; |
31 | 32 | ||
32 | const MainTabBox = styled.div` | 33 | const MainTabBox = styled.div` |
34 | + display: flex; | ||
35 | + justify-content: space-between; | ||
36 | + align-items: center; | ||
33 | margin: 20px 0px; | 37 | margin: 20px 0px; |
34 | width: 100%; | 38 | width: 100%; |
39 | + span { | ||
35 | font-size: 1.5rem; | 40 | font-size: 1.5rem; |
41 | + color: black; | ||
42 | + } | ||
43 | + button { | ||
44 | + width: 70px; | ||
45 | + height: 30px; | ||
46 | + border-radius: 4px; | ||
47 | + border: 1px solid black; | ||
48 | + background-color: white; | ||
49 | + cursor: pointer; | ||
50 | + } | ||
36 | `; | 51 | `; |
37 | 52 | ||
38 | const MainSection = styled.section``; | 53 | const MainSection = styled.section``; |
... | @@ -111,7 +126,10 @@ export default () => { | ... | @@ -111,7 +126,10 @@ export default () => { |
111 | <HeaderSpan>Forums</HeaderSpan> | 126 | <HeaderSpan>Forums</HeaderSpan> |
112 | </ContentHeader> | 127 | </ContentHeader> |
113 | <ContentMain> | 128 | <ContentMain> |
114 | - <MainTabBox>Viewing 20 topics</MainTabBox> | 129 | + <MainTabBox> |
130 | + <HeaderSpan>Viewing 20 topics</HeaderSpan> | ||
131 | + <Button text="Post" /> | ||
132 | + </MainTabBox> | ||
115 | <MainSection> | 133 | <MainSection> |
116 | <PostList> | 134 | <PostList> |
117 | <PostItem className="post-header"> | 135 | <PostItem className="post-header"> | ... | ... |
-
Please register or login to post a comment