From 59f911524e4d12f9ffa693a1a56429089c99d12e Mon Sep 17 00:00:00 2001
From: William Harvey <william.harvey@polymtl.ca>
Date: Sun, 15 Nov 2020 01:57:23 -0500
Subject: [PATCH 1/3] Updated download page layout and content

---
 .../analyze_sleep/waiting_for_server/index.js | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/views/analyze_sleep/waiting_for_server/index.js b/web/src/views/analyze_sleep/waiting_for_server/index.js
index 4a5a1854..a7044559 100644
--- a/web/src/views/analyze_sleep/waiting_for_server/index.js
+++ b/web/src/views/analyze_sleep/waiting_for_server/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Container, Row, Col, Spinner } from 'reactstrap';
+import { Container, Row, Col, Alert } from 'reactstrap';
 import { getLatestServerReleaseAssets } from 'requests/latest_release';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 
@@ -11,27 +11,31 @@ const WaitingForServer = () => {
   }, [setAssets]);
 
   return (
-    <Container>
-      <h3 className="mb-4">Waiting for local server to be running...</h3>
+    <Container className="my-6">
+      <Alert color="warning" className="lead mb-5 mr-3">
+        <i class="fas fa-server fa-lg mr-3" />
+        <strong>Waiting for local server to be running...</strong>
+      </Alert>
 
-      <h3>Download latest server release</h3>
+      <h3 className="mb-4">Download latest server release</h3>
       <Row>
-        <Col className="text-center mb-4">
+        <Col md="6">
+          <p>
+            In order to upload your sleep file, we ask you to install our local server. This server will proceed to the
+            preprocessing, feature extraction and classification of your sleep EEG. Your data is processed locally since
+            we, at PolyCortex, believe that you should have full control over your data and its privacy.
+          </p>
+        </Col>
+        <Col md="6" className="text-center mb-4">
           <ListGroup>
             {assets.map((asset) => (
-              <ListGroupItem key={asset.name} active={asset.currentOs} tag="a" href={asset.url}>
+              <ListGroupItem color="default" key={asset.name} active={asset.currentOs} tag="a" href={asset.url}>
                 {asset.name}
               </ListGroupItem>
             ))}
           </ListGroup>
         </Col>
       </Row>
-
-      <Row>
-        <Col className="text-center mb-4">
-          <Spinner style={{ width: '3rem', height: '3rem' }} />
-        </Col>
-      </Row>
     </Container>
   );
 };

From 456af0b5dafb508949f5243bcc7556aebaa0c3d8 Mon Sep 17 00:00:00 2001
From: William Harvey <william.harvey@polymtl.ca>
Date: Sun, 15 Nov 2020 15:18:43 -0500
Subject: [PATCH 2/3] change bg color ListGroup items

---
 web/src/views/analyze_sleep/waiting_for_server/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/views/analyze_sleep/waiting_for_server/index.js b/web/src/views/analyze_sleep/waiting_for_server/index.js
index a7044559..ae2820fb 100644
--- a/web/src/views/analyze_sleep/waiting_for_server/index.js
+++ b/web/src/views/analyze_sleep/waiting_for_server/index.js
@@ -27,10 +27,11 @@ const WaitingForServer = () => {
           </p>
         </Col>
         <Col md="6" className="text-center mb-4">
-          <ListGroup>
+          <ListGroup flush>
             {assets.map((asset) => (
-              <ListGroupItem color="default" key={asset.name} active={asset.currentOs} tag="a" href={asset.url}>
-                {asset.name}
+              <ListGroupItem key={asset.name} active={asset.currentOs} tag="a" href={asset.url}>
+                <i class="fas fa-download fa-lg mr-3" />
+                <span>{asset.name}</span>
               </ListGroupItem>
             ))}
           </ListGroup>

From a04b2f8c05708e5f4f755cf7cbc85932222b2827 Mon Sep 17 00:00:00 2001
From: William Harvey <william.harvey@polymtl.ca>
Date: Sun, 15 Nov 2020 16:54:01 -0500
Subject: [PATCH 3/3] add dotdotdot animation

---
 .../analyze_sleep/waiting_for_server/index.js | 10 ++++----
 .../waiting_for_server/style.css              | 23 +++++++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 web/src/views/analyze_sleep/waiting_for_server/style.css

diff --git a/web/src/views/analyze_sleep/waiting_for_server/index.js b/web/src/views/analyze_sleep/waiting_for_server/index.js
index ae2820fb..109df4cc 100644
--- a/web/src/views/analyze_sleep/waiting_for_server/index.js
+++ b/web/src/views/analyze_sleep/waiting_for_server/index.js
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Container, Row, Col, Alert } from 'reactstrap';
+import { Container, Row, Col, Alert, ListGroup, ListGroupItem } from 'reactstrap';
+
 import { getLatestServerReleaseAssets } from 'requests/latest_release';
-import { ListGroup, ListGroupItem } from 'reactstrap';
+
+import './style.css';
 
 const WaitingForServer = () => {
   const [assets, setAssets] = useState([]);
@@ -13,8 +15,8 @@ const WaitingForServer = () => {
   return (
     <Container className="my-6">
       <Alert color="warning" className="lead mb-5 mr-3">
-        <i class="fas fa-server fa-lg mr-3" />
-        <strong>Waiting for local server to be running...</strong>
+        <i className="fas fa-server fa-lg mr-3" />
+        <strong className="waiting_alert__text">Waiting for local server to be running</strong>
       </Alert>
 
       <h3 className="mb-4">Download latest server release</h3>
diff --git a/web/src/views/analyze_sleep/waiting_for_server/style.css b/web/src/views/analyze_sleep/waiting_for_server/style.css
new file mode 100644
index 00000000..8fdf829b
--- /dev/null
+++ b/web/src/views/analyze_sleep/waiting_for_server/style.css
@@ -0,0 +1,23 @@
+.waiting_alert__text:after {
+  content: ' .';
+  animation: dots 1s steps(5, end) infinite;
+}
+
+@keyframes dots {
+  0%,
+  20% {
+    color: rgba(0, 0, 0, 0);
+    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+  40% {
+    color: white;
+    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+  60% {
+    text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
+  }
+  80%,
+  100% {
+    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
+  }
+}