fix: Rename ambiguous color names in plugin card

Author: HusseinSerag

src/components/Plugins/PluginCard.tsx

@@ -5,7 +5,7 @@ type PluginCardProps = {
   plugin: Plugin;
 }
 export function PluginCard({ plugin }: PluginCardProps) {
-	return <section className="border gap-4 flex flex-col max-w-[314px]  hover:scale-[1.01]   p-4 pt-6 m-auto w-full border-[#27272A] rounded-md min-h-[300px]">
+	return <section className="border gap-4 flex flex-col max-w-[314px]  hover:scale-[1.01]   p-4 pt-6 m-auto w-full border-card-border rounded-md h-[300px]">
 		<div className="flex-1 flex flex-col gap-4">
 			<div>
 				<div>
@@ -27,7 +27,7 @@ export function PluginCard({ plugin }: PluginCardProps) {
 				Read more
 			</button>
 
-			<button className="bg-[#6d28d9] text-[12px] flex justify-center items-center gap-1  px-4 pt-[6px] pb-[7px] rounded-md text-white"><span>
+			<button className="bg-brand-purple text-[12px] flex justify-center items-center gap-1  px-4 pt-[6px] pb-[7px] rounded-md text-white"><span>
 				View in NPM 
 			</span>
 				<ExternalLink className="w-4" /></button>

src/pages/LoginProcess.tsx

@@ -10,7 +10,7 @@ const LoginProcessPage = () => {
 	const { setUserData, setIsLoggedIn } = useAuth();
 	const navigate = useNavigate();
 	const location = useLocation();
-  const [gracetime, setgracetime] = useState(false)
+	const [gracetime, setgracetime] = useState(false)
 
 	// Retrieve provider and key from query params to be used for getting user data
 	const queryParams = new URLSearchParams(location.search);
@@ -28,26 +28,26 @@ const LoginProcessPage = () => {
 			setUserData(data);
 			setIsLoggedIn(true);
 			const redirectUri = localStorage.getItem('login_redirect_uri');
-      if(gracetime){
-        //keep waiting until gracetime ends
-        return;
-      }
+			if(gracetime){
+				//keep waiting until gracetime ends
+				return;
+			}
 			if (redirectUri) {
 				window.location.href = redirectUri;
 			} else {
 				navigate('/themes');
 			}
 		}
 	}, [loading, error, data, gracetime]);
-  useEffect(()=> {
-    if(loading){
-      setgracetime(true)
-      setTimeout(() => {
-        //allow the spinner to remove from render once the gracetime elapses
-        setgracetime(false)
-      }, SiteConfig.loginSpinnerGraceTime);
-    }
-  }, [loading])
+	useEffect(()=> {
+		if(loading){
+			setgracetime(true)
+			setTimeout(() => {
+				//allow the spinner to remove from render once the gracetime elapses
+				setgracetime(false)
+			}, SiteConfig.loginSpinnerGraceTime);
+		}
+	}, [loading])
 	return (
 		<div className="h-screen w-full bg-black flex justify-center items-center">
 			{(loading || gracetime) && <LoadingSpinner />}

src/pages/Plugins.tsx

@@ -27,7 +27,7 @@ const Plugins: React.FC = () => {
 							return <PluginCard key={plugin.id} plugin={plugin} />
 						})}
 				</div>
-        {!isLoading && error && <h1 className='text-white text-lg flex items-center justify-center '>{error}</h1>
+				{!isLoading && error && <h1 className='text-white text-lg flex items-center justify-center '>{error}</h1>
 	 }
 				{
 					!error && !isLoading && plugins.length == 0 &&

tailwind.config.js

@@ -55,7 +55,8 @@ export default {
 				'black': '#000000',
 				'white': '#ffffff',
 				'slate-400': '#94a3b8',
-				'slate-500': '#64748b'
+				'slate-500': '#64748b',
+        'card-border': '#27272A'
       },
       keyframes: {
 				wiggle: {