fix(site-enhancements): Update theme, faq, copy and notices (#56)

* fix(site-enhancements): Update theme, faq, copy and notices

* fix error copy

Author: prashanthr

src/client/utils/theme-colors.js

@@ -7,6 +7,10 @@ const themes = {
   orca: {
     color1: '#44A08D',
     color2: '#093637'
+  },
+  default: {
+    color1: '#282c34',
+    primary: '#325D88'
   }
 }
 

src/client/utils/theme.js

@@ -2,13 +2,19 @@ import { keys } from 'lodash'
 import themes from './theme-colors'
 
 // build css gradient
-const getBackgroundCSS = ({ color1, color2, color3 }) => (
-  `
-  background: ${color1}; /* fallback for old browsers */
-  background: -webkit-linear-gradient(to right, ${color1}, ${color2}${color3 ? `, ${color3}` : ''}  ); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to right, ${color1}, ${color2}${color3 ? `, ${color3}` : ''}); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
-  `
-)
+const getBackgroundCSS = ({ color1, color2, color3 }) => {
+  if (color1 && !color2 && !color3) {
+    return `
+      background: ${color1};
+    `
+  } else {
+    return `
+      background: ${color1}; /* fallback for old browsers */
+      background: -webkit-linear-gradient(to right, ${color1}, ${color2}${color3 ? `, ${color3}` : ''}  ); /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(to right, ${color1}, ${color2}${color3 ? `, ${color3}` : ''}); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
+    `
+  }
+}
 
 function getRandomIntInclusive (min, max) {
   min = Math.ceil(min)
@@ -24,11 +30,13 @@ const getRandomThemeColors = () => {
   return themes[themeKeys[randomIndex]]
 }
 
+const getDefaultThemeColors = () => themes.default
+
 // get CSS For Random Theme
-export function getThemeCSS () {
-  const themeColors = getRandomThemeColors()
+export function getThemeCSS (random = false) {
+  const themeColors = random ? getRandomThemeColors() : getDefaultThemeColors()
   return { 
     body: getBackgroundCSS(themeColors), 
-    primaryColor: themeColors.color1 
+    primaryColor: themeColors.primary || themeColors.color1 
   }
 }

src/client/views/home/index.js

@@ -45,10 +45,17 @@ a:hover {
 .sc-message--text {
   background-color: ${themeCSS.primaryColor} !important;
 }
+.sc-message--content.received .sc-message--text {
+  color: white !important;
+  background-color: ${themeCSS.primaryColor} !important;
+}
 .btn-primary:hover {
   background-color: ${themeCSS.primaryColor};
   border-color: ${themeCSS.primaryColor};
 }
+.room-notice {
+  background: ${themeCSS.primaryColor};
+}
 `
 class Home extends Component {
   componentWillMount () {

src/client/views/room/index.css

@@ -3,3 +3,11 @@
   text-align: center;
   padding-bottom: 10px;
 }
+
+.room-notice {
+  text-align: center;
+  margin: auto;
+  width: 50%;
+  font-size: 18px;
+  border-radius: 20px;
+}

src/client/views/room/index.js

@@ -6,9 +6,12 @@ import { Grid, Row, Col } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { initialize, shutdown } from '../../redux/ducks/room'
 import { onToggleChat } from '../../redux/ducks/chat'
+import { isEmpty } from 'lodash'
 import ChatMenu from './chat-menu'
+import WaitingForOthers from './waiting-for-others'
 import './index.css'
 
+const errorCopy = 'Encountered an error getting streams. Are you using a supported browser (ex: Google Chrome)? Please clear your cookies and cache for this site and try again.'
 class Room extends Component {
   componentWillMount () {
     this.props.initialize(this.props.roomId)
@@ -33,10 +36,18 @@ class Room extends Component {
               />
             </Col>
           </Row>
+          {!this.props.hasPeers && (
+            <Row>
+              <Col md={12} xs={12}>
+                <WaitingForOthers />
+                <br />
+              </Col>
+            </Row>
+          )}
           <Row>
             <Col md={12} xs={12}>
               {this.props.error
-                ? 'Encountered an error getting streams'
+                ? (errorCopy)
                 : (
                   this.props.user && this.props.user.stream
                   ? <VideoContainer />
@@ -63,6 +74,7 @@ Room.propTypes = {
 
 function mapStateToProps (state, ownProps) {
   return {
+    hasPeers: !isEmpty(state.peer),
     roomId: ownProps && ownProps.match ? ownProps.match.params.id : null,
     error: state.room.error,
     user: state.user,

src/client/views/room/waiting-for-others.js

@@ -0,0 +1,9 @@
+import React from 'react'
+const copy = 'Waiting for others to join... Use the share feature to send this link to anyone!'
+const WaitingForOthers = () => (
+  <div className='room-notice'>
+    {copy}
+  </div>
+) 
+
+export default WaitingForOthers

src/client/views/welcome/faq.js

@@ -24,8 +24,30 @@ const FAQ = () => (
       </Col>
       <Col md={8}>
         1. Create a room<br />
-        2. Share the room with a friend using the link/url <br />
-        3. When your friend joins the room, you'll instantly see them! <br />
+        2. Provide access to your camera and microphone (required for it to work)<br />
+        3. Share the room with a friend using the link/url <br />
+        4. When your friend joins the room, you'll instantly see them! <br />
+      </Col>
+    </Row>
+    <br />
+    <Row>
+      <Col md={4}>
+        Privacy
+      </Col>
+      <Col md={8}>
+        TalktoMe does not store or record any information in a chat room or about a chat room.
+        All sessions are active for the duration in which they are live and destroyed after the room is closed.
+        You cannot see what rooms are active or live at any given time.
+        The site does use Google Analytics to track general site usage metrics but nothing else.
+      </Col>
+    </Row>
+    <br />
+    <Row>
+      <Col md={4}>
+        Security
+      </Col>
+      <Col md={8}>
+        The technology used by TalktoMe is WebRTC where encryption is madatory by default. All data exchanges over the wire use DTLS, SRTP and the site uses HTTPS.
       </Col>
     </Row>
     <br />