Merge pull request #536 from DhairyaMajmudar/shadcn/button

Feat: Converting HTML buttons into Shadcn Buttons
vitessio · Apr 30, 2024 · e8a071e · e8a071e
2 parents 85cc5af + d63069c
commit e8a071e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/website/src/common/Dropdown.tsx b/website/src/common/Dropdown.tsx
@@ -17,6 +17,7 @@ import React, { useEffect, useRef, useState } from "react";
 import useClickOutside from "../hooks/useClickOutside";
 import Icon from "../common/Icon";
 import { twMerge } from "tailwind-merge";
+import { Button } from "@/components/ui/button";
 
 function Container(props) {
   const [open, setOpen] = useState(false);
@@ -45,11 +46,12 @@ function Container(props) {
   }, [selectedIndex]);
 
   return (
-    <div ref={ref} className="relative">
-      <button
+    <div ref={ref} className="relative flex gap-2">
+      <Button
+        variant="outline"
         onClick={() => setOpen(!open)}
         className={twMerge(
-          "flex items-center justify-center duration-inherit",
+          "flex items-center h-full justify-center duration-inherit hover:bg-transparent",
           props.className
         )}
       >
@@ -61,7 +63,8 @@ function Container(props) {
             open && "rotate-180"
           )}
         />
-      </button>
+      </Button>
+
       <>
         <div
           className={twMerge(
@@ -89,12 +92,12 @@ function Container(props) {
 
 function Option(props) {
   return (
-    <button
-      className={twMerge("", props.className, props.isSelected && "bg-primary")}
+    <Button
+      className={twMerge("dark:text-white text-black", props.className, props.isSelected && "bg-primary")}
       onClick={props.onClick}
     >
       {props.children}
-    </button>
+    </Button>
   );
 }
 

diff --git a/website/src/pages/MacroQueriesComparePage/components/QueryPlan.tsx b/website/src/pages/MacroQueriesComparePage/components/QueryPlan.tsx
@@ -21,6 +21,7 @@ import "react-json-pretty/themes/monikai.css";
 import { twMerge } from "tailwind-merge";
 import useModal from "../../../hooks/useModal";
 import Icon from "../../../common/Icon";
+import { Button } from "@/components/ui/button";
 
 export default function QueryPlan({ data }) {
   const modal = useModal();
@@ -76,12 +77,13 @@ function DetailsModal({ data }) {
 
   return (
     <div className="w-[80vw] h-[80vh] overflow-y-auto overflow-x-hidden p-5 rounded-xl bg-background border border-front flex flex-col overscroll-contain relative pb-10">
-      <button
+      <Button
+        variant="outline"
         className="sticky self-end top-2 right-2 w-max duration-300 hover:scale-125 hover:text-primary text-3xl"
         onClick={modal.hide}
       >
         <Icon icon="close" />
-      </button>
+      </Button>
 
       <div className="flex flex-col items-center gap-y-6">
         <h3 className="text-primary text-3xl my-2 font-medium">Statistics</h3>