Fix : Space issues on the return flow (#1628)

adobe · Nov 5, 2024 · 1cd0ea1 · 1cd0ea1
1 parent 5781b8d
commit 1cd0ea1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 52 deletions.
diff --git a/example/src/pages/credential/GetCredentialOAuthS2s.js b/example/src/pages/credential/GetCredentialOAuthS2s.js
@@ -58,7 +58,7 @@ const GetCredentialOAuthS2s = () => {
 
       <GetCredential.UnknownError helpLink="https://some_help_link" helpLinkText="Get Help" className="unKnownError" />
 
-      <GetCredential.Card title="Your credential is ready to use" paragraph="Check the downloads section of your browser for the ZIP file, or find it where you save downloads on your machine." devConsoleDirection="/console" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer Console" className="card_developer_console">
+      <GetCredential.Card title="Your credential is ready to use" paragraph="Check the downloads section of your browser for the ZIP file, or find it where you save downloads on your machine." devConsoleDirection="/console" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer Console" className="card_developer_console" isCollapsable="true">
 
         <GetCredential.Card.Side>
           <div style={{ display: "flex", gap: "32px", flexDirection: "column" }}>

diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js b/packages/gatsby-theme-aio/src/components/GetCredential/PreviousCredential.js
@@ -57,48 +57,6 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
           flex-direction: column;
           gap: 48px;
         `} data-cy="return-flow">
-        <div
-          css={css`
-            display: flex;
-            flex-direction: column;
-            gap: 48px;
-            color: var(--spectrum-global-color-gray-800);
-            width: 100%;
-            height: 100%;
-            text-align: left;
-            @media screen and (min-width: ${MIN_MOBILE_WIDTH}) and (max-width: ${MAX_TABLET_SCREEN_WIDTH}) {
-              padding: 0;
-              width: 100%;
-            }
-          `}>
-          <div
-            css={css`
-              display: flex;
-              flex-direction: column;
-              gap: 16px;
-            `}>
-            {credentialHeader?.title && (
-              <h3 className="spectrum-Heading spectrum-Heading--sizeXL">
-                {credentialHeader?.title}
-              </h3>
-            )}
-            {credentialHeader?.paragraph && (
-              <p className="spectrum-Body spectrum-Body--sizeL"> {credentialHeader?.paragraph} </p>
-            )}
-            <p
-              className="spectrum-Body spectrum-Body--sizeS"
-              onClick={() => setIsShow(true)}
-              css={css`
-                color: var(--spectrum-global-color-gray-800);
-                display: inline-flex;
-              `}>
-              {selectedOrganization.type === "developer" ?
-                "You’re viewing in your personal developer organization" :
-                <>You’re viewing in [<b> {selectedOrganization?.name} </b>] .</>}
-              <Organization isShow={isShow} setIsShow={setIsShow} />
-            </p>
-          </div>
-        </div>
         <div
           css={css`
             display: flex;
@@ -120,14 +78,41 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
                 width: 100%;
               }
             `}>
-            {returnSideComp && (
-              <ReturnSideComp
-                returnSideComp={returnSideComp}
-                returnNewCredential={returnNewCredential}
-                returnCustomComp={returnCustomComp}
-                setIsCreateNewCredential={setIsCreateNewCredential}
-              />
-            )}
+            <div
+              css={css`
+              display: flex;
+              flex-direction: column;
+              gap: 30px;
+            `}>
+              {credentialHeader?.title && (
+                <h3 className="spectrum-Heading spectrum-Heading--sizeXL">
+                  {credentialHeader?.title}
+                </h3>
+              )}
+              {credentialHeader?.paragraph && (
+                <p className="spectrum-Body spectrum-Body--sizeL"> {credentialHeader?.paragraph} </p>
+              )}
+              <p
+                className="spectrum-Body spectrum-Body--sizeS"
+                onClick={() => setIsShow(true)}
+                css={css`
+                color: var(--spectrum-global-color-gray-800);
+                display: inline-flex;
+              `}>
+                {selectedOrganization.type === "developer" ?
+                  "You’re viewing in your personal developer organization" :
+                  <>You’re viewing in [<b> {selectedOrganization?.name} </b>] .</>}
+                <Organization isShow={isShow} setIsShow={setIsShow} />
+              </p>
+              {returnSideComp && (
+                <ReturnSideComp
+                  returnSideComp={returnSideComp}
+                  returnNewCredential={returnNewCredential}
+                  returnCustomComp={returnCustomComp}
+                  setIsCreateNewCredential={setIsCreateNewCredential}
+                />
+              )}
+            </div>
           </div>
 
           <div
@@ -144,7 +129,7 @@ const PreviousCredential = ({ setIsCreateNewCredential }) => {
             <PreviousProject
               returnFields={returnFields}
               productList={productList}
-              collapse = { returnProps?.[PreviousProject]?.isCollapsable}
+              collapse={returnProps?.[PreviousProject]?.isCollapsable}
             />
           </div>
         </div>