From fba85fc0b151f10e73333d36cdaa8ebf58a8de4e Mon Sep 17 00:00:00 2001
From: gustavomauricio <gustavo.mauricio58@gmail.com>
Date: Fri, 2 Sep 2022 15:55:49 +0100
Subject: [PATCH] container implementation and pages initial layout

---
 components/Container/Container.module.css |  1 +
 components/Layout/Layout.module.css       |  2 +-
 pages/borrow.tsx                          |  8 +++++++-
 pages/council.tsx                         |  7 ++++++-
 pages/portfolio.tsx                       | 13 ++++++++++++-
 pages/trade.tsx                           | 15 ++++++++++++++-
 pages/yield.tsx                           |  8 +++++++-
 7 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/components/Container/Container.module.css b/components/Container/Container.module.css
index d49ef8dc..a03413d7 100644
--- a/components/Container/Container.module.css
+++ b/components/Container/Container.module.css
@@ -5,4 +5,5 @@
     rgba(52, 20, 33, 0.9) 73.08%
   );
   border-radius: 16px;
+  padding: 16px;
 }
diff --git a/components/Layout/Layout.module.css b/components/Layout/Layout.module.css
index 595d163a..3754ff70 100644
--- a/components/Layout/Layout.module.css
+++ b/components/Layout/Layout.module.css
@@ -20,6 +20,6 @@
 }
 
 .container {
-  padding: 0 2rem;
+  padding: 2rem;
   flex: 1;
 }
diff --git a/pages/borrow.tsx b/pages/borrow.tsx
index 6eb6b51b..6f667470 100644
--- a/pages/borrow.tsx
+++ b/pages/borrow.tsx
@@ -1,7 +1,13 @@
 import React from "react";
+import Container from "components/Container";
 
 const Borrow = () => {
-  return <div>Borrow Placeholder</div>;
+  return (
+    <div className="flex gap-4">
+      <Container className="flex-1">Borrow Module</Container>
+      <Container className="w-[450px]">Placeholder</Container>
+    </div>
+  );
 };
 
 export default Borrow;
diff --git a/pages/council.tsx b/pages/council.tsx
index 18189c43..c68478e1 100644
--- a/pages/council.tsx
+++ b/pages/council.tsx
@@ -1,7 +1,12 @@
 import React from "react";
+import Container from "components/Container";
 
 const Council = () => {
-  return <div>Council Placeholder</div>;
+  return (
+    <div>
+      <Container>Council Placeholder</Container>
+    </div>
+  );
 };
 
 export default Council;
diff --git a/pages/portfolio.tsx b/pages/portfolio.tsx
index ac7fd82e..a873086a 100644
--- a/pages/portfolio.tsx
+++ b/pages/portfolio.tsx
@@ -1,7 +1,18 @@
 import React from "react";
+import Container from "components/Container";
 
 const Portfolio = () => {
-  return <div>Portfolio Placeholder</div>;
+  return (
+    <div className="flex flex-col gap-4">
+      <Container className="flex-1">Portfolio Module</Container>
+      <div className="grid grid-cols-2 gap-4">
+        <Container>Subaccount 1</Container>
+        <Container>Subaccount 2</Container>
+        <Container>Subaccount 3</Container>
+        <Container>Subaccount 4</Container>
+      </div>
+    </div>
+  );
 };
 
 export default Portfolio;
diff --git a/pages/trade.tsx b/pages/trade.tsx
index 4cced194..2d2429fb 100644
--- a/pages/trade.tsx
+++ b/pages/trade.tsx
@@ -1,7 +1,20 @@
 import React from "react";
+import Container from "components/Container";
 
 const Trade = () => {
-  return <div>Trade Placeholder</div>;
+  return (
+    <div>
+      <div className="flex gap-4 mb-4">
+        <Container className="flex-1">Graph/Tradingview Module</Container>
+        <div className="flex flex-col gap-4">
+          <Container>Buy/Sell module</Container>
+          <Container>Orderbook module (optional)</Container>
+        </div>
+        <Container>Credit Account essential module</Container>
+      </div>
+      <Container>Trader order overview</Container>
+    </div>
+  );
 };
 
 export default Trade;
diff --git a/pages/yield.tsx b/pages/yield.tsx
index ae689a48..ed70ba78 100644
--- a/pages/yield.tsx
+++ b/pages/yield.tsx
@@ -1,7 +1,13 @@
 import React from "react";
+import Container from "components/Container";
 
 const Yield = () => {
-  return <div>Yield Placeholder</div>;
+  return (
+    <div className="flex gap-4">
+      <Container className="flex-1">Yield Module</Container>
+      <Container className="w-[450px]">Placeholder</Container>
+    </div>
+  );
 };
 
 export default Yield;