Nightmode threadList

2 files changed, 57 insertions, 34 deletions

diff --git a/src/App.css b/src/App.css
index f347b78..73001f9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -165,4 +165,21 @@
   transform: translatex(-50%) translatey(-50%);
   background-size: cover;
   transition: 1s opacity;
+}
+
+.ui.items>.item>.content>.description.inverted {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ui.items>.item .meta.inverted :last-child {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.ui.items>.item .extra.inverted {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.ui.items>.item>.content>a.header.inverted {
+  color: #4183C4;
+  ;
 }
\ No newline at end of file
diff --git a/src/ThreadList.js b/src/ThreadList.js
index fe597c3..56f9ab2 100644
--- a/src/ThreadList.js
+++ b/src/ThreadList.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Loader, Icon, Item } from "semantic-ui-react";
+import { Loader, Icon, Item, Segment } from "semantic-ui-react";
 import { Link } from "@reach/router";
 import Moment from "react-moment";
 import "moment/locale/es";
@@ -24,7 +24,7 @@ class ThreadList extends Component {
   }
 
   render() {
-    const { dir, boardList } = this.props;
+    const { dir, boardList, nightMode } = this.props;
     const { threadList, isLoading } = this.state;
 
     const currentBoard = boardList.find(board => {
@@ -44,38 +44,44 @@ class ThreadList extends Component {
     );
 
     return (
-      <Item.Group divided>
-        {threadList.map((thread, index) => {
-          return (
-            <Item key={index}>
-              {currentBoard.allow_images === 1 && (
-                <Item.Image
-                  size="tiny"
-                  src={`https://bienvenidoainternet.org/${dir}/thumb/${thread.thumb}`}
-                />
-              )}
-              <Item.Content verticalAlign="middle">
-                <Item.Header as={Link} to={`/${dir}/read/${thread.id}`}>
-                  {thread.subject}
-                </Item.Header>
-                <Item.Meta>
-                  <span className="date">
-                    <Moment fromNow unix date={thread.timestamp} />
-                  </span>
-                </Item.Meta>
-                <Item.Description>
-                  {thread.message.replace(stripHtml, "").substring(0, 200) +
-                    " ..."}
-                </Item.Description>
-                <Item.Extra>
-                  <Icon name="reply" />
-                  {thread.total_replies} Respuestas
-                </Item.Extra>
-              </Item.Content>
-            </Item>
-          );
-        })}
-      </Item.Group>
+      <Segment inverted={nightMode}>
+        <Item.Group divided>
+          {threadList.map((thread, index) => {
+            return (
+              <Item key={index}>
+                {currentBoard.allow_images === 1 && (
+                  <Item.Image
+                    size="tiny"
+                    src={`https://bienvenidoainternet.org/${dir}/thumb/${thread.thumb}`}
+                  />
+                )}
+                <Item.Content verticalAlign="middle">
+                  <Item.Header
+                    as={Link}
+                    to={`/${dir}/read/${thread.id}`}
+                    className={nightMode && "inverted"}
+                  >
+                    {thread.subject}
+                  </Item.Header>
+                  <Item.Meta className={nightMode && "inverted"}>
+                    <span className="date">
+                      <Moment fromNow unix date={thread.timestamp} />
+                    </span>
+                  </Item.Meta>
+                  <Item.Description className={nightMode && "inverted"}>
+                    {thread.message.replace(stripHtml, "").substring(0, 200) +
+                      " ..."}
+                  </Item.Description>
+                  <Item.Extra className={nightMode && "inverted"}>
+                    <Icon name="reply" />
+                    {thread.total_replies} Respuestas
+                  </Item.Extra>
+                </Item.Content>
+              </Item>
+            );
+          })}
+        </Item.Group>
+      </Segment>
     );
   }
 }