feat: cc-0031 modify ruler btn

src/__tests__/components/EditorFooter/index.test.tsx

@@ -7,13 +7,14 @@ describe("EditorFooter", () => {
     const switchButton = screen.getByTestId("switch-btn");
     expect(switchButton).toBeInTheDocument();
   });
+
   it("should toggle between on and off", () => {
     const { getByTestId } = render(<EditorFooter />);
     const switchButton = getByTestId("switch-btn");
     fireEvent.click(switchButton);
-    expect(getByTestId("ruler-label")).toHaveTextContent("Ruler off");
+    expect(getByTestId("ruler-label")).toHaveTextContent("Ruler Off");
     fireEvent.click(switchButton);
-    expect(getByTestId("ruler-label")).toHaveTextContent("Ruler on");
+    expect(getByTestId("ruler-label")).toHaveTextContent("Ruler On");
   });
   it("Each button in the navbar needs to display the correct text", () => {
     render(<EditorFooter />);

src/components/EditorFooter/index.tsx

@@ -1,10 +1,10 @@
-import React from "react";
 import { Box, Flex, IconButton, FormControl, Switch, FormLabel } from "@chakra-ui/react";
 import { HiOutlineZoomOut, HiOutlineZoomIn } from "react-icons/hi";
 import { BiHelpCircle } from "react-icons/bi";
+import { useState } from "react";
 
 const EditorFooter = () => {
-  const [rulerLabel, setRulerLabel] = React.useState("Ruler on");
+  const [ruler, setRuler] = useState("Ruler On");
   return (
     <Flex
       position="fixed"
@@ -38,26 +38,28 @@ const EditorFooter = () => {
       <Flex gap={8}>
         <FormControl display="flex" alignItems="center">
           <FormLabel
-            htmlFor="ruler-swith-btn"
+            htmlFor="ruler-switch-btn"
             mb="0"
             color="brand.primary"
             data-testid="ruler-label"
+            w="70px"
           >
-            {rulerLabel}
+            {ruler}
           </FormLabel>
           <Switch
-            id="ruler-swith-btn"
+            id="ruler-switch-btn"
             colorScheme="footerSwitch"
+            className="custom-switch"
             sx={{
               "span:first-child": {
                 bgColor: "brand.primary",
               },
             }}
             defaultChecked
+            data-testid="switch-btn"
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setRulerLabel(e.target.checked ? "Ruler on" : "Ruler off")
+              setRuler(e.target.checked ? "Ruler On" : "Ruler Off")
             }
-            data-testid="switch-btn"
           />
         </FormControl>
         <IconButton

src/pages/style.css

@@ -16,4 +16,8 @@
     height: 15px;
     border-radius: 5px;  
     background-color: #ABABAD;  
-    }  
+    }  
+
+.custom-switch .chakra-switch__track[data-focus]{
+    box-shadow: none;
+}