ok

.gitignore

+node_modules/

src/application.tsx

@@ -8,10 +8,11 @@ import routes from './config/routes';
 
 export interface IApplicationProps { }
 
-//Archivo para definir las rutas 
+//Archivo para definir las rutas (Página INICIAL)
 const Application: React.FunctionComponent<IApplicationProps> = props => {
     const [loading, setLoading] = useState<boolean>(true);
 
+    //Comprobacion si el usuario pertenece a la base de datos con el auth de firebase:
     useEffect(() => {
         auth.onAuthStateChanged(user => {
             if (user)

src/config/firebase.ts

@@ -18,6 +18,8 @@ export const Providers = {
 // en todos nuestros comandos de base de firebase.
 export const auth = firebase.auth();
 
+//export const db = Firebase.firestore();
+
 // Por ultimo exportamos el objeto:
 export default Firebase;
 

src/config/firestore.ts

+import fb from './firebase';
+import 'firebase/firestore';
+
+export const db = fb.firestore();
+
+//Exportamos el firestore para guardar colecciones, guardar datos.. etc
+export default db;

src/index.tsx

@@ -5,6 +5,7 @@ import Application from './application';
 import reportWebVitals from './reportWebVitals';
 
 import 'bootswatch/dist/superhero/bootstrap.min.css';
+//import 'bootswatch/dist/cerulean/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>

src/pages/auth/Links.js

 import React, { useEffect, useState } from "react";
 import LinksForm from "./LinkForm";
-
-import Firebase  from "../../config/firebase";
+//Importacion del firestore
+import db  from "../../config/firestore";
 //Importamos toast para mensajes dinamicos (instalamos librería => npm install --save react-toastify)
 import { toast } from "react-toastify";
 
@@ -14,7 +14,8 @@ const Links = () => {
   //Hacemos la consulta para traernos todos los links de firebase. Es de manera asincrona asi que tenemos que usar async.
   //Con onSnapshot hacemos que al renderizar aparaezca al instate.
   const getLinks = async () => {
-    Firebase.firestore.collection("links").onSnapshot((querySnapshot) => {
+    
+    db.collection("links").onSnapshot((querySnapshot) => {
       const docs = [];
       querySnapshot.forEach((doc) => {
         docs.push({ ...doc.data(), id: doc.id });
@@ -27,7 +28,7 @@ const Links = () => {
   // Y creamos un toast para mandar un mensaje dimamico diciendo que lo hemos borrado
   const onDeleteLink = async (id) => {
     if (window.confirm("are you sure you want to delete this link?")) {
-      await Firebase.firestore.collection("links").doc(id).delete();
+      await db.collection("links").doc(id).delete();
       toast("Link Removed Successfully", {
         type: "error", // error => color rojo
         autoClose: 2000 // El mensaje se autocierra pasado 2 segundos 
@@ -46,13 +47,13 @@ const Links = () => {
   const addOrEditLink = async (linkObject) => {
     try {
       if (currentId === "") {
-        await Firebase.firestore.collection("links").doc().set(linkObject);
+        await db.collection("links").doc().set(linkObject);
         toast("New Link Added", {
           type: "success", // success => color verde
           autoClose: 2000 // El mensaje se autocierra pasado 2 segundos 
         });
       } else {
-        await Firebase.firestore.collection("links").doc(currentId).update(linkObject);
+        await db.collection("links").doc(currentId).update(linkObject);
         toast("Link Updated Successfully", {
           type: "info", // info => color azul
           autoClose: 2000 // El mensaje se autocierra pasado 2 segundos 

src/pages/auth/login.tsx

@@ -67,6 +67,7 @@ const LoginPage: React.FunctionComponent<IPageProps> = props => {
         <AuthContainer header="Login">
             <FormGroup>
                 <Input 
+                    style={{ color: "white" }}
                     type="email"
                     name="email"
                     id="email"
@@ -77,6 +78,7 @@ const LoginPage: React.FunctionComponent<IPageProps> = props => {
             </FormGroup>
             <FormGroup>
                 <Input 
+                    style={{ color: "white" }}
                     autoComplete="new-password"
                     type="password"
                     name="password"

src/pages/auth/register.tsx

@@ -79,6 +79,7 @@ const RegisterPage: React.FunctionComponent<IPageProps> = props => {
         <AuthContainer header="Register">
             <FormGroup>
                 <Input 
+                    style={{ color: "white" }}
                     type="email"
                     name="email"
                     id="email"
@@ -90,7 +91,7 @@ const RegisterPage: React.FunctionComponent<IPageProps> = props => {
             <FormGroup>
                  {/** El autocompletado es para que coincidan contrseñas*/}
                 <Input 
-               
+                    style={{ color: "white" }}
                     autoComplete="new-password"
                     type="password"
                     name="password"
@@ -102,6 +103,7 @@ const RegisterPage: React.FunctionComponent<IPageProps> = props => {
             </FormGroup>
             <FormGroup>
                 <Input 
+                    style={{ color: "white" }}
                     autoComplete="new-password"
                     type="password"
                     name="confirm"