diff options
| -rw-r--r-- | src/App.css | 19 | ||||
| -rw-r--r-- | src/App.js | 43 | ||||
| -rw-r--r-- | src/Board.js | 11 | ||||
| -rw-r--r-- | src/Home.js | 10 | ||||
| -rw-r--r-- | src/Post.js | 4 | ||||
| -rw-r--r-- | src/ReplyForm.js | 10 | ||||
| -rw-r--r-- | src/Thread.js | 21 |
7 files changed, 94 insertions, 24 deletions
diff --git a/src/App.css b/src/App.css index a4cf972..9486e24 100644 --- a/src/App.css +++ b/src/App.css @@ -76,4 +76,23 @@ .playerContainer { max-width: 400px; padding-bottom: 0.75em; +} + +.ui.attached:not(.top).header { + border-top: 1px solid !important; + border-radius: 0.28571429rem 0.28571429rem 0 0; +} + +.ui.inverted.attached.header { + border-color: #555555 !important; +} + +.ui.container.inverted { + background-color: #1c1c1c; + padding: 1em 2em; +} + +.homeContainer.inverted { + color: #eaeaea !important; + background-color: #454647 !important; }
\ No newline at end of file @@ -22,8 +22,10 @@ class App extends Component { super(); this.state = { boardList: [], - isLoaded: false + isLoaded: false, + nightMode: true }; + this.toggleTheme = this.toggleTheme.bind(this); } componentDidMount() { @@ -36,6 +38,18 @@ class App extends Component { }); } + componentDidUpdate() { + if (this.state.nightMode) { + document.body.style.backgroundColor = "#313233"; + } else { + document.body.style.backgroundColor = "#FFFFFF"; + } + } + + toggleTheme() { + this.setState({ nightMode: !this.state.nightMode }); + } + render() { if (!this.state.isLoaded) { if (!this.state.isLoaded) { @@ -87,15 +101,36 @@ class App extends Component { )} </Dropdown.Menu> </Dropdown> + <Menu.Menu position="right"> + <Menu.Item as="a" onClick={this.toggleTheme}> + {this.state.nightMode ? ( + <Icon name="sun" /> + ) : ( + <Icon name="moon" /> + )} + </Menu.Item> + </Menu.Menu> </Container> </Menu> <Container className="main"> <Router> - <Home boardList={this.state.boardList} path="/" /> - <Thread boardList={this.state.boardList} path="/:dir/read/:id"> + <Home + boardList={this.state.boardList} + path="/" + nightMode={this.state.nightMode} + /> + <Thread + boardList={this.state.boardList} + path="/:dir/read/:id" + nightMode={this.state.nightMode} + > <Thread path=":active" /> </Thread> - <Board boardList={this.state.boardList} path="/board/:dir" /> + <Board + boardList={this.state.boardList} + path="/board/:dir" + nightMode={this.state.nightMode} + /> <NotFound default /> </Router> </Container> diff --git a/src/Board.js b/src/Board.js index 34e3f52..5dd00a2 100644 --- a/src/Board.js +++ b/src/Board.js @@ -109,10 +109,11 @@ class Board extends Component { return board.dir === this.props.dir; }); document.title = currentBoard.name + " - B.a.I"; + const nightMode = this.props.nightMode; return ( <React.Fragment> - <Breadcrumb> + <Breadcrumb className={nightMode ? "inverted" : ""}> <Breadcrumb.Section link as={Link} to="/"> Home </Breadcrumb.Section> @@ -121,7 +122,7 @@ class Board extends Component { </Breadcrumb> {threadList.map(thread => ( <Segment.Group key={"seg_" + thread.timestamp + thread.id}> - <Header as="h3" attached> + <Header as="h3" attached inverted={nightMode}> <Link to={`/${this.props.dir}/read/${thread.id}`}> {thread.subject} </Link> @@ -129,14 +130,15 @@ class Board extends Component { {thread.total_replies} respuestas </Header.Subheader> </Header> - <Segment attached> - <Comment.Group> + <Segment attached inverted={nightMode}> + <Comment.Group className={nightMode ? "inverted" : ""}> <Post index={0} post={thread} locked={thread.locked} threadId={thread.id} currentBoard={currentBoard} + nightMode={nightMode} /> <Divider /> {thread.replies.map((reply, index, replies) => ( @@ -147,6 +149,7 @@ class Board extends Component { threadId={thread.id} key={"reply_" + reply.id} currentBoard={currentBoard} + nightMode={nightMode} /> ))} </Comment.Group> diff --git a/src/Home.js b/src/Home.js index 292b8a1..5832ce4 100644 --- a/src/Home.js +++ b/src/Home.js @@ -106,7 +106,15 @@ class Home extends Component { const { newThreadsList, lastAgeThreads, latestNews } = this.state; document.title = "B.a.I Home"; return ( - <Grid columns={2} divided container doubling> + <Grid + columns={2} + divided + container + doubling + className={ + this.props.nightMode ? "homeContainer inverted" : "homeContainer" + } + > <Grid.Row> <Grid.Column> <Header as="h4">Hilos activos</Header> diff --git a/src/Post.js b/src/Post.js index b3e47ea..1140d49 100644 --- a/src/Post.js +++ b/src/Post.js @@ -22,7 +22,7 @@ const ImageModal = ({ href, trigger }) => ( </Modal> ); -const Post = ({ index, post, locked, threadId, currentBoard }) => { +const Post = ({ index, post, locked, threadId, currentBoard, nightMode }) => { if (post.IS_DELETED > 0) { return ( <Comment> @@ -102,7 +102,7 @@ const Post = ({ index, post, locked, threadId, currentBoard }) => { const youtubeVideos = post.message.match(youtubeRe); return ( - <Comment> + <Comment inverted={nightMode}> <Comment.Avatar src={`https://bienvenidoainternet.org/static/ico/${rndAvatar}.gif`} /> diff --git a/src/ReplyForm.js b/src/ReplyForm.js index a9f461d..564ed88 100644 --- a/src/ReplyForm.js +++ b/src/ReplyForm.js @@ -73,7 +73,7 @@ class ReplyForm extends Component { render() { const { name, email, message, replyRes, attachment } = this.state; - const { currentBoard } = this.props; + const { currentBoard, nightMode } = this.props; if (this.props.locked === 1) { return ( <Message negative> @@ -83,7 +83,7 @@ class ReplyForm extends Component { ); } return ( - <Segment> + <Segment inverted={nightMode}> {replyRes !== null ? ( replyRes.state === "success" ? ( <Message positive> @@ -101,7 +101,7 @@ class ReplyForm extends Component { </Message> ) ) : null} - <Form onSubmit={this.handleSubmit}> + <Form onSubmit={this.handleSubmit} inverted={nightMode}> <Form.Group widths="equal"> <Form.Input label="Nombre" @@ -143,9 +143,7 @@ class ReplyForm extends Component { placeholder="( ･ω･) Cuentáme algo interesante ..." onChange={this.handleChange} /> - <Button type="submit" secondary> - Enviar - </Button> + <Button type="submit">Enviar</Button> </Form> </Segment> ); diff --git a/src/Thread.js b/src/Thread.js index b390f54..fe9efff 100644 --- a/src/Thread.js +++ b/src/Thread.js @@ -6,7 +6,8 @@ import { Message, Comment, Breadcrumb, - Divider + Divider, + Container } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; @@ -100,6 +101,7 @@ class Thread extends Component { render() { const { isLoading, error } = this.state; + const { nightMode } = this.props; if (isLoading) { return ( @@ -135,8 +137,8 @@ class Thread extends Component { document.title = subject + " - " + currentBoard.name + "@B.a.I"; return ( - <React.Fragment> - <Breadcrumb> + <Container className={nightMode ? "inverted" : ""}> + <Breadcrumb className={nightMode ? "inverted" : ""}> <Breadcrumb.Section link as={Link} to="/"> Home </Breadcrumb.Section> @@ -147,7 +149,7 @@ class Thread extends Component { <Breadcrumb.Divider icon="right arrow" /> <Breadcrumb.Section active>{subject}</Breadcrumb.Section> </Breadcrumb> - <Header as="h1"> + <Header as="h1" inverted={nightMode}> <Header.Content className="postMessage"> {subject} {locked ? <Icon name="lock" /> : null} @@ -162,7 +164,7 @@ class Thread extends Component { </Header> <Divider /> - <Comment.Group> + <Comment.Group className={nightMode ? "inverted" : ""}> {posts.map((post, index) => ( <Post key={index} @@ -175,14 +177,19 @@ class Thread extends Component { ))} </Comment.Group> - <ReplyForm currentBoard={currentBoard} parent={id} locked={locked} /> + <ReplyForm + currentBoard={currentBoard} + parent={id} + locked={locked} + nightMode={nightMode} + /> <a href={`https://bienvenidoainternet.org/cgi/api/thread?dir=${this.props.dir}&id=${this.props.id}`} > API Link </a> - </React.Fragment> + </Container> ); } } |