fix: minor visual bugs (#562)

blockchain-lab-um · Feb 15, 2024 · f834489 · f834489
1 parent fda7a75
commit f834489
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 56 deletions.
diff --git a/.changeset/wet-wombats-perform.md b/.changeset/wet-wombats-perform.md
@@ -0,0 +1,5 @@
+---
+'@blockchain-lab-um/dapp': patch
+---
+
+Fixed minor visual bugs
diff --git a/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/credentialPanel.tsx b/packages/dapp/src/app/[locale]/app/(public)/share-presentation/[id]/credentialPanel.tsx
@@ -14,6 +14,7 @@ import { useTranslations } from 'next-intl';
 
 import { DIDDisplay } from '@/components/DIDDisplay';
 import JsonModal from '@/components/JsonModal';
+import { getFirstWord } from '@/utils/format';
 import { convertTypes, copyToClipboard } from '@/utils/string';
 
 interface FormatedPanelProps {
@@ -158,7 +159,7 @@ const CredentialPanel = ({ credential }: FormatedPanelProps) => {
               className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
             >
               <h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
-                {types}
+                {getFirstWord(types)}
               </h1>
             </Tooltip>
           </div>

diff --git a/packages/dapp/src/components/CredentialDisplay/FormatedPanel.tsx b/packages/dapp/src/components/CredentialDisplay/FormatedPanel.tsx
@@ -14,7 +14,12 @@ import { useTranslations } from 'next-intl';
 
 import { DIDDisplay } from '@/components/DIDDisplay';
 import JsonModal from '@/components/JsonModal';
-import { convertTypes, copyToClipboard } from '@/utils/string';
+import { getFirstWord } from '@/utils/format';
+import {
+  camelToTitleCase,
+  convertTypes,
+  copyToClipboard,
+} from '@/utils/string';
 
 interface FormatedPanelProps {
   credential: VerifiableCredential;
@@ -87,7 +92,7 @@ const CredentialSubject = ({
               )}
             >
               <h2 className="dark:text-navy-blue-200 pr-2 font-bold capitalize text-gray-800">
-                {key}:
+                {camelToTitleCase(key)}:
               </h2>
               <div className="text-md dark:text-navy-blue-300 w-full truncate font-normal text-gray-700">
                 {isObject ? (
@@ -137,7 +142,7 @@ const FormatedPanel = ({ credential }: FormatedPanelProps) => {
               className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
             >
               <h1 className="font-ubuntu dark:text-orange-accent-dark text-left text-lg font-medium text-pink-500 sm:text-xl md:text-2xl lg:truncate">
-                {types}
+                {getFirstWord(types)}
               </h1>
             </Tooltip>
           </div>
@@ -174,9 +179,6 @@ const FormatedPanel = ({ credential }: FormatedPanelProps) => {
                   {t('issuer')}
                 </h1>
                 <div className="flex flex-col space-y-0.5">
-                  <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
-                    DID:
-                  </h2>
                   <div className="flex">
                     <DIDDisplay
                       did={

diff --git a/packages/dapp/src/components/CredentialDisplay/JsonPanel.tsx b/packages/dapp/src/components/CredentialDisplay/JsonPanel.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import { usePathname, useRouter } from 'next/navigation';
-import { ArrowLeftIcon } from '@heroicons/react/20/solid';
 import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 
 import { copyToClipboard } from '@/utils/string';
@@ -10,39 +8,24 @@ interface JsonPanelProps {
   data: Record<string, unknown>;
 }
 
-const JsonPanel = ({ data }: JsonPanelProps) => {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  return (
-    <>
+const JsonPanel = ({ data }: JsonPanelProps) => (
+  <>
+    <div className="dark:bg-navy-blue-300 dark:border-navy-blue-400 group relative w-full overflow-hidden rounded-2xl border border-gray-300 bg-gray-200 p-2">
+      <textarea
+        className="group-hover:scrollbar-thumb-orange-300 dark:text-navy-blue-700 dark:bg-navy-blue-300 scrollbar-thin scrollbar-thumb-orange-300/0 scrollbar-thumb-rounded-full font-jetbrains-mono min-h-[60vh] w-full resize-none rounded-2xl bg-gray-200 p-2 text-gray-800 focus:outline-none"
+        disabled
+        value={JSON.stringify(data, null, 4)}
+      />
       <button
-        className="animated-transition dark:text-navy-blue-50 dark:hover:bg-navy-blue-700 mb-6 rounded-full text-gray-800 hover:bg-pink-100 hover:text-pink-700"
         onClick={() => {
-          const params = new URLSearchParams(window.location.search);
-          params.set('view', 'Normal');
-          router.replace(`${pathname}?${params.toString()}`);
+          copyToClipboard(JSON.stringify(data, null, 4));
         }}
+        className="animated-transition absolute bottom-3 right-6 rounded-full bg-gray-500 p-1 text-gray-900 shadow-md hover:bg-gray-400 hover:text-gray-700"
       >
-        <ArrowLeftIcon className="h-6 w-6" />
+        <DocumentDuplicateIcon className="h-5 w-5" />
       </button>
-      <div className="dark:bg-navy-blue-300 dark:border-navy-blue-400 group relative w-full overflow-hidden rounded-2xl border border-gray-300 bg-gray-200 p-2">
-        <textarea
-          className="group-hover:scrollbar-thumb-orange-300 dark:text-navy-blue-700 dark:bg-navy-blue-300 scrollbar-thin scrollbar-thumb-orange-300/0 scrollbar-thumb-rounded-full font-jetbrains-mono min-h-[60vh] w-full resize-none rounded-2xl bg-gray-200 p-2 text-gray-800 focus:outline-none"
-          disabled
-          value={JSON.stringify(data, null, 4)}
-        />
-        <button
-          onClick={() => {
-            copyToClipboard(JSON.stringify(data, null, 4));
-          }}
-          className="animated-transition absolute bottom-3 right-6 rounded-full bg-gray-500 p-1 text-gray-900 shadow-md hover:bg-gray-400 hover:text-gray-700"
-        >
-          <DocumentDuplicateIcon className="h-5 w-5" />
-        </button>
-      </div>
-    </>
-  );
-};
+    </div>
+  </>
+);
 
 export default JsonPanel;
diff --git a/packages/dapp/src/components/DIDDisplay/index.tsx b/packages/dapp/src/components/DIDDisplay/index.tsx
@@ -8,23 +8,28 @@ export const DIDDisplay = ({ did }: { did: string }) => {
   const t = useTranslations('DIDDisplay');
 
   return (
-    <>
-      <Tooltip
-        content={t('tooltip')}
-        className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
-      >
-        <a
-          href={`https://dev.uniresolver.io/#${did}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
+    <div>
+      <h2 className="dark:text-navy-blue-200 pr-2 font-bold text-gray-800">
+        DID:
+      </h2>
+      <div className="flex flex-row">
+        <Tooltip
+          content={t('tooltip')}
+          className="border-navy-blue-300 bg-navy-blue-100 text-navy-blue-700"
         >
-          {did.length <= 32 ? did : `${did.slice(0, 16)}...${did.slice(-4)}`}
-        </a>
-      </Tooltip>
-      <button className="pl-1" onClick={() => copyToClipboard(did)}>
-        <DocumentDuplicateIcon className="animated-transition dark:text-navy-blue-300 ml-1 h-5 w-5 text-gray-700 hover:text-gray-700" />
-      </button>
-    </>
+          <a
+            href={`https://dev.uniresolver.io/#${did}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-md animated-transition dark:text-navy-blue-300 cursor-pointer font-normal text-gray-700 underline underline-offset-2"
+          >
+            {did.length <= 32 ? did : `${did.slice(0, 16)}...${did.slice(-4)}`}
+          </a>
+        </Tooltip>
+        <button className="pl-1" onClick={() => copyToClipboard(did)}>
+          <DocumentDuplicateIcon className="animated-transition dark:text-navy-blue-300 ml-1 h-5 w-5 text-gray-700 hover:text-gray-700" />
+        </button>
+      </div>
+    </div>
   );
 };
diff --git a/packages/dapp/src/components/VerifyDataDisplay/index.tsx b/packages/dapp/src/components/VerifyDataDisplay/index.tsx
@@ -138,7 +138,7 @@ const VerifyDataDisplay = () => {
         <div className="dark:bg-navy-blue-300 dark:border-navy-blue-400 group relative z-0 rounded-2xl border border-gray-200 bg-gray-100 pr-2 pt-1">
           <textarea
             className={clsx(
-              'group-hover:scrollbar-thumb-orange-300 dark:text-navy-blue-800 dark:bg-navy-blue-300',
+              'group-hover:scrollbar-thumb-orange-300 dark:text-navy-blue-800 dark:bg-navy-blue-300 dark:placeholder-gray-800',
               'scrollbar-thin scrollbar-thumb-orange-300/0 scrollbar-thumb-rounded-full font-jetbrains-mono',
               'min-h-[60vh] w-full resize-none rounded-2xl bg-gray-100 p-2 text-gray-700 focus:outline-none'
             )}

diff --git a/packages/dapp/src/utils/format.ts b/packages/dapp/src/utils/format.ts
@@ -1,6 +1,16 @@
 import { type QueryCredentialsRequestResult } from '@blockchain-lab-um/masca-connector';
 import { CredentialSubject } from '@veramo/core';
 
+export const getLastWord = (str: string) => {
+  const parts = str.trim().split(',');
+  return parts[parts.length - 1];
+};
+
+export const getFirstWord = (str: string) => {
+  const parts = str.trim().split(',');
+  return parts[0];
+};
+
 export const stringifyCredentialSubject = (
   queryCredentialsRequestResult: QueryCredentialsRequestResult
 ): QueryCredentialsRequestResult => {