keyshade-xyz · kriptonian1 · Oct 4, 2025 · Oct 4, 2025 · Oct 4, 2025
@@ -64,7 +64,7 @@ export const createWorkspace = async (
               slug: workspaceAdminRoleSlug,
               authorities: [Authority.WORKSPACE_ADMIN],
               hasAdminAuthority: true,
-              colorCode: '#FF0000'
+              colorCode: '#FB2C36'
             }
           ]
         }

@@ -28,7 +28,7 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.1.2",
@@ -41,6 +41,7 @@
     "dayjs": "^1.11.11",
     "dotenv": "^16.4.7",
     "eccrypto": "^1.1.6",
+    "emblor": "^1.4.8",
     "emoji-picker-react": "^4.12.0",
     "env-cmd": "^10.1.0",
     "framer-motion": "^11.1.7",
@@ -57,7 +58,7 @@
     "next-themes": "^0.4.6",
     "posthog-js": "^1.240.5",
     "posthog-node": "^4.17.1",
-    "radix-ui": "^1.4.2",
+    "radix-ui": "^1.4.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "sonner": "^1.4.41",

@@ -0,0 +1,3 @@
+import PermissionBadgeSVG from './permissionBadge.svg'
+
+export { PermissionBadgeSVG }
@@ -2,10 +2,10 @@
 import { useEffect } from 'react'
 import { useParams, useSearchParams } from 'next/navigation'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
-import VariablePage from './@variable/page'
-import SecretPage from './@secret/page'
-import EnvironmentPage from './@environment/page'
 import OverviewPage from './@overview/page'
+import EnvironmentPage from './@environment/page'
+import SecretPage from './@secret/page'
+import VariablePage from './@variable/page'
 import ControllerInstance from '@/lib/controller-instance'
 import AddSecretDialog from '@/components/dashboard/secret/addSecretDialogue'
 import {

@@ -10,7 +10,7 @@ export default function AppLayout({
   return (
     <main className="flex ">
       <Sidebar />
-      <div className="m-4 h-dvh overflow-clip rounded-[1.125rem] bg-[#161819] md:h-[96vh] md:w-[90vw] 2xl:h-[96.5vh]">
+      <div className="m-4 h-dvh overflow-clip rounded-[1.125rem] border border-white/5 bg-[#0B0F14] md:h-[96vh] md:w-[90vw] 2xl:h-[96.5vh]">
         <div className="flex h-full flex-col">
           <Navbar />
           <div className="flex-1 overflow-auto p-4">{children}</div>

@@ -2,8 +2,8 @@
 import React, { useEffect, Suspense } from 'react'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useSearchParams } from 'next/navigation'
-import JoinedMemberPage from './@joined/page'
 import InvitedMemberPage from './@invited/page'
+import JoinedMemberPage from './@joined/page'
 import MembersHeader from '@/components/members/membersHeader'
 import ControllerInstance from '@/lib/controller-instance'
 import { useHttp } from '@/hooks/use-http'

@@ -6,14 +6,20 @@ import CreateRoleDialog from '@/components/roles/createRoleDialog'
 import RoleList from '@/components/roles/rolesList'
 import ConfirmDeleteRole from '@/components/roles/confirmDeleteRole'
 import EditRoleSheet from '@/components/roles/editRoleSheet'
-import { editRoleOpenAtom, selectedRoleAtom, selectedWorkspaceAtom } from '@/store'
+import {
+  editRoleOpenAtom,
+  selectedRoleAtom,
+  selectedWorkspaceAtom
+} from '@/store'
 import { PageTitle } from '@/components/common/page-title'
 
 function RolesPage(): React.JSX.Element {
   const selectedWorkspace = useAtomValue(selectedWorkspaceAtom)
   const selectedRole = useAtomValue(selectedRoleAtom)
   const isEditRolesOpen = useAtomValue(editRoleOpenAtom)
 
+  const shouldShowEditRoleSheet = isEditRolesOpen && selectedRole
+
   return (
     <div className="flex flex-col gap-y-10">
       <PageTitle title={`${selectedWorkspace?.name} | Roles`} />
@@ -25,7 +31,7 @@ function RolesPage(): React.JSX.Element {
       <ConfirmDeleteRole />
 
       {/* Edit role sheet */}
-      {isEditRolesOpen && selectedRole ? <EditRoleSheet /> : null}
+      {shouldShowEditRoleSheet ? <EditRoleSheet /> : null}
     </div>
   )
 }

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  @apply bg-[#0b0d0f] text-white;
+  @apply bg-[#000203] text-slate-200;
 }
 
 /* For WebKit Browsers such as Chrome, Safari */
@@ -52,7 +52,8 @@ body {
 }
 
 @keyframes highlight {
-  0%, 100% {
+  0%,
+  100% {
     border: transparent;
   }
   50% {
@@ -62,4 +63,4 @@ body {
 
 .animate-highlight {
   animation: highlight 1s ease-in-out 2;
-}
+}
@@ -5,10 +5,10 @@ import { toast } from 'sonner'
 import { posthog } from 'posthog-js'
 import { z } from 'zod'
 import { LoadingSVG } from '@public/svg/shared'
-import ReferralDetailsForm from './onboarding slides/referral-details-form'
-import ProfileDetailsForm from './onboarding slides/profile-details-form'
-import TeamOverviewForm from './onboarding slides/team-overview-form'
 import RoleIndustryForm from './onboarding slides/role-industry-form'
+import TeamOverviewForm from './onboarding slides/team-overview-form'
+import ProfileDetailsForm from './onboarding slides/profile-details-form'
+import ReferralDetailsForm from './onboarding slides/referral-details-form'
 import { userAtom } from '@/store'
 import { Button } from '@/components/ui/button'
 import ControllerInstance from '@/lib/controller-instance'
@@ -153,7 +153,9 @@ export default function OnboardingStepper() {
             <Button
               className="border-white/60 text-sm text-white/60"
               disabled={isLoading}
-              onClick={handleSubmit}
+              onClick={() => {
+                handleSubmit()
+              }}
               variant="outline"
             >
               Skip

@@ -3,8 +3,8 @@ import { useRouter } from 'next/navigation'
 import React, { useState } from 'react'
 import { toast } from 'sonner'
 import { LoadingSVG } from '@public/svg/shared'
-import { Input } from '../ui/input'
 import { Button } from '../ui/button'
+import { Input } from '../ui/input'
 import { userAtom } from '@/store'
 import ControllerInstance from '@/lib/controller-instance'
 import { useHttp } from '@/hooks/use-http'

@@ -2,9 +2,9 @@ import React from 'react'
 import type { GetAllWorkspacesOfUserResponse } from '@keyshade/schema'
 import dayjs from 'dayjs'
 import { useAtomValue } from 'jotai'
-import DetailContainer from './detail-container'
-import TierLimitItem from './tier-limit-item'
 import BillingDetailRow from './billing-detail-row'
+import TierLimitItem from './tier-limit-item'
+import DetailContainer from './detail-container'
 import { Separator } from '@/components/ui/separator'
 import { PricingTiers } from '@/constants/billing/planCard'
 import { Badge } from '@/components/ui/badge'

@@ -139,13 +139,13 @@ export default function DownloadInvoice({
       case 'paid':
         return (
           <Badge color="green" icon="done" type="icon" variant="solid">
-            {formatText(status)}
+            {formatText(status as string)}
           </Badge>
         )
       case 'pending':
         return (
           <Badge color="yellow" icon="waiting" type="icon" variant="solid">
-            {formatText(status)}
+            {formatText(status as string)}
           </Badge>
         )
       case 'partially_refunded':
@@ -157,7 +157,7 @@ export default function DownloadInvoice({
             type="icon"
             variant="solid"
           >
-            {formatText(status)}
+            {formatText(status as string)}
           </Badge>
         )
 

@@ -4,8 +4,8 @@ import RenewSubscription from '../renewSubscription'
 import BillingDetail from './billingDetail'
 import DownloadInvoice from './downloadInvoice'
 import CancelPlan from './canclePlan'
-import { selectedWorkspaceAtom } from '@/store'
 import Visible from '@/components/common/visible'
+import { selectedWorkspaceAtom } from '@/store'
 
 export default function CurrentBillDetails() {
   const currentWorkspace = useAtomValue(selectedWorkspaceAtom)

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { EnterpriseSVG, HackerSVG, TeamSVG } from 'public/svg/billing'
 import { useAtomValue } from 'jotai'
 import type { AllowedPlans } from '@keyshade/schema'
 import { toast } from 'sonner'
+import { EnterpriseSVG, HackerSVG, TeamSVG } from 'public/svg/billing'
 import Visible from '@/components/common/visible'
 import { Slider } from '@/components/ui/slider'
 import {
@@ -48,13 +48,14 @@ export default function PlanCard({
   const isAnually = selectedPlan === 'annually'
 
   const planName = (): AllowedPlans | null => {
-    if (tierName === 'Hacker') {
-      return 'HACKER'
-    }
-    if (tierName === 'Team') {
-      return 'TEAM'
+    switch (tierName) {
+      case 'Hacker':
+        return 'HACKER'
+      case 'Team':
+        return 'TEAM'
+      default:
+        return null
     }
-    return null
   }
 
   const calculateTotalPrice = () => {

@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface RoleBadgeProps {
+  color: string
+  children: React.ReactNode
+  key: string | number
+}
+
+export default function RoleBadge({ color, children, key }: RoleBadgeProps) {
+  return (
+    <span
+      className="items-center justify-center rounded-full px-2 py-1 text-purple-200"
+      key={key}
+      style={{
+        backgroundColor: `${color}33`,
+        border: `1px solid ${color}`,
+        color
+      }}
+    >
+      {children}
+    </span>
+  )
+}
@@ -129,11 +129,10 @@ function ConfigAccessLevel({
             </div>
           </div>
         </RadioGroup>
-
         <Button
           className="mt-0"
           onClick={handleUpdateAccessLevel}
-          variant="secondary"
+          variant="primary"
         >
           Save
         </Button>

@@ -39,7 +39,7 @@ function ImportEnvButton({ projectSlug }): React.JSX.Element {
           className="flex w-fit px-3 py-4 text-sm"
           onClick={handleOpenModal}
           type="button"
-          variant="secondary"
+          variant="primary"
         >
           Import
         </Button>

@@ -27,10 +27,10 @@ function LocalKeySetup({
 
   return (
     <div
-      className={`flex justify-between gap-2 rounded-lg bg-white/10 p-3 ${isPrivateKeyStored && 'flex-col gap-3'}`}
+      className={`flex justify-between gap-2 rounded-lg bg-white/5 p-3 ${isPrivateKeyStored && 'flex-col gap-3'}`}
     >
       <div>
-        <h1 className="text-lg font-medium text-white">
+        <h1 className="text-sm font-medium text-white">
           Do you wanna setup private key?{' '}
           <Tooltip>
             <TooltipTrigger>

@@ -71,9 +71,9 @@ function RegenerateKeySetup({
   }, [projectKeys, onRegenerated])
 
   return (
-    <div className="flex justify-between gap-1.5 rounded-lg bg-white/10 p-3">
+    <div className="flex justify-between gap-1.5 rounded-lg bg-white/5 p-3">
       <div>
-        <h1 className="text-lg font-medium text-white">
+        <h1 className="text-sm font-medium text-white">
           Do you wanna regenerate private key?{' '}
           <Tooltip>
             <TooltipTrigger>

@@ -55,10 +55,10 @@ function ServerKeySetup({
 
   return (
     <div
-      className={`flex justify-between gap-2 rounded-lg bg-white/10 p-3 ${isPrivateKeyStoredDB && 'flex-col gap-3'}`}
+      className={`flex justify-between gap-2 rounded-lg bg-white/5 p-3 ${isPrivateKeyStoredDB && 'flex-col gap-3'}`}
     >
       <div>
-        <h1 className="text-lg font-medium text-white">
+        <h1 className="text-sm font-medium text-white">
           Share project private key with us?{' '}
           <Tooltip>
             <TooltipTrigger>

@@ -3,11 +3,11 @@ import { useAtom, useAtomValue } from 'jotai'
 import { Plus } from 'lucide-react'
 import { AddSVG } from '@public/svg/shared'
 import ViewAndDownloadProjectKeysDialog from '../viewAndDownloadKeysDialog'
-import CreateProjectName from './create-project-name'
-import CreateProjectDescription from './create-project-description'
-import CreateProjectAccessLevel from './create-project-access-level'
-import CreateProjectStorePrivateKey from './create-project-store-private-key'
 import CreateProjectEnvironmentList from './create-project-environment-list'
+import CreateProjectStorePrivateKey from './create-project-store-private-key'
+import CreateProjectAccessLevel from './create-project-access-level'
+import CreateProjectDescription from './create-project-description'
+import CreateProjectName from './create-project-name'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
@@ -103,8 +103,9 @@ export default function CreateProjectDialogue(): JSX.Element {
             <Button
               disabled={!isAuthorizedToCreateProjects}
               onClick={toggleDialog}
+              variant="primary"
             >
-              <AddSVG /> Create a new Project
+              <AddSVG /> Create Project
             </Button>
           )}
         </DialogTrigger>

@@ -1,6 +1,6 @@
-import ExportProjectFormatInput from './export-project-format-input'
-import ExportProjectEnvironmentInput from './export-project-environment-input'
 import ExportProjectPrivateKeyInput from './export-project-private-key-input'
+import ExportProjectEnvironmentInput from './export-project-environment-input'
+import ExportProjectFormatInput from './export-project-format-input'
 import {
   Dialog,
   DialogContent,

@@ -2,8 +2,6 @@ import React, { useCallback, useState } from 'react'
 import { toast } from 'sonner'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { AddSVG } from '@public/svg/shared'
-import { Input } from '../../../ui/input'
-import { Button } from '../../../ui/button'
 import {
   Dialog,
   DialogContent,
@@ -12,6 +10,8 @@ import {
   DialogTitle,
   DialogTrigger
 } from '../../../ui/dialog'
+import { Button } from '../../../ui/button'
+import { Input } from '../../../ui/input'
 import ControllerInstance from '@/lib/controller-instance'
 import {
   createSecretOpenAtom,

@@ -23,9 +23,10 @@ export default function EmptySecretListContent(): React.JSX.Element {
       </div>
 
       <Button
-        className="h-[2.25rem] rounded-md bg-white text-black hover:bg-gray-300"
+        className="h-[2.25rem]"
         disabled={!isAuthorizedToCreateSecrets}
         onClick={() => setIsCreateSecretOpen(true)}
+        variant="primary"
       >
         Create secret
       </Button>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PermissionBadgeSVG from './permissionBadge.svg'

		export { PermissionBadgeSVG }