chore: moved visual button to ui

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -3,8 +3,8 @@
 import { ConfirmPopover } from "@/components/confirmation-popover";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/toaster";
-import { ArrowRight, Check, CircleInfo, Eye, EyeSlash, Key2, Plus } from "@unkey/icons";
-import { Button, CopyButton, InfoTooltip } from "@unkey/ui";
+import { ArrowRight, Check, CircleInfo, Key2, Plus } from "@unkey/icons";
+import { Button, CopyButton, InfoTooltip, VisibleButton } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { UNNAMED_KEY } from "../create-key.constants";
@@ -228,14 +228,11 @@ export const KeyCreatedSuccessDialog = ({
                     </pre>
                   </div>
                   <div className="flex items-center justify-between gap-2 mt-1 flex-shrink-0">
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="bg-grayA-3 transition-all"
-                      onClick={() => setShowKeyInSnippet(!showKeyInSnippet)}
-                    >
-                      {showKeyInSnippet ? <EyeSlash /> : <Eye />}
-                    </Button>
+                    <VisibleButton
+                      isVisible={showKeyInSnippet}
+                      setIsVisible={(visible) => setShowKeyInSnippet(visible)}
+                      title="Key Snippet"
+                    />
                     <Button variant="outline" size="icon" className="bg-grayA-3">
                       <div className="flex items-center justify-center">
                         <CopyButton value={snippet} />

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/secret-key.tsx

@@ -1,8 +1,8 @@
 "use client"; // Keep if needed
 
 import { cn } from "@/lib/utils";
-import { CircleLock, Eye, EyeSlash } from "@unkey/icons";
-import { Button, CopyButton } from "@unkey/ui";
+import { CircleLock } from "@unkey/icons";
+import { Button, CopyButton, VisibleButton } from "@unkey/ui";
 import { useState } from "react";
 
 const maskKey = (key: string): string => {
@@ -22,11 +22,6 @@ export const SecretKey = ({
 
   const displayValue = isVisible ? value : maskKey(value);
 
-  const handleToggleVisibility = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsVisible(!isVisible);
-  };
-
   return (
     <div
       className={cn(
@@ -45,17 +40,11 @@ export const SecretKey = ({
           </p>
         </div>
         <div className="flex items-center justify-between gap-2 flex-shrink-0">
-          <Button
-            variant="outline"
-            size="icon"
-            className="bg-grayA-3 transition-all"
-            onClick={handleToggleVisibility}
-            aria-label={isVisible ? `Hide ${title}` : `Show ${title}`}
-            title={isVisible ? `Hide ${title}` : `Show ${title}`}
-          >
-            {isVisible ? <EyeSlash /> : <Eye />}
-          </Button>
-
+          <VisibleButton
+            isVisible={isVisible}
+            setIsVisible={(visible) => setIsVisible(visible)}
+            title={title}
+          />
           <Button
             variant="outline"
             size="icon"

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Code } from "@/components/ui/code";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
@@ -25,6 +24,7 @@ import {
   Checkbox,
   CopyButton,
   Input,
+  VisibleButton,
 } from "@unkey/ui";
 import { ChevronRight } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -293,7 +293,12 @@ export const Client: React.FC<Props> = ({ apis }) => {
             <Code className="flex items-center justify-between gap-4 my-8 ph-no-capture">
               {showKey ? key.data?.key : maskedKey}
               <div className="flex items-center justify-between gap-2">
-                <VisibleButton isVisible={showKey} setIsVisible={setShowKey} />
+                <VisibleButton
+                  isVisible={showKey}
+                  setIsVisible={setShowKey}
+                  variant="ghost"
+                  className="focus:ring-0"
+                />
                 <CopyButton value={key.data?.key ?? ""} />
               </div>
             </Code>
@@ -304,7 +309,12 @@ export const Client: React.FC<Props> = ({ apis }) => {
           </p>
           <Code className="flex flex-col items-start gap-2 w-full text-xs">
             <div className="w-full shrink-0 flex items-center justify-end gap-2">
-              <VisibleButton isVisible={showKeyInSnippet} setIsVisible={setShowKeyInSnippet} />
+              <VisibleButton
+                isVisible={showKeyInSnippet}
+                setIsVisible={setShowKeyInSnippet}
+                variant="ghost"
+                className="focus:ring-0"
+              />
               <CopyButton value={snippet} />
             </div>
             <div className="text-wrap">

apps/dashboard/app/new/keys.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Code } from "@/components/ui/code";
 import { trpc } from "@/lib/trpc/client";
@@ -15,6 +14,7 @@ import {
   CopyButton,
   Empty,
   Separator,
+  VisibleButton,
 } from "@unkey/ui";
 import { AlertCircle, KeyRound, Lock } from "lucide-react";
 import Link from "next/link";
@@ -77,7 +77,6 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
     "apiId": "${apiId}"
   }'
   `;
-
   function maskKey(key: string): string {
     if (key.length === 0) {
       return "";
@@ -150,7 +149,12 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
               <Code className="my-8 flex w-full items-center justify-between gap-4 max-sm:overflow-hidden max-sm:text-[9px]">
                 {showKey ? step.rootKey : maskKey(step.rootKey)}
                 <div className="flex items-start justify-between max-sm:absolute max-sm:right-16 md:gap-4">
-                  <VisibleButton isVisible={showKey} setIsVisible={setShowKey} />
+                  <VisibleButton
+                    isVisible={showKey}
+                    setIsVisible={setShowKey}
+                    variant="ghost"
+                    className="focus:ring-0"
+                  />
                   <CopyButton value={step.rootKey} />
                 </div>
               </Code>
@@ -168,7 +172,12 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
                     : createKeySnippet.replace(step.rootKey, maskKey(step.rootKey))}
                 </div>
                 <div className="flex items-start justify-between max-sm:absolute max-sm:right-16 md:gap-4">
-                  <VisibleButton isVisible={showKeyInSnippet} setIsVisible={setShowKeyInSnippet} />
+                  <VisibleButton
+                    isVisible={showKeyInSnippet}
+                    setIsVisible={setShowKeyInSnippet}
+                    variant="ghost"
+                    className="focus:ring-0"
+                  />
                   <CopyButton value={createKeySnippet} />
                 </div>
               </Code>
@@ -203,7 +212,12 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
                 <Code className="my-8 flex w-full items-center justify-between gap-4 max-sm:text-[9px]">
                   {showKey ? step.key : maskKey(step.key)}
                   <div className="flex items-start justify-between gap-4">
-                    <VisibleButton isVisible={showKey} setIsVisible={setShowKey} />
+                    <VisibleButton
+                      isVisible={showKey}
+                      setIsVisible={setShowKey}
+                      variant="ghost"
+                      className="focus:ring-0"
+                    />
                     <CopyButton value={step.key} />
                   </div>
                 </Code>
@@ -222,6 +236,8 @@ export const Keys: React.FC<Props> = ({ keyAuthId, apiId }) => {
                     <VisibleButton
                       isVisible={showKeyInSnippet}
                       setIsVisible={setShowKeyInSnippet}
+                      variant="ghost"
+                      className="focus:ring-0"
                     />
                   ) : null}
                   <CopyButton value={verifyKeySnippet} />

apps/engineering/app/global.css

@@ -1,3 +1,130 @@
 @tailwind base;
-@tailwind components;
-@tailwind utilities;
+
+@layer base {
+  :root {
+    --chart-selection: var(--accent-6);
+
+    --white: 0 0% 100%;
+    --black: 0 0% 0%;
+    --background: 60 9% 98%;
+    --background-subtle: 60 9% 94%;
+
+    --brand: 262 93% 58%;
+    --brand-foreground: 262 93% 90%;
+
+    --warn: 46, 97%, 65%;
+    --warn-foreground: 46, 97%, 15%;
+
+    --alert: 0 100% 65%;
+    --alert-foreground: 0 100% 98%;
+
+    --success: 152, 56%, 39%;
+
+    --primary: 24 10% 10%;
+    --primary-foreground: 24 10% 90%;
+
+    --secondary: 20 6% 94%;
+    --secondary-foreground: 0 0% 0%;
+
+    --content: 240 10% 3.9%;
+    --content-subtle: 240 3.8% 46.1%;
+
+    --content-warn: 46, 97%, 40%;
+    --content-alert: 0 84.2% 60.2%;
+
+    --border: 24, 6%, 83%;
+    --ring: 24, 6%, 83%;
+  }
+
+  .dark {
+    --chart-selection: var(--accent-9);
+
+    --white: 0 0% 100%;
+    --black: 0 0% 0%;
+
+    --background: 20 14% 2%;
+    --background-subtle: 24 10% 10%;
+
+    --brand: 25 95% 53%;
+    --brand-foreground: 25 95% 90%;
+
+    --warn: 46, 100%, 45%;
+    --warn-foreground: 46, 97%, 5%;
+
+    --alert: 0 100% 45%;
+    --alert-foreground: 0 100% 95%;
+
+    --success: 152, 56%, 39%;
+
+    --primary: 20 6% 94%;
+    --primary-foreground: 20 6% 10%;
+
+    --secondary: 24 10% 10%;
+    --secondary-foreground: 24 10% 100%;
+
+    --content: 240 10% 90%;
+    --content-subtle: 240 3.8% 46.1%;
+    --content-warn: 46, 100%, 55%;
+    --content-alert: 0 84.2% 60.2%;
+
+    --border: 12, 6%, 15%;
+    --ring: 12, 6%, 15%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-content;
+  }
+}
+
+code {
+  counter-reset: step;
+  counter-increment: step 0;
+  white-space: break-spaces;
+}
+
+code .line::before {
+  content: counter(step);
+  counter-increment: step;
+  width: 1rem;
+  margin-right: 1.5rem;
+  display: inline-block;
+  text-align: right;
+  color: rgba(115, 138, 148, 0.4);
+}
+
+@keyframes fillLeft {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.animate-fill-left {
+  animation: fillLeft 1s ease-in-out;
+}

apps/engineering/app/layout.tsx

@@ -4,8 +4,9 @@ import { GeistSans } from "geist/font/sans";
 
 import type { ReactNode } from "react";
 
-import { TooltipProvider } from "@unkey/ui/src/components/tooltip";
 import "./global.css";
+import "@unkey/ui/css";
+import { TooltipProvider } from "@unkey/ui/src/components/tooltip";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (