From f7bd74bee4cca4f7ccf188244ea11a0634c61dc7 Mon Sep 17 00:00:00 2001
From: Aqqil Azman <aqqil.azman99@gmail.com>
Date: Thu, 18 Jul 2024 15:33:39 +0800
Subject: [PATCH] made buttons bigger and align them horizontally

---
 .../AdminWorkFlowSectionComponent.vue         | 63 ++++++++++++-------
 1 file changed, 39 insertions(+), 24 deletions(-)

diff --git a/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue b/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue
index 7add11bf..3190ed5e 100644
--- a/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue
+++ b/resources/assets/vue/components/general/sections/AdminWorkFlowSectionComponent.vue
@@ -16,11 +16,11 @@
                     <div>Login Information</div>
                     <login-form-component></login-form-component>
                     <button @click="selectOrder(order, 'issue_login')" class="btn btn-primary">Login Issue</button>
-                    <button @click="selectOrder(order, 'dummy_login')" class="btn btn-primary">Login Succesful</button>
+                    <button @click="selectOrder(order, 'dummy_login')" class="btn btn-primary">Login Successful</button>
                 </div>
                 <div v-else-if="currentQuestionId === 'login_successful'">
                     <div>Order Information</div>
-                    <button @click="selectOrder(order, 'error_order')" class="btn btn-primary">Can't very order?</button>
+                    <button @click="selectOrder(order, 'error_order')" class="btn btn-primary">Can't verify order?</button>
                     <button @click="selectOrder(order, 'verify_order')" class="btn btn-primary">Order Verified</button>
                 </div>
                 <div v-else-if="currentQuestionId === 'order_verify'">
@@ -93,10 +93,12 @@
                     <button @click="submit" class="btn btn-primary">Submit issue</button>
                 </div>
                 <div v-else>
-                    <div v-for="(answer, index) in currentQuestion.answers" :key="index">
-                        <button @click="selectAnswer(answer.next)" class="btn btn-primary">
-                            {{ answer.text }}
-                        </button>
+                    <div class="answer-container">
+                        <div v-for="(answer, index) in currentQuestion.answers" :key="index" class="answer-item">
+                            <button @click="selectAnswer(answer.next)" class="btn btn-primary">
+                                {{ answer.text }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -315,10 +317,6 @@ export default {
     margin: 20px;
 }
 
-.btn {
-    margin: 5px;
-}
-
 .box {
     border: 1px solid #ddd;
     padding: 20px;
@@ -331,20 +329,37 @@ export default {
 }
 
 .image-upload {
-            width: 80%;
-            padding: 10px;
-            font-size: 16px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            margin-bottom:10px;
-        }
+    width: 80%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
 
 .text-box {
-            width: 80%;
-            padding: 10px;
-            font-size: 16px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            margin-bottom: 20px;
-        }        
+    width: 80%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+
+.btn {
+    margin: 5px;
+    font-size: 18px; /* Adjust the font size */
+    padding: 12px 24px; /* Adjust the padding */
+    border-radius: 4px; /* Optional: adjust border radius */
+}
+
+.answer-container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.answer-item {
+    margin: 10px;
+}
 </style>