🗯

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