v1.4.2-release/release

app/src/Api.js

@@ -43,7 +43,7 @@ export const updateLocalData = (data) => {
   window.localStorage.setItem('WatchParty', JSON.stringify(Object.assign({}, LocalData(), data)));
 };
 
-export const emptyLocalData = () => window.localStorage.reject('WatchParty');
+export const emptyLocalData = () => window.localStorage.removeItem('WatchParty');
 
 export const getUserUid = async () =>
   new Promise((resolve, reject) => {

app/src/Chat.js

@@ -459,7 +459,7 @@ export default class Chat extends Component {
             placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
             helperText={
               this.state.newMessage && !this.state.gif
-                ? 'Enter to send'
+                ? 'Enter to send / Shift+Enter for next line'
                 : this.state.gif
                 ? 'Click on gif to send'
                 : null

app/src/Create.js

@@ -10,7 +10,12 @@ import {
 } from './Api';
 import { goTo } from 'route-lite';
 import Chat from './Chat';
-import { ChevronRight } from '@material-ui/icons';
+import {
+  ChevronRight,
+  InfoRounded,
+  ContactSupportRounded,
+  MonetizationOnRounded,
+} from '@material-ui/icons';
 
 const CONSTANTS = {
   USER_NAME_LENGTH: 12,
@@ -207,6 +212,35 @@ export default class Create extends Component {
             <span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
           </Button>
         </Paper>
+        <div className="create-bottom-card">
+          <Button
+            color="secondary"
+            target="_blank"
+            startIcon={<InfoRounded />}
+            size="small"
+            href="https://www.chromewatchparty.com/welcome/#tips"
+          >
+            FAQ
+          </Button>
+          <Button
+            color="secondary"
+            target="_blank"
+            startIcon={<ContactSupportRounded />}
+            size="small"
+            href="mailto:admin@chromewatchparty.com?subject=User Feedback"
+          >
+            Feedback
+          </Button>
+          <Button
+            color="secondary"
+            target="_blank"
+            startIcon={<MonetizationOnRounded />}
+            size="small"
+            href="https://paypal.me/Ayushya"
+          >
+            Donate
+          </Button>
+        </div>
       </div>
     );
   }

app/src/index.css

@@ -16,8 +16,13 @@ body.visible {
 }
 body.visible .watch-party-fab {
   right: var(--party-width) !important;
-  transform: translateX(50%);
+  transform: translateX(0);
   top: 1.5rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background-color: #424242 !important;
+  box-shadow: none;
+  background-blend-mode: lighten;
 }
 body.visible .party-notification-container {
   display: block !important;
@@ -182,21 +187,32 @@ body.amazon-prime textarea:focus {
 }
 
 .party-create-container {
-  padding: 38px;
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: #424242;
+  padding: 0;
 }
+.party-create-container .brand-title {
+  padding: 36px;
+}
+
 .party-create-container .create-input-card {
   display: flex;
   flex-direction: column;
   padding: 2rem;
-  margin: auto 0;
+  margin: 0;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  background: #424242;
 }
 .create-input-card * {
   font-size: 12px !important;
 }
-.party-create-container .create-input-card .create-mode-select,
+.party-create-container .create-input-card .create-mode-select {
+  margin-bottom: 36px;
+}
 .party-create-container .create-input-card .create-name,
 .party-create-container .create-input-card .create-pin {
   margin-bottom: 1rem;
@@ -204,12 +220,25 @@ body.amazon-prime textarea:focus {
 .party-create-container .create-input-card {
   background-color: #2d2d2d;
 }
-
+.create-bottom-card {
+  background-color: #202020;
+  padding: 30px 15px;
+  display: flex;
+  justify-content: space-evenly;
+}
+.create-bottom-card * {
+  letter-spacing: 1.5px !important;
+  font-size: 11px;
+}
+.create-bottom-card a:hover {
+  color: #c0f300;
+}
 .thread-container {
   max-height: 100%;
   flex: 1;
   overflow-y: auto;
   margin-bottom: 1rem;
+  padding: 0 15px;
   margin-top: 1rem;
 }
 .room-title {
@@ -238,6 +267,7 @@ textarea::-webkit-scrollbar {
 }
 .chat-message-box > div {
   border-radius: 26px;
+  background-color: #424242;
 }
 .chat-message-box .MuiFormHelperText-root {
   font-size: 10px !important;
@@ -252,7 +282,7 @@ textarea::-webkit-scrollbar {
   max-height: 100%;
   flex-direction: column;
   flex: 1;
-  padding: 30px 15px 15px 30px;
+  padding: 0 !important;
   box-sizing: border-box !important;
 }
 
@@ -377,6 +407,8 @@ textarea::-webkit-scrollbar {
 .text-phone-panel {
   display: flex;
   align-items: center;
+  margin: 0 15px 15px 15px;
+  border-radius: 26px;
 }
 
 .MuiTooltip-popper {