diff --git a/src/components/Messages.css b/src/components/Messages.css index 6fa4ad0..a4028cc 100644 --- a/src/components/Messages.css +++ b/src/components/Messages.css @@ -40,6 +40,10 @@ padding-top: 5px; } +ion-footer ion-toolbar:last-of-type { + padding-bottom: 10px; +} + .message-input { width: 100%; height: 100%; diff --git a/src/pages/Home.css b/src/pages/Home.css index ef8971f..64d425c 100644 --- a/src/pages/Home.css +++ b/src/pages/Home.css @@ -24,15 +24,42 @@ ion-title { } .first-step-col { - margin-top: 20%; - margin-bottom: 10px; + margin-top: 15%; } .create-col { - margin-bottom: 50px; + margin-bottom: 20px; } .share-col { - margin-top: 8px; + margin-top: 2px; font-size: 20px; + margin-bottom: 50px; +} + +.join-col { + font-size: 20px; +} + +.paste-col { + padding: 0; +} + +.paste-toolbar { + max-width: 300px; + --background: none; + margin: auto; +} + +.paste-input { + margin-left: 2px; + text-align: left; + font-size: 14px; + border: 1px solid var(--ion-color-secondary); + border-radius: 5px; +} + +.paste-button { + margin-right: 2px; + --box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 5e73cd7..d408ef7 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,13 +1,29 @@ -import { IonButton, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar, IonCol } from '@ionic/react'; +import { + IonButton, + IonCol, + IonContent, + IonFabButton, + IonGrid, + IonHeader, + IonIcon, + IonInput, + IonPage, + IonRow, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import { enterOutline } from 'ionicons/icons'; import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router'; import { auth, db, rtdb, timestamp } from '../services/firebase'; -import { generateAnonName } from '../services/utilities'; +import { generateAnonName, matchRoomUrl } from '../services/utilities'; import './Home.css'; const Home: React.FC = () => { const [loading, setLoading] = useState(true); const [userId, setUserId] = useState(''); + const [roomLink, setRoomLink] = useState(''); + const [valid, setValid] = useState(true); let history = useHistory(); @@ -30,7 +46,7 @@ const Home: React.FC = () => { }; }, []); - // Populate both Firestore and RealTimeDB before navigating to room + // Populate both Firestore and RealTimeDB before navigating to room on create const createRoom = async () => { // Firestore preparations const roomId = await db.collection('rooms').add({ @@ -53,7 +69,25 @@ const Home: React.FC = () => { await rtdb.ref('/available/' + roomId.id).set({ name: 'Room Name', createdAt: new Date().toISOString() }); const path = '/room/' + roomId.id; - return history.push(path); + return history.push(path); // Navigate to room + }; + + const showError = () => { + return