Merge pull request #266 from credebl/dark-mode-ui-changes

Dark mode UI changes
credebl · Sep 14, 2023 · 6fe82b5 · 6fe82b5
2 parents 0ccdf00 + fddb417
commit 6fe82b5
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 24 deletions.
diff --git a/src/commonComponents/CredentialDefinitionCard.tsx b/src/commonComponents/CredentialDefinitionCard.tsx
@@ -16,11 +16,14 @@ const CredDeffCard = (props: { credDeffName: string, credentialDefinitionId: str
             type="submit"
             color='bg-primary-800'
             title='Initiate Credential Issuance'
-            className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 dark:text-white bg-primary-700 bg-transparent ring-primary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5'
+            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
+						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+						dark:hover:bg-primary-50'
             style={{ height: '1.5rem', width: '100%', minWidth: '2rem' }}
           >
             <div className='mr-2'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 23 23">  <path fill="#030300" fill-rule="evenodd" d="M21 21H2V2h9.5V0H2.556A2.563 2.563 0 0 0 0 2.556v17.888A2.563 2.563 0 0 0 2.556 23h17.888A2.563 2.563 0 0 0 23 20.444V11.5h-2V21ZM14.056 0v2H19.5l-13 13 1 1.5L21 3v5.944h2V0h-8.944Z" clip-rule="evenodd" />
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 23 23">  <path fill="#1F4EAD" fill-rule="evenodd" d="M21 21H2V2h9.5V0H2.556A2.563 2.563 0 0 0 0 2.556v17.888A2.563 2.563 0 0 0 2.556 23h17.888A2.563 2.563 0 0 0 23 20.444V11.5h-2V21ZM14.056 0v2H19.5l-13 13 1 1.5L21 3v5.944h2V0h-8.944Z" clip-rule="evenodd" />
             </svg>
             </div>
 

diff --git a/src/commonComponents/DeletePopup.tsx b/src/commonComponents/DeletePopup.tsx
@@ -42,7 +42,7 @@ const DeleteModal = (props: { openModal: boolean; closeModal: (flag: boolean) =>
         </svg>
         <p className="mb-4 text-gray-500 dark:text-gray-300">
           Are you sure you want to revoke{' '}
-          <span className="dark:text-black font-bold">{props.deviceName}</span> device?
+          <span className="dark:text-white font-bold">{props.deviceName}</span> device?
         </p>
         <div className="flex justify-center items-center space-x-4">
           <button

diff --git a/src/components/Authentication/FooterBar.tsx b/src/components/Authentication/FooterBar.tsx
@@ -8,7 +8,7 @@ const FooterBar = () => {
                 <p className="text-sm text-center text-gray-500">
                     &copy; 2019 - {new Date().getFullYear()} -
                     <a className="hover:underline" target="_blank"
-                    >CREDEBL
+                    >Blockster Labs
                     </a> | All rights reserved.
                 </p>
 
@@ -17,4 +17,4 @@ const FooterBar = () => {
     )
 }
 
-export default FooterBar;
+export default FooterBar;
diff --git a/src/components/CopyrightNotice.astro b/src/components/CopyrightNotice.astro
@@ -1,5 +1,5 @@
 <p class="my-10 text-sm text-center text-gray-500">
-	&copy; 2019 - {new Date().getFullYear()} —
+	&copy; 2019 - {new Date().getFullYear()}
 	<a class="hover:underline" target="_blank"
 		> Blockster Labs Private Limited</a
 	> | All rights reserved.

diff --git a/src/components/Issuance/Connections.tsx b/src/components/Issuance/Connections.tsx
@@ -42,7 +42,10 @@ const Connections = () => {
             onClick={() => {
               window.location.href = `${pathRoutes.back.issuance.credDef}`
             }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-auto dark:text-white'
+            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
+						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+						dark:hover:bg-primary-50'
             style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
           >
             <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">

diff --git a/src/components/Issuance/Issuance.tsx b/src/components/Issuance/Issuance.tsx
@@ -197,7 +197,10 @@ const IssueCred = () => {
             onClick={() => {
               window.location.href =`${pathRoutes.back.issuance.connections}`
             }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 m-2 ml-2 dark:text-white'
+            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
+						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+						dark:hover:bg-primary-50'
             style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
           >
             <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
@@ -283,17 +286,17 @@ const IssueCred = () => {
 														Connection Id 
 													</h5>
 													<span className='text-xl font-bold leading-none dark:text-white pl-1'>:</span>
-													<p className="pl-1">{user.connectionId}</p>
+													<p className="dark:text-white pl-1">{user.connectionId}</p>
 												</div>
-												<h3 className="">Attributes</h3>
+												<h3 className="dark:text-white">Attributes</h3>
 												<div className="container mx-auto pr-2">
 													<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
 														{schemaAttributesDetails.map((attr, index) => (
 															<div>
 																<div key={index} className="flex">
 																	<label
 																		htmlFor={`attributes.${index}.value`}
-																		className="w-1/3 pr-2 flex justify-end items-center font-light"
+																		className="dark:text-white w-1/3 pr-2 flex justify-end items-center font-light"
 																	>
 																		{attr.displayName.charAt(0).toUpperCase() +
 																			attr.displayName.slice(1).toLowerCase() + ":"}

diff --git a/src/components/Issuance/IssuedCrdentials.tsx b/src/components/Issuance/IssuedCrdentials.tsx
@@ -197,7 +197,7 @@ const CredentialList = () => {
 						</div>
 					) : (
 						<div>
-							<span className="block text-center p-4 m-8">
+							<span className="dark:text-white block text-center p-4 m-8">
 								There isn't any data available.
 							</span>
 						</div>

diff --git a/src/components/Resources/Schema/Create.tsx b/src/components/Resources/Schema/Create.tsx
@@ -191,8 +191,8 @@ const CreateSchema = () => {
 
 												return (
 													<>
-														<div className="d-flex justify-content-center align-items-center mb-1">
-															Attributes <span className="text-red-600">*</span>
+														<div className="dark:text-white d-flex justify-content-center align-items-center mb-1">
+															Attributes <span className="dark:text-white text-red-600">*</span>
 														</div>
 														<div className="flex flex-col">
 															{attribute.map((element: any, index: number) => (
@@ -496,11 +496,11 @@ const CreateSchema = () => {
                           setCredDefAuto('')
                         }}
                         disabled={createloader}
-                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto'
+                        className='dark:text-white bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto'
 
                         style={{ height: '2.6rem', width: '6rem', minWidth: '2rem' }}
                       >
-                        <svg xmlns="http://www.w3.org/2000/svg" className='mr-2' width="18" height="18" fill="none" viewBox="0 0 20 20">
+                        <svg xmlns="http://www.w3.org/2000/svg" className= 'mr-2' width="18" height="18" fill="none" viewBox="0 0 20 20">
                           <path fill="#1F4EAD" d="M19.414 9.414a.586.586 0 0 0-.586.586c0 4.868-3.96 8.828-8.828 8.828-4.868 0-8.828-3.96-8.828-8.828 0-4.868 3.96-8.828 8.828-8.828 1.96 0 3.822.635 5.353 1.807l-1.017.18a.586.586 0 1 0 .204 1.153l2.219-.392a.586.586 0 0 0 .484-.577V1.124a.586.586 0 0 0-1.172 0v.928A9.923 9.923 0 0 0 10 0a9.935 9.935 0 0 0-7.071 2.929A9.935 9.935 0 0 0 0 10a9.935 9.935 0 0 0 2.929 7.071A9.935 9.935 0 0 0 10 20a9.935 9.935 0 0 0 7.071-2.929A9.935 9.935 0 0 0 20 10a.586.586 0 0 0-.586-.586Z" />
                         </svg>
 

diff --git a/src/components/Resources/Schema/ViewSchema.tsx b/src/components/Resources/Schema/ViewSchema.tsx
@@ -153,7 +153,10 @@ const ViewSchemas = () => {
             onClick={() => {
               window.location.href = `${pathRoutes.back.schema.schemas}`
             }}
-            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:text-white'
+            className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+						ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
+						lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+						dark:hover:bg-primary-50'
             style={{ height: '2.5rem', width: '5rem', minWidth: '2rem' }}
           >
             <svg className='mr-1' xmlns="http://www.w3.org/2000/svg" width="22" height="12" fill="none" viewBox="0 0 30 20">
@@ -192,12 +195,15 @@ const ViewSchemas = () => {
                         type="submit"
                         color='bg-primary-800'
                         title='View schema details on ledger'
-                        className='dark:text-white bg-primary-700 bg-transparent ring-primary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto'
+                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 
+												ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 
+												lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black 
+												dark:hover:bg-primary-50'
                         style={{ height: '1.5rem', width: '13rem', minWidth: '2rem' }}
                       >
                         <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" className='mr-2' fill="none" viewBox="0 0 17 17">
-                          <path fill="#000" d="M15.749 6.99c-.334-.21-.813-.503-.813-.697.01-.397.113-.786.3-1.136.277-.69.561-1.395.204-1.915-.358-.519-1.122-.462-1.853-.405-.358.082-.73.082-1.089 0a2.74 2.74 0 0 1-.374-1.087c-.162-.739-.333-1.501-.942-1.704-.61-.203-1.154.3-1.699.811-.309.276-.723.65-.934.65-.212 0-.634-.374-.943-.65C7.07.362 6.51-.14 5.908.046c-.602.187-.805.933-.967 1.671-.05.383-.18.75-.382 1.08a2.295 2.295 0 0 1-1.09 0c-.722-.066-1.478-.13-1.844.405-.365.535-.081 1.225.195 1.914.19.35.295.739.31 1.136-.066.195-.521.487-.854.698C.65 7.34 0 7.76 0 8.41c0 .649.65 1.07 1.276 1.468.333.211.812.495.853.69-.014.4-.12.791-.309 1.144-.276.69-.56 1.395-.195 1.914.366.52 1.122.463 1.845.398a2.441 2.441 0 0 1 1.089.04c.2.33.33.697.382 1.08.162.738.333 1.508.934 1.711a.86.86 0 0 0 .277.106 2.439 2.439 0 0 0 1.422-.812c.308-.275.731-.657.942-.657.212 0 .626.382.935.657.544.487 1.105.998 1.698.812.593-.187.813-.974.943-1.712a2.69 2.69 0 0 1 .374-1.08 2.472 2.472 0 0 1 1.089-.04c.73.065 1.479.138 1.852-.397.374-.536.073-1.225-.203-1.915a2.585 2.585 0 0 1-.3-1.144c.056-.194.511-.478.812-.69C16.35 9.587 17 9.174 17 8.517c0-.658-.618-1.136-1.251-1.526Zm-.431 2.248c-.537.332-1.04.649-1.195 1.135a2.73 2.73 0 0 0 .325 1.68c.155.373.399.99.293 1.151-.106.163-.731.09-1.113.057a2.393 2.393 0 0 0-1.626.203 2.594 2.594 0 0 0-.682 1.55c-.082.365-.236 1.054-.406 1.111-.171.057-.667-.422-.894-.625a2.585 2.585 0 0 0-1.48-.868c-.58.11-1.105.417-1.486.868-.22.203-.756.674-.894.625-.138-.049-.325-.746-.407-1.111a2.594 2.594 0 0 0-.674-1.55 1.522 1.522 0 0 0-.95-.243 7.016 7.016 0 0 0-.708.04c-.374 0-1.008.09-1.105-.056-.098-.146.097-.78.26-1.112.285-.51.4-1.1.325-1.68-.146-.486-.65-.81-1.186-1.135-.358-.227-.902-.568-.902-.811 0-.244.544-.552.902-.811.536-.333 1.04-.658 1.186-1.136a2.754 2.754 0 0 0-.325-1.688c-.163-.348-.398-.973-.284-1.127.113-.154.73-.09 1.105-.057.549.122 1.123.05 1.625-.203.392-.427.629-.972.674-1.55.082-.364.236-1.054.407-1.11.17-.058.674.421.894.624.381.45.907.753 1.487.86a2.569 2.569 0 0 0 1.479-.86c.227-.203.756-.673.894-.625.138.049.325.747.406 1.112.048.578.288 1.123.682 1.55a2.397 2.397 0 0 0 1.626.202c.382 0 1.007-.09 1.113.057.106.146-.138.811-.292 1.144a2.755 2.755 0 0 0-.326 1.687c.155.479.659.811 1.195 1.136.357.227.902.568.902.811 0 .243-.488.527-.845.755Z" />
-                          <path fill="#000" d="m11.253 6.126-3.78 3.943-1.687-1.403a.473.473 0 0 0-.149-.08.556.556 0 0 0-.352 0 .473.473 0 0 0-.148.08.377.377 0 0 0-.101.12.306.306 0 0 0 0 .284.377.377 0 0 0 .101.12l2.002 1.7a.459.459 0 0 0 .152.083.548.548 0 0 0 .181.027.601.601 0 0 0 .19-.043.499.499 0 0 0 .153-.097l4.105-4.284a.312.312 0 0 0 .074-.265.365.365 0 0 0-.174-.234.55.55 0 0 0-.632.049h.065Z" />
+                          <path fill="#1F4EAD" d="M15.749 6.99c-.334-.21-.813-.503-.813-.697.01-.397.113-.786.3-1.136.277-.69.561-1.395.204-1.915-.358-.519-1.122-.462-1.853-.405-.358.082-.73.082-1.089 0a2.74 2.74 0 0 1-.374-1.087c-.162-.739-.333-1.501-.942-1.704-.61-.203-1.154.3-1.699.811-.309.276-.723.65-.934.65-.212 0-.634-.374-.943-.65C7.07.362 6.51-.14 5.908.046c-.602.187-.805.933-.967 1.671-.05.383-.18.75-.382 1.08a2.295 2.295 0 0 1-1.09 0c-.722-.066-1.478-.13-1.844.405-.365.535-.081 1.225.195 1.914.19.35.295.739.31 1.136-.066.195-.521.487-.854.698C.65 7.34 0 7.76 0 8.41c0 .649.65 1.07 1.276 1.468.333.211.812.495.853.69-.014.4-.12.791-.309 1.144-.276.69-.56 1.395-.195 1.914.366.52 1.122.463 1.845.398a2.441 2.441 0 0 1 1.089.04c.2.33.33.697.382 1.08.162.738.333 1.508.934 1.711a.86.86 0 0 0 .277.106 2.439 2.439 0 0 0 1.422-.812c.308-.275.731-.657.942-.657.212 0 .626.382.935.657.544.487 1.105.998 1.698.812.593-.187.813-.974.943-1.712a2.69 2.69 0 0 1 .374-1.08 2.472 2.472 0 0 1 1.089-.04c.73.065 1.479.138 1.852-.397.374-.536.073-1.225-.203-1.915a2.585 2.585 0 0 1-.3-1.144c.056-.194.511-.478.812-.69C16.35 9.587 17 9.174 17 8.517c0-.658-.618-1.136-1.251-1.526Zm-.431 2.248c-.537.332-1.04.649-1.195 1.135a2.73 2.73 0 0 0 .325 1.68c.155.373.399.99.293 1.151-.106.163-.731.09-1.113.057a2.393 2.393 0 0 0-1.626.203 2.594 2.594 0 0 0-.682 1.55c-.082.365-.236 1.054-.406 1.111-.171.057-.667-.422-.894-.625a2.585 2.585 0 0 0-1.48-.868c-.58.11-1.105.417-1.486.868-.22.203-.756.674-.894.625-.138-.049-.325-.746-.407-1.111a2.594 2.594 0 0 0-.674-1.55 1.522 1.522 0 0 0-.95-.243 7.016 7.016 0 0 0-.708.04c-.374 0-1.008.09-1.105-.056-.098-.146.097-.78.26-1.112.285-.51.4-1.1.325-1.68-.146-.486-.65-.81-1.186-1.135-.358-.227-.902-.568-.902-.811 0-.244.544-.552.902-.811.536-.333 1.04-.658 1.186-1.136a2.754 2.754 0 0 0-.325-1.688c-.163-.348-.398-.973-.284-1.127.113-.154.73-.09 1.105-.057.549.122 1.123.05 1.625-.203.392-.427.629-.972.674-1.55.082-.364.236-1.054.407-1.11.17-.058.674.421.894.624.381.45.907.753 1.487.86a2.569 2.569 0 0 0 1.479-.86c.227-.203.756-.673.894-.625.138.049.325.747.406 1.112.048.578.288 1.123.682 1.55a2.397 2.397 0 0 0 1.626.202c.382 0 1.007-.09 1.113.057.106.146-.138.811-.292 1.144a2.755 2.755 0 0 0-.326 1.687c.155.479.659.811 1.195 1.136.357.227.902.568.902.811 0 .243-.488.527-.845.755Z" />
+                          <path fill="#1F4EAD" d="m11.253 6.126-3.78 3.943-1.687-1.403a.473.473 0 0 0-.149-.08.556.556 0 0 0-.352 0 .473.473 0 0 0-.148.08.377.377 0 0 0-.101.12.306.306 0 0 0 0 .284.377.377 0 0 0 .101.12l2.002 1.7a.459.459 0 0 0 .152.083.548.548 0 0 0 .181.027.601.601 0 0 0 .19-.043.499.499 0 0 0 .153-.097l4.105-4.284a.312.312 0 0 0 .074-.265.365.365 0 0 0-.174-.234.55.55 0 0 0-.632.049h.065Z" />
                         </svg>
 
                         Check on ledger
@@ -348,7 +354,7 @@ const ViewSchemas = () => {
                           setCredDefAuto('')
                         }}
                         disabled={createloader}
-                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:text-white'
+                        className='bg-secondary-700 ring-primary-700 bg-white-700 hover:bg-secondary-700 ring-2 text-black font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 ml-auto dark:text-white dark:hover:text-black dark:hover:bg-primary-50'
 
                         style={{ height: '2.6rem', width: '6rem', minWidth: '2rem' }}
                       >

diff --git a/src/components/Verification/VerificationCredentialList.tsx b/src/components/Verification/VerificationCredentialList.tsx
@@ -327,7 +327,7 @@ const VerificationCredentialList = () => {
 						</div>
 					) : (
 						<div>
-							<span className="block text-center p-4 m-8">
+							<span className="dark:text-white block text-center p-4 m-8">
 								There isn't any data available.
 							</span>
 						</div>

diff --git a/src/components/organization/SharedIllustrate.tsx b/src/components/organization/SharedIllustrate.tsx
@@ -46,4 +46,4 @@ const SharedIllustrate = () => {
 
 }
 
-export default SharedIllustrate
+export default SharedIllustrate
diff --git a/src/components/organization/WalletSpinup.tsx b/src/components/organization/WalletSpinup.tsx
@@ -507,7 +507,7 @@ const WalletSteps = (props: { steps: number; agentSpinupCall: boolean }) => {
 							</svg>
 						</span>
 					) : (
-						<span className="absolute flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full -left-4 ring-4 ring-white dark:ring-gray-900 dark:bg-gray-700"></span>
+						<span className="absolute flex items-center justify-center w-8 h-8 bg-gray-900 rounded-full -left-4 ring-4 ring-white dark:ring-gray-900 dark:bg-gray-700"></span>
 					)}
 					<h3 className="font-medium leading-tight">
 					Wallet creation is in progress
-Original file line number
+Diff line change
@@ Expand Up / @@ -197,7 +197,7 @@ const CredentialList = () => { @@
     						</div>
     					) : (
     						<div>
-    							<span className="block text-center p-4 m-8">
+    							<span className="dark:text-white block text-center p-4 m-8">
     								There isn't any data available.
     							</span>
     						</div>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,4 +46,4 @@ const SharedIllustrate = () => {

		}

		export default SharedIllustrate
		export default SharedIllustrate