From df5f9e7dc728133bbcf886b946a606292f5bcb6a Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Fri, 10 Jun 2022 10:16:41 +0300
Subject: [PATCH] static form html classnames return to tailwind classname for
 .vue

---
 .../assets/js/components/AkauntingColor.vue   |   2 +-
 .../js/components/AkauntingContactCard.vue    |   4 +-
 .../AkauntingCurrencyConversion.vue           |   2 +-
 .../assets/js/components/AkauntingDate.vue    |   2 +-
 .../js/components/AkauntingItemButton.vue     |   4 +-
 .../assets/js/components/AkauntingMoney.vue   |  18 ++-
 .../js/components/AkauntingRadioGroup.vue     |   2 +-
 .../js/components/AkauntingRecurring.vue      |   4 +-
 .../assets/js/components/Inputs/BaseInput.vue |   9 +-
 .../assets/js/views/install/Database.vue      | 108 ++++++++++--------
 .../assets/js/views/install/Language.vue      |   2 +-
 .../assets/js/views/install/Settings.vue      |  28 +++--
 resources/assets/js/views/wizard/Company.vue  |   4 +-
 13 files changed, 108 insertions(+), 81 deletions(-)

diff --git a/resources/assets/js/components/AkauntingColor.vue b/resources/assets/js/components/AkauntingColor.vue
index 75fbebfbc..2d7a97793 100644
--- a/resources/assets/js/components/AkauntingColor.vue
+++ b/resources/assets/js/components/AkauntingColor.vue
@@ -9,7 +9,7 @@
         ]"
         :error="formError">
         <div class="flex justify-between relative mt-1">
-            <input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="form-element">
+            <input type="text" @change="change" :name="name" :id="name" v-model="color" @keyup="addColor" class="full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple">
 
             <div class="absolute w-7 h-7 flex rounded-full my-auto bottom-2 right-2 cursor-pointer"
                 ref="dropdownMenu"
diff --git a/resources/assets/js/components/AkauntingContactCard.vue b/resources/assets/js/components/AkauntingContactCard.vue
index 4b335816a..487b2d381 100644
--- a/resources/assets/js/components/AkauntingContactCard.vue
+++ b/resources/assets/js/components/AkauntingContactCard.vue
@@ -22,7 +22,7 @@
                             <input
                                 type="text"
                                 data-input="true"
-                                class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
+                                class="w-full text-sm py-2.5 mt-1 border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
                                 autocapitalize="default" autocorrect="ON"
                                 :placeholder="placeholder"
                                 :ref="'input-contact-field-' + _uid"
@@ -32,7 +32,7 @@
                             />
                         </div>
 
-                        <ul class="form-element p-0 border-0 mt-0 cursor-pointer">
+                        <ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 border-0 mt-0 cursor-pointer">
                             <div class="hover:bg-gray-100 px-4 py-2" v-for="(contact, index) in sortContacts" :key="index" @click="onContactSeleted(index, contact.id)">
                                 <span>{{ contact.name }}</span>
                             </div>
diff --git a/resources/assets/js/components/AkauntingCurrencyConversion.vue b/resources/assets/js/components/AkauntingCurrencyConversion.vue
index 1a60f0323..691c54767 100644
--- a/resources/assets/js/components/AkauntingCurrencyConversion.vue
+++ b/resources/assets/js/components/AkauntingCurrencyConversion.vue
@@ -10,7 +10,7 @@
             masked: true
         }" :value="price" disabled size="5" masked class="disabled-money text-right mr-1 js-conversion-input text-xs px-1"></money>
         <span class="mr-2">{{ texts[1] }}</span>
-        <input name="currency_rate" v-model="rate" @input="onChange" class="form-element w-16 h-10 text-right js-conversion-input" />
+        <input name="currency_rate" v-model="rate" @input="onChange" class="text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple w-16 h-10 text-right js-conversion-input" />
     </div>
 </template>
 
diff --git a/resources/assets/js/components/AkauntingDate.vue b/resources/assets/js/components/AkauntingDate.vue
index 1e577f504..b8b71acb8 100644
--- a/resources/assets/js/components/AkauntingDate.vue
+++ b/resources/assets/js/components/AkauntingDate.vue
@@ -19,7 +19,7 @@
             @on-open="focus"
             @on-close="blur"
             :config="dateConfig"
-            class="form-element datepicker"
+            class="datepicker w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
             v-model="real_model"
             @input="change"
             :readonly="readonly"
diff --git a/resources/assets/js/components/AkauntingItemButton.vue b/resources/assets/js/components/AkauntingItemButton.vue
index 792d4e99d..f65d43f78 100644
--- a/resources/assets/js/components/AkauntingItemButton.vue
+++ b/resources/assets/js/components/AkauntingItemButton.vue
@@ -12,7 +12,7 @@
                    <input 
                        type="text"
                        data-input="true"
-                       class="form-element px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
+                       class="w-full text-sm py-2.5 mt-1 border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple px-10 border-t-0 border-l-0 border-r-0 border-gray-200 rounded-none"
                        autocapitalize="default" 
                        autocorrect="ON" 
                        :placeholder="placeholder"
@@ -23,7 +23,7 @@
                    />
                </div>
 
-                <ul class="form-element p-0 mt-0 border-0 cursor-pointer">
+                <ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
                     <div 
                         class="hover:bg-gray-100 px-4" 
                         v-for="(item, index) in sortedItems" 
diff --git a/resources/assets/js/components/AkauntingMoney.vue b/resources/assets/js/components/AkauntingMoney.vue
index 361e0d144..914b2ea37 100644
--- a/resources/assets/js/components/AkauntingMoney.vue
+++ b/resources/assets/js/components/AkauntingMoney.vue
@@ -1,7 +1,11 @@
 <template>
     <div v-if="! rowInput" class="form-group"
         :class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
-        <label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
+
+        <label v-if="title" :for="name" class="text-black text-sm font-medium">
+            {{ title }}
+        </label>
+        <span v-if="required" class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
         <div class="relative" :class="group_class">
             <!-- <div class="input-group-prepend absolute left-2 bottom-3 text-light-gray">
@@ -10,7 +14,7 @@
                 </span>
             </div> -->
 
-            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
+            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
         </div>
 
         <div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
@@ -18,7 +22,11 @@
 
     <div v-else
         :class="[{'has-error': error}, {'required': required}, {'readonly': readonly}, {'disabled': disabled}, col]">
-        <label v-if="title" :for="name" class="form-control-label">{{ title }}</label>
+
+        <label v-if="title" :for="name" class="text-black text-sm font-medium">
+            {{ title }}
+        </label>
+        <span v-if="required" class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
         <div v-if="icon" class="input-group input-group-merge" :class="group_class">
             <div v-if="icon" class="input-group-prepend">
@@ -27,10 +35,10 @@
                 </span>
             </div>
 
-            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
+            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
         </div>
 
-        <money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="form-element" :class="moneyClass"></money>
+        <money v-else :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="model" :disabled="disabled" :masked="masked" class="input-money" :class="moneyClass"></money>
 
         <div class="text-red text-sm mt-1 block" v-if="error" v-html="error"></div>
     </div>
diff --git a/resources/assets/js/components/AkauntingRadioGroup.vue b/resources/assets/js/components/AkauntingRadioGroup.vue
index 5e3de39d0..eab1d550a 100644
--- a/resources/assets/js/components/AkauntingRadioGroup.vue
+++ b/resources/assets/js/components/AkauntingRadioGroup.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="form-group" :class="col">
-        <label :for="name" class="form-control-label">{{ text }}</label>
+        <label :for="name" class="text-black text-sm font-medium">{{ text }}</label>
 
         <div class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="-component-tab">
             <div class="btn-group btn-group-toggle radio-yes-no" data-toggle="buttons" v-on:click="onClick">
diff --git a/resources/assets/js/components/AkauntingRecurring.vue b/resources/assets/js/components/AkauntingRecurring.vue
index 7ca4b9a3c..b8eda5e24 100644
--- a/resources/assets/js/components/AkauntingRecurring.vue
+++ b/resources/assets/js/components/AkauntingRecurring.vue
@@ -18,7 +18,7 @@
                 {{ frequencyEveryText }}
             </div>
 
-            <input type="text" class="w-20 form-element" v-model="interval" @input="change" v-if="frequency == 'custom'">
+            <input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="interval" @input="change" v-if="frequency == 'custom'">
 
             <el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
                 <el-option
@@ -89,7 +89,7 @@
                 </el-option>
             </el-select>
 
-            <input type="text" class="w-20 form-element ml-2" v-model="limitCount" v-if="limit == 'after'" @input="change">
+            <input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 ml-2 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="limitCount" v-if="limit == 'after'" @input="change">
 
             <div class="pl-2 text-sm" v-if="limit == 'after'">
                 {{ endText }}
diff --git a/resources/assets/js/components/Inputs/BaseInput.vue b/resources/assets/js/components/Inputs/BaseInput.vue
index a56664cc2..d10f5ea52 100644
--- a/resources/assets/js/components/Inputs/BaseInput.vue
+++ b/resources/assets/js/components/Inputs/BaseInput.vue
@@ -6,6 +6,7 @@
     <slot name="label">
       <label v-if="label" :class="labelClasses">
         {{label}}
+        <span v-if="required" class="text-red ltr:ml-1 rtl:mr-1">*</span>
       </label>
     </slot>
     <div class="relative" :class="[
@@ -31,7 +32,7 @@
           v-bind="$attrs"
           :valid="!error"
           :required="required"
-          class="form-element"
+          class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
           :class="[{'is-valid': valid === true}, {'is-invalid': error}, inputClasses]">
       </slot>
       <div v-if="appendIcon || $slots.append" class="input-group-append absolute ltr:right-2 rtl:left-2 bottom-2 text-light-gray">
@@ -106,7 +107,7 @@
       labelClasses: {
         type: String,
         description: "Input label css classes",
-        default: "form-control-label"
+        default: "text-black text-sm font-medium"
       },
       inputClasses: {
         type: String,
@@ -132,6 +133,10 @@
       prependIcon: {
         type: String,
         description: "Prepend icon (left)"
+      },
+      notRequired: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
diff --git a/resources/assets/js/views/install/Database.vue b/resources/assets/js/views/install/Database.vue
index 82f1eced9..e8ab117ce 100644
--- a/resources/assets/js/views/install/Database.vue
+++ b/resources/assets/js/views/install/Database.vue
@@ -3,60 +3,70 @@
         <InstallSteps :active_state="active"></InstallSteps>
 
         <div class="card-body">
-                <div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div>
+            <div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div>
 
-                <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
-                    <div class="sm:col-span-6 form-group required" :class="[{'has-error': form.errors.get('hostname')}]">
-                        <label for="hostname" class="form-control-label">Hostname</label>
+            <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
+                <div class="sm:col-span-6 form-group required" :class="[{'has-error': form.errors.get('hostname')}]">
+                    <label for="hostname" class="text-black text-sm font-medium">Hostname</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
-                        <div class="input-group input-group-merge">
-                            <input
-                                class="form-element"
-                                data-name="hostname"
-                                data-value="localhost"
-                                @keydown="form.errors.clear('hostname')"
-                                v-model="form.hostname"
-                                required="required"
-                                name="hostname"
-                                type="text"
-                                value="localhost"
-                                id="hostname"
-                            />
-                        </div>
-
-                        <div class="text-red text-sm mt-1 block" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div>
+                    <div class="input-group input-group-merge">
+                        <input
+                            class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
+                            :class="[{'border-red': form.errors.get('hostname')}, {'border-light-gray': !form.errors.get('hostname')}]"
+                            data-name="hostname"
+                            data-value="localhost"
+                            @keydown="form.errors.clear('hostname')"
+                            v-model="form.hostname"
+                            required="required"
+                            name="hostname"
+                            type="text"
+                            value="localhost"
+                            id="hostname"
+                        />
                     </div>
 
-                    <div class="sm:col-span-6 form-group required" :class="[{'has-error': form.errors.get('username')}]">
-                        <label for="username" class="form-control-label">Username</label>
-
-                        <div class="input-group input-group-merge">
-                            <input class="form-element" data-name="username" @keydown="form.errors.clear('username')" v-model="form.username" required="required" name="username" type="text" id="username" />
-                        </div>
-
-                        <div class="text-red text-sm mt-1 block" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div>
-                    </div>
-
-                    <div class="sm:col-span-6 form-group" :class="[{'has-error': form.errors.get('password')}]">
-                        <label for="password" class="form-control-label">Password</label>
-
-                        <div class="input-group input-group-merge">
-                            <input class="form-element" data-name="password" v-model="form.password" name="password" type="password" value="" id="password" />
-                        </div>
-
-                        <div class="text-red text-sm mt-1 block" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div>
-                    </div>
-
-                    <div class="sm:col-span-6 form-group mb--2 required" :class="[{'has-error': form.errors.get('database')}]">
-                        <label for="database" class="form-control-label">Database</label>
-
-                        <div class="input-group input-group-merge">
-                            <input class="form-element" data-name="database" @keydown="form.errors.clear('database')" v-model="form.database" required="required" name="database" type="text" id="database" />
-                        </div>
-
-                        <div class="text-red text-sm mt-1 block" v-if="form.errors.has('database')" v-html="form.errors.get('database')"></div>
-                    </div>
+                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div>
                 </div>
+
+                <div class="sm:col-span-6 form-group required">
+                    <label for="username" class="text-black text-sm font-medium">Username</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
+
+                    <div class="input-group input-group-merge">
+                        <input 
+                        :class="[{'border-red': form.errors.get('username')}, {'border-light-gray': !form.errors.get('username')}]"
+                         class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="username" @keydown="form.errors.clear('username')" v-model="form.username" required="required" name="username" type="text" id="username" />
+                    </div>
+
+                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div>
+                </div>
+
+                <div class="sm:col-span-6 form-group">
+                    <label for="password" class="text-black text-sm font-medium">Password</label>
+
+                    <div class="input-group input-group-merge">
+                        <input 
+                        :class="[{'border-red': form.errors.get('password')}, {'border-light-gray': !form.errors.get('password')}]"
+                        class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="password" v-model="form.password" name="password" type="password" value="" id="password" />
+                    </div>
+
+                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div>
+                </div>
+
+                <div class="sm:col-span-6 form-group mb--2 required">
+                    <label for="database" class="text-black text-sm font-medium">Database</label>
+                    <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
+
+                    <div class="input-group input-group-merge">
+                        <input 
+                        :class="[{'border-red': form.errors.get('database')}, {'border-light-gray': !form.errors.get('database')}]"
+                        class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="database" @keydown="form.errors.clear('database')" v-model="form.database" required="required" name="database" type="text" id="database" />
+                    </div>
+
+                    <div class="text-red text-sm mt-1 block" v-if="form.errors.has('database')" v-html="form.errors.get('database')"></div>
+                </div>
+            </div>
         </div>
 
         <div class="relative__footer">
diff --git a/resources/assets/js/views/install/Language.vue b/resources/assets/js/views/install/Language.vue
index da8d40e26..4b90cdad1 100644
--- a/resources/assets/js/views/install/Language.vue
+++ b/resources/assets/js/views/install/Language.vue
@@ -3,7 +3,7 @@
         <InstallSteps :active_state="active"></InstallSteps>
 
         <div class="form-group mb-0">
-            <select v-model="form.lang" name="lang" id="lang" size="13" class="w-full form-control-label">
+            <select v-model="form.lang" name="lang" id="lang" size="13" class="w-full text-black text-sm font-medium">
                 <option v-for="(name, code) in languages" :value="code">
                     {{ name }}
                 </option>
diff --git a/resources/assets/js/views/install/Settings.vue b/resources/assets/js/views/install/Settings.vue
index 6a62195d8..1cccc2cbb 100644
--- a/resources/assets/js/views/install/Settings.vue
+++ b/resources/assets/js/views/install/Settings.vue
@@ -3,41 +3,45 @@
         <InstallSteps :active_state="active"></InstallSteps>
 
         <div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
-            <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('company_name')}]">
-                <label for="company_name" class="form-control-label">Company Name</label>
+            <div class="sm:col-span-6 required">
+                <label for="company_name" class="text-black text-sm font-medium">Company Name</label>
+                <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
                 <div class="input-group input-group-merge">
-                    <input class="form-element" data-name="company_name" @keydown="form.errors.clear('company_name')" v-model="form.company_name" required="required" name="company_name" type="text" id="company_name" />
+                    <input :class="[{'border-red': form.errors.get('company_name')}, {'border-light-gray': !form.errors.get('company_name')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="company_name" @keydown="form.errors.clear('company_name')" v-model="form.company_name" required="required" name="company_name" type="text" id="company_name" />
                 </div>
 
                 <div class="text-red text-sm mt-1 block" v-if="form.errors.has('company_name')" v-html="form.errors.get('company_name')"></div>
             </div>
 
-            <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('company_email')}]">
-                <label for="company_email" class="form-control-label">Company Email</label>
+            <div class="sm:col-span-6 required">
+                <label for="company_email" class="text-black text-sm font-medium">Company Email</label>
+                <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
                 <div class="input-group input-group-merge">
-                    <input class="form-element" data-name="company_email" @keydown="form.errors.clear('company_email')" v-model="form.company_email" required="required" name="company_email" type="text" id="company_email" />
+                    <input :class="[{'border-red': form.errors.get('company_email')}, {'border-light-gray': !form.errors.get('company_email')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="company_email" @keydown="form.errors.clear('company_email')" v-model="form.company_email" required="required" name="company_email" type="text" id="company_email" />
                 </div>
 
                 <div class="text-red text-sm mt-1 block" v-if="form.errors.has('company_email')" v-html="form.errors.get('company_email')"></div>
             </div>
 
-            <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('user_email')}]">
-                <label for="user_email" class="form-control-label">Admin Email</label>
+            <div class="sm:col-span-6 required">
+                <label for="user_email" class="text-black text-sm font-medium">Admin Email</label>
+                <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
                 <div class="input-group input-group-merge">
-                    <input class="form-element" data-name="user_email" @keydown="form.errors.clear('user_email')" v-model="form.user_email" required="required" name="user_email" type="text" id="user_email" />
+                    <input :class="[{'border-red': form.errors.get('user_email')}, {'border-light-gray': !form.errors.get('user_email')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="user_email" @keydown="form.errors.clear('user_email')" v-model="form.user_email" required="required" name="user_email" type="text" id="user_email" />
                 </div>
 
                 <div class="text-red text-sm mt-1 block" v-if="form.errors.has('user_email')" v-html="form.errors.get('user_email')"></div>
             </div>
 
-            <div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('user_password')}]">
-                <label for="user_password" class="form-control-label">Admin Password</label>
+            <div class="sm:col-span-6 required">
+                <label for="user_password" class="text-black text-sm font-medium">Admin Password</label>
+                <span class="text-red ltr:ml-1 rtl:mr-1">*</span>
 
                 <div class="input-group input-group-merge">
-                    <input class="form-element" data-name="user_password" @keydown="form.errors.clear('user_password')" v-model="form.user_password" required="required" name="user_password" type="password" value="" id="user_password" />
+                    <input :class="[{'border-red': form.errors.get('user_password')}, {'border-light-gray': !form.errors.get('user_password')}]" class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg borde text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" data-name="user_password" @keydown="form.errors.clear('user_password')" v-model="form.user_password" required="required" name="user_password" type="password" value="" id="user_password" />
                 </div>
 
                 <div class="text-red text-sm mt-1 block" v-if="form.errors.has('user_password')" v-html="form.errors.get('user_password')"></div>
diff --git a/resources/assets/js/views/wizard/Company.vue b/resources/assets/js/views/wizard/Company.vue
index 3deb3e984..f7622886f 100644
--- a/resources/assets/js/views/wizard/Company.vue
+++ b/resources/assets/js/views/wizard/Company.vue
@@ -41,7 +41,7 @@
                             <div class="sm:col-span-3 grid gap-10">
                                 <div class="sm:col-span-3">
                                     <base-input :label="translations.company.address">
-                                        <textarea class="form-element" name="address" data-name="address" rows="3" :placeholder="translations.company.address" v-model="company.address"></textarea>
+                                        <textarea class="w-full text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" name="address" data-name="address" rows="3" :placeholder="translations.company.address" v-model="company.address"></textarea>
                                     </base-input>
                                 </div>
 
@@ -63,7 +63,7 @@
                             </div>
 
                             <div class="sm:col-span-3">
-                                <label class="form-control-label">{{  translations.company.logo }}</label>
+                                <label class="text-black text-sm font-medium">{{  translations.company.logo }}</label>
                                 <akaunting-dropzone-file-upload ref="dropzoneWizard" class="form-file dropzone-column w-2/5" style="height:12.2rem" preview-classes="single" :attachments="logo" :v-model="logo">
                                 </akaunting-dropzone-file-upload>
                             </div>