Fixed the issues found on importing other color theme

nextjs/src/components/SummaryCard.tsx

@@ -17,7 +17,7 @@ const SummaryCard = ({
   credDefId,
   schemaId,
 }: Readonly<IProps>): JSX.Element => (
-  <Card className="bg-background my-6">
+  <Card className="my-6">
     <CardContent className="p-6">
       <div className="flex items-start justify-between">
         <div>

nextjs/src/components/SummaryCardW3c.tsx

@@ -19,7 +19,7 @@ const SummaryCard = ({
   schemaId,
   schemaAttributes,
 }: Readonly<IProps>): JSX.Element => (
-  <Card className="bg-background my-6">
+  <Card className="my-6">
     <CardContent className="p-6">
       <div className="flex items-start justify-between">
         <div>

nextjs/src/components/iconsSvg.tsx

@@ -94,7 +94,7 @@ export const CredentialDefinitionIcon = (): JSX.Element => (
   >
     <path
       d="M15 9H18.75M15 12H18.75M15 15H18.75M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5ZM10.5 9.375C10.5 9.62123 10.4515 9.86505 10.3573 10.0925C10.263 10.32 10.1249 10.5267 9.95083 10.7008C9.77672 10.8749 9.57002 11.013 9.34253 11.1073C9.11505 11.2015 8.87123 11.25 8.625 11.25C8.37877 11.25 8.13495 11.2015 7.90747 11.1073C7.67998 11.013 7.47328 10.8749 7.29917 10.7008C7.12506 10.5267 6.98695 10.32 6.89273 10.0925C6.7985 9.86505 6.75 9.62123 6.75 9.375C6.75 8.87772 6.94754 8.40081 7.29917 8.04918C7.65081 7.69754 8.12772 7.5 8.625 7.5C9.12228 7.5 9.59919 7.69754 9.95082 8.04918C10.3025 8.40081 10.5 8.87772 10.5 9.375ZM11.794 15.711C10.8183 16.2307 9.72947 16.5017 8.624 16.5C7.5192 16.5014 6.4311 16.2304 5.456 15.711C5.69429 15.0622 6.12594 14.5023 6.69267 14.1067C7.25939 13.7111 7.93387 13.499 8.625 13.499C9.31613 13.499 9.99061 13.7111 10.5573 14.1067C11.1241 14.5023 11.5557 15.0622 11.794 15.711Z"
-      stroke="#6B7280"
+      stroke="currentColor"
       strokeWidth="1.8"
       strokeLinecap="round"
       strokeLinejoin="round"
@@ -128,11 +128,11 @@ export const VerifyCredentialIcon = (): JSX.Element => (
   >
     <path
       d="M3.44444 21C2.77222 21 2.19676 20.7745 1.71806 20.3235C1.23935 19.8725 1 19.3303 1 18.697V6.60606C1 5.97273 1.23935 5.43056 1.71806 4.97955C2.19676 4.52854 2.77222 4.30303 3.44444 4.30303H8.57778C8.84259 3.61212 9.28565 3.05556 9.90694 2.63333C10.5282 2.21111 11.2259 2 12 2C12.7741 2 13.4718 2.21111 14.0931 2.63333C14.7144 3.05556 15.1574 3.61212 15.4222 4.30303H20.5556C21.2278 4.30303 21.8032 4.52854 22.2819 4.97955C22.7606 5.43056 23 5.97273 23 6.60606V18.697C23 19.3303 22.7606 19.8725 22.2819 20.3235C21.8032 20.7745 21.2278 21 20.5556 21H3.44444ZM3.17284 18.8889H20.8323V6.22222H3.17284V18.8889ZM12 5.74242C12.2648 5.74242 12.4838 5.66086 12.6569 5.49773C12.8301 5.3346 12.9167 5.12828 12.9167 4.87879C12.9167 4.62929 12.8301 4.42298 12.6569 4.25985C12.4838 4.09672 12.2648 4.01515 12 4.01515C11.7352 4.01515 11.5162 4.09672 11.3431 4.25985C11.1699 4.42298 11.0833 4.62929 11.0833 4.87879C11.0833 5.12828 11.1699 5.3346 11.3431 5.49773C11.5162 5.66086 11.7352 5.74242 12 5.74242Z"
-      fill="#6B7280"
+      fill="currentColor"
     />
     <path
       d="M10.0312 17.5469L9.14062 16.0469L7.45312 15.6719L7.61719 13.9375L6.46875 12.625L7.61719 11.3125L7.45312 9.57812L9.14062 9.20312L10.0312 7.70312L11.625 8.38281L13.2187 7.70312L14.1094 9.20312L15.7969 9.57812L15.6328 11.3125L16.7812 12.625L15.6328 13.9375L15.7969 15.6719L14.1094 16.0469L13.2187 17.5469L11.625 16.8672L10.0312 17.5469ZM10.4297 16.3516L11.625 15.8359L12.8437 16.3516L13.5 15.2266L14.7891 14.9219L14.6719 13.6094L15.5391 12.625L14.6719 11.6172L14.7891 10.3047L13.5 10.0234L12.8203 8.89844L11.625 9.41406L10.4062 8.89844L9.75 10.0234L8.46094 10.3047L8.57812 11.6172L7.71094 12.625L8.57812 13.6094L8.46094 14.9453L9.75 15.2266L10.4297 16.3516ZM11.1328 14.2891L13.7812 11.6406L13.125 10.9609L11.1328 12.9531L10.125 11.9688L9.46875 12.625L11.1328 14.2891Z"
-      fill="#6B7280"
+      fill="currentColor"
     />
   </svg>
 )
@@ -145,20 +145,20 @@ export const IssueCredentialIcon = (): JSX.Element => (
     viewBox="0 0 26 24"
   >
     <path
-      fill="#6B7280"
-      stroke="#6B7280"
+      fill="currentColor"
+      stroke="currentColor"
       strokeWidth=".5"
       d="M23.4 3H10.6A1.6 1.6 0 0 0 9 4.6v8c.002.298.088.59.25.84l-.77.501c-.26.17-.563.26-.874.259H7.29a.797.797 0 0 0-.689-.4H1.8a.8.8 0 0 0-.8.8v4.8a.8.8 0 0 0 .8.8h4.8a.797.797 0 0 0 .689-.4h8.875a2.412 2.412 0 0 0 2.146-1.325l2.137-4.275H23.4a1.6 1.6 0 0 0 1.6-1.6v-8A1.6 1.6 0 0 0 23.4 3ZM1.8 19.4v-4.8h4.8v4.8H1.8Zm15.794-1.28a1.606 1.606 0 0 1-1.43.88H7.4v-4h.206a2.4 2.4 0 0 0 1.31-.389l6.617-4.303a.713.713 0 0 1 .864.095.696.696 0 0 1 .013.97l-3.387 3.76-.003.003-.717.796a.399.399 0 0 0 .029.565.4.4 0 0 0 .565-.029l.602-.668h2.717a1.193 1.193 0 0 0 .935-.448l.924-1.152h1.48l-1.961 3.92ZM14.94 14.2h2.11l-.52.65a.397.397 0 0 1-.314.15h-1.997l.72-.8Zm9.26-1.6a.8.8 0 0 1-.8.8h-7.74l.72-.8h3.42a.4.4 0 1 0 0-.8h-2.714A1.483 1.483 0 0 0 17 9.883V9.8a.4.4 0 0 0-.4-.4.392.392 0 0 0-.234.084 1.509 1.509 0 0 0-1.268.153l-.116.075a.394.394 0 0 0-.665-.195.4.4 0 0 0-.117.283v.42l-4.284 2.787A.79.79 0 0 1 9.8 12.6v-8a.8.8 0 0 1 .8-.8h12.8a.8.8 0 0 1 .8.8v8Z"
     />
     <path
-      fill="#6B7280"
-      stroke="#6B7280"
+      fill="currentColor"
+      stroke="currentColor"
       strokeWidth=".1"
       d="M13.05 5.3v-.05h-.85a.45.45 0 0 0-.45.45v.45h1.3V5.3ZM11.8 6.85h-.05v.45a.45.45 0 0 0 .45.45h.85v-.9H11.8Zm1.95.85v.05h.85a.45.45 0 0 0 .45-.45V5.7a.45.45 0 0 0-.45-.45h-.85V7.7ZM12.2 4.55h2.4a1.15 1.15 0 0 1 1.15 1.15v1.6a1.15 1.15 0 0 1-1.15 1.15h-2.4a1.15 1.15 0 0 1-1.15-1.15V5.7a1.15 1.15 0 0 1 1.15-1.15Z"
     />
     <path
-      fill="#6B7280"
-      stroke="#6B7280"
+      fill="currentColor"
+      stroke="currentColor"
       strokeWidth=".2"
       d="M11.4 9.297a.4.4 0 0 0-.4.4v.8a.4.4 0 1 0 .8 0v-.8a.4.4 0 0 0-.4-.4Zm1.602 0a.4.4 0 0 0-.4.4v.4a.4.4 0 1 0 .8 0v-.4a.4.4 0 0 0-.4-.4Zm5.198 0a.4.4 0 0 0-.4.4v.8a.4.4 0 1 0 .8 0v-.8a.4.4 0 0 0-.4-.4Zm1.598 0a.4.4 0 0 0-.4.4v.8a.4.4 0 0 0 .8 0v-.8a.4.4 0 0 0-.4-.4Z"
     />
@@ -207,11 +207,12 @@ export const CreateSchemaIcon = (): JSX.Element => (
     width="24"
     height="24"
     viewBox="0 0 24 24"
+    className="hover:text-primary-foreground"
     fill="none"
   >
     <path
       d="M7 9H18.75M7 12H18.75M7 15H13M4.5 19.5H19.5C20.0967 19.5 20.669 19.2629 21.091 18.841C21.5129 18.419 21.75 17.8467 21.75 17.25V6.75C21.75 6.15326 21.5129 5.58097 21.091 5.15901C20.669 4.73705 20.0967 4.5 19.5 4.5H4.5C3.90326 4.5 3.33097 4.73705 2.90901 5.15901C2.48705 5.58097 2.25 6.15326 2.25 6.75V17.25C2.25 17.8467 2.48705 18.419 2.90901 18.841C3.33097 19.2629 3.90326 19.5 4.5 19.5Z"
-      stroke="#6B7280"
+      stroke="currentColor"
       strokeWidth="1.8"
       strokeLinecap="round"
       strokeLinejoin="round"

nextjs/src/components/layout/user-nav.tsx

@@ -86,7 +86,7 @@ export function UserNav(): React.JSX.Element | null {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className="w-56"
+        className="w-56 border"
         align="end"
         sideOffset={10}
         forceMount
@@ -113,7 +113,7 @@ export function UserNav(): React.JSX.Element | null {
 
           <DropdownMenuSub>
             <DropdownMenuSubTrigger>Theme</DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
+            <DropdownMenuSubContent className="border">
               <ThemeSelector />
             </DropdownMenuSubContent>
           </DropdownMenuSub>

nextjs/src/components/org-switcher.tsx

@@ -110,13 +110,16 @@ export function OrgSwitcher({
     <SidebarMenu>
       <SidebarMenuItem>
         <DropdownMenu>
-          <DropdownMenuTrigger asChild className="focus:ring-ring focus:ring-1">
+          <DropdownMenuTrigger
+            asChild
+            className="focus:ring-ring bg-popover hover:bg-popover outline-none hover:text-inherit focus:ring-1!"
+          >
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground border-ring w-[200px] justify-start gap-2 border"
+              className="border-ring w-[200px] justify-start gap-2 border"
             >
               {tenants.length > 0 && (
-                <div className="bg-muted border-muted flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full border">
+                <div className="bg-popover border-muted flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full border">
                   {selectedTenant?.logoUrl ? (
                     <Image
                       src={selectedTenant.logoUrl}

nextjs/src/features/invitations/components/sendInvitations.tsx

@@ -242,12 +242,13 @@ export default function SendInvitationModal({
                   <Button
                     variant="ghost"
                     size="icon"
+                    className='hover:bg-transparent'
                     onClick={() => removeInvitation(invitation.email)}
                   >
                     <img
                       src={delSvg.src}
                       alt="delete"
-                      className="mx-auto h-4 w-4"
+                      className="mx-auto h-5 w-5"
                     />
                   </Button>
                 </div>

nextjs/src/features/organization/bulkIssuance/components/BulkIssuance.tsx

@@ -291,7 +291,7 @@ const BulkIssuance = (): JSX.Element => {
           />
         )}
         <div className="min-h-100/21rem flex flex-col justify-between">
-          <Card className="bg-transparent p-5 p-8">
+          <Card className="p-5 p-8">
             <div>
               <div className="grid w-[980px] grid-cols-1 gap-6 sm:grid-cols-2">
                 <div className="flex flex-col justify-between">

nextjs/src/features/organization/bulkIssuance/components/DragAndDrop.tsx

@@ -33,24 +33,24 @@ export default function DragAndDrop({
         <div>
           <label
             htmlFor="csv-file"
-            className={`dark-border-gray-600 flex h-36 w-40 cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed bg-white dark:bg-gray-700 ${
+            className={`flex h-36 w-40 cursor-pointer flex-col items-center justify-center rounded-md border-2 border-dashed  ${
               !context.isCredSelected
                 ? 'border-gray-200'
-                : 'border-primary-900 dark:border-white'
+                : 'border-primary dark:border-white'
             }`}
           >
             <div
               className={`flex flex-col items-center justify-center pt-5 pb-6 ${
                 !context.isCredSelected
                   ? 'border-gray-700 text-gray-700 opacity-50 dark:text-gray-700'
-                  : 'text-primary-700 border-primary-700 dark:border-white dark:text-white'
+                  : 'text-primary border-primary dark:border-white dark:text-white'
               }`}
             >
               <svg
                 className={`h-12 w-12 ${
                   !context.isCredSelected
                     ? 'text-gray-700 dark:text-gray-400'
-                    : 'text-primary-900 dark:text-white'
+                    : 'text-primary dark:text-white'
                 }`}
                 viewBox="0 0 24 24"
                 fill="none"

nextjs/src/features/organization/components/OrganizationDetails.tsx

@@ -163,7 +163,7 @@ const OrganizationDetails = ({
           </div>
 
           {/* QR Code - aligned inline with details */}
-          <div className="w-48">
+          <div className={`w-48 ${loading ? 'border' : ''}`}>
             {loading ? (
               <div className="flex h-48 w-48 items-center justify-center">
                 <Loader />

nextjs/src/features/organization/connectionIssuance/components/FieldArray.tsx

@@ -81,10 +81,7 @@ const FieldArrayData = ({
 
               return (
                 <div key={user.connectionId}>
-                  <Card
-                    className="bg-background my-5 px-4 py-8"
-                    style={fieldCardStyles}
-                  >
+                  <Card className="my-5 px-4 py-8" style={fieldCardStyles}>
                     <div className="flex justify-between">
                       <div className="flex">
                         <h5 className="flex flex-wrap text-xl leading-none font-bold dark:text-white">

nextjs/src/features/organization/connectionIssuance/components/Issuance.tsx

@@ -311,7 +311,7 @@ const IssueCred = (): React.JSX.Element => {
           />
           <h1 className="ml-1 text-xl font-semibold sm:text-2xl">Issuance</h1>
         </div>
-        <Card className="bg-background">
+        <Card className="">
           <CardContent className="p-4">
             <p className="pb-6 text-xl font-semibold">
               Select Schema and credential definition