Send Transaction Form Updated

ResilientApp · Sep 17, 2024 · 6fc6ba5 · 6fc6ba5
1 parent cacb75f
commit 6fc6ba5
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 18 deletions.
diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js
@@ -39,8 +39,8 @@ const Form = () => {
     };
 
     return (
-        <div className='mt-2 rounded-md w-550p py-4 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col gap-y-6 bg-blue-10 dark:bg-blue-450'>
-            <div className="flex items-center justify-center gap-x-2">
+        <div className='mt-2 rounded-md w-550p py-4 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col items-center justify-center gap-y-6 bg-blue-10 dark:bg-blue-450 h-320p'>
+            <div className="flex items-center justify-center gap-x-2 w-full">
                 <Icon
                     fill={theme ? "rgb(209,213,219)" : "black"}
                     height={'1em'}
@@ -49,7 +49,7 @@ const Form = () => {
                 />
                 <FontVarTitle title={'Send Transaction'} />
             </div>
-            <div className="flex flex-col gap-y-2">
+            <div className="flex flex-col gap-y-2 w-full">
                 <FontVarTitle title={'Key'} fontClass={'text-15p'} />
                 <div className='px-8'>
                     <input
@@ -62,7 +62,7 @@ const Form = () => {
                     />
                 </div>
             </div>
-            <div className="flex flex-col gap-y-2">
+            <div className="flex flex-col gap-y-2 w-full">
                 <FontVarTitle title={'Value'} fontClass={'text-15p'} />
                 <div className='px-8'>
                     <input
@@ -75,7 +75,7 @@ const Form = () => {
                     />
                 </div>
             </div>
-            <div className="flex items-center justify-center gap-x-8 my-1">
+            <div className="flex items-center justify-center gap-x-8 my-1 w-full">
                 <ReplicaButton
                     title={'Get'}
                     onClick={submitGet}

diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js b/src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js
@@ -9,10 +9,10 @@ const Manipulator = ({
     toggleLine,
 }) => {
     return (
-        <div className='mt-2 rounded-md w-550p py-6 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col gap-y-6 bg-blue-10 dark:bg-blue-450'>
+        <div className='mt-2 rounded-md w-550p py-4 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col items-center justify-center gap-y-16 bg-blue-10 dark:bg-blue-450 h-320p'>
             <div className="flex flex-col gap-y-6">
                 <FontVarTitle title={'Select Replica To be Faulty:'} fontClass={'text-15p'} />
-                <div className='flex gap-x-7 justify-center'>
+                <div className='flex gap-x-7 items-center justify-around'>
                     {MVT_GRAPH_LABELS.length > 0 && MVT_GRAPH_LABELS.map((title, index) => (
                         <ReplicaButton
                             title={title}
@@ -25,7 +25,7 @@ const Manipulator = ({
             </div>
             <div className="flex flex-col gap-y-6">
                 <FontVarTitle title={'Toggle Line Graph:'} fontClass={'text-15p'} />
-                <div className='flex gap-x-7 justify-center'>
+                <div className='flex gap-x-7 items-center justify-around'>
                     {MVT_GRAPH_LABELS.length > 0 && MVT_GRAPH_LABELS.map((title, index) => (
                         <>
                             <ReplicaButton

diff --git a/src/Components/Pages/Visualizer/Graphs/MVT/index.js b/src/Components/Pages/Visualizer/Graphs/MVT/index.js
@@ -125,13 +125,17 @@ const Mvt = () => {
                 </ResizableContainer>
             </div>
             <div className='mt-12 mb-4 flex items-center justify-center gap-x-16'>
-                <Form />
-                <Manipulator
-                    toggleFaulty={toggleFaulty}
-                    toggleLine={toggleLine}
-                    labelToggleFaulty={labelToggleFaulty}
-                    labelToggle={labelToggle}
-                />
+                <div className="">
+                    <Form />
+                </div>
+                <div className="">
+                    <Manipulator
+                        toggleFaulty={toggleFaulty}
+                        toggleLine={toggleLine}
+                        labelToggleFaulty={labelToggleFaulty}
+                        labelToggle={labelToggle}
+                    />
+                </div>
             </div>
         </div>
     );

diff --git a/src/Styles/App.css b/src/Styles/App.css
@@ -575,6 +575,10 @@ video {
   margin-left: auto;
   margin-right: auto;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -841,9 +845,6 @@ video {
 .w-screen {
   width: 100vw;
 }
-.min-w-full {
-  min-width: 100%;
-}
 .max-w-200p {
   max-width: 200px;
 }
@@ -1126,6 +1127,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -1162,6 +1167,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -1839,6 +1848,11 @@ code {
   z-index: 10;
 }
 
+.focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(15 23 42 / var(--tw-border-opacity));
+}
+
 .focus\:text-blue-700:focus {
   --tw-text-opacity: 1;
   color: rgb(10 15 28 / var(--tw-text-opacity));
@@ -1855,6 +1869,11 @@ code {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-blue-700:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(10 15 28 / var(--tw-ring-opacity));
@@ -2020,6 +2039,11 @@ code {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+:is([data-theme="dark"] .dark\:placeholder-gray-400)::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-placeholder-opacity));
+}
+
 :is([data-theme="dark"] .dark\:opacity-20) {
   opacity: 0.2;
 }
@@ -2103,6 +2127,16 @@ code {
   border-color: rgb(185 28 28 / var(--tw-border-opacity));
 }
 
+:is([data-theme="dark"] .dark\:focus\:border-blue-500:focus) {
+  --tw-border-opacity: 1;
+  border-color: rgb(15 23 42 / var(--tw-border-opacity));
+}
+
+:is([data-theme="dark"] .dark\:focus\:ring-blue-500:focus) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
+}
+
 @media (max-width: 640px) {
 
   .sm\:mb-0 {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -478,6 +478,7 @@ module.exports = {
         "100p": "100px",
         "150p": "150px",
         "200p": "200px",
+        "320p":"320px",
         "360p": "360px",
         "450p": "450px",
         "550p": "550px",