Fix/#60

public/css/tailwind.css

@@ -12,9 +12,10 @@ body {
   height: 100%;
   overflow-x: hidden;
   box-sizing: border-box;
-  background-color: rgb(226, 232, 240);
 }
 
+@tailwind components;
+
 .chartjs-container {
   position: relative;
   margin: auto;
@@ -92,10 +93,6 @@ body {
   -webkit-text-fill-color: transparent;
 }
 
-.min-w {
-  min-width: 400px;
-}
-
 .notification {
   position: relative;
   display: inline-block;
@@ -111,11 +108,70 @@ body {
   color: white;
 }
 
+.min-w {
+  min-width: 400px;
+}
+
 @media (max-width: 400px) {
   .min-w {
     min-width: 300px;
   }
 }
 
-@tailwind components;
+/* Login Page */
+animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.faster {
+  -webkit-animation-duration: 500ms;
+  animation-duration: 500ms;
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.serif {
+  font-family: "Zilla Slab", serif;
+}
+
+[x-cloak] {
+  display: none;
+}
+
+.grid-indigo {
+  background-image: radial-gradient(#5a67d8 2px, transparent 2px);
+  background-size: 16px 16px;
+}
+
 @tailwind utilities;

tailwind.config.js

@@ -1,39 +1,43 @@
+const { colors } = require('tailwindcss/defaultTheme')
+
 module.exports = {
   purge: {
     enabled: true,
-    content: ['./views/**/*.ejs'],
+    content: ["./views/**/*.ejs"],
   },
   theme: {
     extend: {
       colors: {
-        primary: '#FF6363',
+        blue: {
+          ...colors.blue,
+          900: "#1955e4",
+        },
+        primary: "#FF6363",
         secondary: {
-          100: '#E2E2D5',
-          200: '#888883',
+          100: "#E2E2D5",
+          200: "#888883",
         },
         // colors according to design 400->blue 200->red 500->green
         tempc: {
-          100: '#365088',
-          200: '#E93434',
-          300: '#AAB8D0',
-          400: '#266FEA',
-          500: '#41D7AA',
-          600: '#236AE1',
-          700: '#879CC0',
-          800: '#CADAEC',
-          900: '#3DB197',
-          1000: '#D9FFF7',
-          1100: '#E5EDFB',
-          1200: '#F8FAFF',
-
+          100: "#365088",
+          200: "#E93434",
+          300: "#AAB8D0",
+          400: "#266FEA",
+          500: "#41D7AA",
+          600: "#236AE1",
+          700: "#879CC0",
+          800: "#CADAEC",
+          900: "#3DB197",
+          1000: "#D9FFF7",
+          1100: "#E5EDFB",
+          1200: "#F8FAFF",
         },
-
       },
       fontFamily: {
-        body: ['Nunito']
-      }
+        body: ["Nunito"],
+      },
     },
   },
   variants: {},
   plugins: [],
-}
+};

views/addBalance.ejs

@@ -47,8 +47,10 @@
         </div>
       </form>
 
-      <div class="card flex flex-wrap justify-around">
-        <div class="w-auto bg-white my-4 rounded overflow-hidden shadow-lg">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div
+          class="w-full bg-white my-4 rounded overflow-hidden shadow-lg mx-auto"
+        >
           <div class="px-6 py-4">
             <div class="font-bold text-xl mb-2">VISA</div>
             <p
@@ -68,7 +70,9 @@
             >
           </div>
         </div>
-        <div class="w-auto bg-white my-4 rounded overflow-hidden shadow-lg">
+        <div
+          class="w-full bg-white my-4 rounded overflow-hidden shadow-lg mx-auto"
+        >
           <div class="px-6 py-4">
             <div class="font-bold text-xl mb-2">VISA PREPAID</div>
             <p
@@ -88,7 +92,9 @@
             >
           </div>
         </div>
-        <div class="w-auto bg-white my-4 rounded overflow-hidden shadow-lg">
+        <div
+          class="w-full bg-white my-4 rounded overflow-hidden shadow-lg mx-auto"
+        >
           <div class="px-6 py-4">
             <div class="font-bold text-xl mb-2">MASTERCARD</div>
             <p

views/layouts/login.ejs

@@ -1,20 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<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" />
+    <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"
+    />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="../css/style.css" />
+    <script
+      src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
+      defer
+    ></script>
+
     <title>TradeByte</title>
-</head>
+  </head>
 
-<body class="flex justify-center items-center bg-gray-900 w-full">
+  <body class="flex justify-center items-center w-screen">
     <%- body %>
 
     <script src="javascript/script.js"></script>
-</body>
-
-</html>
+  </body>
+</html>