Skip to content

Commit

Permalink
Merge pull request #27 from intern0t/toggle-dark-mode
Browse files Browse the repository at this point in the history 
Implemented dark mode, fully functional.
  • Loading branch information
@intern0t
intern0t committed Jan 13, 2019
2 parents a408847 + d01ad60 commit fb4a169
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 86 deletions.
8 changes: 7 additions & 1 deletion src/components/Message.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import moment from "moment";
import UserAvatar from "./UserAvatar";
import Linkify from "linkifyjs/react";

const Message = ({ me, timestamp, message, from }) => {
const Message = ({ me, timestamp, message, from, darkMode }) => {
const yourMessages = me === from;

return (
Expand All @@ -22,6 +22,12 @@ const Message = ({ me, timestamp, message, from }) => {
className={`message ${
yourMessages ? "message-you" : "message-from"
}`}
style={{
background: yourMessages
? darkMode ? "rgba(153, 168, 180, 0.3)" : "rgba(54, 62, 71, 0.08)"
: "rgba(85, 167, 212, 0.3)",
color: darkMode ? "white" : "rgba(54, 62, 71, 0.7)"
}}
>
<Linkify
options={{
Expand Down
145 changes: 80 additions & 65 deletions src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,77 +3,92 @@ import Icon from "./Icon";
import Tip from "./Tip";
import { Link } from "react-router-dom";
import { AppConsumer } from "../contexts/AppProvider";
import { ConversationConsumer } from "../contexts/ConversationProvider";

class Sidebar extends Component {
render() {
return (
<AppConsumer>
{({ currentPage, toggleMailTab }) => (
<div className="sidebar">
<ul className="sidebar-section">
<li>
<Link
to="#"
title="Conversations"
onClick={e => toggleMailTab(e)}
className={
currentPage &&
currentPage === "/conversations"
? "sidebar-section-active"
: ""
}
>
<Tip updated={true} color={"#FF4E00"} />
<Icon icon="far fa-comments" />
</Link>
</li>
<li>
<Link
to="/settings"
title="Settings"
className={
currentPage &&
currentPage === "/settings"
? "sidebar-section-active"
: ""
}
>
<Icon icon="far fa-save" />
</Link>
</li>
<li>
<Link
to="/contact"
title="Contact Us"
className={
currentPage &&
currentPage === "/contact"
? "sidebar-section-active"
: ""
}
>
<Icon
icon={`far fa-envelope${
currentPage &&
currentPage === "/contact"
? "-open"
: ""
}`}
/>
</Link>
</li>
<li>
<Link
to="#"
title="Toggle modes"
>
<Icon
icon={`far fa-lightbulb`}
/>
</Link>
</li>
</ul>
</div>
<ConversationConsumer>
{({ toggleModes, darkMode }) => {
return (
<div className="sidebar">
<ul className="sidebar-section">
<li>
<Link
to="#"
title="Conversations"
onClick={e => toggleMailTab(e)}
className={
currentPage &&
currentPage ===
"/conversations"
? "sidebar-section-active"
: ""
}
>
<Tip
updated={true}
color={"#FF4E00"}
/>
<Icon icon="far fa-comments" />
</Link>
</li>
<li>
<Link
to="/settings"
title="Settings"
className={
currentPage &&
currentPage === "/settings"
? "sidebar-section-active"
: ""
}
>
<Icon icon="far fa-save" />
</Link>
</li>
<li>
<Link
to="/contact"
title="Contact Us"
className={
currentPage &&
currentPage === "/contact"
? "sidebar-section-active"
: ""
}
>
<Icon
icon={`far fa-envelope${
currentPage &&
currentPage ===
"/contact"
? "-open"
: ""
}`}
/>
</Link>
</li>
<li>
<Link
to="#"
title="Toggle modes"
onClick={toggleModes}
>
<Icon
icon={`${
darkMode ? "fas" : "far"
} fa-lightbulb`}
/>
</Link>
</li>
</ul>
</div>
);
}}
</ConversationConsumer>
)}
</AppConsumer>
);
Expand Down
23 changes: 16 additions & 7 deletions src/components/pages/Conversation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Clipboard from "react-clipboard.js";
import { ConversationConsumer } from "../../contexts/ConversationProvider";
import { Link } from "react-router-dom";
import aes from "crypto-js/aes";
import Linkify from 'linkifyjs/react'
import Linkify from "linkifyjs/react";

class Conversation extends Component {
state = {
Expand Down Expand Up @@ -220,7 +220,8 @@ class Conversation extends Component {
leaveRoom,
setNickname,
setKey,
veil
veil,
darkMode
}) => {
let theRoom = rooms.filter(
room => room.rid === activeRoomID
Expand All @@ -234,7 +235,11 @@ class Conversation extends Component {
nickname={nickname}
activeRoomID={activeRoomID}
/>
<div className="frightbar-top">
<div
className={`frightbar-top ${
darkMode ? "darkmode" : ""
}`}
>
<div>
<Icon
icon="fas fa-landmark"
Expand Down Expand Up @@ -308,7 +313,9 @@ class Conversation extends Component {
</div>
</div>
<div
className="frightbar-inner"
className={`frightbar-inner ${
darkMode ? "darkmode" : ""
}`}
id="conversation-window"
>
{messages
Expand All @@ -329,6 +336,7 @@ class Conversation extends Component {
}
timestamp={messageEntry.date}
message={messageEntry.message}
darkMode={darkMode}
/>
);
})}
Expand All @@ -337,6 +345,7 @@ class Conversation extends Component {
_onChange={this.onSpeakBarChange}
_onSpeak={this.onSpeakBarSpoken}
message={this.state.message}
darkMode={darkMode}
/>

{this.state.conversationSettingsModalDisplayed ? (
Expand Down Expand Up @@ -390,9 +399,9 @@ class Conversation extends Component {
}
}

const SpeakBar = ({ _onChange, _onSpeak, message }) => {
const SpeakBar = ({ _onChange, _onSpeak, message, darkMode }) => {
return (
<div className="speakbar">
<div className={`speakbar ${darkMode ? "darkmode" : ""}`}>
<input
onChange={_onChange}
onKeyDown={_onSpeak}
Expand Down Expand Up @@ -569,7 +578,7 @@ const Notification = ({ rooms, messages, nickname }) => {
<Linkify
options={{
attributes: {
className: 'linkified',
className: "linkified",
target: {
url: "_blank"
}
Expand Down
31 changes: 23 additions & 8 deletions src/contexts/ConversationProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export class ConversationProvider extends Component {
},
nickname: generateNickName(),
generatedRoomID: generateRoomID(),
activeRoomID: null
activeRoomID: null,
darkMode: false
};

/**
Expand All @@ -30,17 +31,20 @@ export class ConversationProvider extends Component {
componentDidMount() {
let roomsFromLocalStorage = localStorage.getItem("rooms");
let nicknameFromLocalStorage = localStorage.getItem("nickname");
let modeFromLocalStorage = localStorage.getItem("darkmode");

if (
roomsFromLocalStorage ||
(nicknameFromLocalStorage && nicknameFromLocalStorage.length > 0)
(nicknameFromLocalStorage && nicknameFromLocalStorage.length > 0) ||
modeFromLocalStorage
) {
let storedRooms = JSON.parse(localStorage.getItem("rooms"));
this.setState(
prevState => ({
...prevState,
rooms: storedRooms || [],
nickname: nicknameFromLocalStorage || generateNickName()
nickname: nicknameFromLocalStorage || generateNickName(),
darkMode: JSON.parse(modeFromLocalStorage) || false
}),
() => {
const { rooms } = this.state;
Expand Down Expand Up @@ -298,15 +302,24 @@ export class ConversationProvider extends Component {
})
)
);

// this.state.rooms.map(room => {
// return veil.emit("join", { roomid: room.rid });
// });
}
);
}
};

toggleModes = e => {
e.preventDefault();
this.setState(
prevState => ({
...prevState,
darkMode: !prevState.darkMode
}),
() => {
localStorage.setItem("darkmode", this.state.darkMode);
}
);
};

render() {
const { children } = this.props;

Expand Down Expand Up @@ -336,7 +349,9 @@ export class ConversationProvider extends Component {
setNickname: this.setNickname,
setKey: this.setKey,
leaveRoom: this.onRoomLeave,
addNewRoom: this.addNewRoom
addNewRoom: this.addNewRoom,
darkMode: this.state.darkMode,
toggleModes: this.toggleModes
}}
>
{children}
Expand Down
6 changes: 3 additions & 3 deletions src/styles/_includes/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
$TwilightBlue: #fcffff;
$AquaHaze: #f2f7f7;
$LinkWater: #F0F5FB;
$GullGray: #99a8b4;
$BrightGray: #363e47;
$GullGray: rgb(153, 168, 180);
$BrightGray: rgb(54, 62, 71);
$OuterSpace: #303841;
$Black: #000000;
$Shakespeare: #55A7D4;
$Shakespeare: rgb(85, 167, 212);
$Carnation: #F36060;
$InternationalOrange: #FF4E00;
$Portage: #AD7CEF;
Expand Down
9 changes: 9 additions & 0 deletions src/styles/_includes/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,15 @@
}
}

.darkmode{
background: $OuterSpace;
color: $GullGray !important;

span[class^="fa"]{
color: $GullGray;
}
}

.user-avatar {
$userAvatarDimensions: 35px;
min-width: $userAvatarDimensions;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/veiled.min.css
View file

Large diffs are not rendered by default.

0 comments on commit fb4a169

Please sign in to comment.