style: switch styling

txpipe · Apr 26, 2024 · 49fae47 · 49fae47
1 parent a19b718
commit 49fae47
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/web/app/components/Button.tsx b/web/app/components/Button.tsx
@@ -18,7 +18,7 @@ export const Button = ({
       onClick={onClickFn}
       type={type}
       className={`items-center shadow text-lg font-semibold inline-flex px-6 focus:outline-none justify-center text-center 
-      ease-in-out duration-300 outline-none  border-2 sm:w-auto rounded-lg py-2 tracking-wide w-full 
+      ease-in-out duration-300 outline-none  border-2 sm:w-auto rounded-lg py-2 tracking-wide w-full select-none
       border-blue-950 shadow-black rounded-b-xl border-b-8 appearance-none text-black placeholder-gray-400  
       ${
         color === "blue"

diff --git a/web/app/components/RootSection.tsx b/web/app/components/RootSection.tsx
@@ -43,7 +43,7 @@ export function RootSection(props: {
               <h4 className="text-3xl ">Tx Validations - {props.era}</h4>
             </div>
           </button>
-          {open ?? (initialOpen && <ValidationInformation />)}
+          {open && <ValidationInformation />}
         </div>
       )}
       <h4 className="text-3xl">{topic.title}</h4>
@@ -71,7 +71,7 @@ export function RootSection(props: {
               <h4 className="text-3xl ">Tx Validations - {props.era}</h4>
             </div>
           </button>
-          {open ?? (initialOpen && <ValidationInformation />)}
+          {open && <ValidationInformation />}
         </div>
       )}
     </div>

diff --git a/web/app/components/Validations/Configurations/UITab.tsx b/web/app/components/Validations/Configurations/UITab.tsx
@@ -52,17 +52,35 @@ export const UITab = () => {
       {validations.map((validation, index, arr) => (
         <div key={validation.name}>
           <div className="w-full text-left flex justify-between p-2">
-            <label htmlFor={validation.name} className="text-xl">
+            <label htmlFor={validation.name} className="text-xl select-none">
               {validation.name}
             </label>
-            <input
-              id={validation.name}
-              name={validation.name}
-              checked={shownValidations.includes(validation.name)}
-              type="checkbox"
-              className=""
-              onChange={changeValidations(validation.name)}
-            />
+            <div className="relative inline-block w-10 mr-4 align-top select-none ">
+              <div
+                className={`toggle-label flex items-center overflow-hidden h-7 rounded-full cursor-pointer 
+                border-2 border-black  rounded-b-full border-b-4 px-6 shadow-black shadow-small
+                transition-all duration-400 ease-in-out ${
+                  shownValidations.includes(validation.name)
+                    ? "bg-red-200 "
+                    : "bg-green-200 "
+                }`}
+              >
+                <input
+                  id={validation.name}
+                  name={validation.name}
+                  checked={shownValidations.includes(validation.name)}
+                  type="checkbox"
+                  onChange={changeValidations(validation.name)}
+                  className={`toggle-checkbox absolute block w-3 h-3 rounded-full  appearance-none cursor-pointer 
+                  transition-all duration-400 ease-in-out bg-black
+                  ${
+                    shownValidations.includes(validation.name)
+                      ? "left-2 "
+                      : "left-8"
+                  } `}
+                />
+              </div>
+            </div>
           </div>
           {index !== arr.length - 1 && <hr />}
         </div>

diff --git a/web/app/components/Validations/Information.tsx b/web/app/components/Validations/Information.tsx
@@ -69,7 +69,6 @@ export function ValidationInformation() {
   const shownValidations =
     new URLSearchParams(location.search).get(SearchParams.LIST)?.split(",") ??
     [];
-
   return (
     <div
       className="flex flex-col gap-3 relative w-full mx-auto lg:col-span-2