frontend update

resources/js/views/Admin/Plans/PlanCreate.vue

@@ -2,15 +2,13 @@
     <div id="single-page">
         <div id="page-content" class="small-width">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <!--<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>-->
 
             <div class="content-page">
-                <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form">
+                <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
 
                     <div class="form-group">
-                        <b class="form-group-label">
-                            Plan Details
-                        </b>
+                        <FormLabel>Plan Details</FormLabel>
 
                         <!--Name-->
                         <div class="block-wrapper">
@@ -30,6 +28,9 @@
                             </ValidationProvider>
                         </div>
 
+                        <FormLabel>Plan Pricing</FormLabel>
+
+
                         <!--Price-->
                         <div class="block-wrapper">
                             <label>Price:</label>
@@ -66,6 +67,7 @@
     import SelectInput from '@/components/Others/Forms/SelectInput'
     import ImageInput from '@/components/Others/Forms/ImageInput'
     import MobileHeader from '@/components/Mobile/MobileHeader'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import SectionTitle from '@/components/Others/SectionTitle'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import PageHeader from '@/components/Others/PageHeader'
@@ -85,6 +87,7 @@
             ButtonBase,
             ImageInput,
             PageHeader,
+            FormLabel,
             required,
         },
         data() {

resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue

@@ -1,36 +1,37 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <SetupBox
-                    theme="danger"
-                    title="Delete Plan"
-                    description="You can delete plan, but, pay attention!"
-            >
-                <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form"
-                                    class="form block-form">
-                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
-                                        name="Plan name" :rules="'required|is:' + plan.attributes.name">
-                        <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
-                        <div class="single-line-form">
-                            <input v-model="planName"
-                                   placeholder="Type plan name"
-                                   type="text"
-                                   :class="{'is-error': errors[0]}"
-                            />
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
-                                        button-style="danger" class="submit-button">
-                                Delete Plan
-                            </ButtonBase>
-                        </div>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </ValidationObserver>
-            </SetupBox>
+            <FormLabel>Delete Plan</FormLabel>
+            <InfoBox>
+                <p>You can delete plan, but, pay attention!</p>
+            </InfoBox>
+            <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form"
+                                class="form block-form">
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
+                                    name="Plan name" :rules="'required|is:' + plan.attributes.name">
+                    <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
+                    <div class="single-line-form">
+                        <input v-model="planName"
+                               placeholder="Type plan name"
+                               type="text"
+                               :class="{'is-error': errors[0]}"
+                        />
+                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
+                                    button-style="danger" class="submit-button">
+                            Delete Plan
+                        </ButtonBase>
+                    </div>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -46,6 +47,8 @@
             'plan'
         ],
         components: {
+            FormLabel,
+            InfoBox,
             PageTabGroup,
             PageTab,
             ValidationProvider,

resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue

@@ -1,7 +1,8 @@
 <template>
     <PageTab>
-        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
             <PageTabGroup>
+                <FormLabel>Plan details</FormLabel>
 
                 <!--Visible-->
                 <div class="block-wrapper">
@@ -49,6 +50,7 @@
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import SwitchInput from '@/components/Others/Forms/SwitchInput'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
@@ -65,6 +67,7 @@
             'plan'
         ],
         components: {
+            FormLabel,
             SwitchInput,
             PageTabGroup,
             PageTab,