From d7de7e30108b2a19fe6b28cdbded385fc0a11c28 Mon Sep 17 00:00:00 2001
From: Jack Harper <jack.harper@stfc.ac.uk>
Date: Thu, 19 Sep 2024 10:58:14 +0100
Subject: [PATCH 1/2] Show beam info picture on wall page

---
 app/wall/page.tsx | 26 ++++++++++++++++++++++++--
 next.config.mjs   | 11 +++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/wall/page.tsx b/app/wall/page.tsx
index 504b431..112c6db 100644
--- a/app/wall/page.tsx
+++ b/app/wall/page.tsx
@@ -1,11 +1,10 @@
 "use client";
 import { Inter } from "next/font/google";
-import Link from "next/link";
 import { useState, useEffect } from "react";
 import useWebSocket from "react-use-websocket";
 import InstrumentWallCard from "@/app/components/InstrumentWallCard";
 import { IfcInstrumentStatus } from "./IfcInstrumentStatus";
-
+import Image from "next/image";
 const inter = Inter({ subsets: ["latin"] });
 
 export default function WallDisplay() {
@@ -158,6 +157,29 @@ export default function WallDisplay() {
     >
       <section className=" rounded-xl w-full  w-full  md:px-0 md:w-11/12 my-4 ">
         <div className="mx-auto  ">
+          <div
+            id="beampic"
+            className="flex flex-col items-center justify-center"
+          >
+            <label>
+              <input
+                className="peer/showLabel absolute scale-0"
+                type="checkbox"
+              />
+              <span className="block max-h-14 overflow-hidden rounded-lg hover:bg-gray-800 px-4 py-0 mb-2  shadow-lg transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer">
+                <h3 className="flex h-14 cursor-pointer items-center font-bold justify-center ">
+                  Show/hide beam info
+                </h3>
+                <Image
+                  src={`https://www.isis.stfc.ac.uk/Gallery/beam-status/ISIS_Status.jpg?t=${Date.now()}`}
+                  alt="beam info"
+                  className="w-auto"
+                  height={600}
+                  width={600}
+                />
+              </span>
+            </label>
+          </div>
           <div className="w-full mx-auto text-left flex justify-center items-center p-8 dark:bg-zinc-900 rounded-xl">
             <div
               id="status"
diff --git a/next.config.mjs b/next.config.mjs
index 61cd5ed..95fed01 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'www.isis.stfc.ac.uk',
+        port: '',
+        pathname: '/Gallery/beam-status/*',
+      },
+    ],
+  }
+
 };
 
 export default nextConfig;

From 2f303936890033e4ad92e1ba0786017e9fa8c695 Mon Sep 17 00:00:00 2001
From: Jack Harper <jack.harper@stfc.ac.uk>
Date: Fri, 20 Sep 2024 17:26:19 +0100
Subject: [PATCH 2/2] review comments - css

---
 app/wall/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/wall/page.tsx b/app/wall/page.tsx
index 112c6db..a9d9799 100644
--- a/app/wall/page.tsx
+++ b/app/wall/page.tsx
@@ -166,8 +166,8 @@ export default function WallDisplay() {
                 className="peer/showLabel absolute scale-0"
                 type="checkbox"
               />
-              <span className="block max-h-14 overflow-hidden rounded-lg hover:bg-gray-800 px-4 py-0 mb-2  shadow-lg transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer">
-                <h3 className="flex h-14 cursor-pointer items-center font-bold justify-center ">
+              <span className="block max-h-14 overflow-hidden rounded-lg bg-zinc-600 hover:bg-gray-800 px-4 py-0 mb-2  shadow-lg transition-all duration-300 peer-checked/showLabel:max-h-fit cursor-pointer">
+                <h3 className="flex h-14 cursor-pointer items-center font-bold justify-center text-white ">
                   Show/hide beam info
                 </h3>
                 <Image