Secondary color for Back button

JhumanJ · Aug 11, 2023 · 755689f · 755689f
1 parent 7e75343
commit 755689f
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 3 deletions.
diff --git a/app/Http/Requests/UserFormRequest.php b/app/Http/Requests/UserFormRequest.php
@@ -51,6 +51,7 @@ public function rules()
             'logo_picture' => 'url|nullable',
             'dark_mode' => ['required',Rule::in(Form::DARK_MODE_VALUES)],
             'color' => 'required|string',
+            'secondary_color' => 'required|string',
             'hide_title' => 'required|boolean',
             'uppercase_labels' => 'required|boolean',
             'no_branding' => 'required|boolean',

diff --git a/app/Http/Resources/FormResource.php b/app/Http/Resources/FormResource.php
@@ -110,6 +110,7 @@ private function getPasswordProtectedForm()
             'dark_mode' => $this->dark_mode,
             'transparent_background' => $this->transparent_background,
             'color' => $this->color,
+            'secondary_color' => $this->secondary_color,
             'is_password_protected' => true,
             'has_password' => $this->has_password,
             'width' => 'centered',

diff --git a/app/Models/Forms/Form.php b/app/Models/Forms/Form.php
@@ -57,6 +57,7 @@ class Form extends Model
         'logo_picture',
         'dark_mode',
         'color',
+        'secondary_color',
         'uppercase_labels',
         'no_branding',
         'hide_title',

diff --git a/database/factories/FormFactory.php b/database/factories/FormFactory.php
@@ -66,6 +66,7 @@ public function definition()
             'width' => $this->faker->randomElement(Form::WIDTHS),
             'dark_mode' => $this->faker->randomElement(Form::DARK_MODE_VALUES),
             'color' => '#3B82F6',
+            'secondary_color' => '#CBD5E1',
             'hide_title' => false,
             'no_branding' => false,
             'uppercase_labels' => true,

diff --git a/database/migrations/2023_08_11_102439_add_secondary_color_to_forms.php b/database/migrations/2023_08_11_102439_add_secondary_color_to_forms.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('secondary_color')->default('#CBD5E1');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('secondary_color');
+        });
+    }
+};
diff --git a/resources/js/components/open/forms/OpenForm.vue b/resources/js/components/open/forms/OpenForm.vue
@@ -51,7 +51,7 @@
     <!--  Submit, Next and previous buttons  -->
     <div class="flex flex-wrap justify-center w-full">
       <open-form-button v-if="currentFieldGroupIndex>0 && previousFieldsPageBreak && !loading" native-type="button"
-                        :color="form.color" :theme="theme" class="mt-2 px-8 mx-1" @click="previousPage"
+                        :color="form.secondary_color" :theme="theme" class="mt-2 px-8 mx-1" @click="previousPage"
       >
         {{ previousFieldsPageBreak.previous_btn_text }}
       </open-form-button>

diff --git a/resources/js/components/open/forms/components/form-components/FormCustomization.vue b/resources/js/components/open/forms/components/form-components/FormCustomization.vue
@@ -56,8 +56,14 @@
                   :form="form" label="Dark Mode"
     />
     <color-input name="color" class="mt-4"
-                 :form="form"
-                 label="Color (for buttons & inputs border)"
+                :form="form"
+                label="Color"
+                help="Buttons & inputs border"
+    />
+    <color-input name="secondary_color" class="mt-4"
+                :form="form"
+                label="Secondary Color"
+                help="Back buttons"
     />
     <toggle-switch-input name="hide_title" :form="form" class="mt-4"
                     label="Hide Title"

diff --git a/resources/js/mixins/form_editor/initForm.js b/resources/js/mixins/form_editor/initForm.js
@@ -20,6 +20,7 @@ export default {
         width: 'centered',
         dark_mode: 'auto',
         color: '#3B82F6',
+        secondary_color: '#CBD5E1',
         hide_title: false,
         no_branding: false,
         uppercase_labels: true,