Nightmode

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
diff --git a/src/App.js b/src/App.js
index ff5e712..9ea8330 100644
--- a/src/App.js
+++ b/src/App.js
@@ -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>
     );
   }
 }