From 128fac86acb07bb9eab4382c22aa36e5a3c05ada Mon Sep 17 00:00:00 2001
From: yash <f20201137@goa.bits-pilani.ac.in>
Date: Wed, 24 Jul 2024 11:43:50 +0530
Subject: [PATCH] UI Changes

---
 public/css/app.css                     |  4 ++++
 public/js/script.js                    |  6 +++---
 resources/views/forms/create.blade.php |  8 ++++----
 resources/views/forms/show.blade.php   | 14 +++++++-------
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 860fa64..e801b13 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -6,6 +6,10 @@
     background-color: #fff;
 }
 
+input:focus, textarea:focus, select:focus{
+    outline: none;
+}
+
 #moveableDiv {
     transition: transform 1s ease;
 }
diff --git a/public/js/script.js b/public/js/script.js
index 80820f8..adfe5b5 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -55,15 +55,15 @@ document.addEventListener("DOMContentLoaded", function () {
         const newQuestionDiv = document.createElement("div");
         // newQuestionDiv.className = "question";
         newQuestionDiv.innerHTML = `
-           <div class="question mb-4 p-4 border rounded bg-white">
+           <div class="question mb-4 p-4 border rounded bg-white shadow-sm">
                 <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
-                    <option value="">Select Question Type</option>
+                    <option style="border:1px solid rgb(103,58,183);" value="">Select Question Type</option>
                     <option value="multiple_choice">Multiple Choice</option>
                     <option value="checkbox">Checkbox</option>
                     <option value="dropdown">Dropdown</option>
                     <option value="text">Text</option>
                 </select>
-                <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
+                <input style="border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0" type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
                 <div class="options-container mb-3">
 
                 </div>
diff --git a/resources/views/forms/create.blade.php b/resources/views/forms/create.blade.php
index e35b611..9d82daa 100644
--- a/resources/views/forms/create.blade.php
+++ b/resources/views/forms/create.blade.php
@@ -48,21 +48,21 @@
         <div class="section">
             <div class="question_title_section mb-4">
                 <div style="border-bottom:5px; border-radius:5px;" class="question_form_top shadow-sm">
-                    <input type="text" id="form-title" name="title" value="{{ $data['title'] ?? '' }}" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
-                    <input type="text" name="description" id="form-description" value="{{ $data['description'] ?? '' }}" class="form-control form-control-sm" placeholder="Form Description" />
+                    <input style="border: none; border-bottom:2px solid rgb(103,58,183); border-radius:0" type="text" id="form-title" name="title" value="{{ $data['title'] ?? '' }}" class="form-control form-control-lg p-2 mb-2" placeholder="Untitled Form" />
+                    <input style="border: none; outline:none; border-bottom:2px solid rgb(103,58,183); border-radius:0" type="text" name="description" id="form-description" value="{{ $data['description'] ?? '' }}" class="form-control form-control-sm" placeholder="Form Description" />
                 </div>
             </div>
         </div>
         <div class="section" id="questions_section">
             <div class="question mb-4 p-4 border rounded bg-white shadow-sm">
                 <select class="form-control question_type mb-1" onchange="changeQuestionType(this)">
-                    <option value="">Select Question Type</option>
+                    <option style="border:1px solid rgb(103,58,183);" value="">Select Question Type</option>
                     <option value="multiple_choice">Multiple Choice</option>
                     <option value="checkbox">Checkbox</option>
                     <option value="dropdown">Dropdown</option>
                     <option value="text">Text</option>
                 </select>
-                <input type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
+                <input style="border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0" type="text" name="question" class="form-control question-input mb-3" placeholder="Type your question here" />
                 <div class="options-container mb-3">
 
                 </div>
diff --git a/resources/views/forms/show.blade.php b/resources/views/forms/show.blade.php
index 2538e60..424b9c2 100644
--- a/resources/views/forms/show.blade.php
+++ b/resources/views/forms/show.blade.php
@@ -39,26 +39,26 @@
         <div class="section">
             <div class="question_title_section mb-4">
                 <div class="question_form_top">
-                    <input type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
-                    <input type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" placeholder="Form Description" value="{{ $form->description }}" readonly />
+                    <input style="background-color: white; border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0;" type="text" id="form-title" name="title" class="form-control form-control-lg mb-2" style="color: black" placeholder="Untitled Form" value="{{ $form->title }}" readonly />
+                    <input style="background-color: white; border:none; border-bottom: 2px solid rgb(103,58,183); border-radius:0;" type="text" name="description" id="form-description" class="form-control form-control-sm" style="color: black" placeholder="Form Description" value="{{ $form->description }}" readonly />
                 </div>
             </div>
         </div>
-        <div class="section" id="questions_section">
+        <div class="section shadow-sm" id="questions_section">
             @foreach ($form->questions as $index => $question)
-                <div class="question mb-4 p-4 border rounded bg-white">
-                    <select class="form-control question_type mb-3" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled>
+                <div class="question mb-4 p-4 border rounded bg-white shadow-sm">
+                    <select style="background-color: white; color:bLack;" class="form-control question_type mb-3" name="questions[{{ $index }}][type]" onchange="changeQuestionType(this)" disabled>
                         <option value="multiple_choice" {{ $question->type === 'multiple_choice' ? 'selected' : '' }}>Multiple Choice</option>
                         <option value="checkbox" {{ $question->type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                         <option value="dropdown" {{ $question->type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
                         <option value="text" {{ $question->type === 'text' ? 'selected' : '' }}>Text</option>
                     </select>
-                    <input type="text" name="questions[{{ $index }}][text]" class="form-control question-input mb-3" placeholder="Type your question here" value="{{ $question->question_text }}" readonly />
+                    <input style="background-color: white; color:bLack;" type="text" name="questions[{{ $index }}][text]" class="form-control question-input mb-3" placeholder="Type your question here" value="{{ $question->question_text }}" readonly />
                     @if ($question->options)
                         <div class="options-container mb-3">
                             @foreach (json_decode($question->options) as $optionIndex => $option)
                                 <div class="option d-flex align-items-center mb-2">
-                                    <input type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" placeholder="Option" value="{{ $option }}" readonly />
+                                    <input style="background-color: white; color:bLack;" type="text" name="questions[{{ $index }}][options][{{ $optionIndex }}]" class="form-control option-input" placeholder="Option" value="{{ $option }}" readonly />
                                 </div>
                             @endforeach
                         </div>