From 33c0e362f524f9ed17f061b2c485ed2ddc8e1680 Mon Sep 17 00:00:00 2001
From: D3vision <d3visionyt@gmail.com>
Date: Sat, 22 Apr 2023 21:31:02 +0200
Subject: [PATCH] - Fixing horizontal checkbox

---
 src/components/Selectors.tsx | 6 +++---
 src/css/App.css              | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Selectors.tsx b/src/components/Selectors.tsx
index 3614011..cab6afe 100644
--- a/src/components/Selectors.tsx
+++ b/src/components/Selectors.tsx
@@ -58,9 +58,9 @@ export const DropdownMenu = (props: DropdownProps) => {
 export const ToggleSwitch = ({ value, onChange, ref, children }:
     { value: boolean, ref?: React.RefObject<HTMLInputElement>, onChange?: React.ChangeEventHandler, children: string }) => {
     return <p>
-        <span className="check-box">
-            <b>{children}</b>
-            <input ref={ref} className="check-box" defaultChecked={value} onChange={onChange} type='checkbox' />
+        <span className="check-box check-box-row">
+            <b>{children}:</b>
+            <input ref={ref} defaultChecked={value} onChange={onChange} type='checkbox' />
         </span>
     </p>;
 };
\ No newline at end of file
diff --git a/src/css/App.css b/src/css/App.css
index a76c2b9..a919d13 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -113,6 +113,7 @@ header {
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
   cursor: pointer;
   transition: 0.4s;
+  margin-bottom: revert;
 }
 
 .check-box input:checked[type="checkbox"] {
@@ -136,3 +137,9 @@ header {
 .check-box input:checked[type="checkbox"]::after {
   left: 50%;
 }
+
+.check-box-row{
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}