Application launch button per card

OpenConext · Aug 22, 2023 · aba9829 · aba9829
1 parent c04a873
commit aba9829
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/welcome/src/pages/Proceed.js b/welcome/src/pages/Proceed.js
@@ -47,8 +47,13 @@ export const Proceed = () => {
                     <h3>{role.name}</h3>
                     <MoreLessText txt={role.description}/>
                     <p><a href={role.landingPage}>{role.landingPage}</a></p>
-
                 </section>
+                <div className={"launch"}>
+                    <Button txt={I18n.t("proceed.launch")} onClick={() => {
+                        window.href = invitationRole.landingPage;
+                    }}/>
+                </div>
+
             </div>;
         return (
             <Card key={index} cardType={CardType.Big} children={children}/>
@@ -76,9 +81,6 @@ export const Proceed = () => {
                             <h4>{I18n.t("proceed.goto")}</h4>
                             <span>{I18n.t("proceed.nextStep")}</span>
                         </div>
-                        <Button txt={I18n.t("proceed.launch")} onClick={() => {
-                            window.href = invitation.roles[0].role.landingPage;
-                        }}/>
                     </div>
                     {invitation.roles.map((invitationRole, index) => renderInvitationRole(invitationRole, index))}
                 </section>

diff --git a/welcome/src/pages/Proceed.scss b/welcome/src/pages/Proceed.scss
@@ -26,9 +26,6 @@
             align-content: center;
             margin-bottom: 25px;
 
-            button {
-                margin: auto;
-            }
         }
 
         .step-actions {
@@ -38,13 +35,36 @@
         .user-role {
             display: flex;
 
+            @media (max-width: 680px) {
+                flex-direction: column;
+            }
+
             img, svg {
                 height: 56px;
                 width: auto;
                 margin-right: 35px;
                 border-radius: $br;
+
+                @media (max-width: 680px) {
+                    margin: 0 auto 20px 0;
+                }
+            }
+
+            .launch {
+                margin-left: auto;
+
+                @media (max-width: 680px) {
+                    margin: 20px auto 0 0;
+                }
+
             }
         }
 
+        .sds--card {
+            margin-bottom: 25px;
+            background-color: var(--sds--color--white);
+            border-radius: 0.175rem;
+            box-shadow: 0 0.1rem 0.1rem 0 var(--sds--color--pitch-black--dimmed--25);
+        }
     }
 }