🌠

client/src/App.css

@@ -77,3 +77,12 @@
   margin-top: 0;
   padding: 1rem;
 }
+
+.session-toolbar button {
+  margin: 0 0.5rem;
+  padding: 0.5rem 1rem;
+  height: 100%;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+}

client/src/components/SessionPictures.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Card, message, Modal, PageHeader, Row, Spin, Typography } from 'antd'
+import { Card, Modal, Row, Spin, Typography } from 'antd'
 import { getSession } from '../api'
 
 type Props = {
@@ -9,7 +9,6 @@ type Props = {
 export const SessionPictures = ({ clientId }: Props) => {
   const [urls, setUrls] = useState<string[] | null>(null)
   const [activeUrl, setActiveUrl] = useState<string | null>(null)
-  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     const get = async () => {

client/src/components/StatusChip.tsx

@@ -37,7 +37,7 @@ export const StatusChip = ({ poll }: Props) => {
     const interval = setInterval(get, 1000 / 4)
 
     return () => clearInterval(interval)
-  }, [])
+  }, [poll])
 
   return (
     <Tag color={colors[status]} style={{ display: 'flex' }}>

client/src/pages/Dashboard.tsx

@@ -1,17 +1,8 @@
-import {
-  Button,
-  Divider,
-  Form,
-  Input,
-  message,
-  PageHeader,
-  Row,
-  Typography,
-} from 'antd'
+import { Button, Divider, Form, Input, message, Row, Typography } from 'antd'
 import FormItem from 'antd/lib/form/FormItem'
 import { Store } from 'antd/lib/form/interface'
 import { Content } from 'antd/lib/layout/layout'
-import React, { FormEvent } from 'react'
+import React from 'react'
 import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { createClient } from '../api'

client/src/pages/Session.tsx

@@ -70,7 +70,10 @@ export const Session = (props: Props) => {
       </Row>
       <Divider />
 
-      <Row justify="center" className="session-header">
+      <Row justify="center" className="session-toolbar">
+        <Button key="finish" onClick={handleExit}>
+          Back To Dashboard
+        </Button>
         <Button
           key="startsession"
           disabled={active}
@@ -99,15 +102,7 @@ export const Session = (props: Props) => {
             Abort Session
           </Button>
         </Popconfirm>
-        <Button
-          key="finish"
-          ghost
-          type="primary"
-          disabled={!active}
-          onClick={handleExit}
-        >
-          Finish Session
-        </Button>
+
         <StatusChip poll={true} />
       </Row>