keep original proposal card design for v1 proposals (#89)

frontend/client/components/Proposals/ProposalCard/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Redirect } from 'react-router-dom';
+import classnames from 'classnames';
+import { Progress } from 'antd'
 import { Proposal } from 'types';
 import Card from 'components/Card';
 import UserAvatar from 'components/UserAvatar';
@@ -21,6 +23,9 @@ export class ProposalCard extends React.Component<Proposal> {
       team,
       target,
       contributionMatching,
+      isVersionTwo,
+      funded,
+      percentFunded
     } = this.props;
 
     return (
@@ -33,14 +38,40 @@ export class ProposalCard extends React.Component<Proposal> {
             </span>
           </div>
         )}
+        {isVersionTwo && (
           <div className="ProposalCard-funding">
             <div className="ProposalCard-funding-raised">
               <UnitDisplay value={target} symbol="ZEC" />
             </div>
           </div>
+        )}
+
+        {!isVersionTwo && (
+          <>
+            <div className="ProposalCard-funding-v1">
+              <div className="ProposalCard-funding-v1-raised">
+                <UnitDisplay value={funded} symbol="ZEC" /> <small>raised</small> of{' '}
+                <UnitDisplay value={target} symbol="ZEC" /> goal
+              </div>
+              <div
+                className={classnames({
+                  ['ProposalCard-funding-percent']: true,
+                  ['is-funded']: percentFunded >= 100,
+                })}
+              >
+                {percentFunded}%
+              </div>
+            </div>
+            <Progress
+              percent={percentFunded}
+              status={percentFunded >= 100 ? 'success' : 'active'}
+              showInfo={false}
+            />
+          </>
+        )}
 
         <div className="ProposalCard-team">
-          <div className="ProposalCard-team-name">
+          <div className={`ProposalCard-team-name${isVersionTwo ? '' : '-v1'}`}>
             {team[0].displayName}{' '}
             {team.length > 1 && <small>+{team.length - 1} other</small>}
           </div>
@@ -48,7 +79,7 @@ export class ProposalCard extends React.Component<Proposal> {
             {[...team].reverse().map((u, idx) => (
               <UserAvatar
                 key={idx}
-                className="ProposalCard-team-avatars-avatar"
+                className={`ProposalCard-team-avatars-avatar${isVersionTwo ? '' : '-v1'}`}
                 user={u}
               />
             ))}

frontend/client/components/Proposals/ProposalCard/style.less

@@ -49,6 +49,19 @@
       }
     }
 
+    &-name-v1 {
+      opacity: 0.8;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      small {
+        opacity: 0.6;
+        font-size: 0.6rem;
+        font-weight: 500;
+      }
+    }
+
     &-avatars {
       display: flex;
       flex-direction: row-reverse;
@@ -61,6 +74,14 @@
         border-radius: 100%;
         border: 2px solid #fff;
       }
+
+      &-avatar-v1 {
+        width: 1.8rem;
+        height: 1.8rem;
+        margin-left: -0.75rem;
+        border-radius: 100%;
+        border: 2px solid #fff;
+      }
     }
   }
 
@@ -89,6 +110,31 @@
     }
   }
 
+  &-funding-v1 {
+    display: flex;
+    justify-content: space-between;
+    line-height: 1.9rem;
+
+    &-raised {
+      font-size: 0.9rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      small {
+        opacity: 0.6;
+      }
+    }
+
+    &-percent {
+      font-size: 0.7rem;
+      padding-left: 0.25rem;
+      &.is-funded {
+        color: @success-color;
+      }
+    }
+  }
+
   &-address {
     font-size: 0.7rem;
     margin-right: 2.5rem;