Updated UI of the app

public/css/tailwind.css

@@ -20,6 +20,58 @@ body {
     width: 75vw;
 }
 
+.tradebyte-logo {
+    color: #1955E4;
+    text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.5)
+}
+
+.line {
+    border: 1.5px solid #8e9aad;
+}
+
+.user-profile {
+    border-radius: 100px;
+    border: 10px solid #1955E4;
+    width: 130px;
+    height: 130px;
+}
+
+.tick {
+    height: 22px;
+    width: 22px;
+    border-radius: 50%;
+    background-color: #38cda0;
+    color: white;
+}
+
+.tick-background {
+    background: #a9f7e6;
+    border-radius: 29px;
+    color: #1b9b7f;
+}
+
+.tab-color {
+    border-radius: 10px;
+    border-color: #1955E4;
+    color: #1955E4;
+  }
+
+.view-link {
+    color: #1955E4;
+}
+
+.table-content {
+    overflow: scroll;
+    overflow-x: scroll;
+    overflow-y: auto;
+}
+
+.transaction-companySymbol {
+    color: rgb(0, 0, 0);
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+
 @tailwind components;
 
 .symbolicon {

routes/api/addBalance.js

@@ -10,10 +10,11 @@ const User = require("../../models/User");
 // @access   Private
 router.get("/", ensureAuth, (req, res) => {
   let user = req.user;
-  res.status(200).render("addBalance"),
-    {
+  res.status(200).render("addBalance", {
+      layout: "layouts/app",
+      href: "/addBalance",
       user,
-    };
+    });
 });
 
 // TODO

routes/api/portfolio.js

@@ -8,10 +8,10 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
 // @route    GET /portfolio
 // @access   Private
 router.get("/", ensureAuth, (req, res) => {
-  let avatar = req.user.image;
+  let user = req.user;
   res
     .status(200)
-    .render("portfolio", { layout: "layouts/app", avatar, href: "/portfolio" });
+    .render("portfolio", { layout: "layouts/app", user, href: "/portfolio" });
 });
 
 module.exports = router;

views/addBalance.ejs

@@ -1,27 +1,24 @@
-<h1>ADD BALANCE</h1>
-<hr />
-<h3>Your Current Balance: <%= user.balance%></h3>
-<hr />
-<br />
-<form
-  action="/addBalance"
-  method="POST"
-  class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
->
-  <div class="mb-4">
-    <label class="block text-gray-700 text-sm font-bold mb-2">
-      Enter amount
-    </label>
-    <input
-      type="number"
-      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-      name="addAmount"
-      placeholder="amount"
-    />
-    <input
-      type="submit"
-      value="Add"
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
-    />
+<section class="text-gray-700 body-font md:ml-56 lg:ml-64 md:mx-auto md:pr-14 w-screen inline">
+  <div class="container px-5 py-10 mx-auto md:px-auto">
+    <div class="my-4 absolute-center">
+      <h2 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Add Balance</h2>
   </div>
-</form>
+      <hr class="line">
+      <div class="container py-16 mx-auto">
+        <h3>Your Current Balance: <%= user.balance%></h3>
+        <form action="/addBalance" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 my-6">
+          <div class=" mb-4">
+            <label class="block text-gray-700 text-sm font-bold mb-2">
+              Enter amount
+            </label>
+            <input type="number"
+              class="shadow appearance-none border rounded w-4/5 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              name="addAmount" placeholder="amount" />
+            <input type="submit" value="Add"
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" />
+          </div>
+        </form>
+      </div>
+  </div>
+</section>
+

views/cart.ejs

@@ -1,97 +1,66 @@
 <div class="relative md:ml-56 lg:ml-64 py-6 px-3 w-full">
-  <div
-    class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800"
-  >
+  <div class="relative bg-white mx-auto max-w-6xl text-gray-600 mt-6 shadow-xl rounded-lg">
+    <lable type="submit" class="absolute left-0 top-0 mt-3 ml-4">
+      <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966"
+        style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+        <path
+          d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
+      </svg>
+    </lable>
+    <input
+      class="bg-white focus:outline-none focus:outline-none border border-gray-300 rounded-lg mr-6 pl-10 pr-4 py-2 px-4 block w-full appearance-none leading-normal"
+      type="search" placeholder="Search">
+  </div>
+  <div class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800">
     <form action="/cart/buy" method="POST">
       <h1 class="text-2xl lg:text-4xl font-bold mt-8 mb-4 flex">
-        Buy Stock :<input
-          class="bg-gray-300 max-w-sm w-24 ml-2"
-          type="text"
-          readonly
-          value="<%= symbol %>"
-          id="companySymbol"
-          name="companySymbol"
-        />
+        Buy Stock :<input class="bg-gray-300 max-w-sm w-24 ml-2" type="text" readonly value="<%= symbol %>"
+          id="companySymbol" name="companySymbol" />
       </h1>
       <div class="w-full text-sm lg:text-base border-4"></div>
       <div
-        class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center"
-      >
-        <div
-          class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center"
-        >
+        class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center">
+
+        <div class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center">
           Company Name
         </div>
-        <div
-          class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2"
-        >
+        <div class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2">
           <div class="flex flex-col items-center justify-center w-full">
-            <img
-              class="hidden lg:block h-16"
-              src="<%= logoSrc %> "
-              alt="<%= companyName %>"
-            />
-            <p
-              class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all"
-            >
+            <img class="hidden lg:block h-16" src="<%= logoSrc %> " alt="<%= companyName %>" />
+            <p class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all">
               <%= companyName %>
             </p>
           </div>
         </div>
         <div
-          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start"
-        >
+          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center">
           Unit Price
         </div>
-        <div
-          class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2"
-        >
-          <input
-            class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
-            value="<%= latestPrice %>"
-            name="stockPrice"
-            id="stockPrice"
-            readonly
-          />
+        <div class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2">
+          <input class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
+            value="<%= latestPrice %>" name="stockPrice" id="stockPrice" readonly />
         </div>
-        <div
-          class="md:hidden text-xs text-center font-semibold uppercase flex items-center justify-center"
-        >
+        <div class="md:hidden text-xs text-center font-semibold uppercase flex items-center justify-center">
           Qty
         </div>
         <div
-          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start"
-        >
+          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center ">
           Quantity
         </div>
-        <div
-          class="text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2"
-        >
+        <div class="text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2">
           <div class="h-8">
             <div class="relative flex flex-row w-full h-8">
-              <input
-                type="number"
-                value="1"
-                min="1"
-                name="noOfStock"
-                id="noOfStock"
-                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black"
-              />
+              <input type="number" value="1" min="1" name="noOfStock" id="noOfStock"
+                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
             </div>
           </div>
         </div>
-        <div
-          class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end lg:items-start"
-        >
+        <div class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end">
           Total Price
         </div>
-        <div
-          class="text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2"
-        >
-          <p
-            class="text-xs md:text-sm font-medium text-right text-xs lg:text-lg break-words"
-            id="totalPrice"
-          >
+        <div class="text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2">
+          <p class="text-xs md:text-sm font-medium text-right text-xs lg:text-lg break-words" id="totalPrice">
             <span class="total-price">
               <%= latestPrice %>
             </span>
@@ -100,15 +69,11 @@
         </div>
       </div>
       <div class="flex justify-end w-full items-center">
-        <a
-          href="/market"
-          class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded"
-          >Back to Market</a
-        >
-        <button
-          type="submit"
-          class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-black font-semibold text-xs lg:text-sm py-3 px-4 rounded"
-        >
+        <a href="/market"
+          class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded">Back
+          to Market</a>
+        <button type="submit"
+          class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-black font-semibold text-xs lg:text-sm py-3 px-4 rounded">
           <span class="hidden md:inline-block">Proceed to</span> Checkout
         </button>
       </div>
@@ -124,4 +89,4 @@
     const val = e.target.value;
     totalPrice.textContent = parseFloat(stockPrice.value * val).toFixed(4);
   });
-</script>
+</script>

views/layouts/app.ejs

@@ -1,29 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
-      integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o="
-      crossorigin="anonymous"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
 
-    <link type="text/css" rel="stylesheet" href="./css/style.css" />
-    <link type="text/css" rel="stylesheet" href="../css/style.css" />
-    <title>TradeByte</title>
-  </head>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
+    integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
 
-  <body>
-    <div class="md:flex flex-col bg-gray-300 md:flex-row min-h-screen w-full">
-      <%- include('../partials/_nav.ejs') %> <%- body %>
-    </div>
-    <script type="application/javascript" src="./javascript/script.js"></script>
-    <script
-      type="application/javascript"
-      src="../javascript/script.js"
-    ></script>
-  </body>
-</html>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet" />
+
+  <link type="text/css" rel="stylesheet" href="../css/style.css" />
+  <link type="text/css" rel="stylesheet" href="../css/tailwind.css" />
+  <link rel="shortcut icon" href="../images/TradeByte-Favicon.png" type="image/x-icon">
+  <title>TradeByte</title>
+</head>
+
+<body>
+  <div class="md:flex flex-col md:flex-row min-h-screen w-full">
+    <%- include('../partials/_nav.ejs') %>
+    <%- body %>
+  </div>
+  <script type="application/javascript" src="../javascript/script.js"></script>
+</body>
+
+</html>