Portfolio page #31 (#68)

* portfolio page

* top icons

* header, status pill icon, columns update

* just a simple loading state for now

* Product discovery page #32 (#69)

* finish portfolio page

2 todos

missing empty table state button action clicks
amount column in portfolio? how to get this

 from gql, do i have to aggregate the bids and collect their full size for each bond?

* fix missing type

* rename route links (#70)

src/components/auction/AuctionBody/index.tsx

@@ -102,7 +102,7 @@ const BondCard = ({ graphInfo }) => {
           <button
             className="rounded-md !text-xs font-normal btn btn-sm btn-primary bg-[#532DBE]"
             onClick={() => {
-              navigate(`/bonds/${graphInfo?.bond?.id}`)
+              navigate(`/products/${graphInfo?.bond?.id}`)
             }}
           >
             More Details

src/components/auction/OrderbookTable/index.tsx

@@ -136,14 +136,19 @@ interface OrderBookTableProps {
   granularity: string
 }
 
-export const ActiveStatusPill = ({ title = 'Active' }) => (
-  <div className="pointer-events-none space-x-2 inline-flex items-center px-2 border py-1 border-transparent rounded-full shadow-sm bg-[#5BCD88] hover:none focus:outline-none focus:none">
-    <svg fill="none" height="7" viewBox="0 0 7 7" width="7" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="3.5" cy="3.5" fill="#1E1E1E" opacity="0.5" r="3" />
-    </svg>
-
-    <span className="text-xs uppercase font-normal !text-[#1E1E1E]">{title}</span>
-  </div>
+export const ActiveStatusPill = ({ disabled = false, dot = true, title = 'Active' }) => (
+  <button
+    className="text-[11px] text-xs uppercase font-normal disabled:text-[#9F9F9F] text-[#1E1E1E] disabled:bg-[#2C2C2C] pointer-events-none space-x-2 inline-flex items-center px-3 border py-1 border-transparent rounded-full shadow-sm bg-[#5BCD88] hover:none focus:outline-none focus:none"
+    disabled={disabled}
+  >
+    {dot && (
+      <svg fill="none" height="7" viewBox="0 0 7 7" width="7" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="3.5" cy="3.5" fill="#1E1E1E" opacity="0.5" r="3" />
+      </svg>
+    )}
+
+    {title}
+  </button>
 )
 
 export const OrderBookTable: React.FC<OrderBookTableProps> = ({