fix: swap loader for logo based loading component

src/components/FirebaseFileUploader/FirebaseFileUploader.tsx

@@ -2,10 +2,10 @@ import * as React from 'react'
 import { storage } from '../../utils/firebase'
 import FileUploader from 'react-firebase-file-uploader'
 import { FullMetadata } from '@firebase/storage-types'
-import { ProgressBar } from './elements'
 import { Button } from '../Button'
 import { IGlyphs } from '../Icons'
 import { Flex } from 'rebass'
+import Loader from '../Loader'
 /*
 This component takes a folder storage path and uploads files to firebase storage
 onUploadSucess allows URLs of completed uploads to be passed back to parent component
@@ -96,15 +96,9 @@ export class FirebaseFileUploader extends React.Component<IProps, IState> {
   public renderProgressBar() {
     if (this.state.isUploading) {
       if (this.state.uploadProgress > 0) {
-        return (
-          <ProgressBar
-            variant="determinate"
-            value={this.state.uploadProgress}
-            progress={this.state.uploadProgress}
-          />
-        )
+        return <Loader />
       }
-      return <ProgressBar />
+      return <Loader />
     } else {
       return null
     }
@@ -145,31 +139,3 @@ FirebaseFileUploader.defaultProps = {
   buttonText: 'Upload',
   accept: '*',
 }
-
-/*
-From old component:
-
-// TODO For now using the onChange method stop the upload
-// Need to start upload manually, to be able to check file size
-// see this issue https://github.com/fris-fruitig/react-firebase-file-uploader/issues/4#issuecomment-277352083
-onChange={(e: any) => {
-// if there is no file and size is bigger than 20mb
-if (
-  e.target.files[0] !== undefined &&
-  e.target.files[0].size > 20971520
-) {
-  alert(
-    'Your file is too big, maximum allowed size is 20mb',
-  )
-  e.target.value = ''
-} else {
-  // display file name
-  const el = document.getElementsByClassName(
-    'uploaded-file-name',
-  )[0]
-  el.innerHTML = e.target.files[0].name
-}
-}}
-
-
-*/

src/components/Form/elements.ts

@@ -71,4 +71,4 @@ export const ErrorMessage = styled.span`
   font-size: ${theme.fontSizes[0]}px;
   height: ${theme.space[0]};
   margin: 5px;
-`
+`

src/components/Loader/index.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component } from 'react'
 import { Flex, Image } from 'rebass/styled-components'
 import styled, { keyframes } from 'styled-components'