fix #232

package.json

@@ -14,6 +14,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "antd": "^5.19.1",
     "axios": "^1.2.2",
+    "classnames": "^2.5.1",
     "framer-motion": "^10.8.3",
     "lodash": "^4.17.21",
     "prettier": "^3.3.3",

src/components/Error/Error.jsx

@@ -38,7 +38,7 @@ const Error = ({ search, type }) => {
           }}
         ></Toaster>
       </div>
-      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto ">
+      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 px-5 md:px-0 justify-center gap-8 md:mx-auto ">
         {filteredErrorByType.length === 0 ? (
           <div className="col-span-12">
             <h1 className="text-center text-2xl text-gray-500 mx-auto">

src/components/Error/ErrorCard.jsx

@@ -13,12 +13,12 @@ function ErrorCard({ error }) {
   const [readMore, setReadMore] = useState(false);
   const [isOpenModal, setOpenModal] = useState(false);
   const [solution, setSolution] = useState("");
-  const { errorTypeColor } = useColorBorderBox(error.type)
+  const { borderColor } = useColorBorderBox(error)
 
   return (
     <div
       id="main-div"
-      className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}]`}
+      className={borderColor}
     >
       <h3 className="title">{error.title}</h3>
 

src/components/Error/ErrorType.jsx

@@ -1,10 +1,20 @@
-import useColorBorderBox from "../../hooks/useColorBorderBox";
-
 function ErrorType({ type }) {
-  const { errorTypeColor } = useColorBorderBox(type)
   return (
     <span
-      className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative block before:bg-[${errorTypeColor}]`}
+      className={`before:block mb-3 mt-1 top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative inline-block ${type === "add"
+        ? "before:bg-add"
+        : type === "commit"
+          ? "before:bg-commit"
+          : type === "merge"
+            ? "before:bg-merge"
+            : type === "push"
+              ? "before:bg-push"
+              : type === "branch"
+                ? "before:bg-branch"
+                : type === "cmd"
+                  ? "before:bg-cmd"
+                  : "before:bg-default"
+        }`}
     >
       <span className="relative text-sm -top-1">{type}</span>
     </span>

src/components/Error/ModalSolutions.jsx

@@ -1,4 +1,4 @@
-import React,{ useContext } from "react";
+import React, { useContext } from "react";
 import { MdKeyboardArrowLeft, MdContentCopy } from "react-icons/md";
 import ErrorSolutions from "./ErrorSolutions";
 import useColorBorderBox from "../../hooks/useColorBorderBox";
@@ -10,10 +10,10 @@ import { ThemeContext } from '../../context/ThemeContext';
 Modal.setAppElement("#root");
 
 const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
-  const { errorTypeColor } = useColorBorderBox(error.type);
+  const { borderColor } = useColorBorderBox(error)
   const { theme } = useContext(ThemeContext);
-  const overlayBackgroundColor = theme === 'dark' 
-    ? 'rgba(0, 0, 0, 0.6)' 
+  const overlayBackgroundColor = theme === 'dark'
+    ? 'rgba(0, 0, 0, .5)'
     : 'rgba(0, 0, 0, 0.2)';
 
   return (
@@ -24,7 +24,7 @@ const ModalSolutions = ({ isOpen, setOpenModal, error }) => {
         () => setOpenModal((prev) => !prev)
       }
       contentLabel="Modal solution"
-      className={`py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 border-[${errorTypeColor}] modal`}
+      className={borderColor + " modal !bg-black/80 max-h-[90vh] "}
       id="main-div"
       style={{
         overlay: {

src/components/Error/css/style.css

@@ -7,7 +7,8 @@ h3 {
 
 #scroll-solution{
   overflow-y:scroll;
-  height: 100px;
+  min-height: 100px;
+  max-height: 90vh;
   width: 100%;
   padding: 0px 10px 0px 10px;
   text-align: left;

src/components/Search/SearchInput.jsx

@@ -52,23 +52,21 @@ function SearchInput({ search, setSearch, setType }) {
             {errorType.map((item, i) => (
               <li
                 key={i}
-                className={`${
-                  item === "add"
-                    ? "bg-[#4024e0]"
+                className={`${item === "add"
+                    ? "bg-add"
                     : item === "commit"
-                      ? "bg-[#1a5ba5]"
+                      ? "bg-commit"
                       : item === "merge"
-                        ? "bg-[#118d7c]"
+                        ? "bg-merge"
                         : item === "push"
-                          ? "bg-[#8d54e1]"
+                          ? "bg-push"
                           : item === "cmd"
-                            ? "bg-[#e100ff]"
+                            ? "bg-cmd"
                             : item === "branch"
-                              ? "bg-[#099104]"
-                              : "bg-[#7e1aa5]"
-                } ${
-                  selectedTag === item ? "ring-4 ring-red-500" : ""
-                } w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
+                              ? "bg-branch"
+                              : "bg-default"
+                  } ${selectedTag === item ? "ring-4 ring-red-500" : ""
+                  } w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
                 onClick={() => {
                   setSelectedTag(item);
                   setType(item);
@@ -97,30 +95,27 @@ function SearchInput({ search, setSearch, setType }) {
                   transition={{ duration: 0.5 }}
                 >
                   <ul
-                    className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${
-                      open ? "hidden" : "block"
-                    }`}
+                    className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${open ? "hidden" : "block"
+                      }`}
                   >
                     {errorType.map((item, i) => (
                       <li
                         key={i}
-                        className={`${
-                          item === "add"
-                            ? "bg-[#4024e0]"
-                            : item === "commit"
-                              ? "bg-[#1a5ba5]"
-                              : item === "merge"
-                                ? "bg-[#118d7c]"
-                                : item === "push"
-                                  ? "bg-[#8d54e1]"
-                                  : item === "cmd"
-                                    ? "bg-[#40f058a8]"
-                                    : item === "branch"
-                                      ? "bg-[#099104]"
-                                      : "bg-[#7e1aa5]"
-                        } ${
-                          selectedTag === item ? "ring-4 ring-red-500" : ""
-                        } w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
+                        className={`${item === "add"
+                          ? "bg-[#4024e0]"
+                          : item === "commit"
+                            ? "bg-[#1a5ba5]"
+                            : item === "merge"
+                              ? "bg-merge"
+                              : item === "push"
+                                ? "bg-push"
+                                : item === "cmd"
+                                  ? "bg-[#40f058a8]"
+                                  : item === "branch"
+                                    ? "bg-branch"
+                                    : "bg-default"
+                          } ${selectedTag === item ? "ring-4 ring-red-500" : ""
+                          } w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
                         onClick={() => {
                           setSelectedTag(item);
                           setType(item);
@@ -137,7 +132,7 @@ function SearchInput({ search, setSearch, setType }) {
           </div>
         )}
       </div>
-    </div>
+    </div >
   );
 }
 

src/data/error.json

@@ -166,7 +166,7 @@
       "type": "branch",
       "title": "error: You have local changes to <branch_name>; cannot switch branches.",
       "description": "This error occurs when switching a branch without commiting the changes made to that branch",
-      "solutions": "[{'git stash':'stash your current changes'},{'git reset --hard HEAD':'if you dont' mind losing those minor changes'},{'git checkout -b <branch_name>':'When switching branches, proceed even if the index or the working tree differs from HEAD. This is used to throw away local changes.'},{'git switch -f <branch-name>':'-f is short for --force, which is an alias for --discard-changes , works for git 2.23'}]"
+      "solutions": "git stash :'stash your current changes' < git reset --hard HEAD :'if you dont' mind losing those minor changes' < git checkout -b branch_name :'When switching branches, proceed even if the index or the working tree differs from HEAD. This is used to throw away local changes.'<git switch -f branch-name :'-f is short for --force, which is an alias for --discard-changes , works for git 2.23'"
     },
     {
       "type": "push",

src/hooks/useColorBorderBox.js

@@ -1,29 +1,21 @@
-import { useState, useEffect } from "react";
+const useColorBorderBox = (error = "") => {
+  let item = error.type;
+  let borderColor = `py-4 mb-4 col-span-12 md:col-span-6 xl:col-span-4 px-2 md:px-6 border-l-4 rounded-lg   items-start bg-dark/5 dark:bg-white/5 backdrop-blur-[10px] flex flex-col hover:scale-105 duration-300 ${item === "add"
+    ? "border-add"
+    : item === "commit"
+      ? "border-commit"
+      : item === "merge"
+        ? "border-merge"
+        : item === "push"
+          ? "border-push"
+          : item === "cmd"
+            ? "border-cmd"
+            : item === "branch"
+              ? "border-branch"
+              : "border-default"
+    }`
 
-const useColorBorderBox = (errorType = "") => {
-  const [errorTypeColor, setErrorTypeColor] = useState("#7e1aa5");
 
-  useEffect(() => {
-    if (errorType == "add") {
-      return setErrorTypeColor("#4024e0");
-    }
-    if (errorType == "branch") {
-      return setErrorTypeColor("#099104");
-    }
-    if (errorType == "push") {
-      return setErrorTypeColor("#8d54e1");
-    }
-    if (errorType == "merge") {
-      return setErrorTypeColor("#118d7c");
-    }
-    if (errorType == "commit") {
-      return setErrorTypeColor("#1a5ba5");
-    }
-    return setErrorTypeColor("#7e1aa5");
-  }, [errorType]);
-
-
-  return { errorTypeColor, setErrorTypeColor };
+  return { borderColor }
 }
-
 export default useColorBorderBox;

tailwind.config.cjs

@@ -12,7 +12,15 @@ module.exports = {
         white: "#F4F7F5",
         gray: "#A7A2A9",
         dark: "#1E1E1F",
-        "dark-secondary": "#28282A",
+        darkSecondary: "#28282A",
+        branch: "#099104",
+        cmd: "#e100ff",
+        add: "#4024e0",
+        pull: "#4024e0",
+        commit: "#1a5ba5",
+        merge: "#118d7c",
+        push: "#8d54e1",
+        default: "#7e1aa5",
       },
       typography: (theme) => ({
         DEFAULT: {