stash commit

frontend/app/user/components/ApiKeyConfig/ApiKeyConfig.tsx

@@ -3,9 +3,9 @@
 
 import { useTranslation } from "react-i18next";
 
-import Button from "@/lib/components/ui/Button";
 import { CopyButton } from "@/lib/components/ui/CopyButton";
 import { FieldHeader } from "@/lib/components/ui/FieldHeader/FieldHeader";
+import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
 
 import styles from "./ApiKeyConfig.module.scss";
 import { useApiKeyConfig } from "./hooks/useApiKeyConfig";
@@ -18,13 +18,12 @@ export const ApiKeyConfig = (): JSX.Element => {
     <div>
       <FieldHeader iconName="key" label={`Quivr ${t("apiKey")}`} />
       {apiKey === "" ? (
-        <Button
-          data-testid="create-new-key"
-          variant="secondary"
+        <QuivrButton
+          color="primary"
+          iconName="key"
+          label="Create API Key"
           onClick={() => void handleCreateClick()}
-        >
-          Create New Key
-        </Button>
+        ></QuivrButton>
       ) : (
         <div className={styles.response_wrapper}>
           <span>{apiKey}</span>

frontend/app/user/components/StripePricingOrManageButton.tsx

@@ -1,23 +1,21 @@
-import { useTranslation } from "react-i18next";
-
 import { StripePricingModal } from "@/lib/components/Stripe";
-import Button from "@/lib/components/ui/Button";
+import QuivrButton from "@/lib/components/ui/QuivrButton/QuivrButton";
 import { useUserData } from "@/lib/hooks/useUserData";
 
-const MANAGE_PLAN_URL = process.env.NEXT_PUBLIC_STRIPE_MANAGE_PLAN_URL;
-
 export const StripePricingOrManageButton = (): JSX.Element => {
-  const { t } = useTranslation("monetization");
   const { userData } = useUserData();
 
   const is_premium = userData?.is_premium ?? false;
-  if (is_premium) {
-    return (
-      <a href={MANAGE_PLAN_URL} target="_blank" rel="noopener">
-        <Button className="w-full">{t("manage_plan")}</Button>
-      </a>
-    );
-  }
 
-  return <StripePricingModal Trigger={<Button>{t("upgrade")}</Button>} />;
+  return (
+    <StripePricingModal
+      Trigger={
+        <QuivrButton
+          iconName="star"
+          label={is_premium ? "Manage my plan" : "Upgrade my plan"}
+          color="gold"
+        ></QuivrButton>
+      }
+    />
+  );
 };

frontend/lib/components/ui/QuivrButton/QuivrButton.module.scss

@@ -40,6 +40,16 @@
     }
   }
 
+  &.gold {
+    border-color: Colors.$gold;
+    color: Colors.$gold;
+
+    &:hover {
+      background-color: Colors.$gold;
+      color: Colors.$white;
+    }
+  }
+
   &.disabled {
     border-color: Colors.$normal-grey;
     pointer-events: none;

frontend/lib/components/ui/QuivrButton/QuivrButton.tsx

@@ -27,7 +27,7 @@ export const QuivrButton = ({
       ${hidden ? styles.hidden : ""}
       `}
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
-      onClick={() => onClick()}
+      onClick={() => onClick?.()}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >

frontend/lib/types/QuivrButton.ts

@@ -7,7 +7,7 @@ export interface ButtonType {
   color: Color;
   isLoading?: boolean;
   iconName: keyof typeof iconList;
-  onClick: () => void | Promise<void>;
+  onClick?: () => void | Promise<void>;
   disabled?: boolean;
   hidden?: boolean;
 }