Added FLO ID assets balance in portfolio

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

@@ -531,7 +531,7 @@ sm-checkbox {
 
 .tooltip {
   position: relative;
-  z-index: 1;
+  z-index: 20;
   cursor: pointer;
 }
 .tooltip .banner {
@@ -1006,10 +1006,77 @@ sm-checkbox {
 
 #portfolio {
   display: grid;
-  width: auto;
   gap: 1.5rem;
   grid-template-columns: minmax(0, 1fr);
   align-content: flex-start;
+  width: min(60rem, 100%);
+}
+
+.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_actions__wrapper {
@@ -1030,6 +1097,7 @@ sm-checkbox {
 #my_assets {
   gap: 0.5rem;
   margin-top: 0.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .balance-card {
@@ -1335,6 +1403,18 @@ sm-checkbox {
     flex: 1;
   }
 
+  #portfolio_cards_wrapper {
+    overflow-x: auto;
+    -ms-scroll-snap-type: x proximity;
+        scroll-snap-type: x proximity;
+  }
+
+  .personal-asset-balance {
+    scroll-snap-align: start;
+    width: min(16rem, 90%);
+    flex-shrink: 0;
+  }
+
   .hide-on-mobile {
     display: none !important;
   }
@@ -1501,7 +1581,7 @@ sm-checkbox {
 
   #portfolio {
     gap: 1rem 2rem;
-    grid-template-columns: 20rem 24rem;
+    grid-template-columns: 1.2fr 1fr;
   }
   #portfolio__header {
     grid-column: 1/3;

docs/css/main.scss

@@ -501,7 +501,7 @@ sm-checkbox {
 }
 .tooltip {
   position: relative;
-  z-index: 1;
+  z-index: 20;
   cursor: pointer;
   .banner {
     position: absolute;
@@ -911,10 +911,76 @@ sm-checkbox {
 }
 #portfolio {
   display: grid;
-  width: auto;
   gap: 1.5rem;
   grid-template-columns: minmax(0, 1fr);
   align-content: flex-start;
+  width: min(60rem, 100%);
+}
+.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_actions__wrapper {
   grid-column: span 3;
@@ -932,6 +998,7 @@ sm-checkbox {
 #my_assets {
   gap: 0.5rem;
   margin-top: 0.5rem;
+  padding-bottom: 1.5rem;
 }
 .balance-card {
   display: grid;
@@ -1184,6 +1251,15 @@ sm-checkbox {
   #price_chart_container {
     flex: 1;
   }
+  #portfolio_cards_wrapper {
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+  }
+  .personal-asset-balance {
+    scroll-snap-align: start;
+    width: min(16rem, 90%);
+    flex-shrink: 0;
+  }
   .hide-on-mobile {
     display: none !important;
   }
@@ -1336,7 +1412,7 @@ sm-checkbox {
   }
   #portfolio {
     gap: 1rem 2rem;
-    grid-template-columns: 20rem 24rem;
+    grid-template-columns: 1.2fr 1fr;
     &__header {
       grid-column: 1/3;
       padding-bottom: 1rem;