Design fixes

shuja-shah-dev · Jun 14, 2024 · 7d99ee6 · 7d99ee6
1 parent 6ca0ee0
commit 7d99ee6
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 32 deletions.
diff --git a/src/nodes/NodeSelect.jsx b/src/nodes/NodeSelect.jsx
@@ -21,14 +21,7 @@ export default function NodeSelect() {
       ...(code === 'Sw' || code === 'Oc' ? { detectedImage } : { image }), // Conditionally include detectedImage or image
     };
 
-    const type = `${
-      // eslint-disable-next-line no-nested-ternary
-      code === 'Sw'
-        ? 'switcher'
-        : code === 'Oc'
-        ? 'orientation'
-        : 'modelProvider'
-    }`;
+    const type = `${code === 'Sw' ? 'switcher' : code === 'Oc' ? 'orientation' : 'modelProvider'}`;
 
     setNodes((prevNodes) => [
       ...prevNodes,
@@ -47,30 +40,25 @@ export default function NodeSelect() {
       <div>
         <button
           type="button"
-          style={{borderRadius: '20px',
-            background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)'}}
-
-          className=" text-lg  text-white inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white  font-medium  hover:bg-gray-50 "
+          style={{
+            borderRadius: '20px',
+            background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)',
+          }}
+          className="text-lg text-white inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 font-medium hover:bg-gray-50"
           onClick={() => setMenuOpen(!menuOpen)}
         >
           ADD NODES
         </button>
       </div>
 
       {menuOpen && (
-        <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
-          <div
-            className="py-1"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="options-menu"
-          >
+        <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5"   style={{ backgroundColor: 'aliceblue' }}>
+          <div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
             {model_NODES.map((provider) => (
-              // eslint-disable-next-line react/button-has-type
               <button
                 key={provider.code}
                 onClick={() => onProviderClick(provider)}
-                className="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+                className="w-full text-left text-base px-4 py-2  text-gray-900 hover:bg-gray-200 focus:outline-none focus:bg-gray-100"
                 role="menuitem"
               >
                 {provider.name}

diff --git a/src/renderer/Flow.js b/src/renderer/Flow.js
@@ -16,7 +16,7 @@ import 'reactflow/dist/style.css';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import ImageInputNode from '../nodes/ImageInputNode';
-
+import Alert from '../utils/alert';
 import Switcher from '../nodes/Switcher';
 import OrientationNode from '../nodes/OrientationNode';
 import CustomEdge from '../utils/customEdge';
@@ -137,6 +137,8 @@ function Flow({ projectType }) {
     ];
   });
   // const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
   const [edges, setEdges] = useState([]);
   const [result, setResult] = useState(null);
   const [finalResult, setFinalResult] = useState(null);
@@ -187,6 +189,11 @@ function Flow({ projectType }) {
     setInputImage(image);
   };
 
+  const handleShowAlert = (message) => {
+    setAlertMessage(message);
+    setShowAlert(true);
+  };
+
   const triggerBackendRequest = (image) => {
     if (image) {
       console.log(image);
@@ -357,10 +364,10 @@ function Flow({ projectType }) {
               triggerBackendAnomalyRequest(imageBlob, targetNode.id, userInput);
             });
           } else {
-            alert('Kindly Connect to Switcher before Anomaly Detection');
+            handleShowAlert('Connect to Switcher prior Anomaly Detection');
           }
         } else {
-          alert('Perform Object Detection before Anomaly Detection');
+          handleShowAlert('Perform Object Detection before Anomaly Detection');
         }
       }
 
@@ -390,7 +397,7 @@ function Flow({ projectType }) {
             triggerBackendAnomalyRequest(imageBlob, targetNode.id, userInput);
           });
         } else {
-          alert('Kindly Connect to Switcher before Anomaly Detection');
+          handleShowAlert('Connect to Switcher prior Anomaly Detection');
         }
       }
 
@@ -455,7 +462,7 @@ function Flow({ projectType }) {
             triggerBackendAnomalyRequest(imageBlob, targetNode.id, userInput);
           });
         } else {
-          alert('Kindly Connect to Switcher before Anomaly Detection');
+          handleShowAlert('Connect to Switcher prior Anomaly Detection');
         }
       }
 
@@ -604,9 +611,11 @@ function Flow({ projectType }) {
         style={{
           width: '100vw',
           height: '450px',
+          fontFamily: 'Gilroy'
           // backgroundColor: '#000',
         }}
         className="border  border-black "
+
       >
         <ReactFlow
           nodes={nodes}
@@ -629,6 +638,9 @@ function Flow({ projectType }) {
         onClose={() => setIsModalOpen(false)}
         onSubmit={handleModalSubmit}
       />
+      {showAlert && (
+        <Alert message={alertMessage} onClose={() => setShowAlert(false)} />
+      )}
     </>
   );
 }

diff --git a/src/renderer/Footer.jsx b/src/renderer/Footer.jsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function Footer({ image }) {
   return (
-    <div className=" pb-[40px]">
+    <div className=" pb-[40px] "   style={{ fontFamily: 'Gilroy' }}>
       <div
         className="border-dashed border border-[#876EE6] w-[80%] m-auto rounded-3xl"
         style={{
@@ -13,7 +13,7 @@ function Footer({ image }) {
       >
         <h2
           className="text-center text-white text-[32px] font-semibold my-[20px]"
-          style={{ fontFamily: 'Gilroy' }}
+
         >
           Connect the Nodes to Get your Results
         </h2>

diff --git a/src/renderer/Landing.jsx b/src/renderer/Landing.jsx
@@ -11,8 +11,9 @@ export default function Landing({ onProjectTypeChange }) {
   };
 
   return (
+    <div className='flex justify-center items-center h-screen'>
     <div
-      className=" text-center p-6 w-[80%] my-[100px] h-[600px] mx-auto  flex flex-col justify-center items-center border-dashed border border-[#876EE6]  m-auto rounded-3xl"
+      className=" text-center p-6 w-[80%] h-[600px] mx-auto  flex flex-col justify-center items-center border-dashed border border-[#876EE6]  m-auto rounded-3xl"
       style={{ fontFamily: 'Gilroy', background: 'rgba(255, 255, 255, 0.08)' }}
     >
       <h1 className="text-4xl mb-6 text-white ">Select Project Type</h1>
@@ -41,5 +42,6 @@ export default function Landing({ onProjectTypeChange }) {
         </Link>
       </div>
     </div>
+    </div>
   );
 }
diff --git a/src/renderer/Modal.jsx b/src/renderer/Modal.jsx
@@ -18,7 +18,7 @@ function Modal({ isOpen, onClose, onSubmit }) {
   };
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-800 bg-opacity-75">
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
       <div
         style={{ backgroundColor: 'aliceblue' }}
         className=" rounded-lg shadow-lg p-6 w-full max-w-md mx-4"
@@ -40,8 +40,8 @@ function Modal({ isOpen, onClose, onSubmit }) {
         />
         <button
           onClick={handleSubmit}
-          className="w-full bg-gradient-to-br from-blue-400 to-purple-300 text-white py-2 rounded-lg hover:bg-blue-700"
-        >
+          className="w-full  text-white py-2 rounded-lg"
+        style={{    background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)'}}>
           Submit
         </button>
       </div>

diff --git a/src/utils/alert.jsx b/src/utils/alert.jsx
@@ -0,0 +1,26 @@
+// src/components/Alert.js
+
+import React from 'react';
+
+function Alert({ message, onClose }) {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50" >
+      <div
+        className="bg-black bg-opacity-50 absolute inset-0"
+        onClick={onClose}
+      />
+      <div  style={{ backgroundColor: 'aliceblue' }} className=" rounded-lg shadow-lg p-6 relative z-10 flex flex-col justify-center items-center">
+        <div className="mb-4">{message}</div>
+        <button
+          className=" text-white font-bold py-2 px-4 rounded "
+          style={{    background: 'linear-gradient(90deg, #876EE6 0%, #3E5FAA 100%)'}}
+          onClick={onClose}
+        >
+          OK
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Alert;