change colors. finished done

src/components/play/FinishedDetails.tsx

@@ -37,7 +37,7 @@ function FinishedDetails({ workoutState }: FinishedDetailsProps) {
     <div className="text-left space-y-2">
       <div>
         <span className="font-bold">Session ID: </span>{" "}
-        {workoutState?.manager?.sessionId?.slice(-6)}
+        {workoutState?.manager?.workout?.id?.slice(-6)}
       </div>
       <div>
         <span className="font-bold">Workout Name:</span>{" "}

src/lib/workout.ts

@@ -51,7 +51,7 @@ export const createSteps = (config: RoutineConfiguration): Step[] => {
   steps.push({
     name: config.CoolDown.name,
     duration: config.CoolDown.duration,
-    color: "bg-teal-500",
+    color: "bg-cyan-500",
     cycle: 0,
     totalSets: 1,
     totalCycles: config.Cycles.value,
@@ -61,7 +61,7 @@ export const createSteps = (config: RoutineConfiguration): Step[] => {
   steps.push({
     name: "Finish",
     duration: 0,
-    color: "bg-blue-500",
+    color: "bg-violet-500",
     cycle: 0,
     totalSets: 0,
     totalCycles: 0,

src/pages/PlayScreen/index.tsx

@@ -262,7 +262,7 @@ export default function PlayScreen() {
               </div>
             </>
           ) : (
-            <div className="flex items-center bg-blue-500 justify-center h-screen overflow-hidden">
+            <div className="flex items-center justify-center h-screen overflow-hidden">
               <div className="text-center rounded p-4 border-gray-500 shadow-lg border m-4">
                 <h1 className="text-3xl mb-4 rounded border-gray-500">
                   Finished!

tailwind.config.ts

@@ -21,9 +21,11 @@ const config: Config = {
     "bg-yellow-500",
     "bg-orange-500",
     "bg-teal-500",
-
+    "bg-cyan-500",
+    "bg-indigo-500",
     "bg-green-500",
     "bg-blue-500",
+    "bg-violet-500",
     "bg-green-200",
   ],
   plugins: [],