Merge remote-tracking branch 'origin/main' into improve_inst_page

Author: Tom-Willemsen

app/Footer.tsx

@@ -28,13 +28,6 @@ export default function Footer() {
           >
             Instrument statuses
           </Link>
-
-          <Link
-            href="/wall"
-            className="text-base leading-6 text-gray-500 hover:text-gray-900  dark:text-white dark:hover:text-gray-400 transition-color duration-100 px-5 py-2"
-          >
-            Wall display
-          </Link>
         </nav>
         <p className="mt-8 text-base leading-6 text-center text-gray-400">
           © 2024 Experiment Controls at ISIS. All rights reserved.

app/NavBar.tsx

@@ -35,12 +35,6 @@ export default function NavBar() {
         >
           Instrument Status
         </Link>
-        <Link
-          className="block py-2 px-3 rounded text-black dark:text-white hover:text-white hover:bg-zinc-800"
-          href="/wall"
-        >
-          Wall display
-        </Link>
         <Link
           className="block py-2 px-3 rounded text-black dark:text-white hover:text-white hover:bg-zinc-800"
           href="https://www.isis.stfc.ac.uk/Pages/Beam-Status.aspx"

app/page.tsx

@@ -1,10 +1,13 @@
 "use client";
 import { Inter } from "next/font/google";
 import Link from "next/link";
-import { motion } from "framer-motion";
 
 const inter = Inter({ subsets: ["latin"] });
 
+{
+  /*Icons from https://heroicons.com/*/
+}
+
 export default function Home() {
   return (
     <main
@@ -52,29 +55,20 @@ export default function Home() {
             <section className="">
               <div className="container md:px-6 mx-auto">
                 <div className="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
-                  <motion.div
-                    whileHover={{ y: -10 }}
-                    className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl bg-white dark:bg-zinc-900"
-                  >
+                  <div className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl bg-white dark:bg-zinc-900">
                     <span className="inline-block text-blue-500 dark:text-blue-400">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="w-8 h-8"
                         fill="none"
                         viewBox="0 0 24 24"
+                        strokeWidth="1.5"
                         stroke="currentColor"
+                        className="size-10"
                       >
                         <path
                           strokeLinecap="round"
                           strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"
-                        />
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"
+                          d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
                         />
                       </svg>
                     </span>
@@ -89,7 +83,7 @@ export default function Home() {
 
                     <a
                       href="https://stfc365.sharepoint.com/sites/isis-hub/SitePages/Instrument-Quick-Links.aspx"
-                      className="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+                      className="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:bg-blue-400 dark:hover:bg-blue-400"
                       target="_blank"
                     >
                       <svg
@@ -107,25 +101,22 @@ export default function Home() {
                         />
                       </svg>
                     </a>
-                  </motion.div>
+                  </div>
 
-                  <motion.div
-                    whileHover={{ y: -10 }}
-                    className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl bg-white dark:bg-zinc-900"
-                  >
+                  <div className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl bg-white dark:bg-zinc-900">
                     <span className="inline-block text-blue-500 dark:text-blue-400">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="w-8 h-8"
                         fill="none"
                         viewBox="0 0 24 24"
+                        strokeWidth="1.5"
                         stroke="currentColor"
+                        className="size-10"
                       >
                         <path
                           strokeLinecap="round"
                           strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
+                          d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
                         />
                       </svg>
                     </span>
@@ -140,7 +131,7 @@ export default function Home() {
 
                     <a
                       href="https://shadow.nd.rl.ac.uk/journals/"
-                      className="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+                      className="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:bg-blue-400 dark:hover:bg-blue-400"
                       target="_blank"
                     >
                       <svg
@@ -158,25 +149,22 @@ export default function Home() {
                         />
                       </svg>
                     </a>
-                  </motion.div>
+                  </div>
 
-                  <motion.div
-                    whileHover={{ y: -10 }}
-                    className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl bg-white dark:bg-zinc-900"
-                  >
+                  <div className="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl bg-white dark:bg-zinc-900">
                     <span className="inline-block text-blue-500 dark:text-blue-400">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        className="w-8 h-8"
                         fill="none"
                         viewBox="0 0 24 24"
+                        strokeWidth="1.5"
                         stroke="currentColor"
+                        className="size-10"
                       >
                         <path
                           strokeLinecap="round"
                           strokeLinejoin="round"
-                          strokeWidth="2"
-                          d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
+                          d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"
                         />
                       </svg>
                     </span>
@@ -191,7 +179,7 @@ export default function Home() {
 
                     <a
                       href="https://www.isis.stfc.ac.uk/Pages/Beam-Status.aspx"
-                      className="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500"
+                      className="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:bg-blue-400 dark:hover:bg-blue-400"
                       target="_blank"
                     >
                       <svg
@@ -209,7 +197,7 @@ export default function Home() {
                         />
                       </svg>
                     </a>
-                  </motion.div>
+                  </div>
                 </div>
               </div>
             </section>

app/wall/components/InstrumentWallCard.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { motion } from "framer-motion";
 import {
   getForegroundColour,
   getStatusColour,
@@ -13,8 +12,7 @@ export default function WallCard({
   instrument: IfcInstrumentStatus;
 }) {
   return (
-    <motion.div
-      whileHover={{ y: -10 }}
+    <div
       className={`flex items-center justify-between p-3  rounded-lg shadow-sm border-2 border-gray-700 dark:border-gray-200 hover:shadow-lg hover:border-black dark:hover:border-gray-700 transition-all duration-200
       ${getStatusColour(instrument.status || "UNKNOWN")} ${getForegroundColour(
         instrument.status || "UNKNOWN",
@@ -34,6 +32,6 @@ export default function WallCard({
           </span>
         </div>
       </Link>
-    </motion.div>
+    </div>
   );
 }

package-lock.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@types/pako": "^2.0.3",
     "cross-env": "^7.0.3",
-    "framer-motion": "^11.2.5",
     "next": "^14.2.5",
     "pako": "^2.1.0",
     "react": "^18",