0 ? 'upvoted' : ''}`}
disabled={disabled}
+ style={{
+ backgroundColor: this.state.plusHover ? theme.backgroundColor : '',
+ color: plusColor,
+ }}
+ onMouseEnter={() => { this.togglePlusHover(); }}
+ onMouseLeave={() => { this.togglePlusHover(); }}
onClick={() => this.vote(1)}
>
+
0 ? 'votebefore' : ''}`}
+ />
+
+
+
0 ? `${voteColor}` : 'rgba(0,0,0,0)' }}
+ className={`${this.state.isVoted > 0 ? 'voteafter' : ''} after`}
+ />
{ this.state.score }
@@ -105,9 +144,23 @@ class BottomBar extends Component {
onClick={() => this.vote(-1)}
disabled={disabled}
className={`downvote ${disabled} ${this.state.isVoted < 0 ? 'downvoted' : ''}`}
+ style={{
+ backgroundColor: this.state.minusHover ? theme.backgroundColor : '',
+ color: minusColor,
+ }}
+ onMouseEnter={() => { this.toggleMinusHover(); }}
+ onMouseLeave={() => { this.toggleMinusHover(); }}
>
+
-
-
+
this.setState({ triggerActive: true })}
onMouseEnter={() => this.setState({ triggerActive: true })}
>
@@ -134,7 +188,7 @@ class BottomBar extends Component {
: null
}
- {
+ {/* {
!this.props.isUser ?
: null
- }
+ } */}
{ !item.rant_id && !item.c_type ?
;
}
return (
- {item.tags.length !== 0 &&
+ {item.tags.length !== 0 &&
+
{item.tags.map(object => (
this.handleTagClick(object)}
>{object}
))}
-
}
+
+ }
);
}
@@ -260,13 +263,17 @@ class ItemCard extends Component {
}
// If there is any image with this rant
const image = item.attached_image || '';
+ const backgroundColor = isComment ?
+ theme.comment_card.backgroundColor : theme.item_card.backgroundColor;
+ const color = isComment ?
+ theme.comment_card.color : theme.item_card.color;
return (
@@ -306,6 +313,7 @@ class ItemCard extends Component {
{this.getTags()}
this.onOutsideClick(e)}
ref={(node) => { this.modal = node; }}
>
- close()}>
+
close()}
+ style={{
+ background: theme.plus_notif ? theme.plus_notif.backgroundColor : '#dd4242',
+ color: theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor,
+ }}
+ >
{ this.getItem() }
@@ -75,6 +82,7 @@ class Modal extends Component {
Modal.propTypes = {
item: PropTypes.object,
close: PropTypes.func.isRequired,
+ theme: PropTypes.object.isRequired,
};
export default Modal;
diff --git a/app/src/js/components/navigation/items.js b/app/src/js/components/navigation/items.js
index 39c203de..a56a2114 100644
--- a/app/src/js/components/navigation/items.js
+++ b/app/src/js/components/navigation/items.js
@@ -1,14 +1,39 @@
-import React from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
-const Items = ({ item, onClick, className, active }) => (
-
onClick()} >
- { item.name }
-
-);
+class Items extends Component {
+ constructor() {
+ super();
+ this.state = {
+ hovering: false,
+ };
+ }
+ render() {
+ const {
+ item, onClick, className, active, theme,
+ } = this.props;
+ const { hovering } = this.state;
+ return (
+
onClick()}
+ onMouseEnter={() => { this.setState({ hovering: true }); }}
+ onMouseLeave={() => { this.setState({ hovering: false }); }}
+ style={{
+ backgroundColor: active || hovering ?
+ theme.backgroundColor : theme.item_card.backgroundColor,
+ color: theme.item_card.color,
+ }}
+ >
+ { item.name }
+
+ );
+ }
+}
Items.propTypes = {
item: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
className: PropTypes.string,
active: PropTypes.string,
diff --git a/app/src/js/components/navigation/sidenav.js b/app/src/js/components/navigation/sidenav.js
index 1dfbed07..49ef1c5a 100644
--- a/app/src/js/components/navigation/sidenav.js
+++ b/app/src/js/components/navigation/sidenav.js
@@ -7,13 +7,6 @@ import { ITEM } from '../../consts/types';
const { ipcRenderer } = require('electron');
class SideNav extends Component {
- constructor(props) {
- super(props);
- this.state = {
- username: '',
- password: '',
- };
- }
componentDidMount() {
ipcRenderer.on('compose_rant', () => { this.props.open(); });
document.addEventListener('keydown', (e) => {
@@ -23,7 +16,9 @@ class SideNav extends Component {
});
}
getUserCard() {
- const { user, logout, login, fetchUser, open } = this.props;
+ const {
+ user, logout, login, fetchUser, open,
+ } = this.props;
return (
);
}
render() {
- const { sideNavItems, history, location, resetColumn, open, settings } = this.props;
+ const {
+ sideNavItems, history, location, resetColumn, open, settings, theme,
+ } = this.props;
return (
-
+
{ this.getUserCard() }
@@ -43,6 +43,7 @@ class SideNav extends Component {
{
sideNavItems.map(item => (
- {
open(ITEM.RELEASE_INFO.NAME);
}}
@@ -69,7 +70,14 @@ class SideNav extends Component {
}
- open()} className="add_button">
+ open()}
+ className="add_button"
+ style={{
+ backgroundColor: theme.plus_notif ? theme.plus_notif.backgroundColor : '#D55161',
+ color: theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor,
+ }}
+ >
@@ -86,6 +94,7 @@ SideNav.propTypes = {
login: PropTypes.func.isRequired,
logout: PropTypes.func.isRequired,
location: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
fetchUser: PropTypes.func.isRequired,
resetColumn: PropTypes.func.isRequired,
open: PropTypes.func.isRequired,
diff --git a/app/src/js/components/notifs/notif_bubble.js b/app/src/js/components/notifs/notif_bubble.js
index 509a6534..96cf3bf4 100644
--- a/app/src/js/components/notifs/notif_bubble.js
+++ b/app/src/js/components/notifs/notif_bubble.js
@@ -3,12 +3,6 @@ import PropTypes from 'prop-types';
import { getNotifText } from '../../consts/utils';
class Notification extends Component {
- constructor(props) {
- super(props);
- this.state = {
- visable: false,
- };
- }
shouldComponentUpdate(nextProps) {
const { notif } = this.props;
if (nextProps.unread === 0 && (notif.read === 1)) {
@@ -35,7 +29,8 @@ class Notification extends Component {
}
const username = user ? user.name : 'Deleted user';
const avatarBack = user ? user.avatar.b : '#FFF';
- const notifText = getNotifText(notif.type, username);
+ const isCollab = notif.rt === 2;
+ const notifText = getNotifText(notif.type, username, isCollab);
switch (notif.type) {
case 'comment_mention':
icon = 'ion-chatbubble-working';
diff --git a/app/src/js/components/notifs/notif_bubbles.js b/app/src/js/components/notifs/notif_bubbles.js
index 347f9de5..109dab3c 100644
--- a/app/src/js/components/notifs/notif_bubbles.js
+++ b/app/src/js/components/notifs/notif_bubbles.js
@@ -19,8 +19,7 @@ class NotifBubbles extends PureComponent {
unread={data.num_unread}
key={`${notif.uid}_${notif.created_time}_${notif.comment_id}_${notif.type}_${notif.rant_id}`} //eslint-disable-line
user={data.username_map[notif.uid]}
- />),
- )
+ />))
}
);
diff --git a/app/src/js/components/notifs/notifs.js b/app/src/js/components/notifs/notifs.js
index e161aa5e..e9c830f0 100644
--- a/app/src/js/components/notifs/notifs.js
+++ b/app/src/js/components/notifs/notifs.js
@@ -9,9 +9,7 @@ class Notifs extends Component {
constructor() {
super();
this.state = {
- notifTimestamp: 1,
active: false,
- firstFetch: true,
};
}
componentDidMount() {
@@ -45,10 +43,12 @@ class Notifs extends Component {
const notifs = this.props.notifs;
if (prevUnread < currentUnread) {
const notif = notifs.items[0];
+ const isCollab = notif.rt === 2;
const osNotif = {
body: getNotifText(
notif.type,
notifs.username_map[notif.uid].name,
+ isCollab,
),
id: notif.rant_id,
content: notif,
@@ -62,7 +62,9 @@ class Notifs extends Component {
}
}
render() {
- const { notifs, auth, open, clearNotifs } = this.props;
+ const {
+ notifs, auth, open, clearNotifs, theme,
+ } = this.props;
/* Wondering why there is notifs.notifs?
* If you look at the default state, it looks like this:
@@ -86,18 +88,29 @@ class Notifs extends Component {
>
{ this.setState({ active: !this.state.active }); }}
>
- 0 ? 'unread' : ''}`} >
+ 0 ? 'unread' : ''}`}
+ >
{ notifs ? notifs.num_unread : '' }
{ clearNotifs(); }}
- >Clear All
+ >Clear All
+
@@ -108,6 +121,7 @@ class Notifs extends Component {
Notifs.propTypes = {
auth: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
fetchNotifs: PropTypes.func.isRequired,
notifs: PropTypes.object,
openNotif: PropTypes.func.isRequired,
diff --git a/app/src/js/components/search/search.js b/app/src/js/components/search/search.js
index d2492f13..44951bb4 100644
--- a/app/src/js/components/search/search.js
+++ b/app/src/js/components/search/search.js
@@ -95,7 +95,10 @@ class Search extends Component {
render() {
const { theme } = this.props;
return (
-
+
{
- this.state.freqTerms.map(
- term => (
-
this.onSearch(term.name)}
- style={{
+ this.state.freqTerms.map(term => (
+
this.onSearch(term.name)}
+ style={{
flex: `0 1 ${term.flex}%`,
transform: term.flex > 31 ? 'scale(0.9)' : 'scale(1.1)',
}}
- >{term.name}
- ),
- )
+ >{term.name}
+
+ ))
}
}
diff --git a/app/src/js/components/settings/button.js b/app/src/js/components/settings/button.js
index e5fd8eaf..4bcb9ea8 100644
--- a/app/src/js/components/settings/button.js
+++ b/app/src/js/components/settings/button.js
@@ -8,13 +8,19 @@ const Button = props => (
props.handleChange()}
disabled={!props.setting.value}
- >{props.setting.buttonText}
+ style={{
+ backgroundColor: props.theme.backgroundColor,
+ color: props.theme.item_card.color,
+ }}
+ >{props.setting.buttonText}
+
);
Button.propTypes = {
setting: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
};
diff --git a/app/src/js/components/settings/general.js b/app/src/js/components/settings/general.js
index 94ed44f9..e86e70f4 100644
--- a/app/src/js/components/settings/general.js
+++ b/app/src/js/components/settings/general.js
@@ -22,6 +22,7 @@ class General extends Component {
handleChange={(value) => {
this.handleChange(primaryKey, secondaryKey, value);
}}
+ theme={this.props.theme}
/>
);
}
@@ -33,6 +34,7 @@ class General extends Component {
handleChange={() => {
this.handleChange(primaryKey, secondaryKey, !setting.value);
}}
+ theme={this.props.theme}
/>
);
}
@@ -41,6 +43,7 @@ class General extends Component {
{
this.handleChange(primaryKey, secondaryKey, value);
}}
@@ -55,6 +58,7 @@ class General extends Component {
handleChange={() => {
this.handleChange(primaryKey, secondaryKey);
}}
+ theme={this.props.theme}
/>
);
}
@@ -63,7 +67,7 @@ class General extends Component {
}
}
getSettings() {
- const { general } = this.props;
+ const { general, theme } = this.props;
const settings = [];
Object.keys(general).forEach((key) => {
const setting = general[key];
@@ -78,23 +82,37 @@ class General extends Component {
);
subSettings.push(settingComponent);
});
+ /* eslint-disable */
settings.push(
-
+
{ Header }
{
- subSettings.map(s => s)
- }
+ subSettings.map(s => s)
+ }
,
);
} else {
const component = this.getSettingComponent(setting, key);
- settings.push(
-
- { component }
-
,
- );
+ settings.push(
+ { component }
+
);
+ /* eslint-enable */
}
});
return settings;
@@ -105,7 +123,12 @@ class General extends Component {
{
this.getSettings().map(s => s)
}
-
v{remote.app.getVersion()}
+
+ v{remote.app.getVersion()}
+
);
}
@@ -114,6 +137,7 @@ class General extends Component {
General.propTypes = {
general: PropTypes.object.isRequired,
changeGeneral: PropTypes.func.isRequired,
+ theme: PropTypes.object.isRequired,
};
export default General;
diff --git a/app/src/js/components/settings/settings.js b/app/src/js/components/settings/settings.js
index 7a421248..f531b1b2 100644
--- a/app/src/js/components/settings/settings.js
+++ b/app/src/js/components/settings/settings.js
@@ -15,15 +15,20 @@ class Items extends Component {
activeNav: SETTINGS_NAV[0],
};
}
+ componentDidUpdate() {
+ this.props.saveUserState();
+ }
getSettings() {
const { activeNav } = this.state;
- const { settings, changeGeneral, theme } = this.props;
+ const {
+ settings, changeGeneral, theme,
+ } = this.props;
if (activeNav === SETTINGS_NAV[0]) {
return (
-
+
);
} else if (activeNav === SETTINGS_NAV[1]) {
- return ;
+ return ;
}
return ;
}
@@ -31,7 +36,10 @@ class Items extends Component {
const { activeNav } = this.state;
return (
-
+
{ SETTINGS_NAV.map(nav => (
{ this.setState({ value: e.target.value }); }}
onMouseUp={() => this.props.handleChange(this.state.value)}
+ style={{ backgroundColor: this.props.theme.backgroundColor }}
/>
@@ -31,6 +32,7 @@ class Slider extends Component {
Slider.propTypes = {
setting: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
};
diff --git a/app/src/js/components/settings/text.js b/app/src/js/components/settings/text.js
index 9366fe1d..a6ebdb0d 100644
--- a/app/src/js/components/settings/text.js
+++ b/app/src/js/components/settings/text.js
@@ -9,6 +9,7 @@ const Text = props => (
onChange={e => props.handleChange(e.target.value)}
placeholder={props.setting.placeholder}
value={props.setting.value}
+ style={{ color: props.theme.item_card.color }}
/>
@@ -16,6 +17,7 @@ const Text = props => (
Text.propTypes = {
setting: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
};
diff --git a/app/src/js/components/settings/theme.js b/app/src/js/components/settings/theme.js
index 05e30729..25096ba3 100644
--- a/app/src/js/components/settings/theme.js
+++ b/app/src/js/components/settings/theme.js
@@ -1,22 +1,334 @@
import React, { Component } from 'react';
+import { SliderPicker } from 'react-color';
+import PropTypes from 'prop-types';
+import Twemoji from 'react-twemoji';
+import { THEMES } from '../../consts/types';
class Theme extends Component {
- constructor(props) {
- super(props);
+ constructor() {
+ super();
this.state = {
- Hel: '',
+ sharableTheme: '',
+ theme: {
+ name: 'Custom Theme',
+ id: 'custom_theme',
+ backgroundColor: '#54556E',
+ item_card: {
+ backgroundColor: '#40415A',
+ color: '#FFFFFF',
+ },
+ comment_card: {
+ backgroundColor: '#40415A',
+ color: '#FFFFFF',
+ },
+ column: {
+ backgroundColor: '#54556E',
+ width: '450',
+ },
+ user_badge: {
+ details_back: '#54556E',
+ },
+ plus_notif: {
+ backgroundColor: '#D55161',
+ },
+ },
};
}
+ componentWillMount() {
+ const { theme } = this.props;
+ const sharableTheme = `${theme.backgroundColor}, ${theme.item_card.backgroundColor}, ${theme.item_card.color}, ${theme.comment_card.backgroundColor}, ${theme.comment_card.color}, ${theme.plus_notif.backgroundColor}`;
+ this.setState({ theme, sharableTheme });
+ }
+ componentDidUpdate(prevProps) {
+ if (prevProps.theme !== this.props.theme) {
+ const { theme } = this.props;
+ const sharableTheme = `${theme.backgroundColor}, ${theme.item_card.backgroundColor}, ${theme.item_card.color}, ${theme.comment_card.backgroundColor}, ${theme.comment_card.color}, ${theme.plus_notif.backgroundColor}`;
+ /**
+ * Under if statement so it's okay to use
+ */
+ // eslint-disable-next-line
+ this.setState({ sharableTheme, theme: this.props.theme });
+ }
+ }
+ handleSharableTheme(values) {
+ this.setState({ sharableTheme: values });
+ const themeVals = values.replace(' ', '').split(',');
+ if (themeVals.length !== 6) {
+ return;
+ }
+ for (let i = 0; i < themeVals.length; i += 1) {
+ const isCorrect = /[#]\S{6}/g.test(themeVals[i]);
+ if (!isCorrect) {
+ return;
+ }
+ }
+ this.props.changeTheme(null, {
+ name: 'Custom Theme',
+ id: 'custom_theme',
+ backgroundColor: themeVals[0].replace(' ', ''),
+ item_card: {
+ backgroundColor: themeVals[1].replace(' ', ''),
+ color: themeVals[2].replace(' ', ''),
+ },
+ comment_card: {
+ backgroundColor: themeVals[3].replace(' ', ''),
+ color: themeVals[4].replace(' ', ''),
+ },
+ column: {
+ backgroundColor: '#54556E',
+ width: '450',
+ },
+ user_badge: {
+ details_back: '#54556E',
+ },
+ plus_notif: {
+ backgroundColor: themeVals[5].replace(' ', ''),
+ },
+ });
+ }
+ getTheme(key) {
+ const { theme } = this.props;
+ const selectedTheme = THEMES[key];
+ if (key === theme.id.toUpperCase()) {
+ // selectedTheme = THEMES[theme.id.toUpperCase()];
+ }
+ return (
+ { this.props.changeTheme(key); }}
+ key={key}
+ >
+
+
this.open()}
+ >
+
+
+
+ {selectedTheme.name}
+
+
+
+
+
+
+ );
+ }
+ getThemes() {
+ return Object.keys(THEMES).map(key => this.getTheme(key));
+ }
+ changeTheme() {
+ this.props.changeTheme(null, this.state.theme);
+ }
render() {
+ const { theme } = this.state;
return (
-
- Coming soon!
+
+
+ { this.getThemes() }
+
+
+
+
Custom
+
+
+ Background
+ {
+ this.setState({ theme: { ...theme, backgroundColor: color.hex } });
+ this.changeTheme();
+ }}
+ />
+ {
+ this.setState({ theme: { ...theme, backgroundColor: e.target.value } });
+ this.changeTheme();
+ }}
+ style={{ color: theme.item_card.color }}
+ value={theme.backgroundColor}
+ />
+
+
+ Rant Card Background
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ item_card: { ...theme.item_card, backgroundColor: color.hex },
+ },
+ });
+ this.changeTheme();
+ }}
+ />
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ item_card: { ...theme.item_card, backgroundColor: e.target.value },
+ },
+ });
+ this.changeTheme();
+ }}
+ style={{ color: theme.item_card.color }}
+ value={theme.item_card.backgroundColor}
+ />
+
+
+ Rant Card Text
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ item_card: { ...theme.item_card, color: color.hex },
+ },
+ });
+ this.changeTheme();
+ }}
+ />
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ item_card: { ...theme.item_card, color: e.target.value },
+ },
+ });
+ this.changeTheme();
+ }}
+ style={{ color: theme.item_card.color }}
+ value={theme.item_card.color}
+ />
+
+
+ Comment Card Background
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ comment_card: { ...theme.comment_card, backgroundColor: color.hex },
+ },
+ });
+ this.changeTheme();
+ }}
+ />
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ comment_card: { ...theme.comment_card, backgroundColor: e.target.value },
+ },
+ });
+ this.changeTheme();
+ }}
+ style={{ color: theme.item_card.color }}
+ value={theme.comment_card.backgroundColor}
+ />
+
+
+ Comment Card Text
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ comment_card: { ...theme.comment_card, color: color.hex },
+ },
+ });
+ this.changeTheme();
+ }}
+ />
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ comment_card: { ...theme.comment_card, color: e.target.value },
+ },
+ });
+ this.changeTheme();
+ }}
+ style={{ color: theme.item_card.color }}
+ value={theme.comment_card.color}
+ />
+
+
+ PlusPlus and Notifs
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ plus_notif: { ...theme.plus_notif, backgroundColor: color.hex },
+ },
+ });
+ this.changeTheme();
+ }}
+ />
+ {
+ this.setState({
+ theme: {
+ ...theme,
+ plus_notif: { ...theme.plus_notif, backgroundColor: e.target.value },
+ },
+ });
+ this.changeTheme();
+ }}
+ style={{ color: theme.item_card.color }}
+ value={theme.plus_notif.backgroundColor}
+ />
+
+
+
+
+ Sharable theme string
+ this.handleSharableTheme(e.target.value)}
+ style={{ color: theme.item_card.color }}
+ value={this.state.sharableTheme}
+ />
+
+
+
+
);
}
}
Theme.propTypes = {
+ theme: PropTypes.object.isRequired,
+ changeTheme: PropTypes.func.isRequired,
};
export default Theme;
diff --git a/app/src/js/components/settings/toggle.js b/app/src/js/components/settings/toggle.js
index ac7cc0d9..de9924da 100644
--- a/app/src/js/components/settings/toggle.js
+++ b/app/src/js/components/settings/toggle.js
@@ -14,6 +14,7 @@ const Toggle = props => (
/>
@@ -22,6 +23,7 @@ const Toggle = props => (
Toggle.propTypes = {
setting: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
};
diff --git a/app/src/js/components/user/user_badge.js b/app/src/js/components/user/user_badge.js
index 85119b1e..8af71862 100644
--- a/app/src/js/components/user/user_badge.js
+++ b/app/src/js/components/user/user_badge.js
@@ -25,7 +25,6 @@ class UserBadge extends Component {
// const c =
// ['dGFobmlr', 'RGFjZXhp', 'ZGZveA==', 'dHJvZ3Vz'].indexOf(btoa(user.username)) > -1 ?
// `#${user.avatar.b}` : '#ffffff';
- const c = '#ffffff';
return (
@@ -40,15 +39,19 @@ class UserBadge extends Component {
open={open}
/> : null}
this.openCard()}>
-
{user.username}
+
{user.username}
{user.score}
- {user.dpp === 1 &&
{user.score}
+
+ {user.dpp === 1 &&
+
Supporter }
+ style={{ color: '#ffffff', background: `#${user.avatar.b}` }}
+ >
Supporter
+
+ }
);
diff --git a/app/src/js/components/user/user_card.js b/app/src/js/components/user/user_card.js
index 50910857..4a4f1047 100644
--- a/app/src/js/components/user/user_card.js
+++ b/app/src/js/components/user/user_card.js
@@ -64,11 +64,16 @@ class UserCard extends Component {
{user.score}
- {user.dpp === 1 && {user.score}
+
+ {user.dpp === 1 &&
+ Supporter }
+ >
+ Supporter
+
+ }
@@ -78,16 +83,20 @@ class UserCard extends Component {
{ user.about !== '' &&
{user.about}
}
{ user.skills !== '' &&
{user.skills}
}
{ user.location !== '' &&
{user.location}
}
- { user.github !== '' &&
+ { user.github !== '' &&
+
shell.openExternal(`https://www.github.com/${user.github}`)}>
{user.github}
- }
- { user.website !== '' &&
+
+ }
+ { user.website !== '' &&
+
UserCard.openLink(user.website)}>
{user.website}
- }
+
+ }
@@ -96,7 +105,8 @@ class UserCard extends Component {
className="user_openprofile"
style={{ backgroundColor: `#${user.avatar.b}` }}
onClick={() => this.openProfile()}
- >Open Profile
+ >Open Profile
+
);
}
@@ -109,7 +119,8 @@ class UserCard extends Component {
this.props.closeCard()}
- >
+ >
+
{
this.getUser()
}
diff --git a/app/src/js/components/user/user_profile.js b/app/src/js/components/user/user_profile.js
index 734609ec..fc96aab8 100644
--- a/app/src/js/components/user/user_profile.js
+++ b/app/src/js/components/user/user_profile.js
@@ -189,6 +189,7 @@ class UserProfile extends Component {
style={{
background: 'url(./res/images/profile_banner.png)',
width: `${theme.column.width}px`,
+ color: theme.item_card.color,
}}
>
{
@@ -197,6 +198,10 @@ class UserProfile extends Component {
: null
}
+
@@ -208,23 +213,33 @@ class UserProfile extends Component {
diff --git a/app/src/js/components/utilities/post_rant.js b/app/src/js/components/utilities/post_rant.js
index 7cc99bd9..8c92d25b 100644
--- a/app/src/js/components/utilities/post_rant.js
+++ b/app/src/js/components/utilities/post_rant.js
@@ -8,20 +8,29 @@ import Popup from '../utilities/popup';
import Dropdown from '../utilities/dropdown/dropdown';
const RANT_TYPES = [
- { id: 1, color: '#d55063', icon: 'icon ion-chatbubble-working', header: 'Rant / Story' },
- { id: 3, color: '#2b8a9c', icon: 'icon ion-image', header: 'Joke / Meme' },
- { id: 4, color: '#ab73a2', icon: 'icon ion-help', header: 'Question' },
- { id: 5, color: '#fa9a67', icon: 'icon ion-heart', header: 'devRant' },
- { id: 6, color: '#7ac8a6', icon: 'icon ion-ios-game-controller-a', header: 'Random' },
+ {
+ id: 1, color: '#d55063', icon: 'icon ion-chatbubble-working', header: 'Rant / Story',
+ },
+ {
+ id: 3, color: '#2b8a9c', icon: 'icon ion-image', header: 'Joke / Meme',
+ },
+ {
+ id: 4, color: '#ab73a2', icon: 'icon ion-help', header: 'Question',
+ },
+ {
+ id: 5, color: '#fa9a67', icon: 'icon ion-heart', header: 'devRant',
+ },
+ {
+ id: 6, color: '#7ac8a6', icon: 'icon ion-ios-game-controller-a', header: 'Random',
+ },
];
class PostRant extends Component {
constructor() {
super();
this.state = {
- rant_content: '',
+ rantContent: '',
tags: '',
- limitCrossed: null,
disabled: false,
type: 1,
draftName: '',
@@ -37,7 +46,7 @@ class PostRant extends Component {
componentWillMount() {
const { postRant } = this.props;
if (postRant.autoSave.content) {
- this.setState({ rant_content: postRant.autoSave.content, tags: postRant.autoSave.tags });
+ this.setState({ rantContent: postRant.autoSave.content, tags: postRant.autoSave.tags });
}
}
@@ -51,20 +60,20 @@ class PostRant extends Component {
.then((res) => {
const rant = res.rant;
this.setState({
- rant_content: rant.text,
+ rantContent: rant.text,
tags: rant.tags.join(),
});
});
}
componentWillUnmount() {
- this.props.saveAutoSave({ content: this.state.rant_content, tags: this.state.tags });
+ this.props.saveAutoSave({ content: this.state.rantContent, tags: this.state.tags });
}
saveDraft() {
- const { draftName, rant_content, tags } = this.state;
+ const { draftName, rantContent, tags } = this.state;
if (draftName !== '') {
- this.props.addDraft(draftName, { content: rant_content, tags });
+ this.props.addDraft(draftName, { content: rantContent, tags });
}
}
@@ -73,7 +82,7 @@ class PostRant extends Component {
const draft = postRant.drafts[index];
if (draft.name && draft.rant) {
this.setState({
- draftName: draft.name, rant_content: draft.rant.content, tags: draft.rant.tags,
+ draftName: draft.name, rantContent: draft.rant.content, tags: draft.rant.tags,
});
}
}
@@ -89,22 +98,22 @@ class PostRant extends Component {
.editRant(text, this.state.tags, item.id, auth.user.authToken)
.then((res) => {
if (!res.success) {
- this.setState({ popup:
- { ...this.state.popup, body: res.error, visible: true, className: '' },
+ this.setState({
+ popup:
+ {
+ ...this.state.popup, body: res.error, visible: true, className: '',
+ },
});
return;
}
this.props.clearAutoSave();
this.setState({
- posting: false,
- rant_content: '',
+ rantContent: '',
tags: '',
- limitCrossed: null,
});
this.props.open(ITEM.RANT.NAME, item.id);
})
.catch(() => {
- this.setState({ posting: false });
});
}
@@ -118,30 +127,32 @@ class PostRant extends Component {
.postRant(text, this.state.tags, this.state.type, auth.user.authToken, image)
.then((res) => {
if (!res.success) {
- this.setState({ popup:
- { ...this.state.popup, body: res.error, visible: true, className: '' },
+ this.setState({
+ popup:
+ {
+ ...this.state.popup, body: res.error, visible: true, className: '',
+ },
});
return;
}
this.props.clearAutoSave();
this.setState({
- posting: false,
- rant_content: '',
+ rantContent: '',
tags: '',
- limitCrossed: null,
disabled: true,
});
this.props.open(ITEM.RANT.NAME, res.rant_id);
})
.catch(() => {
- this.setState({ posting: false });
});
}
render() {
- const { auth, item, postRant } = this.props;
+ const {
+ auth, item, postRant, theme,
+ } = this.props;
const { popup } = this.state;
- if (item.id !== 0 && this.state.rant_content === '') {
+ if (item.id !== 0 && this.state.rantContent === '') {
return (
@@ -165,17 +176,24 @@ class PostRant extends Component {
this.onPost(text, image)}
- value={this.state.rant_content}
- onChange={text => this.setState({ rant_content: text })}
+ value={this.state.rantContent}
+ onChange={text => this.setState({ rantContent: text })}
disabled={this.state.disabled || auth.user === null}
placeholder="The rant starts here..."
tags={this.state.tags}
maxChar={5000}
editing={item.id !== 0}
onTagsChange={tags => this.setState({ tags })}
+ theme={theme}
/>
-
+
Rant Type
Save draft
this.setState({ draftName: e.currentTarget.value })}
value={this.state.draftName}
+ placeholder="Title of Draft"
/>
- this.saveDraft()}>Save Draft
+ this.saveDraft()}
+ style={{
+ backgroundColor: theme.plus_notif ? theme.plus_notif.backgroundColor : '#dd4242',
+ color: theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor,
+ }}
+ >Save Draft
+
Saved Drafts
-
-
+
+
{
postRant.drafts.length !== 0 ?
postRant.drafts.map((draft, index) => (
@@ -202,8 +238,22 @@ class PostRant extends Component {
>
{draft.name}
- this.getDraft(index)}>Load
- this.removeDraft(draft.name)}>Delete
+ this.getDraft(index)}
+ style={{
+ background: theme.plus_notif ? theme.plus_notif.backgroundColor : '#dd4242',
+ color: theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor,
+ }}
+ >Load
+
+ this.removeDraft(draft.name)}
+ style={{
+ background: theme.plus_notif ? theme.plus_notif.backgroundColor : '#dd4242',
+ color: theme.id === 'dark_theme' ? '#ffffff' : theme.item_card.backgroundColor,
+ }}
+ >Delete
+
))
@@ -221,6 +271,7 @@ class PostRant extends Component {
PostRant.propTypes = {
auth: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
item: PropTypes.object.isRequired,
postRant: PropTypes.object.isRequired,
open: PropTypes.func.isRequired,
diff --git a/app/src/js/components/utilities/rant_type.js b/app/src/js/components/utilities/rant_type.js
index 81e9a22f..831a2411 100644
--- a/app/src/js/components/utilities/rant_type.js
+++ b/app/src/js/components/utilities/rant_type.js
@@ -5,16 +5,30 @@ class RantType extends Component {
constructor() {
super();
this.types = [
- { id: 1, color: '#d55063', icon: 'icon ion-chatbubble-working', text: 'Rant / Story' },
- { id: 2, color: '#e1c871', icon: 'ion-android-people', text: 'Collab' },
- { id: 3, color: '#2b8a9c', icon: 'icon ion-image', text: 'Joke / Meme' },
- { id: 4, color: '#ab73a2', icon: 'icon ion-help', text: 'Question' },
- { id: 5, color: '#fa9a67', icon: 'icon ion-heart', text: 'devRant' },
- { id: 6, color: '#7ac8a6', icon: 'icon ion-ios-game-controller-a', text: 'Random' },
+ {
+ id: 1, color: '#d55063', icon: 'icon ion-chatbubble-working', text: 'Rant / Story',
+ },
+ {
+ id: 2, color: '#e1c871', icon: 'ion-android-people', text: 'Collab',
+ },
+ {
+ id: 3, color: '#2b8a9c', icon: 'icon ion-image', text: 'Joke / Meme',
+ },
+ {
+ id: 4, color: '#ab73a2', icon: 'icon ion-help', text: 'Question',
+ },
+ {
+ id: 5, color: '#fa9a67', icon: 'icon ion-heart', text: 'devRant',
+ },
+ {
+ id: 6, color: '#7ac8a6', icon: 'icon ion-ios-game-controller-a', text: 'Random',
+ },
];
this.state = {
open: false,
- selected: { id: 1, color: '#d55063', icon: 'ion-chatbubble-working', text: 'Rant / Story' },
+ selected: {
+ id: 1, color: '#d55063', icon: 'ion-chatbubble-working', text: 'Rant / Story',
+ },
};
}
@@ -51,8 +65,7 @@ class RantType extends Component {
{type.text}
- ),
- )
+ ))
}
diff --git a/app/src/js/components/utilities/release_info.js b/app/src/js/components/utilities/release_info.js
index 47dfd500..8e81bd22 100644
--- a/app/src/js/components/utilities/release_info.js
+++ b/app/src/js/components/utilities/release_info.js
@@ -53,7 +53,8 @@ class ReleaseInfo extends Component {
* On Windows: Update will be installed after you click update
* On MacOS and Linux: Clicking update will take you to our website.
- You have to download the latest update from there.
+ You have to download the latest update from there.
+
diff --git a/app/src/js/components/utilities/smart_area.js b/app/src/js/components/utilities/smart_area.js
index 2e5a8cf3..9441dcb3 100644
--- a/app/src/js/components/utilities/smart_area.js
+++ b/app/src/js/components/utilities/smart_area.js
@@ -244,6 +244,7 @@ class SmartArea extends Component {
}
render() {
const { pickerActive, selectedMention } = this.state;
+ const { theme } = this.props;
const invalidContent = this.props.value.length < 5;
const isPost = typeof this.props.tags !== 'undefined';
let btnText = 'Post Rant';
@@ -280,7 +281,8 @@ class SmartArea extends Component {
{this.props.users[mention]}
+ >
{this.props.users[mention]}
+