UI enhancements

docs/css/main.css

@@ -353,6 +353,7 @@ ul {
   width: 1.2rem;
   height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
 }
 
 .margin-right-0-5 {
@@ -685,6 +686,8 @@ sm-checkbox {
   background-color: rgba(var(--text-color), 0.06);
   border-radius: 2rem;
   font-size: 0.8rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 #main_navbar {
@@ -1173,6 +1176,7 @@ sm-checkbox {
 
 #exchange_history {
   margin-top: 0.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .history-entry {
@@ -1238,65 +1242,21 @@ sm-checkbox {
 #portfolio_cards_wrapper {
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
 }
 
 .personal-asset-balance {
+  display: flex;
+  gap: 1.5rem 0.5rem;
   align-content: flex-start;
   padding: 1rem;
   border-radius: 0.5rem;
-  color: rgba(0, 0, 0, 0.8);
   width: 100%;
+  background-color: rgba(var(--text-color), 0.03);
 }
-.personal-asset-balance:not(:last-of-type) {
+.personal-asset-balance .icon {
   margin-right: 0.5rem;
-}
-.personal-asset-balance:nth-of-type(1) {
-  background: url("bg-art2.svg") no-repeat bottom right, hsl(141deg, 100%, 88%);
-  background-size: contain;
-}
-.personal-asset-balance:nth-of-type(1) .icon {
-  background-color: hsla(141deg, 100%, 70%, 0.5);
-}
-.personal-asset-balance:nth-of-type(1) .button {
-  border: solid thin hsla(141deg, 100%, 70%, 0.5);
-}
-.personal-asset-balance:nth-of-type(2) {
-  background: url("back.svg") no-repeat top right, hsl(62deg, 100%, 83%);
-  background-size: contain;
-}
-.personal-asset-balance:nth-of-type(2) .icon {
-  background-color: hsla(55deg, 100%, 50%, 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);
+  flex-shrink: 0;
+  fill: var(--accent-color);
 }
 
 #personal_usd_balance span:first-of-type,
@@ -1465,8 +1425,12 @@ sm-checkbox {
   .empty-state {
     align-self: center;
   }
+  theme-toggle {
+    order: 2;
+  }
   #user_popup_button {
-    width: 100%;
+    flex: 1;
+    order: 1;
   }
   .main_navbar__item--active .item__title {
     transform: translateY(100%);
@@ -1526,7 +1490,7 @@ sm-checkbox {
   #asset_page__footer button.active .icon {
     fill: var(--accent-color);
   }
-  .hide-on-mobile {
+  .hide-on-small {
     display: none !important;
   }
 }

docs/css/main.scss

@@ -338,6 +338,7 @@ ul {
   width: 1.2rem;
   height: 1.2rem;
   fill: rgba(var(--text-color), 0.8);
+  flex-shrink: 0;
 }
 
 .margin-right-0-5 {
@@ -625,17 +626,17 @@ sm-checkbox {
   width: 100%;
   align-items: center;
 }
-.app-brand{
+.app-brand {
   display: flex;
   gap: 0.3rem;
   align-items: center;
-  .icon{
+  .icon {
     height: 1.7rem;
     width: 1.7rem;
   }
 }
-.app-name{
-  &__company{
+.app-name {
+  &__company {
     font-size: 0.8rem;
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);
@@ -645,6 +646,8 @@ sm-checkbox {
   background-color: rgba(var(--text-color), 0.06);
   border-radius: 2rem;
   font-size: 0.8rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 #main_navbar {
   width: 100%;
@@ -1072,6 +1075,7 @@ sm-checkbox {
 }
 #exchange_history {
   margin-top: 0.5rem;
+  padding-bottom: 1.5rem;
 }
 .history-entry {
   display: grid;
@@ -1152,63 +1156,20 @@ sm-checkbox {
 #portfolio_cards_wrapper {
   display: grid;
   gap: 0.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
 }
 .personal-asset-balance {
+  display: flex;
+  // flex-wrap: wrap;
+  gap: 1.5rem 0.5rem;
   align-content: flex-start;
   padding: 1rem;
   border-radius: 0.5rem;
-  color: rgba(0, 0, 0, 0.8);
   width: 100%;
-  &:not(:last-of-type) {
+  background-color: rgba(var(--text-color), 0.03);
+  .icon {
     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);
-    }
+    flex-shrink: 0;
+    fill: var(--accent-color);
   }
 }
 #personal_usd_balance,
@@ -1345,8 +1306,12 @@ sm-checkbox {
   .empty-state {
     align-self: center;
   }
+  theme-toggle {
+    order: 2;
+  }
   #user_popup_button {
-    width: 100%;
+    flex: 1;
+    order: 1;
   }
   .main_navbar__item--active {
     .item__title {
@@ -1410,7 +1375,7 @@ sm-checkbox {
       }
     }
   }
-  .hide-on-mobile {
+  .hide-on-small {
     display: none !important;
   }
 }