Feat: portfolio overview

MHMighani · May 24, 2022 · 5d9fd67 · 5d9fd67
1 parent 57b78a0
commit 5d9fd67
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 49 deletions.
diff --git a/client/src/components/layout/navbar.jsx b/client/src/components/layout/navbar.jsx
@@ -7,7 +7,7 @@ const Navbar = () => {
   return (
     <BootNavbar expand="lg">
       <Container>
-        <Link to="/portfolio-details" style={{ textDecoration: "none" }}>
+        <Link to="/" style={{ textDecoration: "none" }}>
           <BootNavbar.Brand>چرتکه</BootNavbar.Brand>
         </Link>
         <DarkModeToggleBtn />

diff --git a/client/src/components/portfolio/portfolio.jsx b/client/src/components/portfolio/portfolio.jsx
@@ -24,7 +24,7 @@ const Portfolio = () => {
     const initialAmounts = { goldCurrency: 0, stock: 0, cash: 0 };
 
     const amounts = assets.reduce((last, current) => {
-      const assetValue = current.amount * current?.purchasePrice || 1;
+      const assetValue = current.amount * (current?.purchasePrice || 1);
       last[current.assetClass] += assetValue;
       total += assetValue;
       return last;
@@ -55,7 +55,7 @@ const Portfolio = () => {
             key={assetClass}
             className={`quota ${assetClass}`}
             style={{
-              // display: quota ? "auto" : "none",
+              display: quota ? "initial" : "none",
               width: `${quota}%`,
               backgroundColor: `${colors[assetClass]}`,
             }}

diff --git a/client/src/styles.scss b/client/src/styles.scss
@@ -356,56 +356,58 @@ option{
   margin: 50px auto;
   width: 80%;
   border-radius: 20px;
-}
-
-.portfolio__quota-bar {
-  display: flex;
-  direction: ltr;
-
-  .quota{
-      position: relative;
-      height: $portfolio-bar-height;
-      margin-left: .5rem;
-      text-align: center;
-      line-height: $portfolio-bar-height;
-
-      &:first-child{
-        margin-left: 0;
-      }
-
-      &:last-child:after{
-        display: none;
-      }
-
-      &:first-child:before{
-        display:none;
-      }
-
-      &:after{
-      content: "";
-      position: absolute;
-      top: 0;
-      right: -$portfolio-bar-height/2;
-      border-radius: 100%;
-      height: 100%;
-      width: $portfolio-bar-height;
-      background-color: white;
-      }
-
-      &:before{
-      content: "";
-      position: absolute;
-      top: 0;
-      left: -$portfolio-bar-height/2;
-      width: $portfolio-bar-height;
-      height: 100%;
-      border-radius: 100px;
+  color:black;
 
-      background-color: inherit;
-      }
+  &__quota-bar {
+    display: flex;
+    direction: ltr;
+
+    .quota{
+        position: relative;
+        height: $portfolio-bar-height;
+        margin-left: .5rem;
+        text-align: center;
+        line-height: $portfolio-bar-height;
+
+        &:first-child{
+          margin-left: 0;
+        }
+
+        &:last-child:after{
+          display: none;
+        }
+
+        &:first-child:before{
+          display:none;
+        }
+
+        &:after{
+        content: "";
+        position: absolute;
+        top: 0;
+        right: -$portfolio-bar-height/2;
+        border-radius: 100%;
+        height: 100%;
+        width: $portfolio-bar-height;
+        background-color: white;
+        }
+
+        &:before{
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -$portfolio-bar-height/2;
+        width: $portfolio-bar-height;
+        height: 100%;
+        border-radius: 100px;
+
+        background-color: inherit;
+        }
+    }
   }
 }
 
+
 .portfolio-details{
   margin-top: 40px;