🗯

client/src/App.css

@@ -62,8 +62,18 @@
 .loading-bar-container {
   background: #282c34;
   width: 100%;
+  height: 30px;
+  min-height: 30px;
 }
 
 .loading-bar {
-  background: green;
+  background: #66ff66;
+  height: 100%;
+}
+
+.page-head {
+  background: #282c34;
+  color: white !important;
+  margin-top: 0;
+  padding: 1rem;
 }

client/src/components/SessionPictures.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Card, message, Modal, PageHeader, Spin } from 'antd'
+import { Card, message, Modal, PageHeader, Row, Spin, Typography } from 'antd'
 import { getSession } from '../api'
 
 type Props = {
@@ -33,6 +33,8 @@ export const SessionPictures = ({ clientId }: Props) => {
 
   if (!urls?.length) return null
 
+  const u = urls.length / 89
+
   return (
     <>
       <Modal
@@ -49,14 +51,20 @@ export const SessionPictures = ({ clientId }: Props) => {
           alt="large modal"
         ></img>
       </Modal>
-      <PageHeader
-        title="Session Pictures"
-        subTitle={`${urls.length}/${89 * 1} loaded`}
-      >
-        <div className="loading-bar-container">
-          <div className="loading-bar"></div>
-        </div>
-      </PageHeader>
+      <Row align="middle" justify="center">
+        <Typography.Title level={3}>Session Pictures</Typography.Title>
+        <Typography.Text>{urls.length}/ 89 loaded</Typography.Text>
+      </Row>
+
+      <div className="loading-bar-container">
+        <div
+          className="loading-bar"
+          style={{
+            width: `${u * 100}%`,
+            background: `hsl(${Math.floor(1 * 120)}, 90%, 70%)`,
+          }}
+        ></div>
+      </div>
       <div className="photo-wall">
         {urls ? (
           urls

client/src/pages/Dashboard.tsx

@@ -1,4 +1,13 @@
-import { Button, Divider, Form, Input, message, PageHeader, Row } from 'antd'
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  message,
+  PageHeader,
+  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'
@@ -32,10 +41,12 @@ export const Dashboard = () => {
 
   return (
     <Content>
-      <PageHeader
-        title="Dashboard"
-        subTitle="Enter the name, email and phone number of the subject"
-      ></PageHeader>
+      <Typography.Title className="page-head" level={3}>
+        Dashboard
+      </Typography.Title>
+      <Typography.Text>
+        Enter the name, email and phone number of the subject
+      </Typography.Text>
       <Divider />
       <Form
         className="dashboard-form"

client/src/pages/Session.tsx

@@ -53,16 +53,19 @@ export const Session = (props: Props) => {
 
   return (
     <Content>
-      <Row justify="center">
-        <Typography.Title>Client: {client?.name}</Typography.Title>
-      </Row>
+      <Typography.Title className="page-head" level={3}>
+        Session View
+      </Typography.Title>
 
       <Row justify="space-around" style={{ width: '60%', margin: 'auto' }}>
         <Typography.Text>
-          <strong>email:</strong> {client?.email}
+          <strong>Name:</strong> {client?.name}
+        </Typography.Text>
+        <Typography.Text>
+          <strong>Email:</strong> {client?.email}
         </Typography.Text>
         <Typography.Text>
-          <strong>phone:</strong> {client?.phone}
+          <strong>Phone:</strong> {client?.phone}
         </Typography.Text>
       </Row>
       <Divider />