Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui

app/src/styles/components/marketPlace/marketPlace.scss

@@ -2,6 +2,9 @@
 @use "../../abstracts/mixins.scss" as *;
 
 .marketplace-wrapper {
+  // transform: scale(0.65);
+  /* Start at 90% width */
+
   height: 100vh;
   width: 100vw;
   z-index: #{$z-index-marketplace};
@@ -11,6 +14,7 @@
   top: 0;
   padding: 10px;
   padding-top: 100px;
+  // animation: growWidth 0.4s ease-in-out 0.5s forwards;
 
   .marketplace-container {
     position: relative;
@@ -31,6 +35,58 @@
     flex-direction: column;
     gap: 24px;
 
+    .skeleton-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 18px;
+      margin: 0;
+      width: 100%;
+
+      .skeleton-content {
+
+
+        width: calc(25% - 14px) !important;
+        height: auto !important;
+        border-radius: #{$border-radius-xlarge};
+        padding: 12px;
+        box-shadow: 0px 2px 10.5px 0px #0000000d;
+        background: var(--background-color-solid-gradient);
+        border: 1px solid var(--border-color);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 6px;
+
+        .asset-image {
+          width: 100%;
+          height: 100%;
+        }
+
+        .asset-details {
+          width: 100%;
+          height: 33px;
+        }
+
+        .organization {
+          width: 40%;
+          height: 15px;
+        }
+
+        .asset-review {
+          width: 100%;
+          height: 20px;
+        }
+
+        .button {
+
+          width: 100%;
+          height: 35px;
+          border-radius: 20px;
+        }
+      }
+    }
+
     .filter-search-container {
       width: 100%;
       display: flex;
@@ -84,6 +140,13 @@
         .stars {
           display: flex;
           align-items: center;
+
+          .star-wrapper.filled {
+            svg {
+
+              fill: #F3A50C;
+            }
+          }
         }
       }
     }
@@ -226,6 +289,17 @@
   }
 }
 
+@keyframes growWidth {
+  from {
+    transform: scale(0.65);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+
 .assetPreview-wrapper {
   width: 100%;
   height: 100%;

app/src/styles/components/menu/menu.scss

@@ -90,7 +90,7 @@
       .dropdown-menu {
         position: absolute;
         top: 0;
-        left: 103%;
+        left: 100%;
         background: var(--background-color-solid);
         min-width: 220px;
         border-radius: #{$border-radius-medium};
@@ -141,7 +141,7 @@
 
           .submenu {
             position: absolute;
-            left: 102%;
+            left: 100%;
             top: 0;
             background: var(--background-color-solid);
             min-width: 200px;

app/src/styles/components/simulation/analysis.scss

@@ -378,12 +378,30 @@
             text-overflow: ellipsis;
           }
 
+          .metric-label.loss {
+            background: #6D4343;
+            border: 1px solid #FF301D
+          }
+
           .metric-value {
             text-align: center;
             line-height: 20px;
           }
         }
 
+        .metric-item.loss {
+          background: #6D4343;
+          border: 1px solid #FF301D;
+
+          .metric-label {
+            span {
+              color: #FF311E;
+              display: inline-block;
+              transform: rotate(180deg);
+            }
+          }
+        }
+
         .metric-wrapper {
           display: flex;
           gap: 6px;

app/src/styles/components/visualization/floating/common.scss

@@ -456,7 +456,7 @@
   padding: 18px 10px;
   position: relative;
   z-index: 1;
-  top: -32px;
+  // top: -32px;
 }
 
 .barOverflow {
@@ -482,4 +482,3 @@
   transition: transform 0.5s ease;
 }
 
-// progress should be progress {progress}

app/src/styles/layout/sidebar.scss

@@ -1392,4 +1392,36 @@
       }
     }
   }
-}
+}
+
+
+.skeleton-wrapper {
+  display: flex;
+
+  .skeleton-content {}
+
+  .asset-name {
+    width: 40%;
+    height: 10px;
+  }
+
+  .asset {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+
+
+
+.sidebar-left-wrapper,
+.sidebar-right-wrapper {
+  height: calc(50vh + 150px);
+  overflow-y: hidden;
+  transition: height 0.4s ease-in-out;
+}
+
+.sidebar-left-wrapper.closed,
+.sidebar-right-wrapper.closed {
+  height: 52px;
+}

app/src/styles/layout/skeleton.scss

@@ -1,5 +1,5 @@
 .skeleton-wrapper {
-    max-width: 600px;
+    // max-width: 600px;
     margin: 0 auto;
     width: 100%;