UI improvements

docs/css/main.css

@@ -352,6 +352,12 @@ ul {
   margin-left: 0.5rem;
 }
 
+.icon-only {
+  padding: 0.6rem;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+}
+
 .icon-button {
   padding: 0.6rem;
   border-radius: 0.8rem;
@@ -551,6 +557,11 @@ sm-checkbox {
   align-content: flex-start;
 }
 
+#login_form {
+  width: min(24rem, 100%);
+  margin: 0 auto;
+}
+
 #login_form__priv_key {
   margin-top: 1rem;
 }
@@ -608,16 +619,11 @@ sm-checkbox {
   width: min(42rem, 100%);
 }
 
-#exchange {
-  display: grid;
-  gap: 1.5rem;
-}
-
 .listed-asset {
   position: relative;
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 1rem 0;
   border-radius: 0.5rem;
   opacity: 0.8;
   font-weight: 400;
@@ -773,6 +779,7 @@ sm-checkbox {
 #wallet {
   gap: 1.5rem;
   align-content: flex-start;
+  width: min(24rem, 100%);
 }
 
 .wallet_actions__wrapper {
@@ -793,8 +800,7 @@ sm-checkbox {
 .balance-card {
   display: grid;
   align-items: center;
-  gap: 0.3rem 1rem;
+  gap: 0.3rem 0.5rem;
-  padding: 0.5rem 0;
   border-radius: 0.5rem;
 }
 .balance-card.is-locked {
@@ -1078,11 +1084,16 @@ sm-checkbox {
     background-color: rgba(var(--text-color), 0.06);
   }
 
-  #exchange {
+  .is-signed-in #exchange_wrapper {
     display: grid;
+    gap: 1.5rem;
     grid-template-columns: 16rem 1fr;
+    align-items: flex-start;
   }
 
+  .listed-asset {
+    padding: 1rem;
+  }
   .listed-asset--active {
     opacity: 1;
     background-color: rgba(var(--text-color), 0.06);

docs/css/main.scss

@@ -347,6 +347,11 @@ ul {
     margin-left: 0.5rem;
   }
 }
+.icon-only {
+  padding: 0.6rem;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+}
 
 .icon-button {
   padding: 0.6rem;
@@ -528,6 +533,10 @@ sm-checkbox {
   align-items: flex-start;
   align-content: flex-start;
 }
+#login_form {
+  width: min(24rem, 100%);
+  margin: 0 auto;
+}
 #login_form__priv_key {
   margin-top: 1rem;
 }
@@ -584,16 +593,11 @@ sm-checkbox {
     width: min(42rem, 100%);
   }
 }
-
-#exchange {
-  display: grid;
-  gap: 1.5rem;
-}
 .listed-asset {
   position: relative;
   grid-template-columns: auto 1fr auto;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: 1rem 0;
   border-radius: 0.5rem;
   opacity: 0.8;
   font-weight: 400;
@@ -746,6 +750,7 @@ sm-checkbox {
 #wallet {
   gap: 1.5rem;
   align-content: flex-start;
+  width: min(24rem, 100%);
 }
 .wallet_actions__wrapper {
   grid-column: span 3;
@@ -763,8 +768,7 @@ sm-checkbox {
 .balance-card {
   display: grid;
   align-items: center;
-  gap: 0.3rem 1rem;
+  gap: 0.3rem 0.5rem;
-  padding: 0.5rem 0;
   border-radius: 0.5rem;
   &.is-locked {
     grid-template-columns: auto 1fr;
@@ -1000,11 +1004,16 @@ sm-checkbox {
       background-color: rgba(var(--text-color), 0.06);
     }
   }
-  #exchange {
+  .is-signed-in {
-    display: grid;
+    #exchange_wrapper {
-    grid-template-columns: 16rem 1fr;
+      display: grid;
+      gap: 1.5rem;
+      grid-template-columns: 16rem 1fr;
+      align-items: flex-start;
+    }
   }
   .listed-asset {
+    padding: 1rem;
     &--active {
       opacity: 1;
       background-color: rgba(var(--text-color), 0.06);