Implemented UI for transaction initiation

css/main.css

@@ -39,7 +39,7 @@ body {
   --orange: #ff9100;
   --redish-orange: #ff3d00;
   color: rgba(var(--text-color), 1);
-  background: rgba(var(--background-color), 1);
+  background-color: rgba(var(--background-color), 1);
   overflow-y: hidden;
 }
 body #scroll_to_bottom {
@@ -558,6 +558,10 @@ ol li::before {
   background-color: var(--accent-color);
 }
 
+.margin-right-0-3 {
+  margin-right: 0.3rem;
+}
+
 .margin-right-0-5 {
   margin-right: 0.5rem;
 }
@@ -645,6 +649,12 @@ ol li::before {
   font-size: 2rem;
 }
 
+.card {
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
 .page-layout {
   display: grid;
   gap: 1.5rem 0;
@@ -992,6 +1002,7 @@ sm-button[variant=primary] {
   overflow: hidden;
   background-color: var(--contact-color, --accent-color);
   flex-shrink: 0;
+  transition: background-color 0.3s;
 }
 .initial::after {
   content: "";
@@ -1783,7 +1794,7 @@ sm-button[variant=primary] {
 }
 .back-button {
   padding: 0.5rem;
-  margin-left: -0.5rem;
+  margin-left: -0.8rem;
 }
 
 #chat_header {
@@ -1795,12 +1806,6 @@ sm-button[variant=primary] {
 #chat_header .flex {
   height: 100%;
 }
-#chat_header #chat_details_button {
-  background-color: rgba(var(--text-color), 0.06);
-  border-radius: 2rem;
-  justify-self: center;
-  padding: 0.3rem;
-}
 #chat_header .initial {
   cursor: pointer;
   height: 1.8rem;
@@ -1808,14 +1813,24 @@ sm-button[variant=primary] {
   flex-shrink: 0;
   font-size: 1rem;
 }
-#chat_header #receiver_name {
+#chat_header .group-icon {
+  padding: 0.1rem;
+}
+
+#chat_details_button {
+  position: relative;
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 2rem;
+  justify-self: center;
+  padding: 0.3rem;
+}
+
+#receiver_name {
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+  transition: opacity 0.15s;
-#chat_header .group-icon {
-  padding: 0.1rem;
 }
 
 #scroll_to_bottom {
@@ -1987,38 +2002,27 @@ sm-button[variant=primary] {
 .sidebar-item {
   display: flex;
   align-items: center;
-  padding: 1rem 1.5rem;
+  padding: 1rem 0.8rem;
   text-transform: capitalize;
   font-weight: 500;
   opacity: 0.9;
   color: inherit;
+  margin: 0 0.2rem;
+  border-radius: 0.5rem;
+}
+.sidebar-item:not(:last-of-type) {
+  margin-bottom: 0.2rem;
 }
 .sidebar-item .icon {
   margin-right: 1em;
   width: 1em;
 }
 
-#settings #settings_sidebar header {
+#settings .card {
-  padding: 1rem 1.5rem;
-}
-#settings .flex sm-button {
-  margin: 0;
-  margin-left: 1rem;
-}
-#settings sm-switch {
-  padding: 1rem 1.5rem;
   display: flex;
-  margin-bottom: 1rem;
+  flex-direction: column;
-  width: min(60ch, 100%);
+  margin: 0 0.5rem;
-}
+  width: calc(min(36rem, 100%) - 1rem);
-#settings sm-switch .flex {
-  margin-right: 1rem;
-}
-#settings sm-switch h4 {
-  margin-bottom: 0.5rem;
-}
-#settings sm-button {
-  width: 100%;
 }
 #settings #settings_title {
   text-transform: capitalize;
@@ -2030,29 +2034,12 @@ sm-button[variant=primary] {
   overflow-y: auto;
   height: 100%;
 }
-#settings section {
+#settings .panel {
-  display: flex;
+  padding-bottom: 6rem;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem 1.5rem;
-  width: min(60ch, 100%);
-}
-#settings section .button {
-  align-self: flex-start;
 }
 #settings #sign_out::part(button) {
   color: var(--error-color);
 }
-#settings color-grid {
-  margin: 0.5rem 0 1.5rem 0;
-  width: min(60ch, 100%);
-}
-#settings #chat_preview {
-  margin-top: 1rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  background-color: rgba(var(--text-color), 0.06);
-}
 #settings #bg_preview_container {
   padding: 1rem 0;
   gap: 0.5rem;
@@ -2104,6 +2091,51 @@ sm-button[variant=primary] {
   fill: var(--danger-color);
 }
 
+.multisig-option {
+  position: relative;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+.multisig-option input {
+  margin-right: 1rem;
+  height: 1rem;
+  width: 1rem;
+}
+.multisig-option .indicator {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  border-radius: inherit;
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2) inset;
+  transition: box-shadow 0.2s;
+}
+.multisig-option input:checked ~ .indicator {
+  box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
+}
+.multisig-option .wrap-around {
+  font-weight: 500;
+}
+.multisig-option__balance {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+}
+
+.remove-card-wrapper {
+  min-height: 2rem;
+}
+
+.receiver-card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  border: none;
+}
+.receiver-card:not(:last-of-type) {
+  border-bottom: solid thin rgba(var(--text-color), 0.3);
+}
+
 @media screen and (max-width: 640px) {
   sm-popup {
     --border-radius: 1rem 1rem 0 0;
@@ -2200,6 +2232,7 @@ sm-button[variant=primary] {
     background: linear-gradient(rgba(var(--background-color), 0.8), rgba(var(--background-color), 0));
     -webkit-backdrop-filter: blur(0.5rem);
             backdrop-filter: blur(0.5rem);
+    align-items: flex-start;
   }
   .hide-on-mobile {
     display: none !important;
@@ -2212,6 +2245,13 @@ sm-button[variant=primary] {
   .page {
     padding-bottom: 0;
   }
+  .card {
+    padding: 1.5rem;
+  }
+  .card button,
+.card .button {
+    align-self: flex-start;
+  }
   .popup__header {
     grid-column: 1/-1;
     padding: 1rem 1.5rem 0 1.5rem;
@@ -2270,6 +2310,16 @@ sm-button[variant=primary] {
 #reply_mail_popup {
     --min-width: 36rem;
   }
+  #chat_details_button {
+    background-color: transparent;
+  }
+  #pseudo_background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--text-color), 0.06);
+    border-radius: inherit;
+  }
   #emoji_picker {
     max-height: 18rem;
   }
@@ -2294,16 +2344,11 @@ sm-button[variant=primary] {
   #settings > :first-child {
     border-right: solid thin rgba(var(--text-color), 0.1);
   }
-  #settings sm-button {
-    width: -webkit-max-content;
-    width: -moz-max-content;
-    width: max-content;
-  }
   #settings .active {
     background: rgba(var(--text-color), 0.1);
   }
-  #settings .panel > *:first-of-type {
+  #settings .panel {
-    margin-top: 0.5rem;
+    padding: 1.5rem;
   }
   .contact.active,
 .mail-card.active {