transaction page UI tweaks

css/main.css

@@ -672,7 +672,7 @@ details[open] > summary .icon {
 .status-tag:not(:empty) {
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  font-size: 0.6rem;
+  font-size: 0.7rem;
   border-radius: 0.2rem;
   padding: 0.3rem 0.4rem;
   font-weight: 500;
@@ -740,7 +740,7 @@ details[open] > summary .icon {
   display: -ms-flexbox;
   display: flex;
   background-color: var(--accent-color);
-  border-radius: 50%;
+  border-radius: 40%;
   padding: 1rem;
   aspect-ratio: 1/1;
 }
@@ -750,12 +750,6 @@ details[open] > summary .icon {
   fill: rgba(var(--background-color), 1);
 }
 
-#transaction_detail__status {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 #transaction_detail__amount {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -774,6 +768,7 @@ details[open] > summary .icon {
 #transaction_detail__time {
   font-size: 0.8rem;
   color: rgba(var(--text-color), 0.8);
+  margin-right: 1rem;
 }
 
 @media screen and (max-width: 640px) {
@@ -813,15 +808,19 @@ details[open] > summary .icon {
     text-align: center;
   }
 
-  #transaction_detail__amount {
+  #transaction_detail__status {
-    -webkit-box-pack: center;
+    justify-self: center;
-        -ms-flex-pack: center;
-            justify-content: center;
   }
 
   #transaction_detail__icon {
     justify-self: center;
   }
+
+  #transaction_detail__amount {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
 }
 @media screen and (min-width: 640px) {
   #confirmation_popup,
@@ -877,14 +876,15 @@ details[open] > summary .icon {
 
   #transaction_top {
     overflow: hidden;
-    padding: 2rem;
+    padding: 1.8rem;
     border-radius: 0.5rem;
     background-color: var(--foreground-color);
     -webkit-box-shadow: 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1);
             box-shadow: 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1);
   }
-  #transaction_top .status-tag {
+
-    font-size: 0.7rem;
+  #transaction_detail__status {
+    justify-self: flex-start;
   }
 
   #transaction_detail__icon {
@@ -921,7 +921,7 @@ details[open] > summary .icon {
 
   #transaction section {
     display: grid;
-    grid-template-columns: 16rem minmax(0, 1fr);
+    grid-template-columns: 18rem minmax(0, 1fr);
   }
 }
 @media (any-hover: hover) {

css/main.scss

@@ -588,7 +588,7 @@ details {
 .status-tag:not(:empty){
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    font-size: 0.6rem;
+    font-size: 0.7rem;
     border-radius: 0.2rem;
     padding: 0.3rem 0.4rem;
     font-weight: 500;
@@ -650,7 +650,7 @@ details {
 #transaction_detail__icon{
     display: flex;
     background-color: var(--accent-color);
-    border-radius: 50%;
+    border-radius: 40%;
     padding: 1rem;
     aspect-ratio: 1/1;
     .icon{
@@ -659,11 +659,6 @@ details {
         fill: rgba(var(--background-color), 1);
     }
 }
-#transaction_detail__status{
-    position: absolute;
-    right: 0;
-    top: 0;
-}
 #transaction_detail__amount{
     display: flex;
     font-size: 1.8rem;
@@ -678,6 +673,7 @@ details {
 #transaction_detail__time{
     font-size: 0.8rem;
     color: rgba(var(--text-color), 0.8);
+    margin-right: 1rem;
 }
 @media screen and (max-width: 640px) {
     sm-button{
@@ -704,12 +700,15 @@ details {
     #transaction_top{
         text-align: center;
     }
-    #transaction_detail__amount{
+    #transaction_detail__status{
-        justify-content: center;
+        justify-self: center;
     }
     #transaction_detail__icon{
         justify-self: center;
     }
+    #transaction_detail__amount{
+        justify-content: center;
+    }
 }
 @media screen and (min-width: 640px) {
     #confirmation_popup,
@@ -759,14 +758,14 @@ details {
     }
     #transaction_top{
         overflow: hidden;
-        padding: 2rem;
+        padding: 1.8rem;
         border-radius: 0.5rem;
         // border: solid thin rgba(var(--text-color), 0.16);
         background-color: var(--foreground-color);
         box-shadow: 0 1rem 1.5rem -0.8rem rgba(0, 0, 0, 0.1);
-        .status-tag{
+    }
-            font-size: 0.7rem;
+    #transaction_detail__status{
-        }
+        justify-self: flex-start;
     }
     #transaction_detail__icon{
         justify-self: flex-start;
@@ -799,7 +798,7 @@ details {
     #transaction{
         section{
             display: grid;
-            grid-template-columns: 16rem minmax(0, 1fr);
+            grid-template-columns: 18rem minmax(0, 1fr);
         }
     }
 }

index.html

@@ -220,12 +220,14 @@
         <section>
             <div id="transaction_top" class="grid gap-1-5">
                 <div id="transaction_detail__icon"></div>
-                <div id="transaction_detail__status" class="status-tag flex align-center"></div>
                 <div class="grid gap-0-5">
                     <div id="transaction_detail__type"></div>
                     <h3 id="transaction_detail__amount"></h3>
                 </div>
-                <time id="transaction_detail__time"></time>
+                <div class="flex align-center space-between">
+                    <time id="transaction_detail__time"></time>
+                    <div id="transaction_detail__status"></div>
+                </div>
                 <sm-button id="transaction_action_button" variant="primary"></sm-button>
             </div>
         </section>