GH-75: Making the application mobile responsive

src/components/ShareLinkButton.jsx

@@ -10,15 +10,15 @@ const ShareLinkButton = () => {
   };
 
   return (
-    <div className="relative z-50">
+    <div className="relative">
       <button
         onClick={copyLink}
         className={`
           flex gap-2 justify-center items-center px-3 py-2 rounded-md text-accent/95 hover:text-accent bg-accent/5 hover:bg-accent/10 border-accent/10 hover:border-accent/15 cursor-pointer border
         `}
       >
         <Share2 size={22} />
-        <span className="text-sm whitespace-nowrap">Share</span>
+        <span className="text-sm whitespace-nowrap hidden md:block">Share</span>
       </button>
     </div>
   );

src/components/landscapeRequired.jsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { RotateCw, ArrowLeft } from "lucide-react";
+import { HiOutlineDevicePhoneMobile } from "react-icons/hi2";
+
+export default function LandscapeRequired({
+  smallMaxWidth = 768,
+  children,
+  message = "Please rotate your device to landscape mode",
+  backgroundColor = "rgba(255, 255, 255, 0.95)",
+  onBack = null
+}) {
+  const [isLandscape, setIsLandscape] = useState(false);
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  useEffect(() => {
+    const updateSizes = () => {
+      setIsLandscape(window.innerWidth > window.innerHeight);
+      setIsSmallScreen(window.innerWidth < smallMaxWidth);
+    };
+
+    updateSizes();
+
+    window.addEventListener("resize", updateSizes);
+    return () => window.removeEventListener("resize", updateSizes);
+  }, [smallMaxWidth]);
+
+  if (isSmallScreen && !isLandscape) {
+    return (
+      <div 
+        style={{
+          position: "fixed",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          background: backgroundColor,
+          zIndex: 9999,
+          padding: "20px"
+        }}
+      >
+        {onBack && (
+          <button
+            onClick={onBack}
+            style={{
+              position: "absolute",
+              top: "20px",
+              left: "20px",
+              background: "rgba(0, 0, 0, 0.1)",
+              border: "none",
+              borderRadius: "8px",
+              padding: "10px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "background 0.2s"
+            }}
+            onMouseEnter={(e) => e.currentTarget.style.background = "rgba(0, 0, 0, 0.15)"}
+            onMouseLeave={(e) => e.currentTarget.style.background = "rgba(0, 0, 0, 0.1)"}
+          >
+            <ArrowLeft size={24} color="#333" />
+          </button>
+        )}
+
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "24px",
+            textAlign: "center"
+          }}
+        >
+          <div
+            style={{
+              animation: "rotate 2s ease-in-out infinite",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <HiOutlineDevicePhoneMobile size={64} style={{ color: "var(--accent)" }} strokeWidth={1.5} />
+          </div>
+
+          <p
+            style={{
+              fontSize: "18px",
+              color: "#333",
+              maxWidth: "300px",
+              lineHeight: "1.6",
+              margin: 0,
+              fontWeight: 500
+            }}
+          >
+            {message}
+          </p>
+        </div>
+
+        <style>{`
+          @keyframes rotate {
+            0%, 100% { transform: rotate(0deg); }
+            50% { transform: rotate(92deg); }
+          }
+        `}</style>
+      </div>
+    );
+  }
+
+  return children;
+}

src/components/ministryViewModeToggleButton.jsx

@@ -1,43 +1,43 @@
 import { PiGraph } from "react-icons/pi";
 import { MdGridOn } from "react-icons/md";
+import { useThemeContext } from "../context/themeContext";
 
 export default function MinistryViewModeToggleButton({ viewMode, setViewMode }) {
+  const { colors } = useThemeContext();
   const isGraph = viewMode === "Graph";
 
   return (
-    <div className="flex justify-end w-full sm:w-auto">
-      <div className="relative flex bg-transparent border border-foreground/80 rounded-md w-38 h-10 select-none">
+    <div className="flex justify-end w-full sm:w-auto landscape:-mt-2 portrait:mt-0">
+      <div
+        className="relative flex bg-transparent rounded-md w-20 md:w-38 h-10 select-none"
+        style={{ border: `1px solid ${colors.textMuted}` }}>
         <div
-          className={`absolute top-0 bottom-0 w-1/2 rounded-md transition-all duration-300 ${
-            isGraph ? "border-l-1 border-foreground/80" : "border-r-1 border-foreground/80"
-          }`}
+          className={`absolute top-0 bottom-0 w-1/2 rounded-md transition-all duration-300`}
           style={{
             left: isGraph ? "50%" : "0",
-            borderLeftColor: isGraph && "border-2 border-foreground/20",
-            borderRightColor: !isGraph && "border-2 border-foreground/20",
+            borderLeft: isGraph ? `1px solid ${colors.textMuted}` : undefined,
+            borderRight: !isGraph ? `1px solid ${colors.textMuted}` : undefined,
           }}
         />
 
         {/* List Button */}
         <button
           onClick={() => setViewMode("Grid")}
-          className={`hover:cursor-pointer relative z-10 flex items-center justify-center gap-1 w-1/2 text-sm font-medium transition-all rounded-md ${
-            !isGraph ? "text-primary/80 bg-foreground/10" : "text-primary/50"
-          }`}
+          className={`hover:cursor-pointer relative z-10 flex items-center justify-center gap-1 w-1/2 text-sm font-medium transition-all rounded-md ${!isGraph ? "text-primary/80 bg-foreground/10" : "text-primary/50"
+            }`}
         >
-          <MdGridOn className={`text-base transition-all ${!isGraph ? "opacity-100" : "opacity-80"}`} />
-          List
+          <MdGridOn className={"text-base transition-all opacity-80"} />
+          <span className="hidden md:block">List</span>
         </button>
 
         {/* Graph Button */}
         <button
           onClick={() => setViewMode("Graph")}
-          className={`hover:cursor-pointer relative z-10 flex items-center justify-center gap-1 w-1/2 text-sm font-medium transition-all rounded-md ${
-            isGraph ? "text-primary/80 bg-foreground/10" : "text-primary/50"
-          }`}
+          className={`hover:cursor-pointer relative z-10 flex items-center justify-center gap-1 w-1/2 text-sm font-medium transition-all rounded-md ${isGraph ? "text-primary/80 bg-foreground/10" : "text-primary/50"
+            }`}
         >
-          <PiGraph className={`text-base transition-all ${isGraph ? "opacity-100" : "opacity-80"}`} />
-          Graph
+          <PiGraph className={"text-base transition-all opacity-80"} />
+          <span className="hidden md:block">Graph</span>
         </button>
       </div>
     </div>