chore: update the design of the next button

json-schema-org · Aug 24, 2024 · dcc2635 · dcc2635
1 parent 43cdfc4
commit dcc2635
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 24 deletions.
diff --git a/app/components/CodeEditor/CodeEditor.tsx b/app/components/CodeEditor/CodeEditor.tsx
@@ -6,8 +6,8 @@ import { GeistMono } from "geist/font/mono";
 import Editor, { useMonaco } from "@monaco-editor/react";
 import { Flex, useColorMode } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import SmallBtn from "../SmallBtn";
-import { CodeFile } from "@/lib/types";
+import MyBtn from "../MyBtn";
+import { CodeFile, OutputResult } from "@/lib/types";
 import { OutputReducerAction } from "@/lib/reducers";
 import { validateCode } from "@/lib/client-functions";
 import FiChevronRight from "@/app/styles/icons/HiChevronRightGreen";
@@ -23,6 +23,7 @@ export default function CodeEditor({
   nextStepPath,
   stepIndex,
   chapterIndex,
+  outputResult,
 }: {
   codeString: string;
   setCodeString: (codeString: string) => void;
@@ -31,6 +32,7 @@ export default function CodeEditor({
   nextStepPath: string | undefined;
   stepIndex: number;
   chapterIndex: number;
+  outputResult: OutputResult;
 }) {
   const { colorMode } = useColorMode();
   const [monaco, setMonaco] = useState<any>(null);
@@ -93,8 +95,8 @@ export default function CodeEditor({
         />
       </div>
       <div className={styles.buttonsWrapper}>
-        <Flex dir="row" gap={"8px"}>
-          <SmallBtn
+        <Flex dir="row" gap={"8px"} alignItems={"end"}>
+          <MyBtn
             onClick={async () =>
               validateCode(
                 codeString,
@@ -104,32 +106,43 @@ export default function CodeEditor({
                 chapterIndex,
               )
             }
-            variant={"default"}
+            variant={
+              outputResult.validityStatus === "valid" ? "success" : "default"
+            }
             tooltip="Shift + Enter"
           >
             Validate
-          </SmallBtn>
+          </MyBtn>
 
-          <SmallBtn
+          <MyBtn
             onClick={() => {
               setCodeString(JSON.stringify(codeFile.code, null, 2));
               dispatchOutput({ type: "RESET" });
             }}
             variant={"error"}
           >
             Reset
-          </SmallBtn>
+          </MyBtn>
         </Flex>
-        <SmallBtn
+        <MyBtn
           onClick={() => {
             if (nextStepPath) router.push("/" + nextStepPath);
           }}
-          variant={"success"}
+          variant={
+            outputResult.validityStatus === "valid" ? "default" : "success"
+          }
           isDisabled={!nextStepPath}
+          size={outputResult.validityStatus === "valid" ? "sm" : "xs"}
         >
-          Next
-          <FiChevronRight />
-        </SmallBtn>
+          Next <span style={{ marginLeft: "4px" }}></span>
+          <FiChevronRight
+            color={
+              outputResult.validityStatus === "valid"
+                ? "white"
+                : "hsl(var(--success))"
+            }
+          />
+        </MyBtn>
       </div>
     </>
   );

diff --git a/app/components/EditorNOutput/EditorNOutput.tsx b/app/components/EditorNOutput/EditorNOutput.tsx
@@ -92,6 +92,7 @@ export default function EditorNOutput({
           nextStepPath={nextStepPath}
           stepIndex={stepIndex}
           chapterIndex={chapterIndex}
+          outputResult={output}
         />
       </Box>
       <div

diff --git a/app/components/SmallBtn/SmallBtn.tsx → app/components/MyBtn/MyBtn.tsx b/app/components/SmallBtn/SmallBtn.tsx → app/components/MyBtn/MyBtn.tsx
@@ -1,18 +1,20 @@
 import { Button, Tooltip } from "@chakra-ui/react";
 import { sendGAEvent } from "@next/third-parties/google";
 
-export default function SmallBtn({
+export default function MyBtn({
   children,
   variant,
   onClick,
   isDisabled,
   tooltip,
+  size = "xs",
 }: {
   children: React.ReactNode;
   variant: "success" | "error" | "default";
   onClick: () => void;
   isDisabled?: boolean;
   tooltip?: string;
+  size?: "xs" | "sm" | "md" | "lg";
 }) {
   return (
     <Tooltip label={tooltip} aria-label={tooltip} placement="top">
@@ -24,7 +26,7 @@ export default function SmallBtn({
             value: children?.toString(),
           });
         }}
-        size={"xs"}
+        size={size}
         width={"min-content"}
         textTransform={"uppercase"}
         isDisabled={isDisabled}

diff --git a/app/components/MyBtn/index.tsx b/app/components/MyBtn/index.tsx
@@ -0,0 +1 @@
+export { default as default } from "./MyBtn";
diff --git a/app/components/Output/Output.tsx b/app/components/Output/Output.tsx
@@ -3,7 +3,7 @@ import styles from "./Output.module.css";
 import classnames from "classnames";
 import { OutputResult } from "@/lib/types";
 import FailedTestCasesWindow from "../TestCaseWindow/TestCaseWindow";
-import SmallBtn from "../SmallBtn/SmallBtn";
+import MyBtn from "../MyBtn";
 import { InvalidSchemaError } from "@hyperjump/json-schema/draft-2020-12";
 import { schemaUrl } from "@/lib/validators";
 import KeyBindings from "../KeyBindings/KeyBindings";
@@ -92,9 +92,9 @@ function Output({
       <Flex dir="row" gap={1} paddingTop={2}>
         {" "}
         Please click the{" "}
-        <SmallBtn variant="default" onClick={() => {}}>
+        <MyBtn variant="default" onClick={() => {}}>
           validate
-        </SmallBtn>{" "}
+        </MyBtn>{" "}
         button or use <KeyBindings keys={["Shift", "Enter"]} /> to view the
         output
       </Flex>

diff --git a/app/components/SmallBtn/index.tsx b/app/components/SmallBtn/index.tsx
diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -42,7 +42,7 @@ html {
   --border-color-dark: var(--text-dark) / 0.2;
   --link-color-dark: 240 100% 87%;
   --error-dark: 0 100% 50%;
-  --success-dark: 120 100% 50%;
+  --success-dark: 120 90% 45%;
 }
 
 :root[data-theme="dark"] {

diff --git a/app/styles/icons/HiChevronRightGreen.tsx b/app/styles/icons/HiChevronRightGreen.tsx
@@ -1,10 +1,16 @@
 import React from "react";
 
-function Icon({ colorMode }: { colorMode?: "dark" | "light" }) {
+function Icon({
+  colorMode,
+  color,
+}: {
+  colorMode?: "dark" | "light";
+  color: string;
+}) {
   return (
     <svg
-      width="12"
-      height="12"
+      width="14"
+      height="14"
       viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -16,7 +22,7 @@ function Icon({ colorMode }: { colorMode?: "dark" | "light" }) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.83439 9.7656C3.68441 9.61557 3.60016 9.41213 3.60016 9.2C3.60016 8.98786 3.68441 8.78442 3.83439 8.6344L6.46879 6L3.83439 3.3656C3.68866 3.21471 3.60803 3.01263 3.60985 2.80288C3.61167 2.59312 3.69581 2.39247 3.84413 2.24414C3.99246 2.09581 4.19311 2.01168 4.40287 2.00986C4.61262 2.00803 4.81471 2.08867 4.96559 2.2344L8.16559 5.4344C8.31556 5.58442 8.39982 5.78786 8.39982 6C8.39982 6.21213 8.31556 6.41557 8.16559 6.5656L4.96559 9.7656C4.81557 9.91557 4.61212 9.99983 4.39999 9.99983C4.18786 9.99983 3.98441 9.91557 3.83439 9.7656Z"
-        fill="hsl(var(--success))"
+        fill={color}
       />
     </svg>
   );