From 7543fa3e7650b68e76d762a81af8800f7203e23f Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Tue, 25 Jan 2022 18:14:15 -0800 Subject: [PATCH 01/19] dark mode for article and background --- components/Article/index.jsx | 11 ++++++----- components/CommentsCard/index.jsx | 4 ++-- components/MainSiteHeader/HeaderBar.tsx | 6 +++--- components/MainSiteHeader/index.tsx | 4 ++-- components/globals.js | 3 +++ layouts/PageWrapper.jsx | 3 ++- 6 files changed, 18 insertions(+), 13 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index 66b66a4..337e6a4 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -17,6 +17,7 @@ export default class Article extends React.Component { render() { // grab author pics and cards + console.log(globals.darkMode); let authorPictures = []; let renderedAuthorCards = []; @@ -89,7 +90,7 @@ export default class Article extends React.Component { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: #ffffff; + background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; `} >
{propLink.category} @@ -128,7 +128,7 @@ class HeaderBar extends React.Component< box-shadow: ${MainSiteStyles.cardShadow}; font-family: ${MainSiteStyles.headlineFont}; font-weight: ${MainSiteStyles.boldFont}; - color: '#000'; + color: ${globals.darkMode ? "#fff" : "#000"}; `} >
{ display: block; } display: none; - background-color: #fff; + background-color: ${globals.darkMode ? "#000" : "#fff"}; `} > @@ -44,7 +44,7 @@ class MainSiteHeader extends React.Component { display: none; } display: block; - background-color: #fff; + background-color: ${globals.darkMode ? "#000" : "#fff"}; `} > diff --git a/components/globals.js b/components/globals.js index dc05a19..c7ce8f2 100644 --- a/components/globals.js +++ b/components/globals.js @@ -1,6 +1,9 @@ import { css } from "@emotion/core"; + +export const darkMode = true; /** Reusable common CSS attributes */ + /** Colors */ export const gray = "rgb(197, 197, 197)"; export const lightGray = "rgb(242, 242, 242)"; diff --git a/layouts/PageWrapper.jsx b/layouts/PageWrapper.jsx index b01d3ff..dc5ac06 100644 --- a/layouts/PageWrapper.jsx +++ b/layouts/PageWrapper.jsx @@ -9,10 +9,11 @@ import Masthead from "components/Masthead"; import CommentFAB from "components/CommentFAB"; import css from "./style.module.css"; +import * as globals from "../components/globals"; const wrapperStyle = { padding: "6px", - backgroundColor: "#f1f1f1", + backgroundColor: globals.darkMode ? "#010101" : "#f1f1f1", width: "100%", height: "100%" }; From 8e6be2782c6c6843905c7d63f739239f3e42d8d7 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Thu, 27 Jan 2022 19:46:08 -0800 Subject: [PATCH 02/19] add dark mode to masthead and articlecard --- components/ArticleCard/Full.jsx | 12 ++++++++---- components/ArticleCard/Horz.jsx | 7 +++++-- components/ArticleCard/Long.jsx | 2 +- components/ArticleCard/Mini.jsx | 2 +- components/ArticleCard/Podcast.jsx | 2 +- components/ArticleCard/Vert.jsx | 7 +++++-- components/ArticleCard/Video.jsx | 2 +- components/ArticleCard/locals.js | 4 ++-- components/InTheNewsBanner/index.jsx | 5 +++-- components/Masthead/Desktop.jsx | 10 ++++++---- components/Masthead/Mobile.jsx | 3 ++- 11 files changed, 35 insertions(+), 21 deletions(-) diff --git a/components/ArticleCard/Full.jsx b/components/ArticleCard/Full.jsx index 8259ca0..ce88c57 100644 --- a/components/ArticleCard/Full.jsx +++ b/components/ArticleCard/Full.jsx @@ -14,7 +14,7 @@ export default function Full(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: #ffffff; + background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; `} > @@ -43,7 +43,7 @@ export default function Full(props) { dangerouslySetInnerHTML={{ __html: props.category.name }} /> - {moment(props.date).format("MMM D, YYYY h:mm a")} @@ -89,7 +91,8 @@ export default function Full(props) { margin: 4px 0; } - color: #000000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; + `} dangerouslySetInnerHTML={{ __html: props.caption }} /> @@ -110,7 +113,8 @@ export default function Full(props) { font-weight: bold; font-size: 11px; - color: #000000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; + `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Horz.jsx b/components/ArticleCard/Horz.jsx index 9cc6184..ea440af 100644 --- a/components/ArticleCard/Horz.jsx +++ b/components/ArticleCard/Horz.jsx @@ -14,7 +14,7 @@ export default function Horz(props) { display: flex; box-shadow: ${globals.cardShadow}; padding: 0px; - background-color: #ffffff; + background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; `} >
{moment(props.date).format("MMM D, YYYY h:mm a")} @@ -141,7 +143,8 @@ export default function Horz(props) { font-weight: bold; font-size: 11px; - color: #000000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; + `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Long.jsx b/components/ArticleCard/Long.jsx index 2f9234c..5c61242 100644 --- a/components/ArticleCard/Long.jsx +++ b/components/ArticleCard/Long.jsx @@ -14,7 +14,7 @@ export default function Long(props) { box-shadow: ${globals.cardShadow}; height: 100%; padding: 0px; - background-color: #ffffff; + background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; `} >
diff --git a/components/ArticleCard/Vert.jsx b/components/ArticleCard/Vert.jsx index c8358dc..721e9ce 100644 --- a/components/ArticleCard/Vert.jsx +++ b/components/ArticleCard/Vert.jsx @@ -14,7 +14,7 @@ export default function Vert(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: #ffffff; + background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; `} > @@ -77,6 +77,8 @@ export default function Vert(props) { font-weight: 300; font-size: 11px; line-height: 14px; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; + `} > {moment(props.date).format("MMM D, YYYY h:mm a")} @@ -111,7 +113,8 @@ export default function Vert(props) { font-weight: 700; font-size: 11px; - color: #000000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; + `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Video.jsx b/components/ArticleCard/Video.jsx index c90fcec..d692e88 100644 --- a/components/ArticleCard/Video.jsx +++ b/components/ArticleCard/Video.jsx @@ -14,7 +14,7 @@ export default function Video(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: #ffffff; + background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; height: 100%; `} > diff --git a/components/ArticleCard/locals.js b/components/ArticleCard/locals.js index 3d75b6c..54a9473 100644 --- a/components/ArticleCard/locals.js +++ b/components/ArticleCard/locals.js @@ -6,7 +6,7 @@ export const headline = ` font-weight: bold; font-size: 1.5rem; line-height: 1.25; - color: #000000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; &:hover { color: ${globals.DBblue}; }`; @@ -15,7 +15,7 @@ export const excerpt = ` font-family: ${globals.bodyFont}; font-weight: 300; font-size: 0.75rem; - color: #000000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; p { margin: 0; diff --git a/components/InTheNewsBanner/index.jsx b/components/InTheNewsBanner/index.jsx index e48d7c1..cb564e1 100644 --- a/components/InTheNewsBanner/index.jsx +++ b/components/InTheNewsBanner/index.jsx @@ -21,7 +21,7 @@ export default class InTheNewsBanner extends React.Component { padding: 2px 5px; font-family: ${globals.bodyFont}; font-weight: 700; - color: #000; + color: ${globals.darkMode ? "#ffffff" : "#000000"}; text-decoration: none; &:hover { color: ${globals.DBblue}; @@ -36,7 +36,8 @@ export default class InTheNewsBanner extends React.Component { return (
Date: Thu, 10 Feb 2022 19:40:47 -0800 Subject: [PATCH 03/19] darkmode toggle in Desktop masthead --- components/Masthead/Desktop.jsx | 87 ++++++++++++++++++++++++++++++--- components/globals.js | 2 +- layouts/Home/index.jsx | 11 +++-- layouts/style.module.css | 6 +++ 4 files changed, 93 insertions(+), 13 deletions(-) diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index 011028b..a11959a 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -14,12 +14,15 @@ import minisearchIcon from "./minisearch.svg"; let expandedHeight = "106px"; let collapsedHeight = "60px"; + + export default class Desktop extends React.Component { constructor(props) { super(props); this.state = { menuExpanded: true, - searchExpanded: false + searchExpanded: false, + darkMode: false }; this.MastheadCard = React.createRef(); this.SearchBar = React.createRef(); @@ -95,7 +98,7 @@ export default class Desktop extends React.Component { font-weight: bold; text-decoration: none; text-transform: uppercase; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${this.state.darkMode ? "#ffffff" : "#000000"}; white-space: nowrap; &:hover { text-decoration: underline; @@ -115,8 +118,8 @@ export default class Desktop extends React.Component {
+ +
-
+
{this.cards.nsStoryList}
-
+
{this.cards.enStoryList}
-
+
{this.cards.opStoryList}
-
+
{this.cards.aeStoryList}
-
+
{this.cards.spStoryList}
diff --git a/layouts/style.module.css b/layouts/style.module.css index 1228a5e..5a7211b 100644 --- a/layouts/style.module.css +++ b/layouts/style.module.css @@ -3,6 +3,12 @@ padding: 6px; } +.card-dark { + display: block; + padding: 6px; + background-color: black; +} + .video-card { display: inline-block; padding: 6px; From 0652417a0e84f376a7b39679eede1819e91f4830 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Thu, 17 Feb 2022 21:02:18 -0800 Subject: [PATCH 04/19] toggle darkmode --- components/Article/index.jsx | 3 +- components/ArticleCard/Full.jsx | 8 ++-- components/ArticleCard/Horz.jsx | 6 +-- components/ArticleCard/Mini.jsx | 2 +- components/ArticleCard/Vert.jsx | 6 +-- components/ArticleCard/index.jsx | 2 + components/Masthead/Desktop.jsx | 20 ++++------ components/globals.js | 2 +- layouts/Article/index.jsx | 2 +- layouts/Home/index.jsx | 65 ++++++++++++++++---------------- layouts/PageWrapper.jsx | 33 ++++++++++++++-- layouts/utilities.jsx | 7 +++- pages/index.jsx | 2 + 13 files changed, 94 insertions(+), 64 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index 337e6a4..508e9ad 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -17,7 +17,7 @@ export default class Article extends React.Component { render() { // grab author pics and cards - console.log(globals.darkMode); + console.log(this.props.darkmode); let authorPictures = []; let renderedAuthorCards = []; @@ -52,6 +52,7 @@ export default class Article extends React.Component { margin: 20px 0; `} > + @@ -53,7 +53,7 @@ export default function Full(props) { font-weight: 300; font-size: 11px; line-height: 14px; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > @@ -91,7 +91,7 @@ export default function Full(props) { margin: 4px 0; } - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} dangerouslySetInnerHTML={{ __html: props.caption }} @@ -113,7 +113,7 @@ export default function Full(props) { font-weight: bold; font-size: 11px; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > diff --git a/components/ArticleCard/Horz.jsx b/components/ArticleCard/Horz.jsx index ea440af..55d6c08 100644 --- a/components/ArticleCard/Horz.jsx +++ b/components/ArticleCard/Horz.jsx @@ -14,7 +14,7 @@ export default function Horz(props) { display: flex; box-shadow: ${globals.cardShadow}; padding: 0px; - background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222222" : "#ffffff"}; `} >
@@ -143,7 +143,7 @@ export default function Horz(props) { font-weight: bold; font-size: 11px; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > diff --git a/components/ArticleCard/Mini.jsx b/components/ArticleCard/Mini.jsx index 8f90904..84ca7be 100644 --- a/components/ArticleCard/Mini.jsx +++ b/components/ArticleCard/Mini.jsx @@ -14,7 +14,7 @@ export default function Mini(props) { display: flex; box-shadow: ${globals.cardShadow}; padding: 0px; - background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222222" : "#ffffff"}; `} >
@@ -77,7 +77,7 @@ export default function Vert(props) { font-weight: 300; font-size: 11px; line-height: 14px; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > @@ -113,7 +113,7 @@ export default function Vert(props) { font-weight: 700; font-size: 11px; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > diff --git a/components/ArticleCard/index.jsx b/components/ArticleCard/index.jsx index 5921b63..5d6862c 100644 --- a/components/ArticleCard/index.jsx +++ b/components/ArticleCard/index.jsx @@ -15,6 +15,8 @@ export default class ArticleCard extends React.Component { } render() { + //

Darkmode: {this.props.darkmode ? "True" : "False"}

+ // console.log(this.props.darkmode); let card; switch (this.props.displayType) { case "vert": diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index a11959a..79f7622 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -22,7 +22,7 @@ export default class Desktop extends React.Component { this.state = { menuExpanded: true, searchExpanded: false, - darkMode: false + // darkMode: false }; this.MastheadCard = React.createRef(); this.SearchBar = React.createRef(); @@ -98,7 +98,7 @@ export default class Desktop extends React.Component { font-weight: bold; text-decoration: none; text-transform: uppercase; - color: ${this.state.darkMode ? "#ffffff" : "#000000"}; + color: ${this.props.darkmode ? "#ffffff" : "#000000"}; white-space: nowrap; &:hover { text-decoration: underline; @@ -118,8 +118,8 @@ export default class Desktop extends React.Component {
@@ -533,8 +529,8 @@ export default class Desktop extends React.Component {
- {buildArticleCard(relatedPost, "mini")} + {buildArticleCard(relatedPost, "mini", true)}
); } diff --git a/layouts/Home/index.jsx b/layouts/Home/index.jsx index 0863b9a..da51601 100644 --- a/layouts/Home/index.jsx +++ b/layouts/Home/index.jsx @@ -26,14 +26,14 @@ export default class HomeLayout extends React.Component { constructor(props) { super(props); this.cards = { - aArticleCard: utilities.buildArticleCard(this.props.posts.aStory[0]), - bArticleCard: utilities.buildArticleCard(this.props.posts.bStory[0]), - c1ArticleCard: utilities.buildArticleCard(this.props.posts.c1Story[0]), - c2ArticleCard: utilities.buildArticleCard(this.props.posts.c2Story[0]), - dArticleCard: utilities.buildArticleCard(this.props.posts.dStory[0]), - eArticleCard: utilities.buildArticleCard(this.props.posts.eStory[0]), - f1ArticleCard: utilities.buildArticleCard(this.props.posts.f1Story[0]), - f2ArticleCard: utilities.buildArticleCard(this.props.posts.f2Story[0]), + aArticleCard: utilities.buildArticleCard(this.props.posts.aStory[0],"",this.props.darkmode), + bArticleCard: utilities.buildArticleCard(this.props.posts.bStory[0],"",this.props.darkmode), + c1ArticleCard: utilities.buildArticleCard(this.props.posts.c1Story[0],"",this.props.darkmode), + c2ArticleCard: utilities.buildArticleCard(this.props.posts.c2Story[0],"",this.props.darkmode), + dArticleCard: utilities.buildArticleCard(this.props.posts.dStory[0],"",this.props.darkmode), + eArticleCard: utilities.buildArticleCard(this.props.posts.eStory[0],"",this.props.darkmode), + f1ArticleCard: utilities.buildArticleCard(this.props.posts.f1Story[0],"",this.props.darkmode), + f2ArticleCard: utilities.buildArticleCard(this.props.posts.f2Story[0],"",this.props.darkmode), m1MultimediaScroller: utilities.buildMultimediaScroller(this.props.media), @@ -73,6 +73,7 @@ export default class HomeLayout extends React.Component { render() { return (
+

Darkmode: {this.props.darkmode ? "True" : "False"}

{React.cloneElement(this.cards.c1ArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.cards.c2ArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.cards.aArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.cards.bArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{this.props.mappedBreaking != null && ( @@ -127,12 +128,12 @@ export default class HomeLayout extends React.Component {
{React.cloneElement(this.cards.dArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{React.cloneElement(this.cards.eArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
@@ -151,12 +152,12 @@ export default class HomeLayout extends React.Component {
{React.cloneElement(this.cards.f1ArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{React.cloneElement(this.cards.f2ArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{React.cloneElement(this.cards.aArticleCard, { - displayType: "vert" + darkmode: this.props.darkmode, displayType: "vert" })}
{React.cloneElement(this.cards.bArticleCard, { - displayType: "vert" + darkmode: this.props.darkmode, displayType: "vert" })}
@@ -221,7 +222,7 @@ export default class HomeLayout extends React.Component {
{React.cloneElement(this.cards.f1ArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{this.props.mappedBreaking != null && ( @@ -238,7 +239,7 @@ export default class HomeLayout extends React.Component {
{React.cloneElement(this.cards.f2ArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{this.props.mappedBreaking == null && ( @@ -256,12 +257,12 @@ export default class HomeLayout extends React.Component { >
{React.cloneElement(this.cards.c1ArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.cards.c2ArticleCard, { - displayType: "horz" + darkmode: this.props.darkmode, displayType: "horz" })}
{React.cloneElement(this.cards.dArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
@@ -287,7 +288,7 @@ export default class HomeLayout extends React.Component { >
{React.cloneElement(this.cards.eArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
@@ -342,12 +343,12 @@ export default class HomeLayout extends React.Component { >
{React.cloneElement(this.cards.aArticleCard, { - displayType: "vert" + darkmode: this.props.darkmode, displayType: "vert" })}
{React.cloneElement(this.cards.bArticleCard, { - displayType: "vert" + darkmode: this.props.darkmode, displayType: "vert" })}
@@ -375,12 +376,12 @@ export default class HomeLayout extends React.Component { >
{React.cloneElement(this.cards.c1ArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.cards.c2ArticleCard, { - displayType: "horz" + darkmode: this.props.darkmode, displayType: "horz" })}
@@ -388,12 +389,12 @@ export default class HomeLayout extends React.Component {
{React.cloneElement(this.cards.f1ArticleCard, { - displayType: "horz" + darkmode: this.props.darkmode, displayType: "horz" })}
{React.cloneElement(this.cards.f2ArticleCard, { - displayType: "horz" + darkmode: this.props.darkmode, displayType: "horz" })}
@@ -429,12 +430,12 @@ export default class HomeLayout extends React.Component {
{React.cloneElement(this.cards.dArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{React.cloneElement(this.cards.eArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
{this.props.mappedBreaking == null && ( diff --git a/layouts/PageWrapper.jsx b/layouts/PageWrapper.jsx index dc5ac06..bd45460 100644 --- a/layouts/PageWrapper.jsx +++ b/layouts/PageWrapper.jsx @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React, { Component, useState } from "react"; import { Config } from "../config.js"; import Head from "next/head"; @@ -25,6 +25,16 @@ const layoutStyle = { const PageWrapper = Comp => class extends Component { + constructor(props) { + super(props); + this.state = { + darkmode: false + } + + } + + + static async getInitialProps(ctx) { // Load the categories for the header // TODO: can we load this once each browser session? @@ -78,7 +88,21 @@ const PageWrapper = Comp => }; } + onToggle = () => { + this.setState({ + darkmode: !this.state.darkmode + }) + } + render() { + // console.log(this.state.darkmode); + const style = { + padding: "6px", + backgroundColor: this.state.darkmode ? "#010101" : "#f1f1f1", + width: "100%", + height: "100%" + } + if (this.props.feature == true) { return ; } @@ -99,16 +123,17 @@ const PageWrapper = Comp => ); } return ( -
+
- + {renderedBreakingCard} {renderedInTheNews} - +

Darkmode: {this.state.darkmode ? "True" : "False"}

+
diff --git a/layouts/utilities.jsx b/layouts/utilities.jsx index 4a0096d..1c10634 100644 --- a/layouts/utilities.jsx +++ b/layouts/utilities.jsx @@ -4,10 +4,13 @@ import MultimediaScroller from "../components/MultimediaScroller"; import css from "./style.module.css"; import moment from "moment"; -export function buildArticleCard(story, type = "") { +export function buildArticleCard(story, type = "", darkmode) { + console.log(darkmode); if (story != null && story != undefined && story.data == undefined) { return ( + +

Darkmode: {this.props.darkmode ? "True" : "False"}

{`Daily Bruin - Since 1919`} { From 481b6b73cec3bd8222350e7e7ca261b6ec32401e Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Sat, 19 Mar 2022 01:18:38 -0700 Subject: [PATCH 05/19] darkmode for articles --- components/Article/index.jsx | 19 +++++--- components/ArticleCard/Full.jsx | 4 +- components/ArticleCard/Horz.jsx | 6 +-- components/ArticleCard/Long.jsx | 6 +-- components/ArticleCard/Mini.jsx | 2 +- components/ArticleCard/Podcast.jsx | 10 ++-- components/ArticleCard/Vert.jsx | 6 +-- components/ArticleCard/Video.jsx | 4 +- components/ArticleCard/locals.js | 30 +++++++++++- components/AuthorCard/index.jsx | 6 ++- components/BreakingBanner/index.jsx | 4 +- components/ClassifiedsCard/index.jsx | 41 +++++++++++----- components/FeatureArticle/index.jsx | 19 ++++++-- components/InTheNewsBanner/index.jsx | 6 +-- components/MainSiteHeader/HeaderBar.tsx | 4 +- components/Masthead/Desktop.jsx | 27 ++++++++--- components/Masthead/Mobile.jsx | 6 +-- components/PhotoGallery/Header.jsx | 5 +- components/PhotoGallery/PGallery.jsx | 8 ++- components/PhotoGallery/Photo.jsx | 3 +- components/PhotoGallery/index.jsx | 12 +++-- components/SearchResults/index.jsx | 3 +- components/ShareButtons/index.jsx | 1 + components/VideoCard/index.jsx | 4 +- layouts/Article/index.jsx | 51 +++++++++++++------- layouts/Feature/index.jsx | 1 + layouts/Home/index.jsx | 11 ++--- layouts/Page/index.jsx | 3 +- layouts/PageWrapper.jsx | 9 ++-- layouts/PhotoGallery/PGalleryLayout.jsx | 1 + layouts/PhotoGallery/index_old.jsx | 1 + layouts/style.module.css | 4 +- layouts/utilities.jsx | 2 +- pages/[year]/[month]/[day]/[slug].jsx | 4 ++ pages/about.jsx | 2 +- pages/advertise.jsx | 2 +- pages/category/graphics.jsx | 1 + pages/category/illo.jsx | 1 + pages/category/podcasts.jsx | 1 + pages/category/spectrum.jsx | 1 + pages/category/video.jsx | 1 + pages/comment.jsx | 2 +- pages/contact.jsx | 2 +- pages/editorial-board.jsx | 2 +- pages/index.jsx | 1 - pages/page/[slug].jsx | 2 +- pages/post/[slug].jsx | 1 + pages/privacy.jsx | 2 +- pages/records-requests.jsx | 2 +- pages/search.jsx | 2 +- pages/sponsored/[slug].jsx | 1 + pages/staff.jsx | 2 +- pages/submit.jsx | 2 +- pages/tag/[slug].jsx | 1 + pages/tag/usac-officer-evaluations-20-21.jsx | 1 + pages/the-daily-bruin-community-guide.jsx | 2 +- 56 files changed, 237 insertions(+), 120 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index 508e9ad..4fb9a36 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -17,7 +17,7 @@ export default class Article extends React.Component { render() { // grab author pics and cards - console.log(this.props.darkmode); + // console.log(this.props.darkmode); let authorPictures = []; let renderedAuthorCards = []; @@ -91,9 +91,10 @@ export default class Article extends React.Component { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; + background-color: ${this.props.darkmode ? "#222222" : "#ffffff"}; `} > + {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/}
{moment.utc(this.props.date).format("MMM D, YYYY h:mm a")} @@ -229,7 +231,7 @@ export default class Article extends React.Component { css={css` font-size: 12px; font-family: ${globals.bodyFont}; - color: ${globals.darkMode ? "#ffffff" : globals.darkGray}; + color: ${this.props.darkmode ? "#ffffff" : globals.darkGray}; max-width: 640px; margin: 20px auto 0; `} @@ -245,7 +247,7 @@ export default class Article extends React.Component { text-align: left; line-height: 1.75; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${this.props.darkmode ? "#ffffff" : "#000000"}; display: block; max-width: 640px; margin: auto; @@ -340,6 +342,7 @@ export default class Article extends React.Component { />
diff --git a/components/ArticleCard/Full.jsx b/components/ArticleCard/Full.jsx index 36f3754..0d551fa 100644 --- a/components/ArticleCard/Full.jsx +++ b/components/ArticleCard/Full.jsx @@ -64,7 +64,7 @@ export default function Full(props) {
diff --git a/components/ArticleCard/Horz.jsx b/components/ArticleCard/Horz.jsx index 55d6c08..8474160 100644 --- a/components/ArticleCard/Horz.jsx +++ b/components/ArticleCard/Horz.jsx @@ -58,7 +58,7 @@ export default function Horz(props) { font-size: 8px; text-align: right; - color: #000000; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > {props.photographer} @@ -118,7 +118,7 @@ export default function Horz(props) {
diff --git a/components/ArticleCard/Long.jsx b/components/ArticleCard/Long.jsx index 5c61242..4f206fa 100644 --- a/components/ArticleCard/Long.jsx +++ b/components/ArticleCard/Long.jsx @@ -68,7 +68,7 @@ export default function Long(props) {

@@ -94,7 +94,7 @@ export default function Long(props) { font-weight: bold; font-size: 11px; - color: #000000; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Mini.jsx b/components/ArticleCard/Mini.jsx index 84ca7be..4b2b64a 100644 --- a/components/ArticleCard/Mini.jsx +++ b/components/ArticleCard/Mini.jsx @@ -84,7 +84,7 @@ export default function Mini(props) {

@@ -50,7 +50,7 @@ export default function Podcast(props) { font-size: 8px; text-align: right; - color: #000000; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > {props.photographer} @@ -100,14 +100,14 @@ export default function Podcast(props) {
@@ -121,7 +121,7 @@ export default function Podcast(props) { font-weight: 700; font-size: 11px; - color: #000000; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Vert.jsx b/components/ArticleCard/Vert.jsx index 34f0a8e..31039b0 100644 --- a/components/ArticleCard/Vert.jsx +++ b/components/ArticleCard/Vert.jsx @@ -36,7 +36,7 @@ export default function Vert(props) { font-size: 8px; text-align: right; - color: #000000; + color: ${props.darkmode ? "#ffffff" : "#000000"}; `} > {props.photographer} @@ -88,7 +88,7 @@ export default function Vert(props) {
diff --git a/components/ArticleCard/Video.jsx b/components/ArticleCard/Video.jsx index d692e88..f838187 100644 --- a/components/ArticleCard/Video.jsx +++ b/components/ArticleCard/Video.jsx @@ -100,14 +100,14 @@ export default function Video(props) {
diff --git a/components/ArticleCard/locals.js b/components/ArticleCard/locals.js index 54a9473..b3d753f 100644 --- a/components/ArticleCard/locals.js +++ b/components/ArticleCard/locals.js @@ -6,7 +6,18 @@ export const headline = ` font-weight: bold; font-size: 1.5rem; line-height: 1.25; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: #000000; + &:hover { + color: ${globals.DBblue}; + }`; + +export const darkheadline = ` + font-family: ${globals.headlineFont}; + font-style: normal; + font-weight: 550; + font-size: 1.5rem; + line-height: 1.25; + color: #ffffff; &:hover { color: ${globals.DBblue}; }`; @@ -15,7 +26,22 @@ export const excerpt = ` font-family: ${globals.bodyFont}; font-weight: 300; font-size: 0.75rem; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: #000000; + + p { + margin: 0; + } + + br { + display: none; + } + `; + +export const darkexcerpt = ` + font-family: ${globals.bodyFont}; + font-weight: 300; + font-size: 0.75rem; + color: #ffffff; p { margin: 0; diff --git a/components/AuthorCard/index.jsx b/components/AuthorCard/index.jsx index 8765654..7b81036 100644 --- a/components/AuthorCard/index.jsx +++ b/components/AuthorCard/index.jsx @@ -47,7 +47,8 @@ export default class AuthorCard extends React.Component { return (
diff --git a/components/BreakingBanner/index.jsx b/components/BreakingBanner/index.jsx index 8466d1a..f878646 100644 --- a/components/BreakingBanner/index.jsx +++ b/components/BreakingBanner/index.jsx @@ -11,7 +11,7 @@ export default class BreakingBanner extends React.Component { return (
+ {/*

Darkmode = {props.darkmode ? "True" : "False"}

*/} + let c = (); + this.renderedClassifieds.push( +
+ {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/} + {React.cloneElement(c, { + darkmode: this.props.darkmode + })} +
); } } @@ -75,12 +86,13 @@ export default class ClassifiedsCard extends React.Component {
{this.props.header} @@ -99,9 +112,11 @@ export default class ClassifiedsCard extends React.Component {
- {renderedClassifieds} + {this.renderedClassifieds}
+ {/*

HELLO WORLD

*/} {renderedInfobox} @@ -250,7 +259,7 @@ export default class FeatureArticle extends React.Component { a { text-decoration: none; color: #0080c6; - background-color: #ffffff; + background-color: ${this.props.darkmode ? "#222222" : "#ffffff"}; } a:hover { text-decoration: underline; @@ -283,7 +292,8 @@ export default class FeatureArticle extends React.Component { text-align: left; line-height: 1.75; - color: #000000; + background: ${this.props.darkmode ? "#222222" : "#ffffff"}; + color: ${this.props.darkmode ? "#ffffff" : "#000000"}; display: block; max-width: 640px; margin: auto; @@ -299,7 +309,8 @@ export default class FeatureArticle extends React.Component { min-width: 150px; font-family: "Playfair Display", serif; font-size: 1.1rem; - color: #000; + background: ${this.props.darkmode ? "#222222" : "#ffffff"}; + color: ${this.props.darkmode ? "#ffffff" : "#000000"}; } @media (max-width: 40em) { aside { diff --git a/components/InTheNewsBanner/index.jsx b/components/InTheNewsBanner/index.jsx index cb564e1..588d386 100644 --- a/components/InTheNewsBanner/index.jsx +++ b/components/InTheNewsBanner/index.jsx @@ -21,7 +21,7 @@ export default class InTheNewsBanner extends React.Component { padding: 2px 5px; font-family: ${globals.bodyFont}; font-weight: 700; - color: ${globals.darkMode ? "#ffffff" : "#000000"}; + color: ${this.props.darkmode ? "#ffffff" : "#000000"}; text-decoration: none; &:hover { color: ${globals.DBblue}; @@ -36,8 +36,8 @@ export default class InTheNewsBanner extends React.Component { return (
{propLink.category} @@ -128,7 +128,7 @@ class HeaderBar extends React.Component< box-shadow: ${MainSiteStyles.cardShadow}; font-family: ${MainSiteStyles.headlineFont}; font-weight: ${MainSiteStyles.boldFont}; - color: ${globals.darkMode ? "#fff" : "#000"}; + color: #f50505; `} > Advertise @@ -462,6 +474,7 @@ export default class Desktop extends React.Component { display: none; background-color: #000; background-image: url(${minisearchIcon}); + /* filter: invert(%100); */ background-repeat: no-repeat; background-size: 24px; background-position: 6px; @@ -505,6 +518,8 @@ export default class Desktop extends React.Component { transition-delay: 100ms; width: 36px; height: 36px; + ${this. props.darkmode ? "filter: invert(100%);" : ""}; + `} src={searchIcon} > diff --git a/components/Masthead/Mobile.jsx b/components/Masthead/Mobile.jsx index 9feb3e8..e7a3d49 100644 --- a/components/Masthead/Mobile.jsx +++ b/components/Masthead/Mobile.jsx @@ -56,7 +56,7 @@ export default class Mobile extends React.Component { font-weight: bold; text-decoration: none; text-transform: uppercase; - color: #000; + color: ${this.props.darkmode ? "#ffffff" : "#000000"}; &:hover { text-decoration: underline; } @@ -70,8 +70,8 @@ export default class Mobile extends React.Component { return (
- +
+

{this.props.darkmode ? "PGallery True" : "PGallery False"}

{ entries.map((entry, index) => ( diff --git a/components/PhotoGallery/Photo.jsx b/components/PhotoGallery/Photo.jsx index 92e8f58..e321b8f 100644 --- a/components/PhotoGallery/Photo.jsx +++ b/components/PhotoGallery/Photo.jsx @@ -69,7 +69,8 @@ export default class Photo extends React.Component { max-width: 400px; padding: 20px; margin: 6px; - background-color: #fff; + background-color: ${this.props.darkmode? "#222" : "#fff"}; + color: ${this.props.darkmode? "#fff" : "#000"}; @media (max-width: 800px) { max-width: initial; min-width: initial; diff --git a/components/PhotoGallery/index.jsx b/components/PhotoGallery/index.jsx index cab23ff..f7e2404 100644 --- a/components/PhotoGallery/index.jsx +++ b/components/PhotoGallery/index.jsx @@ -18,6 +18,7 @@ export default class PhotoGallery extends React.Component { for (let i in this.props.photos) { renderedGallery.push(
{renderedGallery} - + {renderedAuthorCards} -
+
); } diff --git a/components/SearchResults/index.jsx b/components/SearchResults/index.jsx index d538b88..0e76296 100644 --- a/components/SearchResults/index.jsx +++ b/components/SearchResults/index.jsx @@ -8,12 +8,13 @@ export default class SearchResults extends React.Component { return (
Share this story: diff --git a/components/VideoCard/index.jsx b/components/VideoCard/index.jsx index 791d89b..e3ea3b5 100644 --- a/components/VideoCard/index.jsx +++ b/components/VideoCard/index.jsx @@ -63,7 +63,7 @@ export default function VideoCard(props) {
@@ -75,7 +75,7 @@ export default function VideoCard(props) { //height: 0; } p { - ${locals.excerpt} + ${props.darkmode ? locals.darkexcerpt : locals.excerpt} } `} dangerouslySetInnerHTML={{ __html: props.content }} diff --git a/layouts/Article/index.jsx b/layouts/Article/index.jsx index 8c9f691..b7adcec 100644 --- a/layouts/Article/index.jsx +++ b/layouts/Article/index.jsx @@ -14,8 +14,10 @@ import CommentsCard from "components/CommentsCard"; class ArticleLayout extends React.Component { constructor(props) { super(props); + this.article = (
); + + this.classifiedsCards = ( + + ) } render() { @@ -47,7 +56,7 @@ class ArticleLayout extends React.Component { for (let relatedPost of this.props.relatedPosts) { renderedRelatedPosts.push(
- {buildArticleCard(relatedPost, "mini", true)} + {buildArticleCard(relatedPost, "mini", this.props.darkmode)}
); } @@ -60,7 +69,8 @@ class ArticleLayout extends React.Component { desktop: "(min-width: 901px)" }} defaultMatches={{ desktop: true }} - > + > + {matches => (
{matches.phone && ( @@ -72,7 +82,11 @@ class ArticleLayout extends React.Component { width: "100%" }} > -
{this.article}
+
+ {React.cloneElement(this.article, { + darkmode: this.props.darkmode + })} +
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
@@ -122,7 +135,9 @@ class ArticleLayout extends React.Component { width: "100%" }} > -
{this.article}
+
{React.cloneElement(this.article, { + darkmode: this.props.darkmode + })}
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
-
{this.article}
+ {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/} +
+ {React.cloneElement(this.article, { + darkmode: this.props.darkmode + })}
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/Feature/index.jsx b/layouts/Feature/index.jsx index 131f2d0..0e948f1 100644 --- a/layouts/Feature/index.jsx +++ b/layouts/Feature/index.jsx @@ -15,6 +15,7 @@ class FeatureLayout extends React.Component { return ( <> -

Darkmode: {this.props.darkmode ? "True" : "False"}

-
+
{this.cards.nsStoryList}
-
+
{this.cards.enStoryList}
-
+
{this.cards.opStoryList}
-
+
{this.cards.aeStoryList}
-
+
{this.cards.spStoryList}
diff --git a/layouts/Page/index.jsx b/layouts/Page/index.jsx index d050a95..e68f379 100644 --- a/layouts/Page/index.jsx +++ b/layouts/Page/index.jsx @@ -23,13 +23,14 @@ class PageLayout extends React.Component { ) }; } render() { - return
{this.state.page}
; + return
{this.state.page}
; } } diff --git a/layouts/PageWrapper.jsx b/layouts/PageWrapper.jsx index bd45460..89c336f 100644 --- a/layouts/PageWrapper.jsx +++ b/layouts/PageWrapper.jsx @@ -110,7 +110,7 @@ const PageWrapper = Comp => if (this.props.mappedBreaking != null) { renderedBreakingCard = (
- +
); } @@ -118,7 +118,7 @@ const PageWrapper = Comp => if (this.props.mappedITN != null && this.props.mappedBreaking == null) { renderedInTheNews = (
- +
); } @@ -129,11 +129,10 @@ const PageWrapper = Comp =>
- + {renderedBreakingCard} {renderedInTheNews} -

Darkmode: {this.state.darkmode ? "True" : "False"}

- +
diff --git a/layouts/PhotoGallery/PGalleryLayout.jsx b/layouts/PhotoGallery/PGalleryLayout.jsx index 7ac6a6a..31577f5 100644 --- a/layouts/PhotoGallery/PGalleryLayout.jsx +++ b/layouts/PhotoGallery/PGalleryLayout.jsx @@ -14,6 +14,7 @@ export default class PGalleryLayout extends React.Component { super(props); this.pgallery = (
{this.props.feature == true && ( ; + return ; } } diff --git a/pages/advertise.jsx b/pages/advertise.jsx index 3233b53..960449d 100644 --- a/pages/advertise.jsx +++ b/pages/advertise.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/category/graphics.jsx b/pages/category/graphics.jsx index c93c895..f5891aa 100644 --- a/pages/category/graphics.jsx +++ b/pages/category/graphics.jsx @@ -75,6 +75,7 @@ class Graphics extends Component {
diff --git a/pages/category/illo.jsx b/pages/category/illo.jsx index cb9febf..e282619 100644 --- a/pages/category/illo.jsx +++ b/pages/category/illo.jsx @@ -74,6 +74,7 @@ class Illo extends Component { />
diff --git a/pages/category/podcasts.jsx b/pages/category/podcasts.jsx index 0b89de9..98c5d36 100755 --- a/pages/category/podcasts.jsx +++ b/pages/category/podcasts.jsx @@ -67,6 +67,7 @@ class Category extends Component {
{ return { diff --git a/pages/category/spectrum.jsx b/pages/category/spectrum.jsx index bb0cb56..7c37d6b 100644 --- a/pages/category/spectrum.jsx +++ b/pages/category/spectrum.jsx @@ -74,6 +74,7 @@ class Spectrum extends Component { />
diff --git a/pages/category/video.jsx b/pages/category/video.jsx index 1ffa1e6..17d8d7e 100755 --- a/pages/category/video.jsx +++ b/pages/category/video.jsx @@ -68,6 +68,7 @@ class Category extends Component { { return { category: { diff --git a/pages/comment.jsx b/pages/comment.jsx index 8ad7cdb..0018d0b 100644 --- a/pages/comment.jsx +++ b/pages/comment.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/contact.jsx b/pages/contact.jsx index 600e2f1..5acb132 100644 --- a/pages/contact.jsx +++ b/pages/contact.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/editorial-board.jsx b/pages/editorial-board.jsx index 81ae763..7ec7c50 100644 --- a/pages/editorial-board.jsx +++ b/pages/editorial-board.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/index.jsx b/pages/index.jsx index cd99cbc..0146769 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -163,7 +163,6 @@ class Index extends Component { render() { return ( <> -

Darkmode: {this.props.darkmode ? "True" : "False"}

{`Daily Bruin - Since 1919`} - +
); } diff --git a/pages/post/[slug].jsx b/pages/post/[slug].jsx index c00cc3b..85bbf62 100644 --- a/pages/post/[slug].jsx +++ b/pages/post/[slug].jsx @@ -135,6 +135,7 @@ class Post extends Component { { return { diff --git a/pages/privacy.jsx b/pages/privacy.jsx index a318ac8..a51da14 100644 --- a/pages/privacy.jsx +++ b/pages/privacy.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/records-requests.jsx b/pages/records-requests.jsx index 984f531..a43f912 100644 --- a/pages/records-requests.jsx +++ b/pages/records-requests.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/search.jsx b/pages/search.jsx index 8052a52..59c5af4 100644 --- a/pages/search.jsx +++ b/pages/search.jsx @@ -32,7 +32,7 @@ class Search extends React.Component { {`Search: ${decodeURI(this.props.q)} - Daily Bruin`} - +
); } diff --git a/pages/sponsored/[slug].jsx b/pages/sponsored/[slug].jsx index 1f6b869..b3a0e62 100644 --- a/pages/sponsored/[slug].jsx +++ b/pages/sponsored/[slug].jsx @@ -56,6 +56,7 @@ class SponsoredPost extends Component { ); diff --git a/pages/staff.jsx b/pages/staff.jsx index 7d27ba5..97f9c8f 100644 --- a/pages/staff.jsx +++ b/pages/staff.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/submit.jsx b/pages/submit.jsx index 45b5f81..4629fc4 100644 --- a/pages/submit.jsx +++ b/pages/submit.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } diff --git a/pages/tag/[slug].jsx b/pages/tag/[slug].jsx index d3e66a3..2ffd31e 100644 --- a/pages/tag/[slug].jsx +++ b/pages/tag/[slug].jsx @@ -49,6 +49,7 @@ class Tag extends Component { { return { category: { diff --git a/pages/tag/usac-officer-evaluations-20-21.jsx b/pages/tag/usac-officer-evaluations-20-21.jsx index c18db31..b0b1830 100644 --- a/pages/tag/usac-officer-evaluations-20-21.jsx +++ b/pages/tag/usac-officer-evaluations-20-21.jsx @@ -76,6 +76,7 @@ class USACOfficerEvaluations2021 extends React.Component {
diff --git a/pages/the-daily-bruin-community-guide.jsx b/pages/the-daily-bruin-community-guide.jsx index 9802047..ca253bf 100644 --- a/pages/the-daily-bruin-community-guide.jsx +++ b/pages/the-daily-bruin-community-guide.jsx @@ -12,7 +12,7 @@ class Page extends Component { return { page }; } render() { - return ; + return ; } } From b2295cf7c5f2570dce8a13f90aa3348ff66f37c2 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Tue, 29 Mar 2022 11:50:05 -0700 Subject: [PATCH 06/19] article and home done --- components/Article/index.jsx | 1 + components/AuthorCard/index.jsx | 3 +- components/ClassifiedsCard/index.jsx | 2 - components/CommentsCard/index.jsx | 1 - components/MainSiteFooter/index.jsx | 5 +- components/SponsoredLinks/index.jsx | 3 +- components/StoryList/Story.jsx | 6 +- components/StoryList/index.jsx | 5 +- components/TwitterFeed/index.jsx | 2 +- layouts/Article/index.jsx | 7 +- layouts/Home/index.jsx | 140 ++++++++++++++++++--------- layouts/PageWrapper.jsx | 16 +-- layouts/utilities.jsx | 3 +- 13 files changed, 121 insertions(+), 73 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index 4fb9a36..6c2aa0f 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -54,6 +54,7 @@ export default class Article extends React.Component { >

( Tweets by dailybruin diff --git a/layouts/Article/index.jsx b/layouts/Article/index.jsx index b7adcec..b3024b3 100644 --- a/layouts/Article/index.jsx +++ b/layouts/Article/index.jsx @@ -209,9 +209,10 @@ class ArticleLayout extends React.Component { > {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/}
- {React.cloneElement(this.article, { - darkmode: this.props.darkmode - })}
+ {React.cloneElement(this.article, { + darkmode: this.props.darkmode + })} +
), + sponsored: () }; } @@ -123,7 +138,9 @@ export default class HomeLayout extends React.Component {
- {this.cards.qdStoryList} + {React.cloneElement(this.cards.qdStoryList, { + darkmode: this.props.darkmode + })}
{React.cloneElement(this.cards.dArticleCard, { @@ -144,10 +161,9 @@ export default class HomeLayout extends React.Component {
)}
- + {React.cloneElement(this.cards.classifieds, { + darkmode: this.props.darkmode + })}
{React.cloneElement(this.cards.f1ArticleCard, { @@ -166,20 +182,30 @@ export default class HomeLayout extends React.Component { >
-
- {this.cards.nsStoryList} +
+ {React.cloneElement(this.cards.nsStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
-
- {this.cards.enStoryList} +
+ {React.cloneElement(this.cards.enStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
-
- {this.cards.opStoryList} +
+ {React.cloneElement(this.cards.opStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
-
- {this.cards.aeStoryList} +
+ {React.cloneElement(this.cards.aeStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
-
- {this.cards.spStoryList} +
+ {React.cloneElement(this.cards.spStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
@@ -211,13 +237,14 @@ export default class HomeLayout extends React.Component { })}
- {this.cards.qdStoryList} + {React.cloneElement(this.cards.qdStoryList, { + darkmode: this.props.darkmode + })}
- + {React.cloneElement(this.cards.classifieds, { + darkmode: this.props.darkmode + })}
{React.cloneElement(this.cards.f1ArticleCard, { @@ -296,21 +323,31 @@ export default class HomeLayout extends React.Component {
- {this.cards.nsStoryList} + {React.cloneElement(this.cards.nsStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
- {this.cards.enStoryList} + {React.cloneElement(this.cards.enStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
- {this.cards.aeStoryList} + {React.cloneElement(this.cards.aeStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
- {this.cards.opStoryList} + {React.cloneElement(this.cards.opStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
- {this.cards.spStoryList} + {React.cloneElement(this.cards.spStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
@@ -323,7 +360,9 @@ export default class HomeLayout extends React.Component {
- + {React.cloneElement(this.cards.sponsored, { + darkmode: this.props.darkmode + })}
@@ -351,19 +390,22 @@ export default class HomeLayout extends React.Component { })}
- + {React.cloneElement(this.cards.classifieds, { + darkmode: this.props.darkmode + })}
- {this.cards.nsStoryList} + {React.cloneElement(this.cards.nsStoryList, { + darkmode: this.props.darkmode + })}
- {this.cards.enStoryList} + {React.cloneElement(this.cards.enStoryList, { + darkmode: this.props.darkmode + })}

- {this.cards.opStoryList} + {React.cloneElement(this.cards.opStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
- {this.cards.aeStoryList} + {React.cloneElement(this.cards.aeStoryList, { + darkmode: this.props.darkmode, displayType: "mini" + })}
@@ -425,7 +471,9 @@ export default class HomeLayout extends React.Component {
- {this.cards.qdStoryList} + {React.cloneElement(this.cards.qdStoryList, { + darkmode: this.props.darkmode + })}
{React.cloneElement(this.cards.dArticleCard, { @@ -443,7 +491,9 @@ export default class HomeLayout extends React.Component {
)}
- {this.cards.spStoryList} + {React.cloneElement(this.cards.spStoryList, { + darkmode: this.props.darkmode + })}
*/}
- + {React.cloneElement(this.cards.sponsored, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/PageWrapper.jsx b/layouts/PageWrapper.jsx index 89c336f..eb45f05 100644 --- a/layouts/PageWrapper.jsx +++ b/layouts/PageWrapper.jsx @@ -11,13 +11,6 @@ import CommentFAB from "components/CommentFAB"; import css from "./style.module.css"; import * as globals from "../components/globals"; -const wrapperStyle = { - padding: "6px", - backgroundColor: globals.darkMode ? "#010101" : "#f1f1f1", - width: "100%", - height: "100%" -}; - const layoutStyle = { maxWidth: 1248, margin: "auto" @@ -30,10 +23,7 @@ const PageWrapper = Comp => this.state = { darkmode: false } - - } - - + } static async getInitialProps(ctx) { // Load the categories for the header @@ -133,8 +123,8 @@ const PageWrapper = Comp => {renderedBreakingCard} {renderedInTheNews} -
- +
+
diff --git a/layouts/utilities.jsx b/layouts/utilities.jsx index 6a536c5..8fbca4d 100644 --- a/layouts/utilities.jsx +++ b/layouts/utilities.jsx @@ -48,7 +48,7 @@ export function buildArticleCard(story, type = "", darkmode) { } } -export function buildStoryList(type, list, link) { +export function buildStoryList(type, list, link, darkmode) { const mappedList = list.map(index => { return { title: index.title.rendered, @@ -61,6 +61,7 @@ export function buildStoryList(type, list, link) { mappedList[2].text = ""; return ( Date: Tue, 29 Mar 2022 11:56:18 -0700 Subject: [PATCH 07/19] removed one console log --- layouts/utilities.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/layouts/utilities.jsx b/layouts/utilities.jsx index 8fbca4d..854d9ec 100644 --- a/layouts/utilities.jsx +++ b/layouts/utilities.jsx @@ -5,7 +5,6 @@ import css from "./style.module.css"; import moment from "moment"; export function buildArticleCard(story, type = "", darkmode) { - console.log(darkmode); if (story != null && story != undefined && story.data == undefined) { return ( From 6a35ebf7d551a8003a1825e1b90b2cc733430862 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Thu, 7 Apr 2022 17:22:01 -0700 Subject: [PATCH 08/19] more pages done --- components/ArticleCard/Long.jsx | 2 +- components/ArticleCard/Podcast.jsx | 2 +- components/ArticleCard/Video.jsx | 8 +-- components/FeatureArticle/index.jsx | 2 +- components/PhotoCard/index.jsx | 12 ++--- components/PhotoGallery/ContainerItem.jsx | 17 +++--- components/PhotoGallery/Header.jsx | 9 ++-- components/PhotoGallery/PGallery.jsx | 10 ++-- components/PhotoGallery/index.jsx | 4 +- components/SectionHeader/index.jsx | 9 ++-- layouts/Author/index.jsx | 2 +- layouts/Category/index.jsx | 56 +++++++++++--------- layouts/Feature/index.jsx | 63 ++++++++++++----------- layouts/Multimedia/index.jsx | 2 +- layouts/Multimedia/utilities.jsx | 7 +-- layouts/PhotoGallery/PGalleryLayout.jsx | 4 +- layouts/PhotoGallery/index_old.jsx | 21 +++++--- layouts/Podcasts/index.jsx | 34 +++++++----- layouts/Video/index.jsx | 38 ++++++++------ layouts/style.module.css | 5 ++ layouts/utilities.jsx | 18 +++---- pages/category/[slug].jsx | 2 + pages/category/cartoons.jsx | 2 + pages/category/graphics.jsx | 1 + pages/category/illo.jsx | 1 + pages/category/podcasts.jsx | 1 + pages/category/spectrum.jsx | 1 + pages/category/video.jsx | 1 + pages/post/[slug].jsx | 3 ++ 29 files changed, 197 insertions(+), 140 deletions(-) diff --git a/components/ArticleCard/Long.jsx b/components/ArticleCard/Long.jsx index 4f206fa..0611f21 100644 --- a/components/ArticleCard/Long.jsx +++ b/components/ArticleCard/Long.jsx @@ -14,7 +14,7 @@ export default function Long(props) { box-shadow: ${globals.cardShadow}; height: 100%; padding: 0px; - background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222222" : "#ffffff"}; `} >
diff --git a/components/ArticleCard/Video.jsx b/components/ArticleCard/Video.jsx index f838187..0732a3f 100644 --- a/components/ArticleCard/Video.jsx +++ b/components/ArticleCard/Video.jsx @@ -14,10 +14,11 @@ export default function Video(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: ${globals.darkMode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222222" : "#ffffff"}; height: 100%; `} > +
+

{props.photographer} @@ -121,7 +123,7 @@ export default function Video(props) { font-weight: 700; font-size: 11px; - color: #000000; + color: ${props.darkmode ? "#ffffff" : "#000000"};; `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/FeatureArticle/index.jsx b/components/FeatureArticle/index.jsx index 1eb2cb9..24d47a4 100644 --- a/components/FeatureArticle/index.jsx +++ b/components/FeatureArticle/index.jsx @@ -11,7 +11,7 @@ import Tag from "./Tag"; import Landing from "./Landing"; import MiniArticleCard from "../ArticleCard/Mini"; - +// TODO export default class FeatureArticle extends React.Component { constructor(props) { super(props); diff --git a/components/PhotoCard/index.jsx b/components/PhotoCard/index.jsx index 58c17fd..8a5f0ff 100644 --- a/components/PhotoCard/index.jsx +++ b/components/PhotoCard/index.jsx @@ -35,7 +35,7 @@ export default function PhotoCard(props) { css={css` display: block; width: 100%; - border: 15px solid #ffffff; + border: 15px solid ${props.darkmode ? "#444" : "#fff"}; `} >
@@ -85,7 +85,7 @@ export default function PhotoCard(props) { dangerouslySetInnerHTML={{ __html: props.excerpt }} css={css` color: rgb(187, 187, 187); - font-size: 0.8vw; + font-size: 0.9vw; line-height: 15px; font-family: ${globals.bodyFont}; @media (max-width: 768px) { @@ -97,7 +97,7 @@ export default function PhotoCard(props) { id="credit-block" css={css` color: rgb(187, 187, 187); - font-size: 0.7vw; + font-size: 0.9vw; font-family: ${globals.bodyFont}; font-weight: bold; color: #fff; @@ -136,7 +136,7 @@ export default function PhotoCard(props) { css={css` box-sizing: border-box; position: relative; - background: #fff; + background-color: ${props.darkmode ? "#222" : "#fff"}; width: 100%; box-shadow: ${globals.cardShadow}; `} @@ -153,7 +153,7 @@ export default function PhotoCard(props) {
diff --git a/components/PhotoGallery/ContainerItem.jsx b/components/PhotoGallery/ContainerItem.jsx index a2d7d0f..885bc2f 100644 --- a/components/PhotoGallery/ContainerItem.jsx +++ b/components/PhotoGallery/ContainerItem.jsx @@ -21,10 +21,13 @@ function ContainerItem(props) { // } // This code below should work with the most up-to-date API (not yet avail on the web) and allow for article-text and center-photo + // className={`${css['row']} ${props.darkmode ? css[dark] : ""}`} + let classNameRow = `${css['row']} ${props.darkmode ? css['dark'] : ""}`; + let classNameNoRow = `${props.darkmode ? css['dark'] : ""}`; if (props.type == 'center-photo') { return ( -
+
gallery-image {/*
{props.description}
@@ -36,7 +39,7 @@ function ContainerItem(props) { } else if (props.type == 'article-text') { if (props.layout_type == 'alternating') { // only alternating layout needs to use rows return ( -
+

@@ -44,7 +47,7 @@ function ContainerItem(props) { ); } else { - return
+ return

@@ -58,7 +61,7 @@ function ContainerItem(props) { textAlign: 'right' }; return ( -
+
gallery-image @@ -68,7 +71,7 @@ function ContainerItem(props) { ); } else { return ( -
+
gallery-image

{props.credits}

@@ -80,14 +83,14 @@ function ContainerItem(props) { } else if (props.type == 'big-center-photo') { return ( -
+
big-center-photo

{props.credits}

) } else if (props.type == 'corrections-text') { return ( -
+

diff --git a/components/PhotoGallery/Header.jsx b/components/PhotoGallery/Header.jsx index 9aea14f..fa13bc3 100644 --- a/components/PhotoGallery/Header.jsx +++ b/components/PhotoGallery/Header.jsx @@ -34,8 +34,8 @@ export default function Header(props) {
@@ -106,12 +107,12 @@ export default function Header(props) { line-height: 21px; padding: 5px 0 0; - color: #000000; + color: ${props.darkmode? "#fff" : "#000"}; a { text-decoration: none; color: #0080c6; - background-color: ${this.props.darkmode? "#222" : "#fff"}; + background-color: ${props.darkmode? "#222" : "#fff"}; } a:hover { text-decoration: underline; diff --git a/components/PhotoGallery/PGallery.jsx b/components/PhotoGallery/PGallery.jsx index fb717b3..30241f9 100644 --- a/components/PhotoGallery/PGallery.jsx +++ b/components/PhotoGallery/PGallery.jsx @@ -238,6 +238,7 @@ function PGallery(props) { `} >
-

{this.props.darkmode ? "PGallery True" : "PGallery False"}

+
{ entries.map((entry, index) => ( diff --git a/components/SectionHeader/index.jsx b/components/SectionHeader/index.jsx index 6a12bda..d0fca1a 100644 --- a/components/SectionHeader/index.jsx +++ b/components/SectionHeader/index.jsx @@ -23,6 +23,7 @@ export default class SectionHeader extends React.Component { max-height: 64px; margin: 0px; padding: 0px; + ${this. props.darkmode ? "filter: invert(100%);" : ""}; `} > ); @@ -47,7 +48,7 @@ export default class SectionHeader extends React.Component { font-weight: bold; font-size: 12px; padding: 1px 5px; - color: black; + color: ${this.props.darkmode ? "#fff" : "#000"}; text-decoration: none; &:hover { text-decoration: underline; @@ -62,7 +63,7 @@ export default class SectionHeader extends React.Component {
{utilities.renderPostArray( this.state.otherArticleCards, - "full" + "full", )} {!this.state.more ? ( diff --git a/layouts/Category/index.jsx b/layouts/Category/index.jsx index 074b85e..24dabcd 100644 --- a/layouts/Category/index.jsx +++ b/layouts/Category/index.jsx @@ -13,14 +13,21 @@ export default class CategoryLayout extends React.Component { constructor(props) { super(props); this.state = { - aArticleCard: utilities.buildArticleCard(this.props.posts[0]), - bArticleCard: utilities.buildArticleCard(this.props.posts[1]), - cArticleCard: utilities.buildArticleCard(this.props.posts[2]), - otherArticleCards: utilities.buildArticleList(this.props.posts.slice(3)), + aArticleCard: utilities.buildArticleCard(this.props.posts[0], "", this.props.darkmode), + bArticleCard: utilities.buildArticleCard(this.props.posts[1], "", this.props.darkmode), + cArticleCard: utilities.buildArticleCard(this.props.posts[2], "", this.props.darkmode), + otherArticleCards: utilities.buildArticleList(this.props.posts.slice(3), "", this.props.darkmode), more: true }; this.getPosts = this.getPosts.bind(this); + + this.classifiedsCards = ( + + ) } getPosts(page) { @@ -83,17 +90,17 @@ export default class CategoryLayout extends React.Component { >
{React.cloneElement(this.state.aArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.state.bArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{React.cloneElement(this.state.cArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
{utilities.renderPostArray( this.state.otherArticleCards, - "full" + "full", + this.props.darkmode )} {!this.state.more ? ( @@ -137,7 +145,7 @@ export default class CategoryLayout extends React.Component { >
{React.cloneElement(this.state.aArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
@@ -152,7 +160,8 @@ export default class CategoryLayout extends React.Component { > {utilities.renderPostArray( this.state.otherArticleCards, - "horz" + "horz", + this.props.darkmode )} {!this.state.more ? ( @@ -179,19 +188,18 @@ export default class CategoryLayout extends React.Component { >
{React.cloneElement(this.state.bArticleCard, { - displayType: "vert" + darkmode: this.props.darkmode, displayType: "vert" })}
{React.cloneElement(this.state.cArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
@@ -212,7 +220,7 @@ export default class CategoryLayout extends React.Component { >
{React.cloneElement(this.state.aArticleCard, { - displayType: "full" + darkmode: this.props.darkmode, displayType: "full" })}
@@ -226,12 +234,12 @@ export default class CategoryLayout extends React.Component { >
{React.cloneElement(this.state.bArticleCard, { - displayType: "vert" + darkmode: this.props.darkmode, displayType: "vert" })}
{React.cloneElement(this.state.cArticleCard, { - displayType: "mini" + darkmode: this.props.darkmode, displayType: "mini" })}
@@ -248,7 +256,8 @@ export default class CategoryLayout extends React.Component { > {utilities.renderPostArray( this.state.otherArticleCards, - "long" + "long", + this.props.darkmode )} {!this.state.more ? ( @@ -276,10 +285,9 @@ export default class CategoryLayout extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/Feature/index.jsx b/layouts/Feature/index.jsx index 0e948f1..8d67cfb 100644 --- a/layouts/Feature/index.jsx +++ b/layouts/Feature/index.jsx @@ -9,40 +9,45 @@ import FeatureArticle from "../../components/FeatureArticle"; class FeatureLayout extends React.Component { constructor(props) { super(props); + this.featurearticle = ( + article.slug != this.props.article.slug + )} + relatedPosts={this.props.relatedPosts} + /> + ) } render() { return ( <> - article.slug != this.props.article.slug - )} - relatedPosts={this.props.relatedPosts} - /> + {React.cloneElement(this.featurearticle, { + darkmode: this.props.darkmode + })} ); } diff --git a/layouts/Multimedia/index.jsx b/layouts/Multimedia/index.jsx index aef571d..2d513c8 100644 --- a/layouts/Multimedia/index.jsx +++ b/layouts/Multimedia/index.jsx @@ -56,7 +56,7 @@ export default class MultimediaLayout extends React.Component { } render() { - let rendered = utilities.buildPhotoList(this.state.cards); + let rendered = utilities.buildPhotoList(this.state.cards, this.props.darkmode); return ( <>
- {this.pgallery} + {React.cloneElement(this.pgallery, { + darkmode: this.props.darkmode + })}
+ ) } render() { return ( <>
- + {React.cloneElement(this.photogallery, { + darkmode: this.props.darkmode + })}
+ ) } getPosts(page) { @@ -30,7 +37,7 @@ export default class PodcastsLayout extends React.Component { if (json.data == undefined) { this.setState({ otherArticleCards: this.state.otherArticleCards.concat( - utilities.buildArticleList(json) + utilities.buildArticleList(json, this.props.darkmode) ) }); } else { @@ -89,7 +96,8 @@ export default class PodcastsLayout extends React.Component { > {utilities.renderPodcastArray( this.state.otherArticleCards, - "podcast" + "podcast", + this.props.darkmode )} {!this.state.more ? ( @@ -136,7 +144,8 @@ export default class PodcastsLayout extends React.Component { > {utilities.renderPodcastArray( this.state.otherArticleCards, - "podcast" + "podcast", + this.props.darkmode )}
@@ -163,10 +172,9 @@ export default class PodcastsLayout extends React.Component { }} >
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
@@ -197,7 +205,8 @@ export default class PodcastsLayout extends React.Component { > {utilities.renderPodcastArray( this.state.otherArticleCards, - "podcast" + "podcast", + this.props.darkmode )}
@@ -226,10 +235,9 @@ export default class PodcastsLayout extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/Video/index.jsx b/layouts/Video/index.jsx index 3b90098..f617586 100644 --- a/layouts/Video/index.jsx +++ b/layouts/Video/index.jsx @@ -19,6 +19,13 @@ export default class VideoLayout extends React.Component { more: true }; this.getPosts = this.getPosts.bind(this); + + this.classifiedsCards = ( + + ) } getPosts(page) { @@ -31,7 +38,7 @@ export default class VideoLayout extends React.Component { if (json.data == undefined) { this.setState({ otherArticleCards: this.state.otherArticleCards.concat( - utilities.buildArticleList(json) + utilities.buildArticleList(json, this.props.darkmode) ) }); } else { @@ -81,7 +88,7 @@ export default class VideoLayout extends React.Component { >
{React.cloneElement(this.state.aArticleCard, { - displayType: "video" + displayType: "video", darkmode: this.props.darkmode })}
{utilities.renderVideoArray( this.state.otherArticleCards, - "video" + "video", + this.props.darkmode )} {!this.state.more ? ( @@ -125,7 +133,7 @@ export default class VideoLayout extends React.Component { >
{React.cloneElement(this.state.aArticleCard, { - displayType: "full" + displayType: "full", darkmode: this.props.darkmode })}
@@ -147,7 +155,8 @@ export default class VideoLayout extends React.Component { > {utilities.renderVideoArray( this.state.otherArticleCards, - "video" + "video", + this.props.darkmode )}
@@ -174,10 +183,9 @@ export default class VideoLayout extends React.Component { }} >
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
@@ -198,7 +206,7 @@ export default class VideoLayout extends React.Component { >
{React.cloneElement(this.state.aArticleCard, { - displayType: "full" + displayType: "full", darkmode: this.props.darkmode })}
@@ -221,7 +229,8 @@ export default class VideoLayout extends React.Component { > {utilities.renderVideoArray( this.state.otherArticleCards, - "video" + "video", + this.props.darkmode )}
@@ -250,10 +259,9 @@ export default class VideoLayout extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/style.module.css b/layouts/style.module.css index 6a520f1..cd1046b 100644 --- a/layouts/style.module.css +++ b/layouts/style.module.css @@ -1,3 +1,8 @@ +.dark { + background-color: #222 !important; + color: #fff; +} + .card { display: block; padding: 6px; diff --git a/layouts/utilities.jsx b/layouts/utilities.jsx index 854d9ec..51f86f7 100644 --- a/layouts/utilities.jsx +++ b/layouts/utilities.jsx @@ -4,7 +4,7 @@ import MultimediaScroller from "../components/MultimediaScroller"; import css from "./style.module.css"; import moment from "moment"; -export function buildArticleCard(story, type = "", darkmode) { +export function buildArticleCard(story, type = "", darkmode = false) { if (story != null && story != undefined && story.data == undefined) { return ( @@ -89,21 +89,21 @@ export function buildMultimediaScroller(media) { return ; } -export function buildArticleList(stories) { +export function buildArticleList(stories, darkmode = false) { let postArray = []; for (let i = 0; i < stories.length; i++) { - postArray.push(buildArticleCard(stories[i])); + postArray.push(buildArticleCard(stories[i], "", darkmode)); } return postArray; } -export function renderPostArray(otherArticleCards, type) { +export function renderPostArray(otherArticleCards, type, darkmode = false) { let renderedPostArray = []; for (let i = 0; i < otherArticleCards.length; i++) { renderedPostArray.push(
{React.cloneElement(otherArticleCards[i], { - displayType: type + displayType: type, darkmode: darkmode })}
); @@ -111,13 +111,13 @@ export function renderPostArray(otherArticleCards, type) { return renderedPostArray; } -export function renderVideoArray(otherArticleCards, type) { +export function renderVideoArray(otherArticleCards, type, darkmode = false) { let renderedPostArray = []; for (let i = 0; i < otherArticleCards.length; i++) { renderedPostArray.push(
{React.cloneElement(otherArticleCards[i], { - displayType: type + displayType: type, darkmode: darkmode })}
); @@ -125,13 +125,13 @@ export function renderVideoArray(otherArticleCards, type) { return renderedPostArray; } -export function renderPodcastArray(otherArticleCards, type) { +export function renderPodcastArray(otherArticleCards, type, darkmode = false) { let renderedPostArray = []; for (let i = 0; i < otherArticleCards.length; i++) { renderedPostArray.push(
{React.cloneElement(otherArticleCards[i], { - displayType: type + displayType: type, darkmode: darkmode })}
); diff --git a/pages/category/[slug].jsx b/pages/category/[slug].jsx index e0c48e7..3b2f89a 100755 --- a/pages/category/[slug].jsx +++ b/pages/category/[slug].jsx @@ -66,11 +66,13 @@ class Category extends Component {
{ diff --git a/pages/category/cartoons.jsx b/pages/category/cartoons.jsx index b0b69e6..71407f9 100644 --- a/pages/category/cartoons.jsx +++ b/pages/category/cartoons.jsx @@ -69,12 +69,14 @@ class Cartoons extends Component {
diff --git a/pages/category/graphics.jsx b/pages/category/graphics.jsx index f5891aa..ebb3aba 100644 --- a/pages/category/graphics.jsx +++ b/pages/category/graphics.jsx @@ -69,6 +69,7 @@ class Graphics extends Component {
diff --git a/pages/category/illo.jsx b/pages/category/illo.jsx index e282619..a804fbd 100644 --- a/pages/category/illo.jsx +++ b/pages/category/illo.jsx @@ -69,6 +69,7 @@ class Illo extends Component {
diff --git a/pages/category/podcasts.jsx b/pages/category/podcasts.jsx index 98c5d36..9e43d2f 100755 --- a/pages/category/podcasts.jsx +++ b/pages/category/podcasts.jsx @@ -61,6 +61,7 @@ class Category extends Component {
diff --git a/pages/category/spectrum.jsx b/pages/category/spectrum.jsx index 7c37d6b..3fe3862 100644 --- a/pages/category/spectrum.jsx +++ b/pages/category/spectrum.jsx @@ -69,6 +69,7 @@ class Spectrum extends Component {
diff --git a/pages/category/video.jsx b/pages/category/video.jsx index 17d8d7e..2e3858a 100755 --- a/pages/category/video.jsx +++ b/pages/category/video.jsx @@ -61,6 +61,7 @@ class Category extends Component {
diff --git a/pages/post/[slug].jsx b/pages/post/[slug].jsx index 85bbf62..9e8dc5f 100644 --- a/pages/post/[slug].jsx +++ b/pages/post/[slug].jsx @@ -104,6 +104,7 @@ class Post extends Component { { this.props.feature == true && ( Date: Sat, 9 Apr 2022 01:16:11 -0700 Subject: [PATCH 09/19] change darkmode icon --- components/Article/index.jsx | 13 ++--- components/ArticleCard/Full.jsx | 10 ++-- components/ArticleCard/Horz.jsx | 10 ++-- components/ArticleCard/Long.jsx | 7 +-- components/ArticleCard/Mini.jsx | 2 +- components/ArticleCard/Podcast.jsx | 9 ++-- components/ArticleCard/Vert.jsx | 10 ++-- components/ArticleCard/Video.jsx | 9 ++-- components/ArticleCard/locals.js | 8 ++-- components/BreakingBanner/index.jsx | 4 +- components/ClassifiedsCard/index.jsx | 8 ++-- components/CommentsCard/index.jsx | 4 +- components/EmailSignUp/index.jsx | 6 +-- components/FeatureArticle/index.jsx | 23 ++++----- components/InTheNewsBanner/index.jsx | 6 +-- components/MainSiteFooter/index.jsx | 4 +- components/Masthead/Desktop.jsx | 48 ++++++++++--------- components/Masthead/Mobile.jsx | 6 +-- components/MultimediaScroller/index.jsx | 2 +- components/Page/index.jsx | 4 +- components/PhotoCard/index.jsx | 4 +- components/PhotoGrid/Photo.jsx | 2 +- components/ReviewInfobox/index.jsx | 8 ++-- components/SectionHeader/index.jsx | 6 +-- components/ShareButtons/facebook.svg | 2 +- components/ShareButtons/index.jsx | 2 +- components/ShareButtons/reddit.svg | 2 +- components/ShareButtons/twitter.svg | 2 +- components/SponsoredArticle/index.jsx | 12 +++-- components/SponsoredLinks/index.jsx | 4 +- components/SportsScoreboard/index.jsx | 10 ++-- .../SportsTournamentScoreboard/Scoreboard.jsx | 6 +-- .../SportsTournamentScoreboard/index.jsx | 6 +-- components/StoryList/Story.jsx | 4 +- components/StoryList/index.jsx | 2 +- components/TwitterFeed/index.jsx | 1 + components/VideoCard/index.jsx | 5 +- components/WelcomePopUp/index.jsx | 2 +- layouts/Article/index.jsx | 12 ++--- layouts/Author/index.jsx | 31 ++++++++---- layouts/Home/index.jsx | 12 ++--- layouts/Page/index.jsx | 2 +- layouts/Sponsored/index.jsx | 3 +- layouts/Tag/index.jsx | 30 +++++++----- layouts/USACOfficerEvaluations1920/index.jsx | 1 + .../index.jsx | 2 +- pages/stonewall.jsx | 4 +- 47 files changed, 202 insertions(+), 168 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index 6c2aa0f..c5e26cc 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -92,7 +92,7 @@ export default class Article extends React.Component { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: ${this.props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${this.props.darkmode ? "#222" : "#fff"}; `} > {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/} @@ -128,7 +128,7 @@ export default class Article extends React.Component { font-weight: ${this.props.darkmode ? 550 : "bold"}; font-size: 30px; line-height: 1.25; - color: ${this.props.darkmode ? "#ffffff" : "#000000"}; + color: ${this.props.darkmode ? "#ddd" : "#000"}; `} style={{ fontStyle: @@ -198,12 +198,12 @@ export default class Article extends React.Component { line-height: 21px; padding: 5px 0 0; - color: ${this.props.darkmode ? "#ffffff" : "#000000"}; + color: ${this.props.darkmode ? "#ddd" : "#000"}; a { text-decoration: none; color: #0080c6; - background-color: ${this.props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${this.props.darkmode ? "#222" : "#fff"}; } a:hover { text-decoration: underline; @@ -232,7 +232,7 @@ export default class Article extends React.Component { css={css` font-size: 12px; font-family: ${globals.bodyFont}; - color: ${this.props.darkmode ? "#ffffff" : globals.darkGray}; + color: ${this.props.darkmode ? "#fff" : globals.darkGray}; max-width: 640px; margin: 20px auto 0; `} @@ -248,7 +248,7 @@ export default class Article extends React.Component { text-align: left; line-height: 1.75; - color: ${this.props.darkmode ? "#ffffff" : "#000000"}; + color: ${this.props.darkmode ? "#fff" : "#000"}; display: block; max-width: 640px; margin: auto; @@ -299,6 +299,7 @@ export default class Article extends React.Component { } & iframe { + ${this.props.darkmode ? "filter: invert(1);" : ""} width: 100%; } diff --git a/components/ArticleCard/Full.jsx b/components/ArticleCard/Full.jsx index 0d551fa..fbb4d78 100644 --- a/components/ArticleCard/Full.jsx +++ b/components/ArticleCard/Full.jsx @@ -14,7 +14,7 @@ export default function Full(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: ${props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222" : "#fff"}; `} > @@ -45,7 +45,7 @@ export default function Full(props) { @@ -91,7 +91,7 @@ export default function Full(props) { margin: 4px 0; } - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} dangerouslySetInnerHTML={{ __html: props.caption }} @@ -113,7 +113,7 @@ export default function Full(props) { font-weight: bold; font-size: 11px; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > diff --git a/components/ArticleCard/Horz.jsx b/components/ArticleCard/Horz.jsx index 8474160..5fd7cd8 100644 --- a/components/ArticleCard/Horz.jsx +++ b/components/ArticleCard/Horz.jsx @@ -14,7 +14,7 @@ export default function Horz(props) { display: flex; box-shadow: ${globals.cardShadow}; padding: 0px; - background-color: ${props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222" : "#fff"}; `} >
{props.photographer} @@ -99,7 +99,7 @@ export default function Horz(props) { @@ -143,7 +143,7 @@ export default function Horz(props) { font-weight: bold; font-size: 11px; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > diff --git a/components/ArticleCard/Long.jsx b/components/ArticleCard/Long.jsx index 0611f21..3b3debf 100644 --- a/components/ArticleCard/Long.jsx +++ b/components/ArticleCard/Long.jsx @@ -14,7 +14,7 @@ export default function Long(props) { box-shadow: ${globals.cardShadow}; height: 100%; padding: 0px; - background-color: ${props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222" : "#fff"}; `} >
{moment(props.date).format("MMM D, YYYY h:mm a")} @@ -94,7 +95,7 @@ export default function Long(props) { font-weight: bold; font-size: 11px; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Mini.jsx b/components/ArticleCard/Mini.jsx index 4b2b64a..fa0da80 100644 --- a/components/ArticleCard/Mini.jsx +++ b/components/ArticleCard/Mini.jsx @@ -14,7 +14,7 @@ export default function Mini(props) { display: flex; box-shadow: ${globals.cardShadow}; padding: 0px; - background-color: ${props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222" : "#fff"}; `} >
@@ -50,7 +50,7 @@ export default function Podcast(props) { font-size: 8px; text-align: right; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > {props.photographer} @@ -83,7 +83,7 @@ export default function Podcast(props) { {moment(props.date).format("MMM D, YYYY h:mm a")} @@ -121,7 +122,7 @@ export default function Podcast(props) { font-weight: 700; font-size: 11px; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/Vert.jsx b/components/ArticleCard/Vert.jsx index 31039b0..b84d3eb 100644 --- a/components/ArticleCard/Vert.jsx +++ b/components/ArticleCard/Vert.jsx @@ -14,7 +14,7 @@ export default function Vert(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: ${props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222" : "#fff"}; `} > @@ -36,7 +36,7 @@ export default function Vert(props) { font-size: 8px; text-align: right; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > {props.photographer} @@ -69,7 +69,7 @@ export default function Vert(props) { @@ -113,7 +113,7 @@ export default function Vert(props) { font-weight: 700; font-size: 11px; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > diff --git a/components/ArticleCard/Video.jsx b/components/ArticleCard/Video.jsx index 0732a3f..d4285b7 100644 --- a/components/ArticleCard/Video.jsx +++ b/components/ArticleCard/Video.jsx @@ -14,7 +14,7 @@ export default function Video(props) { display: block; padding: 10px; box-shadow: ${globals.cardShadow}; - background-color: ${props.darkmode ? "#222222" : "#ffffff"}; + background-color: ${props.darkmode ? "#222" : "#fff"}; height: 100%; `} > @@ -52,7 +52,7 @@ export default function Video(props) { font-size: 8px; text-align: right; - color: ${props.darkmode ? "#ffffff" : "#000000"}; + color: ${props.darkmode ? "#ddd" : "#000"}; `} > {props.photographer} @@ -85,7 +85,7 @@ export default function Video(props) { {moment(props.date).format("MMM D, YYYY h:mm a")} @@ -123,7 +124,7 @@ export default function Video(props) { font-weight: 700; font-size: 11px; - color: ${props.darkmode ? "#ffffff" : "#000000"};; + color: ${props.darkmode ? "#ddd" : "#000"};; `} > By {utilities.renderAuthors(props.authors)} diff --git a/components/ArticleCard/locals.js b/components/ArticleCard/locals.js index b3d753f..982aace 100644 --- a/components/ArticleCard/locals.js +++ b/components/ArticleCard/locals.js @@ -6,7 +6,7 @@ export const headline = ` font-weight: bold; font-size: 1.5rem; line-height: 1.25; - color: #000000; + color: #000; &:hover { color: ${globals.DBblue}; }`; @@ -17,7 +17,7 @@ export const darkheadline = ` font-weight: 550; font-size: 1.5rem; line-height: 1.25; - color: #ffffff; + color: #ddd; &:hover { color: ${globals.DBblue}; }`; @@ -26,7 +26,7 @@ export const excerpt = ` font-family: ${globals.bodyFont}; font-weight: 300; font-size: 0.75rem; - color: #000000; + color: #000; p { margin: 0; @@ -41,7 +41,7 @@ export const darkexcerpt = ` font-family: ${globals.bodyFont}; font-weight: 300; font-size: 0.75rem; - color: #ffffff; + color: #ddd; p { margin: 0; diff --git a/components/BreakingBanner/index.jsx b/components/BreakingBanner/index.jsx index f878646..3aceb25 100644 --- a/components/BreakingBanner/index.jsx +++ b/components/BreakingBanner/index.jsx @@ -11,7 +11,7 @@ export default class BreakingBanner extends React.Component { return (
{this.props.header} @@ -111,7 +111,7 @@ export default class ClassifiedsCard extends React.Component { css={css` padding: 0 12px; background-color: ${this.props.darkmode ? "#222" : "#fff"}; - color: ${this.props.darkmode ? "#fff" : "#000"}; + color: ${this.props.darkmode ? "#ddd" : "#000"}; `} > {this.renderedClassifieds} diff --git a/components/CommentsCard/index.jsx b/components/CommentsCard/index.jsx index ede85bc..6ae867a 100644 --- a/components/CommentsCard/index.jsx +++ b/components/CommentsCard/index.jsx @@ -14,7 +14,7 @@ export default function CommentsCard(props) { >
COMMENTS diff --git a/components/EmailSignUp/index.jsx b/components/EmailSignUp/index.jsx index a4102d1..0363157 100644 --- a/components/EmailSignUp/index.jsx +++ b/components/EmailSignUp/index.jsx @@ -45,7 +45,7 @@ export default class EmailPopUp extends React.Component { top: 29%; left: 0; right: 0; - background-color: #ffffff; + background-color: #fff; box-shadow: ${globals.cardShadow}; z-index: 3001; `} @@ -162,7 +162,7 @@ export default class EmailPopUp extends React.Component { top: 40px; left: 20px; padding-left: 5px; - border: 2px solid #cccccc; + border: 2px solid #ccc; font-family: "PT Serif"; font-size: 15px; font-weight: bold; @@ -189,7 +189,7 @@ export default class EmailPopUp extends React.Component { font-family: "PT Serif"; font-weight: bolder; font-size: 16px; - color: #ffffff; + color: #fff; z-index: 3001; cursor: pointer; border-radius: 0; diff --git a/components/FeatureArticle/index.jsx b/components/FeatureArticle/index.jsx index 24d47a4..75b110d 100644 --- a/components/FeatureArticle/index.jsx +++ b/components/FeatureArticle/index.jsx @@ -29,8 +29,8 @@ export default class FeatureArticle extends React.Component { display: inline-block; padding: 6px 12px; white-space: initial; - background-color: ${this.props.darkmode? "#222" : "#fff"}; - color: ${this.props.darkmode? "#fff" : "#000"}; + /* background-color: ${this.props.darkmode? "#222" : "#fff"}; + color: ${this.props.darkmode? "#fff" : "#000"}; */ &:first-of-type { margin-left: 20px; @@ -41,6 +41,7 @@ export default class FeatureArticle extends React.Component { `} > - {/*

HELLO WORLD

*/}
diff --git a/components/Page/index.jsx b/components/Page/index.jsx index c4b1f74..08e2993 100644 --- a/components/Page/index.jsx +++ b/components/Page/index.jsx @@ -17,7 +17,7 @@ export default class Page extends React.Component { display: block; padding: 10px 30px; box-shadow: ${globals.cardShadow}; - background-color: #ffffff; + background-color: #fff; font-family: ${globals.bodyFont}; `} > @@ -28,7 +28,7 @@ export default class Page extends React.Component { font-weight: normal; font-size: 14px; - color: #000000; + color: #000; margin: auto; display: block; diff --git a/components/PhotoCard/index.jsx b/components/PhotoCard/index.jsx index 8a5f0ff..90cba30 100644 --- a/components/PhotoCard/index.jsx +++ b/components/PhotoCard/index.jsx @@ -70,7 +70,7 @@ export default function PhotoCard(props) {

diff --git a/components/PhotoGrid/Photo.jsx b/components/PhotoGrid/Photo.jsx index 79c27b1..4a28e5c 100644 --- a/components/PhotoGrid/Photo.jsx +++ b/components/PhotoGrid/Photo.jsx @@ -41,7 +41,7 @@ export default class Photo extends React.Component { css={css` display: block; width: 100%; - border: 15px solid #ffffff; + border: 15px solid #fff; `} >
- diff --git a/components/ShareButtons/index.jsx b/components/ShareButtons/index.jsx index 4a4bf73..4c038f0 100644 --- a/components/ShareButtons/index.jsx +++ b/components/ShareButtons/index.jsx @@ -53,7 +53,7 @@ export default function ShareButtons(props) { @media (max-width: 450px) { display: block; } - color: ${props.darkmode ? '#ffffff' : '#000000'}; + color: ${props.darkmode ? '#fff' : '#000'}; `} > Share this story: diff --git a/components/ShareButtons/reddit.svg b/components/ShareButtons/reddit.svg index b4f4c6d..d259e98 100644 --- a/components/ShareButtons/reddit.svg +++ b/components/ShareButtons/reddit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/ShareButtons/twitter.svg b/components/ShareButtons/twitter.svg index 57e01fe..8601cea 100644 --- a/components/ShareButtons/twitter.svg +++ b/components/ShareButtons/twitter.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/components/SponsoredArticle/index.jsx b/components/SponsoredArticle/index.jsx index 33223c3..12fcd13 100644 --- a/components/SponsoredArticle/index.jsx +++ b/components/SponsoredArticle/index.jsx @@ -10,7 +10,7 @@ import AuthorCard from "../AuthorCard"; import Tag from "./Tag"; import Landing from "./Landing"; import Logo from "./dailybruin.svg"; - +// TODO export default class FeatureArticle extends React.Component { constructor(props) { super(props); @@ -26,6 +26,7 @@ export default class FeatureArticle extends React.Component { `} > @@ -169,12 +170,12 @@ export default class FeatureArticle extends React.Component { line-height: 21px; padding: 5px 0 0; - color: #000000; + color: #000; a { text-decoration: none; color: #0080c6; - background-color: #ffffff; + background-color: ${this.props.darkmode ? "#222" : "#fff"}; } a:hover { text-decoration: underline; @@ -206,7 +207,7 @@ export default class FeatureArticle extends React.Component { text-align: left; line-height: 1.75; - color: #000000; + color: #000; display: block; max-width: 640px; margin: auto; @@ -268,6 +269,7 @@ export default class FeatureArticle extends React.Component { } iframe { + ${this.props.darkmode ? "filter: invert(1);" : ""} width: 100%; } diff --git a/components/SponsoredLinks/index.jsx b/components/SponsoredLinks/index.jsx index d195db9..e9b906c 100644 --- a/components/SponsoredLinks/index.jsx +++ b/components/SponsoredLinks/index.jsx @@ -12,8 +12,8 @@ export default class SponsoredLinks extends React.Component { return (
{this.props.team1} diff --git a/components/SportsTournamentScoreboard/Scoreboard.jsx b/components/SportsTournamentScoreboard/Scoreboard.jsx index 2eb1c0c..b37954f 100644 --- a/components/SportsTournamentScoreboard/Scoreboard.jsx +++ b/components/SportsTournamentScoreboard/Scoreboard.jsx @@ -17,7 +17,7 @@ export default class Scoreboard extends React.Component { border-collapse: collapse; border-style: hidden; border: none !important; - color: #000000; + color: #000; `} > @@ -46,7 +46,7 @@ export default class Scoreboard extends React.Component { diff --git a/components/SportsTournamentScoreboard/index.jsx b/components/SportsTournamentScoreboard/index.jsx index d3aeaaa..d0b083d 100644 --- a/components/SportsTournamentScoreboard/index.jsx +++ b/components/SportsTournamentScoreboard/index.jsx @@ -20,7 +20,7 @@ export default class SportsTournamentScoreboard extends React.Component {

@@ -70,6 +70,7 @@ export default function VideoCard(props) {
By {utilities.renderAuthors(props.authors)} diff --git a/components/WelcomePopUp/index.jsx b/components/WelcomePopUp/index.jsx index c9771e7..fccd972 100644 --- a/components/WelcomePopUp/index.jsx +++ b/components/WelcomePopUp/index.jsx @@ -42,7 +42,7 @@ export default class WelcomePopUp extends React.Component { top: 29%; left: 0; right: 0; - background-color: #ffffff; + background-color: #fff; box-shadow: ${globals.cardShadow}; z-index: 3001; `} diff --git a/layouts/Article/index.jsx b/layouts/Article/index.jsx index b3024b3..661b98e 100644 --- a/layouts/Article/index.jsx +++ b/layouts/Article/index.jsx @@ -91,7 +91,7 @@ class ArticleLayout extends React.Component {
Related Posts @@ -155,7 +155,7 @@ class ArticleLayout extends React.Component {
Related Posts @@ -239,7 +239,7 @@ class ArticleLayout extends React.Component {
Related Posts diff --git a/layouts/Author/index.jsx b/layouts/Author/index.jsx index 12161cf..4fb496d 100644 --- a/layouts/Author/index.jsx +++ b/layouts/Author/index.jsx @@ -19,6 +19,13 @@ export default class Author extends React.Component { more: true }; this.getPosts = this.getPosts.bind(this); + + this.classifiedsCards = ( + + ) } getPosts(page) { @@ -81,6 +88,7 @@ export default class Author extends React.Component { >
{!this.state.more ? ( @@ -140,6 +149,7 @@ export default class Author extends React.Component { >
{utilities.renderPostArray( this.state.otherArticleCards, - "horz" + "horz", + this.props.darkmode )} {!this.state.more ? ( @@ -209,10 +220,9 @@ export default class Author extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
@@ -239,6 +249,7 @@ export default class Author extends React.Component {
*/}
{utilities.renderPostArray( this.state.otherArticleCards, - "long" + "long", + this.props.darkmode )} {!this.state.more ? ( @@ -292,10 +304,9 @@ export default class Author extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/Home/index.jsx b/layouts/Home/index.jsx index 0b5bce4..5a5a51e 100644 --- a/layouts/Home/index.jsx +++ b/layouts/Home/index.jsx @@ -127,7 +127,7 @@ export default class HomeLayout extends React.Component {
{this.props.mappedBreaking != null && (
- +
)}
{this.props.mappedBreaking == null && (
- +
)}
@@ -253,7 +253,7 @@ export default class HomeLayout extends React.Component {
{this.props.mappedBreaking != null && (
- +
)}
{this.props.mappedBreaking == null && (
- +
)}
@@ -460,7 +460,7 @@ export default class HomeLayout extends React.Component { > {this.props.mappedBreaking != null && (
- +
)}
{this.props.mappedBreaking == null && (
- +
)}
diff --git a/layouts/Page/index.jsx b/layouts/Page/index.jsx index e68f379..9bb0cd6 100644 --- a/layouts/Page/index.jsx +++ b/layouts/Page/index.jsx @@ -14,7 +14,7 @@ const ArticleAdStyle = { fontWeight: "bold", fontFamily: "sans-serif" }; - +// TODO class PageLayout extends React.Component { constructor(props) { super(props); diff --git a/layouts/Sponsored/index.jsx b/layouts/Sponsored/index.jsx index b7543cb..4d33fea 100644 --- a/layouts/Sponsored/index.jsx +++ b/layouts/Sponsored/index.jsx @@ -5,7 +5,7 @@ import Media from "react-media"; import moment from "moment"; import SponsoredArticle from "components/SponsoredArticle"; - +// TODO class SponsoredLayout extends React.Component { constructor(props) { super(props); @@ -15,6 +15,7 @@ class SponsoredLayout extends React.Component { return ( <> + ) } getPosts(page) { @@ -88,7 +95,8 @@ export default class TagLayout extends React.Component { > {utilities.renderPostArray( this.state.otherArticleCards, - "full" + "full", + this.props.darkmode )} {!this.state.more ? ( @@ -122,7 +130,8 @@ export default class TagLayout extends React.Component { > {utilities.renderPostArray( this.state.otherArticleCards, - "horz" + "horz", + this.props.darkmode )} {!this.state.more ? ( @@ -151,10 +160,9 @@ export default class TagLayout extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
@@ -178,7 +186,8 @@ export default class TagLayout extends React.Component { > {utilities.renderPostArray( this.state.otherArticleCards, - "long" + "long", + this.props.darkmode )} {!this.state.more ? ( @@ -206,10 +215,9 @@ export default class TagLayout extends React.Component {
- + {React.cloneElement(this.classifiedsCards, { + darkmode: this.props.darkmode + })}
diff --git a/layouts/USACOfficerEvaluations1920/index.jsx b/layouts/USACOfficerEvaluations1920/index.jsx index 811b24c..7b37d20 100644 --- a/layouts/USACOfficerEvaluations1920/index.jsx +++ b/layouts/USACOfficerEvaluations1920/index.jsx @@ -4,6 +4,7 @@ import { css, jsx } from "@emotion/core"; import * as globals from "../../components/globals"; import style from "../style.module.css"; +// TODO export default class ColumnsFromQuarantineLayout extends React.Component { constructor(props) { super(props); diff --git a/layouts/USACOfficerEvaluations2021Layout/index.jsx b/layouts/USACOfficerEvaluations2021Layout/index.jsx index d961aac..643e502 100644 --- a/layouts/USACOfficerEvaluations2021Layout/index.jsx +++ b/layouts/USACOfficerEvaluations2021Layout/index.jsx @@ -3,7 +3,7 @@ import React from "react"; import { css, jsx } from "@emotion/core"; import * as globals from "../../components/globals"; import style from "../style.module.css"; - +// TODO export default class ColumnsFromQuarantineLayout extends React.Component { constructor(props) { super(props); diff --git a/pages/stonewall.jsx b/pages/stonewall.jsx index 8e6bee3..a7f57db 100644 --- a/pages/stonewall.jsx +++ b/pages/stonewall.jsx @@ -66,7 +66,7 @@ class Stonewall extends Component { display: block; padding: 10px 30px; box-shadow: ${globals.cardShadow}; - background-color: #ffffff; + background-color: #fff; margin: 6px; .accordion { @@ -76,7 +76,7 @@ class Stonewall extends Component { .accordion .accordion-navigation > a { background: none; - color: #222222 !important; + color: #222 !important; display: block; font-family: ${globals.bodyFont}; font-size: 1.5rem; From 07f02cc9ea78ce3f8bdc6972d9b20dd0a704e311 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Mon, 2 May 2022 23:03:21 -0700 Subject: [PATCH 10/19] fix invert --- components/Article/index.jsx | 2 +- components/FeatureArticle/index.jsx | 2 +- components/Masthead/Desktop.jsx | 48 ++++++++++++++------------- components/SponsoredArticle/index.jsx | 2 +- components/VideoCard/index.jsx | 2 +- layouts/PageWrapper.jsx | 8 +++-- 6 files changed, 35 insertions(+), 29 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index c5e26cc..a6800dc 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -299,7 +299,7 @@ export default class Article extends React.Component { } & iframe { - ${this.props.darkmode ? "filter: invert(1);" : ""} + ${this.props.darkmode ? "filter: brightness(0.6);" : ""} width: 100%; } diff --git a/components/FeatureArticle/index.jsx b/components/FeatureArticle/index.jsx index 75b110d..384913f 100644 --- a/components/FeatureArticle/index.jsx +++ b/components/FeatureArticle/index.jsx @@ -356,7 +356,7 @@ export default class FeatureArticle extends React.Component { } iframe { - ${this.props.darkmode ? "filter: invert(1);" : ""} + ${this.props.darkmode ? "filter: brightness(0.6);" : ""} width: 100%; } diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index 58e98e3..8b07e18 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -164,6 +164,13 @@ export default class Desktop extends React.Component { {today}

+ {/*
TODOOOOO*/}
@@ -478,7 +481,6 @@ export default class Desktop extends React.Component { display: none; background-color: #000; background-image: url(${minisearchIcon}); - /* filter: invert(%100); */ background-repeat: no-repeat; background-size: 24px; background-position: 6px; @@ -522,7 +524,7 @@ export default class Desktop extends React.Component { transition-delay: 100ms; width: 36px; height: 36px; - ${this. props.darkmode ? "filter: invert(100%);" : ""}; + ${this. props.darkmode ? "filter: invert(1);" : ""}; `} src={searchIcon} diff --git a/components/SponsoredArticle/index.jsx b/components/SponsoredArticle/index.jsx index 12fcd13..268bdfa 100644 --- a/components/SponsoredArticle/index.jsx +++ b/components/SponsoredArticle/index.jsx @@ -269,7 +269,7 @@ export default class FeatureArticle extends React.Component { } iframe { - ${this.props.darkmode ? "filter: invert(1);" : ""} + ${this.props.darkmode ? "filter: brightness(0.6);" : ""} width: 100%; } diff --git a/components/VideoCard/index.jsx b/components/VideoCard/index.jsx index c49860f..beee931 100644 --- a/components/VideoCard/index.jsx +++ b/components/VideoCard/index.jsx @@ -70,7 +70,7 @@ export default function VideoCard(props) {
}; } - onToggle = () => { + onToggle = (e) => { + // console.log(`######## ${e.target.checked} ########`); + localStorage.setItem('darkmode', e.target.checked); + // localStorage.darkmode = e.target.checked; this.setState({ - darkmode: !this.state.darkmode + darkmode: e.target.checked }) } render() { // console.log(this.state.darkmode); + // let darkmode = localStorage.getItem('darkmode'); const style = { padding: "6px", backgroundColor: this.state.darkmode ? "#010101" : "#f1f1f1", From 66a9f02edee5ad7aebd30f9e81df2f583f83c546 Mon Sep 17 00:00:00 2001 From: kaylynphan Date: Wed, 4 May 2022 20:25:56 -0700 Subject: [PATCH 11/19] toggle background components/Page/index.jsx for /editorial-board, etc. --- components/Page/index.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/components/Page/index.jsx b/components/Page/index.jsx index 08e2993..63746e0 100644 --- a/components/Page/index.jsx +++ b/components/Page/index.jsx @@ -8,16 +8,20 @@ import { date2string } from "./utilities.js"; export default class Page extends React.Component { constructor(props) { super(props); + + this.Page = React.createRef(); } render() { return (
@@ -27,10 +31,9 @@ export default class Page extends React.Component { font-style: normal; font-weight: normal; font-size: 14px; - - color: #000; margin: auto; display: block; + a img, img { From 99bf726dea27d7be7a00f9615d2475ec67402126 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Wed, 25 May 2022 19:14:42 -0700 Subject: [PATCH 12/19] darkmode localstorage --- components/Masthead/Desktop.jsx | 4 ++-- layouts/PageWrapper.jsx | 21 +++++++++++---------- pages/[year]/[month]/[day]/[slug].jsx | 2 +- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index 8b07e18..2702ada 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -349,7 +349,7 @@ export default class Desktop extends React.Component { `} > @@ -368,7 +368,7 @@ export default class Desktop extends React.Component { rel="noopener" > class extends Component { constructor(props) { - super(props); - this.state = { - darkmode: false - } + super(props); + this.state = {} } + static async getInitialProps(ctx) { // Load the categories for the header // TODO: can we load this once each browser session? @@ -79,17 +78,19 @@ const PageWrapper = Comp => } onToggle = (e) => { - // console.log(`######## ${e.target.checked} ########`); - localStorage.setItem('darkmode', e.target.checked); - // localStorage.darkmode = e.target.checked; + localStorage.setItem('darkmode', JSON.stringify(e.target.checked)); + this.setState({ + darkmode: JSON.parse(localStorage.getItem('darkmode')) + }) + } + + componentDidMount() { this.setState({ - darkmode: e.target.checked + darkmode: JSON.parse(localStorage.getItem('darkmode')) }) } render() { - // console.log(this.state.darkmode); - // let darkmode = localStorage.getItem('darkmode'); const style = { padding: "6px", backgroundColor: this.state.darkmode ? "#010101" : "#f1f1f1", diff --git a/pages/[year]/[month]/[day]/[slug].jsx b/pages/[year]/[month]/[day]/[slug].jsx index 63c795b..90bedfc 100644 --- a/pages/[year]/[month]/[day]/[slug].jsx +++ b/pages/[year]/[month]/[day]/[slug].jsx @@ -139,7 +139,7 @@ class Post extends Component { galleryID={this.props.id} relatedPosts={this.props.relatedPosts} /> - )} + )} {this.props.photos == undefined && this.props.feature != true && this.props.gallery != true && ( From c875a96f2f1d8bbfc7c5e1484ac8f03c60b16afc Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Wed, 25 May 2022 19:29:58 -0700 Subject: [PATCH 13/19] desktop darkmode --- components/Article/index.jsx | 2 -- components/ArticleCard/index.jsx | 2 -- components/ClassifiedsCard/index.jsx | 3 --- components/Page/index.jsx | 4 ++-- layouts/Article/index.jsx | 1 - 5 files changed, 2 insertions(+), 10 deletions(-) diff --git a/components/Article/index.jsx b/components/Article/index.jsx index a6800dc..9c8edc0 100644 --- a/components/Article/index.jsx +++ b/components/Article/index.jsx @@ -17,7 +17,6 @@ export default class Article extends React.Component { render() { // grab author pics and cards - // console.log(this.props.darkmode); let authorPictures = []; let renderedAuthorCards = []; @@ -95,7 +94,6 @@ export default class Article extends React.Component { background-color: ${this.props.darkmode ? "#222" : "#fff"}; `} > - {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/}
Darkmode: {this.props.darkmode ? "True" : "False"} - // console.log(this.props.darkmode); let card; switch (this.props.displayType) { case "vert": diff --git a/components/ClassifiedsCard/index.jsx b/components/ClassifiedsCard/index.jsx index c95509f..493c21e 100644 --- a/components/ClassifiedsCard/index.jsx +++ b/components/ClassifiedsCard/index.jsx @@ -10,10 +10,8 @@ function Classified(props) { font-size: 12px; padding: 6px 0; border-bottom: 0.5px solid #474747; - /* background-color: ${props.darkmode ? "#222" : "#fff"}; */ `} > - {/*

Darkmode = {props.darkmode ? "True" : "False"}

*/} ); this.renderedClassifieds.push(
- {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/} {React.cloneElement(c, { darkmode: this.props.darkmode })} diff --git a/components/Page/index.jsx b/components/Page/index.jsx index 63746e0..e66ea8f 100644 --- a/components/Page/index.jsx +++ b/components/Page/index.jsx @@ -20,8 +20,8 @@ export default class Page extends React.Component { display: block; padding: 10px 30px; box-shadow: ${globals.cardShadow}; - background-color: {this.props.darkmode ? #222 : #fff}; - color: {this.props.darkmode ? #f11 : #88f}; + background-color: ${this.props.darkmode ? '#222' : '#fff'}; + color: ${this.props.darkmode ? '#f11' : '#88f'}; font-family: ${globals.bodyFont}; `} > diff --git a/layouts/Article/index.jsx b/layouts/Article/index.jsx index 661b98e..60e4cc9 100644 --- a/layouts/Article/index.jsx +++ b/layouts/Article/index.jsx @@ -207,7 +207,6 @@ class ArticleLayout extends React.Component { width: "75%" }} > - {/*

Darkmode = {this.props.darkmode ? "True" : "False"}

*/}
{React.cloneElement(this.article, { darkmode: this.props.darkmode From 6eabaa5de8aae6d4e2584f66eb68494b8b177973 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Wed, 25 May 2022 19:59:19 -0700 Subject: [PATCH 14/19] move the darkmode switch to the left --- components/Masthead/Desktop.jsx | 139 +++++++++++++++----------------- 1 file changed, 67 insertions(+), 72 deletions(-) diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index 2702ada..ab9c3b8 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -148,6 +148,67 @@ export default class Desktop extends React.Component { @media (max-width: 900px) { display: none; } + .switch { + position: relative; + display: inline-block; + margin-top: 20px; + margin-left: 20px; + width: 30px; + height: 17px; + } + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 13px; + width: 13px; + left: 2px; + bottom: 2px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + } + + input:checked + .slider { + background-color: #2196F3; + } + + input:focus + .slider { + box-shadow: 0 0 1px #2196F3; + } + + input:checked + .slider:before { + -webkit-transform: translateX(13px); + -ms-transform: translateX(13px); + transform: translateX(13px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 17px; + } + + .slider.round:before { + border-radius: 50%; + } `} >

{today}

+
- {/*
TODOOOOO*/} +
- Date: Thu, 12 Jan 2023 01:53:49 -0800 Subject: [PATCH 15/19] change darkmode icon --- components/Masthead/Desktop.jsx | 98 +++++++++++++++------------------ package.json | 1 + yarn.lock | 5 ++ 3 files changed, 50 insertions(+), 54 deletions(-) diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index ab9c3b8..d10152d 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -10,6 +10,7 @@ import logo from "./dailybruin.svg"; import menuIcon from "./menu.svg"; import searchIcon from "./search.svg"; import minisearchIcon from "./minisearch.svg"; +import { BsMoonStarsFill, BsFillSunFill } from "react-icons/bs"; let expandedHeight = "106px"; let collapsedHeight = "60px"; @@ -148,66 +149,47 @@ export default class Desktop extends React.Component { @media (max-width: 900px) { display: none; } - .switch { - position: relative; + + #darkmode{ display: inline-block; - margin-top: 20px; margin-left: 20px; - width: 30px; - height: 17px; } - .switch input { + #darkmode .checkbox { opacity: 0; - width: 0; - height: 0; + position: relative; } - - /* The slider */ - .slider { - position: absolute; + #darkmode .label { + width: 48px; + height: 14px; + background-color:#111; + display: inline; + border-radius:50px; + padding: 8px 6px 5px 6px; + position: relative; cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: .4s; - transition: .4s; } - - .slider:before { - position: absolute; - content: ""; - height: 13px; - width: 13px; - left: 2px; - bottom: 2px; - background-color: white; - -webkit-transition: .4s; - transition: .4s; - } - - input:checked + .slider { - background-color: #2196F3; + #darkmode .moon { + margin-left: 0px; } - - input:focus + .slider { - box-shadow: 0 0 1px #2196F3; + #darkmode .sun { + margin-left: 10px; } - - input:checked + .slider:before { - -webkit-transform: translateX(13px); - -ms-transform: translateX(13px); - transform: translateX(13px); + #darkmode .ball { + width: 24px; + height: 24px; + background-color: white; + position: absolute; + top: 3.5px; + left: 3px; + border-radius: 50%; + transition: transform 0.2s linear; } - - /* Rounded sliders */ - .slider.round { - border-radius: 17px; + #darkmode .checkbox:checked + .label .ball{ + transform: translateX(24px); + background-color:#111; } - - .slider.round:before { - border-radius: 50%; + #darkmode .checkbox:checked + .label{ + background-color: #ddd; } `} > @@ -224,12 +206,20 @@ export default class Desktop extends React.Component { > {today} - + +
+ this.props.onToggle(e)} + /> + +
- +
Date: Tue, 21 Feb 2023 18:10:45 -0800 Subject: [PATCH 16/19] index on darkmode: 19d6d50 change darkmode icon From 452ca57bbfa812d4f84d9573a3139fa5d83b1557 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Fri, 24 Feb 2023 16:29:38 -0800 Subject: [PATCH 17/19] popup --- components/EmailSignUp/index.jsx | 6 +++--- components/WelcomePopUp/index.jsx | 6 +++--- pages/index.jsx | 8 ++++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/components/EmailSignUp/index.jsx b/components/EmailSignUp/index.jsx index 0363157..4bb9c34 100644 --- a/components/EmailSignUp/index.jsx +++ b/components/EmailSignUp/index.jsx @@ -45,7 +45,7 @@ export default class EmailPopUp extends React.Component { top: 29%; left: 0; right: 0; - background-color: #fff; + background-color: ${this.props.darkmode ? "#222" : "#fff"}; box-shadow: ${globals.cardShadow}; z-index: 3001; `} @@ -60,7 +60,7 @@ export default class EmailPopUp extends React.Component { border: none; font-family: ${globals.menuFont}; font-weight: 700; - color: #000; + color: ${this.props.darkmode ? "#ddd" : "#474747"}; font-size: 18px; z-index: 3002; cursor: pointer; @@ -123,7 +123,7 @@ export default class EmailPopUp extends React.Component { font-family: "PT Serif"; font-weight: bold; font-size: 30px; - color: #474747; + color: ${this.props.darkmode ? "#ddd" : "#474747"}; // text-align: left; text-align: center; z-index: 3001; diff --git a/components/WelcomePopUp/index.jsx b/components/WelcomePopUp/index.jsx index 9e2ed37..0c7027e 100644 --- a/components/WelcomePopUp/index.jsx +++ b/components/WelcomePopUp/index.jsx @@ -43,7 +43,7 @@ export default class WelcomePopUp extends React.Component { top: 29%; left: 0; right: 0; - background-color: #fff; + background-color: ${this.props.darkmode ? "#222" : "#fff"}; box-shadow: ${globals.cardShadow}; z-index: 3001; `} @@ -58,7 +58,7 @@ export default class WelcomePopUp extends React.Component { border: none; font-family: Source Sans Pro; font-weight: bold; - color: #000; + color: ${this.props.darkmode ? "#ddd" : "#474747"}; font-size: 18px; z-index: 3002; cursor: pointer; @@ -113,7 +113,7 @@ export default class WelcomePopUp extends React.Component { font-size: 16px; font-family: "PT Serif"; font-weight: bold; - color: #474747; + color: ${this.props.darkmode ? "#ddd" : "#474747"}; z-index: 3001; text-align: left; margin: 20px; diff --git a/pages/index.jsx b/pages/index.jsx index 3c274a0..9785635 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -42,8 +42,10 @@ class Index extends Component { super(props); this.state = { - showPopUp: false, - showWelcome: false + // showPopUp: false, + // showWelcome: false + showPopUp: true, + showWelcome: true }; } static async getInitialProps(context) { @@ -218,12 +220,14 @@ class Index extends Component { /> {this.state.showPopUp && !this.state.showWelcome ? ( ) : null} {this.state.showWelcome ? ( From 81493da52ec67ef419724f8170a8b45e1bf636a8 Mon Sep 17 00:00:00 2001 From: Yunqiu Han Date: Fri, 24 Feb 2023 16:37:34 -0800 Subject: [PATCH 18/19] done I guess --- components/Masthead/Desktop.jsx | 2 +- components/globals.js | 18 ------------------ layouts/Page/index.jsx | 2 +- pages/index.jsx | 6 ++---- 4 files changed, 4 insertions(+), 24 deletions(-) diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index aee8019..5d3c544 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -179,7 +179,7 @@ export default class Desktop extends React.Component { height: 24px; background-color: white; position: absolute; - top: 3.5px; + top: 3px; left: 3px; border-radius: 50%; transition: transform 0.2s linear; diff --git a/components/globals.js b/components/globals.js index cdb095c..4127a2c 100644 --- a/components/globals.js +++ b/components/globals.js @@ -57,21 +57,3 @@ export const thumbnailImgCSS = ` background-repeat: no-repeat; background-position: center; background-size: cover;`; - - -/** Dark Mode Variables */ - -export const themes = { - light: { - foreground: 'white', - background: DBblue, - }, - dark: { - foreground: 'green', - background: 'red', - }, -}; - -export const ThemeContext = React.createContext( - themes.light // default value -); \ No newline at end of file diff --git a/layouts/Page/index.jsx b/layouts/Page/index.jsx index b54831a..6f33669 100644 --- a/layouts/Page/index.jsx +++ b/layouts/Page/index.jsx @@ -27,7 +27,7 @@ class PageLayout extends React.Component { } render() { - return (
+ return (
{React.cloneElement(this.page, {darkmode: this.props.darkmode})}
); } diff --git a/pages/index.jsx b/pages/index.jsx index 9785635..f395f67 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -42,10 +42,8 @@ class Index extends Component { super(props); this.state = { - // showPopUp: false, - // showWelcome: false - showPopUp: true, - showWelcome: true + showPopUp: false, + showWelcome: false }; } static async getInitialProps(context) { From 1b70b2c8f837a25e969a69bc23dc8be15efbf082 Mon Sep 17 00:00:00 2001 From: helenquach Date: Wed, 12 Apr 2023 18:28:38 -0700 Subject: [PATCH 19/19] Fixed button position --- components/Masthead/Desktop.jsx | 2 +- layouts/Author/index.jsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/Masthead/Desktop.jsx b/components/Masthead/Desktop.jsx index 5d3c544..aee8019 100644 --- a/components/Masthead/Desktop.jsx +++ b/components/Masthead/Desktop.jsx @@ -179,7 +179,7 @@ export default class Desktop extends React.Component { height: 24px; background-color: white; position: absolute; - top: 3px; + top: 3.5px; left: 3px; border-radius: 50%; transition: transform 0.2s linear; diff --git a/layouts/Author/index.jsx b/layouts/Author/index.jsx index 4fb496d..5d0c802 100644 --- a/layouts/Author/index.jsx +++ b/layouts/Author/index.jsx @@ -25,7 +25,8 @@ export default class Author extends React.Component { header="Featured Classifieds" classifieds={this.props.classifieds} /> - ) + ); + } getPosts(page) {