Adjust security key information, 4rows -> 3rows

SUNET · Nov 28, 2024 · 0b46576 · 0b46576
1 parent a15a061
commit 0b46576
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 38 deletions.
diff --git a/src/components/Common/MultiFactorAuthentication.tsx b/src/components/Common/MultiFactorAuthentication.tsx
@@ -416,25 +416,27 @@ function SecurityKeyTable() {
               &nbsp;
               <strong>{cred.description}</strong>
             </p>
+            <EduIDButton
+              id="remove-webauthn"
+              buttonstyle="close"
+              size="sm"
+              onClick={() => handleConfirmDeleteModal(cred.key)}
+            ></EduIDButton>
+          </div>
+          <div>
             <p aria-label="created on">
-              <FormattedMessage description="security creation date" defaultMessage="Created on:" />
+              <FormattedMessage description="security creation date" defaultMessage="Created:" />
               &nbsp;
               {date_created}
             </p>
             <p aria-label="used on">
-              <FormattedMessage description="security last used" defaultMessage="Used on:" />
+              <FormattedMessage description="security last used" defaultMessage="Used:" />
               &nbsp;
               {date_success}
             </p>
-            {btnVerify}
           </div>
 
-          <EduIDButton
-            id="remove-webauthn"
-            buttonstyle="close"
-            size="sm"
-            onClick={() => handleConfirmDeleteModal(cred.key)}
-          ></EduIDButton>
+          {btnVerify}
         </figure>
         <NotificationModal
           id="remove-security-key"

diff --git a/src/styles/_figure.scss b/src/styles/_figure.scss
@@ -77,3 +77,53 @@ figure,
     margin-bottom: 1.5rem;
   }
 }
+
+// SECURITY TABLE
+figure.webauthn-token-holder {
+  display: grid;
+  grid-template-rows: 1fr;
+  padding: 0.5rem 1rem;
+  text-align: left;
+  margin: 0;
+  border-bottom: 1px solid $border-gray;
+
+  &:last-of-type {
+    border-bottom: none;
+    margin-bottom: 1rem;
+  }
+
+  & div:first-child {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  & div:nth-child(2) {
+    display: flex;
+    align-items: end;
+
+    & p:last-child {
+      margin-left: 1rem;
+    }
+  }
+
+  p {
+    font-size: 0.9rem;
+    margin-bottom: 0.2rem;
+
+    &.verified strong {
+      font-family: $akkurat;
+      letter-spacing: 1px;
+      font-weight: 700;
+      padding: 0;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+    }
+  }
+  .btn-link {
+    height: auto;
+    margin-right: 1rem;
+  }
+  button.btn-close {
+    justify-self: flex-end;
+  }
+}
diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss
@@ -220,32 +220,3 @@ caption {
     display: inline-block;
   }
 }
-
-// SECURITY TABLE
-
-figure.webauthn-token-holder {
-  display: grid;
-  grid-template-columns: 5fr 1fr;
-  padding: 0.5rem 1rem 0 1em;
-  text-align: left;
-  p {
-    font-size: 0.9rem;
-    margin-bottom: 0.7rem;
-
-    &.verified strong {
-      font-family: $akkurat;
-      letter-spacing: 1px;
-      font-weight: 700;
-      padding: 0;
-      font-size: 0.75rem;
-      text-transform: uppercase;
-    }
-  }
-  .btn-link {
-    height: auto;
-    margin-right: 1rem;
-  }
-  button.btn-close {
-    justify-self: flex-end;
-  }
-}