fix: improve styling

blockchain-lab-um · Aug 8, 2023 · 475eb2c · 475eb2c
1 parent 0dc9948
commit 475eb2c
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 97 deletions.
diff --git a/packages/dapp/src/app/[locale]/app/(protected)/create-credential/page.tsx b/packages/dapp/src/app/[locale]/app/(protected)/create-credential/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="flex flex-1 items-center justify-center">
-      <div className="dark:bg-navy-blue-800 w-full max-w-md flex-col justify-center rounded-3xl bg-white shadow-lg md:max-w-lg lg:max-w-xl xl:max-w-[46rem]">
+      <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 w-full rounded-3xl bg-white shadow-lg md:max-w-md lg:max-w-xl xl:max-w-[40rem]">
         <CreateCredentialDisplay />
       </div>
     </div>

diff --git a/packages/dapp/src/app/[locale]/app/(protected)/create-verifiable-presentation/page.tsx b/packages/dapp/src/app/[locale]/app/(protected)/create-verifiable-presentation/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="flex flex-1 items-center justify-center">
-      <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 w-full max-w-sm rounded-3xl bg-white shadow-lg md:max-w-md lg:max-w-xl xl:max-w-[40rem]">
+      <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 w-full rounded-3xl bg-white shadow-lg md:max-w-md lg:max-w-xl xl:max-w-[40rem]">
         <CreatePresentationDisplay />
       </div>
     </div>

diff --git a/packages/dapp/src/app/[locale]/app/(protected)/settings/page.tsx b/packages/dapp/src/app/[locale]/app/(protected)/settings/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="flex flex-1 items-center justify-center">
-      <div className="dark:bg-navy-blue-800 w-full max-w-sm flex-col justify-center rounded-3xl bg-white shadow-lg md:max-w-md lg:max-w-lg xl:max-w-[34rem]">
+      <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 w-full rounded-3xl bg-white shadow-lg md:max-w-md lg:max-w-xl xl:max-w-[40rem]">
         <SettingsCard />
       </div>
     </div>

diff --git a/packages/dapp/src/app/[locale]/app/(protected)/verify-data/page.tsx b/packages/dapp/src/app/[locale]/app/(protected)/verify-data/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="flex flex-1 items-center justify-center">
-      <div className="dark:bg-navy-blue-800 w-full max-w-md flex-col justify-center rounded-3xl bg-white shadow-lg md:max-w-lg lg:max-w-xl xl:max-w-[46rem]">
+      <div className="dark:bg-navy-blue-800 dark:text-navy-blue-400 w-full rounded-3xl bg-white shadow-lg md:max-w-md lg:max-w-xl xl:max-w-[40rem]">
         <VerifyDataDisplay />
       </div>
     </div>

diff --git a/packages/dapp/src/components/CreateCredentialDisplay/index.tsx b/packages/dapp/src/components/CreateCredentialDisplay/index.tsx
@@ -180,9 +180,9 @@ const CreateCredentialDisplay = () => {
     setLoading(false);
   };
   return (
-    <>
-      <div className="mt-5 flex w-full justify-between px-6 pt-2">
-        <Link href="/app">
+    <div className="p-6">
+      <div className="flex w-full justify-between">
+        <Link href="/app" className="flex items-center">
           <button className="animated-transition dark:text-navy-blue-50 dark:hover:bg-navy-blue-700 rounded-full text-gray-800 hover:bg-pink-100 hover:text-pink-700">
             <ArrowLeftIcon className="h-6 w-6" />
           </button>
@@ -192,21 +192,23 @@ const CreateCredentialDisplay = () => {
         </div>
       </div>
 
-      <div className="dark:bg-navy-blue-300 dark:border-navy-blue-400 group relative z-0 m-8 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',
-            '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'
-          )}
-          placeholder="Credential Payload..."
-          value={credentialPayload}
-          onChange={(e) => setCredentialPayload(e.target.value)}
-        />
+      <div className="mt-5">
+        <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',
+              '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'
+            )}
+            placeholder="Credential Payload..."
+            value={credentialPayload}
+            onChange={(e) => setCredentialPayload(e.target.value)}
+          />
+        </div>
       </div>
       {!isInvalidMethod && (
         <>
-          <div className="mt-8 px-4">
+          <div className="mt-5">
             <div className="dark:text-navy-blue-100 text-h5 font-ubuntu mt-8 font-medium text-gray-800">
               {t('options.title')}
             </div>
@@ -226,7 +228,7 @@ const CreateCredentialDisplay = () => {
             </div>
           </div>
           <div>
-            <div className="mt-4 flex items-baseline justify-between px-4">
+            <div className="mt-5 flex items-baseline justify-between">
               <div className="text-h5 dark:text-navy-blue-100 font-ubuntu mt-8 flex font-medium text-gray-800">
                 {t('save.title')} <InfoIcon>{t('save.description')}</InfoIcon>
               </div>
@@ -241,7 +243,7 @@ const CreateCredentialDisplay = () => {
               </div>
             </div>
             {save && (
-              <div className="mx-4 mt-2 flex items-center justify-between gap-x-8">
+              <div className="mt-2 flex items-center justify-between gap-x-8 pb-5">
                 <span className="text-md dark:text-navy-blue-200 flex gap-x-1 text-gray-700">
                   {t('save.storage')}
                 </span>
@@ -257,7 +259,7 @@ const CreateCredentialDisplay = () => {
               </div>
             )}
           </div>
-          <div className="mt-8 flex justify-end p-3">
+          <div className="mt-5 flex justify-end">
             <Button
               variant="primary"
               size="sm"
@@ -271,7 +273,7 @@ const CreateCredentialDisplay = () => {
         </>
       )}
       {isInvalidMethod && (
-        <div className="p-2 pb-8 text-center text-red-500">
+        <div className="mt-6 text-center text-red-500">
           {t('invalidMethod')}
         </div>
       )}
@@ -280,7 +282,7 @@ const CreateCredentialDisplay = () => {
         setOpen={setVCModalOpen}
         vc={vc as unknown as VerifiableCredential}
       />
-    </>
+    </div>
   );
 };
 

diff --git a/packages/dapp/src/components/CreatePresentationDisplay/index.tsx b/packages/dapp/src/components/CreatePresentationDisplay/index.tsx
@@ -123,7 +123,7 @@ const CreatePresentationDisplay = () => {
   return (
     <>
       <div className="mt-5 flex w-full justify-between px-6 pt-2">
-        <Link href="/app">
+        <Link href="/app" className="flex items-center">
           <button className="animated-transition dark:text-navy-blue-50 dark:hover:bg-navy-blue-700 rounded-full text-gray-800 hover:bg-pink-100 hover:text-pink-700">
             <ArrowLeftIcon className="h-6 w-6" />
           </button>

diff --git a/packages/dapp/src/components/SettingsCard/index.tsx b/packages/dapp/src/components/SettingsCard/index.tsx
@@ -1,6 +1,8 @@
 'use client';
 
+import Link from 'next/link';
 import { isError } from '@blockchain-lab-um/masca-connector';
+import { ArrowLeftIcon } from '@heroicons/react/20/solid';
 import { useTranslations } from 'next-intl';
 import { shallow } from 'zustand/shallow';
 
@@ -81,8 +83,18 @@ const SettingsCard = () => {
   };
 
   return (
-    <div className="h-full p-6 text-lg">
-      <div>
+    <div className="p-6">
+      <div className="flex w-full justify-between">
+        <Link href="/app" className="flex items-center">
+          <button className="animated-transition dark:text-navy-blue-50 dark:hover:bg-navy-blue-700 rounded-full text-gray-800 hover:bg-pink-100 hover:text-pink-700">
+            <ArrowLeftIcon className="h-6 w-6" />
+          </button>
+        </Link>
+        <div className="text-h3 dark:text-navy-blue-50 font-semibold text-gray-800">
+          {t('title')}
+        </div>
+      </div>
+      <div className="mt-5">
         <div className="font-ubuntu dark:text-navy-blue-50 text-xl font-medium leading-6 text-gray-800">
           {t('data-store')}
         </div>

diff --git a/packages/dapp/src/components/VerifyDataDisplay/index.tsx b/packages/dapp/src/components/VerifyDataDisplay/index.tsx
@@ -1,7 +1,9 @@
 'use client';
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { isError } from '@blockchain-lab-um/masca-connector';
+import { ArrowLeftIcon } from '@heroicons/react/20/solid';
 import { CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import { IVerifyResult } from '@veramo/core';
 import clsx from 'clsx';
@@ -117,15 +119,23 @@ const VerifyDataDisplay = () => {
   };
 
   return (
-    <div className="h-full p-6 text-lg">
-      <div>
-        <div className="text-h3">{t('title')}</div>
-        <div className="dark:bg-navy-blue-300 dark:border-navy-blue-400 group relative z-0 mt-8 rounded-2xl border border-gray-200 bg-gray-100 pr-2 pt-1">
+    <div className="p-6">
+      <div className="flex w-full justify-between">
+        <Link href="/app" className="flex items-center">
+          <button className="animated-transition dark:text-navy-blue-50 dark:hover:bg-navy-blue-700 rounded-full text-gray-800 hover:bg-pink-100 hover:text-pink-700">
+            <ArrowLeftIcon className="h-6 w-6" />
+          </button>
+        </Link>
+        <div className="text-h3 dark:text-navy-blue-50 font-semibold text-gray-800">
+          {t('title')}
+        </div>
+      </div>
+      <div className="mt-5">
+        <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',
               'scrollbar-thin scrollbar-thumb-orange-300/0 scrollbar-thumb-rounded-full font-jetbrains-mono',
-              'dark:placeholder:text-navy-blue-700 placeholder:text-gray-700',
               'min-h-[60vh] w-full resize-none rounded-2xl bg-gray-100 p-2 text-gray-700 focus:outline-none'
             )}
             value={data}
@@ -136,22 +146,22 @@ const VerifyDataDisplay = () => {
             }}
           />
         </div>
-        <div className="mt-8 flex justify-end gap-2">
-          {valid.checked && valid.valid && (
-            <CheckCircleIcon className="h-[31px] w-[31px] text-green-500 md:h-[38px] md:w-[38px]" />
-          )}
-          {valid.checked && !valid.valid && (
-            <XCircleIcon className="h-[31px] w-[31px] text-red-500 md:h-[38px] md:w-[38px]" />
-          )}
-          <Button
-            variant="primary"
-            size="sm"
-            loading={loading}
-            onClick={() => verifyData()}
-          >
-            {t('verify')}
-          </Button>
-        </div>
+      </div>
+      <div className="mt-8 flex justify-end gap-2">
+        {valid.checked && valid.valid && (
+          <CheckCircleIcon className="h-[31px] w-[31px] text-green-500 md:h-[38px] md:w-[38px]" />
+        )}
+        {valid.checked && !valid.valid && (
+          <XCircleIcon className="h-[31px] w-[31px] text-red-500 md:h-[38px] md:w-[38px]" />
+        )}
+        <Button
+          variant="primary"
+          size="sm"
+          loading={loading}
+          onClick={() => verifyData()}
+        >
+          {t('verify')}
+        </Button>
       </div>
     </div>
   );