From 6debf95b8fa272af979d271f6c49a9c95f75ea0d Mon Sep 17 00:00:00 2001
From: Quentin Roussel <contact@quentinrsl.com>
Date: Wed, 27 Mar 2024 21:22:01 +0100
Subject: [PATCH] added buttons to drawer UI

---
 traque-front/components/team/actionDrawer.jsx | 43 +++++++++++--------
 traque-front/components/util/button.jsx       | 14 +++++-
 traque-front/tailwind.config.js               |  1 +
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/traque-front/components/team/actionDrawer.jsx b/traque-front/components/team/actionDrawer.jsx
index 321cecf..14ba843 100644
--- a/traque-front/components/team/actionDrawer.jsx
+++ b/traque-front/components/team/actionDrawer.jsx
@@ -1,6 +1,6 @@
 import useGame from "@/hook/useGame";
 import { useState } from "react"
-import Button from "../util/button";
+import Button, { GreenButton, RedButton } from "../util/button";
 import TextInput from "../util/textInput";
 
 export default function ActionDrawer() {
@@ -8,31 +8,40 @@ export default function ActionDrawer() {
     const { sendCurrentPosition } = useGame();
 
     return (
-        <div className={"absolute w-screen  bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-5/6" : "h-20")}>
+        <div className={"absolute w-screen  bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
             <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
             {visible && <div className="flex flex-col w-full h-full">
-                <div className="h-20 my-2">
-                    <Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
-                </div>
-                <div className="my-2">
-                    <div className="h-20">
-                        <TextInput placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
+                <div className='shadow-lg mt-0  p-1 flex flex-col text-center mb-1 mt-auto mx-auto w-4/5 rounded'>
+                    <div className='text-gray-700'>
+                        <span className='text-lg text-black'>30min</span>
+                        <span> before penalty</span>
                     </div>
-                    <div className="h-20">
-                        <Button onClick={sendCurrentPosition}>Capture target</Button>
-                    </div>
-                </div>
-                <div className='shadow-lg m-5 p-2 flex flex-col text-center mx-auto w-4/5 rounded'>
-                    <p className='text-xl text-black'>30min</p>
-                    <p className='text-gray-700'> before penalty</p>
                     <div className='w-1/2 flex flex-row justify-center mx-auto'>
                         <div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
                         <div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
                         <div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
                     </div>
                 </div>
-                <div className="h-20 mb-0 mt-auto">
-                        <Button onClick={sendCurrentPosition}>Log out</Button>
+                <div className="h-20 my-1">
+                    <Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
+                </div>
+                <div className="h-20 my-1">
+                    <Button onClick={sendCurrentPosition} className="h-10">Message log</Button>
+                </div>
+                <div className="h-20 my-1">
+                    <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
+                </div>
+                <div className="mt-1 mb-auto">
+                    <div className="h-20 flex flex-row">
+                        <TextInput placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
+                        <GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton>
+                    </div>
+                </div>
+                <div className="h-20 my-2">
+                    <RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton>
+                </div>
+                <div className="h-20 mb-0">
+                    <RedButton color={"red"} onClick={sendCurrentPosition}>Log out</RedButton>
                 </div>
             </div>
             }
diff --git a/traque-front/components/util/button.jsx b/traque-front/components/util/button.jsx
index 6f25da2..e9559c0 100644
--- a/traque-front/components/util/button.jsx
+++ b/traque-front/components/util/button.jsx
@@ -1,5 +1,17 @@
 export default function Button({ children, ...props }) {
-    return (<button {...props} className={props.className + " bg-blue-600 hover:bg-blue-500 ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded"}>
+    return (<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
+        {children}
+    </button>)
+}
+
+export function RedButton({ children, ...props }) {
+    return (<button {...props} className="bg-red-600 hover:bg-red-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
+        {children}
+    </button>)
+}
+
+export function GreenButton({ children, ...props }) {
+    return (<button {...props} className="bg-green-600 hover:bg-green-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
         {children}
     </button>)
 }
\ No newline at end of file
diff --git a/traque-front/tailwind.config.js b/traque-front/tailwind.config.js
index bfb8aee..a7babb3 100644
--- a/traque-front/tailwind.config.js
+++ b/traque-front/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  mode: 'jit',
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",