Merge pull request #10 from shefing/designLineDefination

design the line definition and little numbers line
shefing · Jan 21, 2024 · 405e3f5 · 405e3f5
2 parents e60a9d4 + b1d0843
commit 405e3f5
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 16 deletions.
diff --git a/src/assets/icons/menuButtonClose.svg b/src/assets/icons/menuButtonClose.svg
diff --git a/src/assets/icons/menuButtonOpen.svg b/src/assets/icons/menuButtonOpen.svg
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -2,7 +2,7 @@ import LineDefinition from "./toolbar/LineDefinition";
 
 const Toolbar = () => {
   return (
-    <div className="flex justify-between bg-sky-100 absolute w-full top-0 left-0 ">
+    <div className="flex justify-between bg-sky-100 absolute w-full top-0 left-0 h-[9%] ">
       <div className="flex-none">{/* TODO: add butotns */}</div>
       <div className="flex ">{/* TODO: add butotns */}</div>
       <div className="flex-none">

diff --git a/src/components/ruler/Numbers.tsx b/src/components/ruler/Numbers.tsx
@@ -19,9 +19,9 @@ const Numbers = ({ labels, startIndex, setStartIndex }: IProps) => {
       {labels.slice(startIndex, startIndex + 21).map((label) => (
         <div
           key={label}
-          className={`text-xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
+          className={` text-2xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
         >
-          <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
+          <div className="h-3 border-l-4 border-gray-900 w-1366 flex-shrink-0" />
           {label}
         </div>
       ))}

diff --git a/src/components/ruler/XAxis.tsx b/src/components/ruler/XAxis.tsx
@@ -13,12 +13,12 @@ const XAxis = ({ labels }: IProps) => {
       {labels.length == 101 ? (
         <>
           <Arrows startIndex={startIndex} setStartIndex={setStartIndex} />
-          <div className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+          <div className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
             <Numbers labels={labels} startIndex={startIndex} setStartIndex={setStartIndex} />
           </div>
         </>
       ) : (
-        <div className="fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+        <div className="fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
           <Numbers labels={labels} startIndex={startIndex} setStartIndex={setStartIndex} />
         </div>
       )}

diff --git a/src/components/toolbar/LineDefinition.tsx b/src/components/toolbar/LineDefinition.tsx
@@ -2,6 +2,9 @@ import { useState } from "react";
 import { Button } from "../ui/button";
 import { LineRange } from "../../type/Line";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
+import openMenu from "../../assets/icons/menuButtonOpen.svg";
+import closeMenu from "../../assets/icons/menuButtonClose.svg";
+
 
 const LineDefinition = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -18,44 +21,63 @@ const LineDefinition = () => {
   };
 
   return (
-    <div className="relative">
-      <Button className={`m-1 text-xl font-bold ${isMenuOpen ? "text-blue-600" : "text-sky-600"}`} variant="ghost" onClick={handleButtonClick}>
-        <span className="mr-3">&#x25BC;</span> הגדרת הישר
+    <div className=" absolute m-2 relative  rounded-md" style={isMenuOpen ? { background: "#009FDE" } : { background: "var(--cyan-100)" }}>
+      <Button
+        className={`m-4 mb-0 mr-0 w-259 text-xl font-bold ${isMenuOpen && "text-white bg-sky-100"}`}
+        variant="ghost"
+        onClick={handleButtonClick}
+        style={isMenuOpen ? { background: "#009FDE" } : { background: "var(--cyan-100)" }}
+      >
+        <img className="m-5" src={isMenuOpen ? closeMenu : openMenu} alt="open/close" />
+        <div
+          className="ml-6  text-capitalize font-Abraham text-32 font-normal "
+          style={
+            isMenuOpen
+              ? { color: "#ffffff", fontFamily: "Abraham", fontSize: "26px", fontWeight: 700 }
+              : { color: "#009FDE", fontFamily: "Abraham", fontSize: "26px", fontWeight: 700 }
+          }
+        >
+          הגדרת הישר
+        </div>
       </Button>
 
       {isMenuOpen && (
-        <div className="absolute top-8 right-0 bg-sky-100 border border-gray-300 rounded-md p-2">
+        <div className="flex flex-col items-end mt-0 rounded-tl-5 right-0  rounded-md p-2 m-2" style={{ background: "#009FDE" }}>
           <Button
-            className="block mb-2 text-blue-600 font-bold"
+            className="bg-white text-block mb-4 mt-6 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.ten);
             }}
           >
-            0 -10
+            0 - 10
           </Button>
           <Button
-            className="block mb-2 text-blue-600 font-bold"
+            className="bg-white text-block mb-4 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.twenty);
             }}
           >
             0 - 20
           </Button>
           <Button
-            className="block mb-2 text-blue-600 font-bold"
+            className="bg-white text-block mb-4 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.hundred);
             }}
           >
-            0 - 100 (קפיצות של 1)
+            (קפיצות של 1) 100 - 0
           </Button>
           <Button
-            className="block text-blue-600 font-bold"
+            className="bg-white text-block mb-4 hover:bg-sky-100 transition"
+            style={{ borderRadius: "20px", fontFamily: "Abraham", fontSize: "20px", fontWeight: 800 }}
             onClick={() => {
               handleMenuButtonClick(LineRange.hundredCircular);
             }}
           >
-            O0 - 100 (קפיצות של 10)
+            (קפיצות של 10) 100 - 0
           </Button>
         </div>
       )}