fix : credential design issues - remove padding (#1630)

adobe · Dec 16, 2024 · 693439c · 693439c
1 parent 2fa13c0
commit 693439c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/example/src/pages/credential/GetCredentialApiKey.js b/example/src/pages/credential/GetCredentialApiKey.js
@@ -72,7 +72,7 @@ const GetCredentialApiKey = () => {
 
         <GetCredential.Return.Side>
           <GetCredential.Return.Side.Custom>
-            <div style={{ display: "flex", gap: "30px", flexDirection: "column", width: "100%" }}>
+            <div style={{ display: "flex", gap: "15px", flexDirection: "column", width: "100%" }}>
               <h3 className='spectrum-Heading spectrum-Heading--sizeM'>Welcome back</h3>
               <p className="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
             </div>

diff --git a/example/src/pages/credential/GetCredentialOAuthS2s.js b/example/src/pages/credential/GetCredentialOAuthS2s.js
@@ -119,7 +119,7 @@ const GetCredentialOAuthS2s = () => {
 
         <GetCredential.Return.Side>
           <GetCredential.Return.Side.Custom>
-            <div style={{ display: "flex", gap: "30px", flexDirection: "column", width: "100%" }}>
+            <div style={{ display: "flex", gap: "15px", flexDirection: "column", width: "100%" }}>
               <h3 className='spectrum-Heading spectrum-Heading--sizeM'>Welcome back</h3>
               <p className="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
             </div>

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js
@@ -82,7 +82,7 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
               css={css`
               display: flex;
               flex-direction: column;
-              gap: 30px;
+              gap: 15px;
             `}>
               {credentialHeader?.title && (
                 <h3 className="spectrum-Heading spectrum-Heading--sizeXL">
@@ -125,7 +125,7 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
               }
             `}
           />
-          <div>
+          <div css={css`width : 50%`}>
             <PreviousProject
               returnFields={returnFields}
               productList={productList}

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousProject.js
@@ -38,9 +38,17 @@ const PreviousProject = ({ returnFields, productList, collapse }) => {
           flex-direction : column;
           gap:24px;
         `}>
-        {previousProject?.title && <h3 className='spectrum-Heading spectrum-Heading--sizeM'>{previousProject?.title}</h3>}
 
-        {previousProject?.paragraph && <p className="spectrum-Body spectrum-Body--sizeM">{previousProject?.paragraph}</p>}
+        <div
+          css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 15px;
+        `}
+        >
+          {previousProject?.title && <h3 className='spectrum-Heading spectrum-Heading--sizeM'>{previousProject?.title}</h3>}
+          {previousProject?.paragraph && <p className="spectrum-Body spectrum-Body--sizeM">{previousProject?.paragraph}</p>}
+        </div>
 
         {returnManageDeveloperConsole && <ReturnManageDeveloperConsole returnManageDeveloperConsole={returnManageDeveloperConsole} />}
 

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnNewCredential.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnNewCredential.js
@@ -7,7 +7,7 @@ const ReturnNewCredential = ({ returnNewCredential, setIsCreateNewCredential, re
     <div
       css={css`
         display:flex;
-        gap:16px;
+        gap:15px;
         flex-direction:column;
         width: 100%;
       `}

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnSideComp.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnSideComp.js
@@ -9,7 +9,7 @@ const ReturnSideComp = ({ returnSideComp, setIsCreateNewCredential, returnNewCre
       <div
         css={css`
           display:flex;
-          gap:30px;
+          gap:15px;
           flex-direction:column;
           width: 100%;
         `}