From c20645171ed2cd65007b63c802760eede83dc19c Mon Sep 17 00:00:00 2001 From: devvsakib Date: Wed, 31 Jul 2024 11:41:23 +0600 Subject: [PATCH] card color issue fixed --- package.json | 1 + src/components/Error/Error.jsx | 2 +- src/components/Error/ErrorCard.jsx | 4 +- src/components/Error/ErrorType.jsx | 18 ++++++-- src/components/Error/ModalSolutions.jsx | 10 ++-- src/components/Error/css/style.css | 3 +- src/components/Search/SearchInput.jsx | 61 ++++++++++++------------- src/data/error.json | 2 +- src/hooks/useColorBorderBox.js | 42 +++++++---------- tailwind.config.cjs | 10 +++- 10 files changed, 80 insertions(+), 73 deletions(-) diff --git a/package.json b/package.json index 191dc56..4567c49 100644 --- a/package.json +++ b/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", diff --git a/src/components/Error/Error.jsx b/src/components/Error/Error.jsx index bed7a49..2aab25b 100644 --- a/src/components/Error/Error.jsx +++ b/src/components/Error/Error.jsx @@ -38,7 +38,7 @@ const Error = ({ search, type }) => { }} > -
+
{filteredErrorByType.length === 0 ? (

diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx index cebe658..c630885 100644 --- a/src/components/Error/ErrorCard.jsx +++ b/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 (

{error.title}

diff --git a/src/components/Error/ErrorType.jsx b/src/components/Error/ErrorType.jsx index f3a199d..51c23f5 100644 --- a/src/components/Error/ErrorType.jsx +++ b/src/components/Error/ErrorType.jsx @@ -1,10 +1,20 @@ -import useColorBorderBox from "../../hooks/useColorBorderBox"; - function ErrorType({ type }) { - const { errorTypeColor } = useColorBorderBox(type) return ( {type} diff --git a/src/components/Error/ModalSolutions.jsx b/src/components/Error/ModalSolutions.jsx index d56eab4..6f811ad 100644 --- a/src/components/Error/ModalSolutions.jsx +++ b/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: { diff --git a/src/components/Error/css/style.css b/src/components/Error/css/style.css index cd7b97a..9fc69d5 100644 --- a/src/components/Error/css/style.css +++ b/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; diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx index ec3469e..c1c1735 100644 --- a/src/components/Search/SearchInput.jsx +++ b/src/components/Search/SearchInput.jsx @@ -52,23 +52,21 @@ function SearchInput({ search, setSearch, setType }) { {errorType.map((item, i) => (
  • { setSelectedTag(item); setType(item); @@ -97,30 +95,27 @@ function SearchInput({ search, setSearch, setType }) { transition={{ duration: 0.5 }} >
      {errorType.map((item, i) => (
    • { setSelectedTag(item); setType(item); @@ -137,7 +132,7 @@ function SearchInput({ search, setSearch, setType }) {
    • )}

    - + ); } diff --git a/src/data/error.json b/src/data/error.json index 21e8112..49b8678 100644 --- a/src/data/error.json +++ b/src/data/error.json @@ -166,7 +166,7 @@ "type": "branch", "title": "error: You have local changes to ; 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 ':'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 ':'-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.' { + 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; \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 50a93e8..e79766a 100644 --- a/tailwind.config.cjs +++ b/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: {