Merge branch 'main' of https://github.com/ranchimall/exchange-market

docs/css/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#ffcdab;}.b{fill:#fff4c5;}</style></defs><title>back</title><path class="a" d="M1343.5-.5c33.54,48.75,50.34,166,277.18,193.18C1808.39,215.21,1899.21,313.38,1920,364c-.33-146.23-.17-218.31-.5-364.54Z"/><path class="b" d="M1343.5-.5a288.26,288.26,0,0,0,159,88.78c48.38,9.32,76.65,13.77,132.58,22.68,93.5,14.9,141.37,56.9,170.42,80.54a466.36,466.36,0,0,1,115,139q-.49-165.49-1-331Z"/></svg>

docs/css/bg-art2.svg

@@ -0,0 +1,33 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g filter="url(#filter0_d)">
+<rect x="312" y="323" width="240" height="140" rx="18" transform="rotate(30 312 323)" fill="#1C783B"/>
+</g>
+<g filter="url(#filter1_d)">
+<rect x="431.283" y="302" width="240" height="140" rx="18" transform="rotate(50.0235 431.283 302)" fill="#2DBD5E"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="225" y="320" width="301.846" height="265.244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-5" dy="9"/>
+<feGaussianBlur stdDeviation="6"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="307" y="299" width="285.477" height="297.86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="-5" dy="9"/>
+<feGaussianBlur stdDeviation="6"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<clipPath id="clip0">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

docs/css/main.css

@@ -77,6 +77,10 @@ a.button {
   color: inherit;
 }
 
+fieldset {
+  border: none;
+}
+
 button {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -143,6 +147,10 @@ a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
 
+input {
+  accent-color: var(--accent-color);
+}
+
 sm-input {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
@@ -487,7 +495,7 @@ strip-select {
 
 strip-option {
   font-weight: 500;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   --border-radius: 0;
   --active-option-color: rgba(var(--background-color), 1);
   --active-option-background-color: var(--accent-color);
@@ -531,7 +539,7 @@ sm-checkbox {
 
 .tooltip {
   position: relative;
-  z-index: 1;
+  z-index: 8;
   cursor: pointer;
 }
 .tooltip .banner {
@@ -682,9 +690,9 @@ sm-checkbox {
   width: 100%;
   justify-content: center;
   overflow-y: auto;
-  padding: 0 1.5rem;
 }
 #pages_container > * {
+  padding: 0 1.5rem;
   min-width: min(26rem, 100%);
 }
 
@@ -763,7 +771,7 @@ sm-checkbox {
 }
 
 #quantity_type,
-#wallet_quantity_type {
+#portfolio_quantity_type {
   font-size: 0.8rem;
   padding-right: 0.5rem;
   border-right: thin solid rgba(var(--text-color), 0.3);
@@ -781,21 +789,12 @@ sm-checkbox {
 }
 
 #asset_page {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-#asset_page__nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 0;
-}
-#asset_page__nav .icon-only {
-  margin-left: -0.7rem;
-}
-
 #trade_form {
   height: 100%;
 }
@@ -838,9 +837,16 @@ sm-checkbox {
           user-select: none;
   align-items: center;
   gap: 0.5rem;
-  grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
+  grid-template-columns: -webkit-min-content 1fr auto;
-  grid-template-columns: min-content repeat(3, 1fr) min-content;
+  grid-template-columns: min-content 1fr auto;
   border-radius: 0.5rem;
+  grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
+}
+.order-card > .grid:nth-of-type(2) {
+  grid-area: price;
+}
+.order-card > .grid:nth-of-type(3) {
+  grid-area: amount;
 }
 .order-card__type {
   font-size: 0.9rem;
@@ -861,6 +867,7 @@ sm-checkbox {
   pointer-events: none;
 }
 .order-card sm-checkbox {
+  grid-area: checkbox;
   cursor: pointer;
   margin-right: 0.5rem;
 }
@@ -869,9 +876,17 @@ sm-checkbox {
   color: rgba(var(--text-color), 0.9);
 }
 .order-card__time {
+  grid-area: time;
   font-size: 0.8rem;
   color: rgba(var(--text-color), 0.8);
 }
+.order-card .cancel-order {
+  grid-area: cancel;
+  color: var(--danger-color);
+}
+.order-card .cancel-order .icon {
+  fill: var(--danger-color);
+}
 
 .cancel-order {
   align-items: center;
@@ -1013,21 +1028,24 @@ sm-checkbox {
   background-color: #e2135110;
 }
 
-#wallet {
+#portfolio {
   display: grid;
-  width: auto;
   gap: 1.5rem;
   grid-template-columns: minmax(0, 1fr);
   align-content: flex-start;
+  width: min(32rem, 100%);
 }
 
-.wallet_actions__wrapper {
+.portfolio_actions__wrapper {
-  grid-column: span 3;
+  grid-column: 1/-1;
-  gap: 0.5rem;
+  justify-content: flex-end;
-  margin-top: 0.5rem;
+  gap: 0.3rem;
+  padding-top: 1rem;
 }
-.wallet_actions__wrapper .button {
+.portfolio_actions__wrapper .button {
-  flex: 1;
+  color: var(--accent-color);
+  padding: 0.5rem 0.8rem;
+  flex-shrink: 0;
 }
 
 .label {
@@ -1039,33 +1057,37 @@ sm-checkbox {
 #my_assets {
   gap: 0.5rem;
   margin-top: 0.5rem;
+  padding-bottom: 1.5rem;
+  border: none;
 }
 
 .balance-card {
   display: grid;
   align-items: center;
   gap: 0 0.5rem;
-  border-radius: 0.5rem;
+  padding: 1rem;
-  background-color: rgba(var(--foreground-color), 1);
+  border-radius: 0.3rem;
-  padding: 0.5rem;
+  background-color: rgba(var(--text-color), 0.03);
 }
 .balance-card.is-locked {
-  padding: 1rem 0.5rem;
+  grid-template-columns: auto auto 1fr auto;
-  grid-template-columns: auto 1fr auto;
-  gap: 0.5rem;
 }
 .balance-card.is-locked .balance-card__icon {
   grid-row: span 2;
 }
 .balance-card:not(.is-locked) {
-  grid-template-columns: auto 1fr auto auto;
+  grid-template-columns: auto auto 1fr auto auto;
+}
+.balance-card input {
+  align-self: center;
 }
 .balance-card__icon {
   display: flex;
   align-content: center;
   justify-content: center;
-  padding: 0.6rem;
+  margin: 0 0.5rem;
   border-radius: 0.8rem;
+  align-self: flex-start;
   background-color: var(--accent-color--light);
 }
 .balance-card__icon .icon {
@@ -1078,7 +1100,8 @@ sm-checkbox {
   font-weight: 500;
 }
 .balance-card__amount-wrapper {
-  grid-column: 2/3;
+  margin-top: 0.5rem;
+  grid-column: 3/-1;
   gap: 0.3rem 1rem;
   grid-template-columns: 1fr 1fr;
 }
@@ -1086,11 +1109,84 @@ sm-checkbox {
   text-align: right;
 }
 
-#wallet_result {
+#portfolio_cards_wrapper {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+.personal-asset-balance {
+  align-content: flex-start;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: rgba(0, 0, 0, 0.8);
+  width: 100%;
+}
+.personal-asset-balance:not(:last-of-type) {
+  margin-right: 0.5rem;
+}
+.personal-asset-balance:nth-of-type(1) {
+  background: url("bg-art2.svg") no-repeat bottom right, #c2ffd7;
+  background-size: contain;
+}
+.personal-asset-balance:nth-of-type(1) .icon {
+  background-color: rgba(102, 255, 156, 0.5);
+}
+.personal-asset-balance:nth-of-type(1) .button {
+  border: solid thin rgba(102, 255, 156, 0.5);
+}
+.personal-asset-balance:nth-of-type(2) {
+  background: url("back.svg") no-repeat top right, #fcffa8;
+  background-size: contain;
+}
+.personal-asset-balance:nth-of-type(2) .icon {
+  background-color: rgba(255, 234, 0, 0.5);
+}
+.personal-asset-balance > .flex {
+  margin-bottom: 0.3rem;
+}
+.personal-asset-balance > .flex .icon {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.4rem;
+  border-radius: 0.3rem;
+  fill: rgba(0, 0, 0, 0.8);
+  margin-right: 0.5rem;
+}
+.personal-asset-balance .button {
+  display: flex;
+  align-items: center;
+  margin-top: 0.5rem;
+  padding-right: 0.8rem;
+  justify-self: flex-start;
+  border-radius: 1rem;
+  background-color: rgba(var(--foreground-color), 1);
+  color: rgba(var(--text-color), 1);
+  transition: box-shadow 0.3s;
+}
+.personal-asset-balance .button .icon {
+  height: 1rem;
+  background-color: transparent;
+  margin-right: 0.3rem;
+}
+.personal-asset-balance .button:hover {
+  box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.16);
+}
+
+#personal_rupee_balance span:first-of-type,
+#personal_flo_balance span:first-of-type {
+  font-size: 1.5rem;
+}
+#personal_rupee_balance span:last-of-type,
+#personal_flo_balance span:last-of-type {
+  font-size: 0.9rem;
+}
+
+#portfolio_result {
   justify-content: center;
   text-align: center;
 }
-#wallet_result__icon {
+#portfolio_result__icon {
   display: flex;
   padding: 1rem;
   border-radius: 50%;
@@ -1099,7 +1195,7 @@ sm-checkbox {
   -webkit-animation: pop-up 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
           animation: pop-up 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-#wallet_result__icon .icon {
+#portfolio_result__icon .icon {
   height: 2rem;
   width: 2rem;
 }
@@ -1134,7 +1230,7 @@ sm-checkbox {
     opacity: 1;
   }
 }
-#wallet_result__cta {
+#portfolio_result__cta {
   padding: 1.5rem 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--text-color), 0.06);
@@ -1249,6 +1345,16 @@ sm-checkbox {
   margin-bottom: 3rem;
   align-content: flex-start;
 }
+#help ul {
+  list-style: initial;
+  display: grid;
+  gap: 1rem;
+}
+#help ul li {
+  margin-left: 1rem;
+  padding-left: 0.5rem;
+  font-size: 0.9rem;
+}
 
 @media screen and (max-width: 40rem) and (any-hover: none) {
   .cancel-order span {
@@ -1280,11 +1386,66 @@ sm-checkbox {
     transform: translateY(50%) scale(1.2);
   }
 
+  #asset_list_wrapper {
+    padding: 0 1.5rem;
+  }
+
   .listed-asset {
     border-radius: 0;
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
 
+  #exchange {
+    margin: 0;
+    padding: 0;
+  }
+
+  #login_form {
+    padding: 0 1.5rem;
+  }
+
+  #chart_header {
+    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    margin-left: -0.7rem;
+  }
+
+  #trade_panel_backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    -webkit-backdrop-filter: blur(0.5rem);
+            backdrop-filter: blur(0.5rem);
+    z-index: 3;
+  }
+
+  #show_trade_panel {
+    position: absolute;
+    border-radius: 2rem;
+    bottom: 0;
+    align-self: center;
+    margin-bottom: 1rem;
+    z-index: 5;
+    font-size: 1rem;
+  }
+
+  #trade_form {
+    position: fixed;
+    height: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-top: auto;
+    width: auto;
+    z-index: 10;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
+  }
+
   #price_chart_container {
     flex: 1;
   }
@@ -1365,6 +1526,10 @@ sm-checkbox {
   #pages_container {
     grid-area: pages;
   }
+  #pages_container > * {
+    margin: 0 1.5rem;
+    padding: 2rem;
+  }
 
   .is-signed-in #exchange {
     display: flex;
@@ -1399,9 +1564,14 @@ sm-checkbox {
     position: absolute;
     width: 0.25rem;
     border-radius: 0 0.2rem 0.2rem 0;
-    height: 50%;
+    height: 2rem;
     background-color: var(--accent-color);
   }
+
+  .order-card {
+    grid-template-columns: auto 1fr 1fr 1fr auto;
+    grid-template-areas: "checkbox quantity price amount time cancel";
+  }
 }
 @media screen and (max-width: 80rem) and (min-width: 40rem) {
   .main_navbar__item {
@@ -1448,22 +1618,6 @@ sm-checkbox {
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;
   }
-
-  #asset_page__nav {
-    grid-column: 1/-1;
-  }
-
-  #wallet {
-    gap: 1rem 2rem;
-    grid-template-columns: 20rem 24rem;
-  }
-  #wallet__header {
-    grid-column: 1/3;
-    padding-bottom: 1rem;
-  }
-  #wallet .balance-card {
-    border: solid thin rgba(var(--text-color), 0.2);
-  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {

docs/css/main.scss

@@ -76,7 +76,9 @@ a.button {
   font-weight: 500;
   color: inherit;
 }
-
+fieldset {
+  border: none;
+}
 button {
   user-select: none;
   position: relative;
@@ -130,6 +132,9 @@ button {
 a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
+input {
+  accent-color: var(--accent-color);
+}
 sm-input {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
@@ -462,7 +467,7 @@ strip-select {
 }
 strip-option {
   font-weight: 500;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   --border-radius: 0;
   --active-option-color: rgba(var(--background-color), 1);
   --active-option-background-color: var(--accent-color);
@@ -501,7 +506,7 @@ sm-checkbox {
 }
 .tooltip {
   position: relative;
-  z-index: 1;
+  z-index: 8;
   cursor: pointer;
   .banner {
     position: absolute;
@@ -643,8 +648,8 @@ sm-checkbox {
   width: 100%;
   justify-content: center;
   overflow-y: auto;
-  padding: 0 1.5rem;
   & > * {
+    padding: 0 1.5rem;
     min-width: min(26rem, 100%);
   }
 }
@@ -722,7 +727,7 @@ sm-checkbox {
 }
 
 #quantity_type,
-#wallet_quantity_type {
+#portfolio_quantity_type {
   font-size: 0.8rem;
   padding-right: 0.5rem;
   border-right: thin solid rgba(var(--text-color), 0.3);
@@ -738,19 +743,11 @@ sm-checkbox {
   height: 100%;
 }
 #asset_page {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-#asset_page__nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 0;
-  .icon-only {
-    margin-left: -0.7rem;
-  }
-}
 #trade_form {
   height: 100%;
   &::part(form) {
@@ -765,7 +762,6 @@ sm-checkbox {
     margin-top: auto;
   }
 }
-
 #my_orders,
 #market {
   width: min(46rem, 100%);
@@ -787,8 +783,17 @@ sm-checkbox {
   user-select: none;
   align-items: center;
   gap: 0.5rem;
-  grid-template-columns: min-content repeat(3, 1fr) min-content;
+  grid-template-columns: min-content 1fr auto;
   border-radius: 0.5rem;
+  grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
+  & > .grid {
+    &:nth-of-type(2) {
+      grid-area: price;
+    }
+    &:nth-of-type(3) {
+      grid-area: amount;
+    }
+  }
   &__type {
     font-size: 0.9rem;
     font-weight: 500;
@@ -810,6 +815,7 @@ sm-checkbox {
     }
   }
   sm-checkbox {
+    grid-area: checkbox;
     cursor: pointer;
     margin-right: 0.5rem;
   }
@@ -820,9 +826,17 @@ sm-checkbox {
   }
 
   &__time {
+    grid-area: time;
     font-size: 0.8rem;
     color: rgba(var(--text-color), 0.8);
   }
+  .cancel-order {
+    grid-area: cancel;
+    color: var(--danger-color);
+    .icon {
+      fill: var(--danger-color);
+    }
+  }
 }
 .cancel-order {
   align-items: center;
@@ -918,19 +932,22 @@ sm-checkbox {
     background-color: #e2135110;
   }
 }
-#wallet {
+#portfolio {
   display: grid;
-  width: auto;
   gap: 1.5rem;
   grid-template-columns: minmax(0, 1fr);
   align-content: flex-start;
+  width: min(32rem, 100%);
 }
-.wallet_actions__wrapper {
+.portfolio_actions__wrapper {
-  grid-column: span 3;
+  grid-column: 1/-1;
-  gap: 0.5rem;
+  justify-content: flex-end;
-  margin-top: 0.5rem;
+  gap: 0.3rem;
+  padding-top: 1rem;
   .button {
-    flex: 1;
+    color: var(--accent-color);
+    padding: 0.5rem 0.8rem;
+    flex-shrink: 0;
   }
 }
 .label {
@@ -941,31 +958,35 @@ sm-checkbox {
 #my_assets {
   gap: 0.5rem;
   margin-top: 0.5rem;
+  padding-bottom: 1.5rem;
+  border: none;
 }
 .balance-card {
   display: grid;
   align-items: center;
   gap: 0 0.5rem;
-  border-radius: 0.5rem;
+  padding: 1rem;
-  background-color: rgba(var(--foreground-color), 1);
+  border-radius: 0.3rem;
-  padding: 0.5rem;
+  background-color: rgba(var(--text-color), 0.03);
   &.is-locked {
-    padding: 1rem 0.5rem;
+    grid-template-columns: auto auto 1fr auto;
-    grid-template-columns: auto 1fr auto;
-    gap: 0.5rem;
     .balance-card__icon {
       grid-row: span 2;
     }
   }
   &:not(.is-locked) {
-    grid-template-columns: auto 1fr auto auto;
+    grid-template-columns: auto auto 1fr auto auto;
+  }
+  input {
+    align-self: center;
   }
   &__icon {
     display: flex;
     align-content: center;
     justify-content: center;
-    padding: 0.6rem;
+    margin: 0 0.5rem;
     border-radius: 0.8rem;
+    align-self: flex-start;
     background-color: var(--accent-color--light);
     .icon {
       height: 1.3rem;
@@ -978,7 +999,8 @@ sm-checkbox {
     font-weight: 500;
   }
   &__amount-wrapper {
-    grid-column: 2/3;
+    margin-top: 0.5rem;
+    grid-column: 3/ -1;
     gap: 0.3rem 1rem;
     grid-template-columns: 1fr 1fr;
     & > :nth-child(even) {
@@ -986,7 +1008,78 @@ sm-checkbox {
     }
   }
 }
-#wallet_result {
+#portfolio_cards_wrapper {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+.personal-asset-balance {
+  align-content: flex-start;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: rgba(0, 0, 0, 0.8);
+  width: 100%;
+  &:not(:last-of-type) {
+    margin-right: 0.5rem;
+  }
+  &:nth-of-type(1) {
+    background: url("bg-art2.svg") no-repeat bottom right, hsl(141, 100%, 88%);
+    background-size: contain;
+    .icon {
+      background-color: hsla(141, 100%, 70%, 0.5);
+    }
+    .button {
+      border: solid thin hsla(141, 100%, 70%, 0.5);
+    }
+  }
+  &:nth-of-type(2) {
+    background: url("back.svg") no-repeat top right, hsl(62, 100%, 83%);
+    background-size: contain;
+    .icon {
+      background-color: hsla(55, 100%, 50%, 0.5);
+    }
+  }
+  & > .flex {
+    margin-bottom: 0.3rem;
+    .icon {
+      height: 2rem;
+      width: 2rem;
+      padding: 0.4rem;
+      border-radius: 0.3rem;
+      fill: rgba(0, 0, 0, 0.8);
+      margin-right: 0.5rem;
+    }
+  }
+  .button {
+    display: flex;
+    align-items: center;
+    margin-top: 0.5rem;
+    padding-right: 0.8rem;
+    justify-self: flex-start;
+    border-radius: 1rem;
+    background-color: rgba(var(--foreground-color), 1);
+    color: rgba(var(--text-color), 1);
+    transition: box-shadow 0.3s;
+    .icon {
+      height: 1rem;
+      background-color: transparent;
+      margin-right: 0.3rem;
+    }
+    &:hover {
+      box-shadow: 0 0.3rem 0.5rem rgba(0 0 0/ 0.16);
+    }
+  }
+}
+#personal_rupee_balance,
+#personal_flo_balance {
+  span:first-of-type {
+    font-size: 1.5rem;
+  }
+  span:last-of-type {
+    font-size: 0.9rem;
+  }
+}
+#portfolio_result {
   justify-content: center;
   text-align: center;
   &__icon {
@@ -1019,7 +1112,7 @@ sm-checkbox {
     opacity: 1;
   }
 }
-#wallet_result__cta {
+#portfolio_result__cta {
   padding: 1.5rem 1rem;
   border-radius: 0.5rem;
   background-color: rgba(var(--text-color), 0.06);
@@ -1108,6 +1201,16 @@ sm-checkbox {
   width: min(60ch, 100%);
   margin-bottom: 3rem;
   align-content: flex-start;
+  ul {
+    list-style: initial;
+    display: grid;
+    gap: 1rem;
+    li {
+      margin-left: 1rem;
+      padding-left: 0.5rem;
+      font-size: 0.9rem;
+    }
+  }
 }
 
 @media screen and (max-width: 40rem) and (any-hover: none) {
@@ -1139,10 +1242,57 @@ sm-checkbox {
       transform: translateY(50%) scale(1.2);
     }
   }
+  #asset_list_wrapper {
+    padding: 0 1.5rem;
+  }
   .listed-asset {
     border-radius: 0;
     border-bottom: solid thin rgba(var(--text-color), 0.1);
   }
+  #exchange {
+    margin: 0;
+    padding: 0;
+  }
+  #login_form {
+    padding: 0 1.5rem;
+  }
+  #chart_header {
+    padding: 1rem 1.5rem 0.5rem 1.5rem;
+    margin-left: -0.7rem;
+  }
+  #trade_panel_backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-color: rgba(0 0 0/ 0.3);
+    backdrop-filter: blur(0.5rem);
+    z-index: 3;
+  }
+  #show_trade_panel {
+    position: absolute;
+    border-radius: 2rem;
+    bottom: 0;
+    align-self: center;
+    margin-bottom: 1rem;
+    z-index: 5;
+    font-size: 1rem;
+  }
+  #trade_form {
+    position: fixed;
+    height: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-top: auto;
+    width: auto;
+    z-index: 10;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
+  }
   #price_chart_container {
     flex: 1;
   }
@@ -1210,6 +1360,10 @@ sm-checkbox {
   }
   #pages_container {
     grid-area: pages;
+    & > * {
+      margin: 0 1.5rem;
+      padding: 2rem;
+    }
   }
   .is-signed-in {
     #exchange {
@@ -1241,11 +1395,15 @@ sm-checkbox {
         position: absolute;
         width: 0.25rem;
         border-radius: 0 0.2rem 0.2rem 0;
-        height: 50%;
+        height: 2rem;
         background-color: var(--accent-color);
       }
     }
   }
+  .order-card {
+    grid-template-columns: auto 1fr 1fr 1fr auto;
+    grid-template-areas: "checkbox quantity price amount time cancel";
+  }
 }
 @media screen and (max-width: 80rem) and (min-width: 40rem) {
   .main_navbar__item {
@@ -1292,20 +1450,6 @@ sm-checkbox {
     gap: 1.5rem;
     grid-template-columns: minmax(0, 1fr) 20rem;
   }
-  #asset_page__nav {
-    grid-column: 1/-1;
-  }
-  #wallet {
-    gap: 1rem 2rem;
-    grid-template-columns: 20rem 24rem;
-    &__header {
-      grid-column: 1/3;
-      padding-bottom: 1rem;
-    }
-    .balance-card {
-      border: solid thin rgba(var(--text-color), 0.2);
-    }
-  }
 }
 @media screen and (min-width: 72rem) {
   .page-layout {