refactor: restyle don't ask again checkbox

flybywiresim · Jul 27, 2022 · 5d8ade8 · 5d8ade8
1 parent cc80c52
commit 5d8ade8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 12 deletions.
diff --git a/src/renderer/components/Modal/AutostartDialog.tsx b/src/renderer/components/Modal/AutostartDialog.tsx
@@ -66,7 +66,7 @@ interface YesNoOptionToggleProps {
     disabledBgColor?: string,
 }
 
-const YesNoOptionToggle: FC<YesNoOptionToggleProps> = ({ enabled, onToggle, enabledBgColor = 'bg-utility-green', disabledBgColor = 'bg-navy-light', children }) => {
+export const YesNoOptionToggle: FC<YesNoOptionToggleProps> = ({ enabled, onToggle, enabledBgColor = 'bg-utility-green', disabledBgColor = 'bg-navy-light', children }) => {
     const handleClick = onToggle;
 
     const bgColor = enabled ? enabledBgColor : disabledBgColor;
@@ -82,3 +82,20 @@ const YesNoOptionToggle: FC<YesNoOptionToggleProps> = ({ enabled, onToggle, enab
         </div>
     );
 };
+
+export const CompactYesNoOptionToggle: FC<YesNoOptionToggleProps> = ({ enabled, onToggle, enabledBgColor = 'bg-utility-green', children }) => {
+    const handleClick = onToggle;
+
+    const borderColor = enabled ? 'border-cyan' : 'border-navy-light';
+    const titleColor = enabled ? 'text-cyan' : 'text-quasi-white';
+
+    return (
+        <div className={`flex items-center gap-x-6 border-2 ${borderColor} px-6 py-5 rounded-md transition-color duration-200 cursor-pointer`} onClick={handleClick}>
+            <Toggle value={enabled} onToggle={handleClick} scale={1.2} onColor={enabledBgColor} />
+
+            <span className="flex gap-x-20">
+                <span className={`font-manrope font-bold text-3xl ${titleColor}`}>{children}</span>
+            </span>
+        </div>
+    );
+};
diff --git a/src/renderer/components/Modal/index.tsx b/src/renderer/components/Modal/index.tsx
@@ -8,6 +8,7 @@ import "./index.css";
 import changelog from './../../../../.github/CHANGELOG.yaml';
 import * as packageInfo from '../../../../package.json';
 import { Button, ButtonType } from "renderer/components/Button";
+import { CompactYesNoOptionToggle } from './AutostartDialog';
 
 interface ModalContextInterface{
     showModal: (modal: JSX.Element) => void;
@@ -122,16 +123,7 @@ export const PromptModal: FC<PromptModalProps> = ({
             )}
 
             {dontShowAgainSettingName && (
-                <div className="w-auto gap-x-4 mt-8">
-                    <input
-                        type="checkbox"
-                        checked={checkMark}
-                        onChange={() => setCheckMark(!checkMark)}
-                        className=" w-5 h-5 rounded-sm checked:bg-blue-600 checked:border-transparent"
-                    />
-
-                    <span className="ml-2 text-2xl">Don't show me this again</span>
-                </div>
+                <DoNotAskAgain checked={checkMark} toggleChecked={() => setCheckMark((old) => !old)} />
             )}
 
             <div className="flex flex-row mt-8 gap-x-4">
@@ -270,8 +262,20 @@ export const ChangelogModal: React.FC = () => {
     );
 };
 
-export const ModalContainer: FC = () => {
+interface DoNotAskAgainProps {
+    checked: boolean,
+    toggleChecked: () => void,
+}
 
+const DoNotAskAgain: FC<DoNotAskAgainProps> = ({ checked, toggleChecked }) => (
+    <div className="w-auto gap-x-4 mt-8">
+        <CompactYesNoOptionToggle enabled={checked} onToggle={toggleChecked} enabledBgColor="bg-cyan">
+                Don't show this again
+        </CompactYesNoOptionToggle>
+    </div>
+);
+
+export const ModalContainer: FC = () => {
     const onVersionChanged = () => {
         const { showModal } = useModals();
 
@@ -280,6 +284,7 @@ export const ModalContainer: FC = () => {
             showModal(<ChangelogModal/>);
         }
     };
+
     onVersionChanged();
     const { modal } = useModals();