From 054c0eb32cd613aad065c9bbda78f3efa95ca40c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 22 Nov 2021 14:39:57 +0100
Subject: [PATCH] user profile page refactor

---
 public/mix-manifest.json                  | 142 ++++++++++++++------
 resources/js/App.vue                      |   2 +-
 resources/js/views/Profile.vue            |  33 ++---
 resources/js/views/User/Password.vue      | 150 ++++++++++++----------
 resources/js/views/User/Settings.vue      | 118 ++++++++---------
 resources/sass/vuefilemanager/_forms.scss |   2 +-
 6 files changed, 255 insertions(+), 192 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index fd3828fc..4f351e1a 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,75 +2,75 @@
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/chunks/admin.js": "/chunks/admin.js?id=5294b188df3920d615fd",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=ca2d2a0b50c409eea580",
+    "/chunks/admin.js": "/chunks/admin.js?id=3d9181c894abbfe33663",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=55f9b983b9aa60c21a62",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=2d52fc8e939196f7ff16",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=1d731f1c4a9daecb2a99",
     "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js?id=5841d65172536a8a9bdc",
     "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js?id=bcec1c96b2248aa0d451",
-    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=aed3b5d5e9b9788fc901",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=f3da1167c5f8c0239987",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=481af22bd60333fd4ce1",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=61e970ffb679245686c3",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=26a26c5593b41f794d32",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=2650bff27ff135868aef",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=574e92d23c4b731e3737",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=aa284736dda7647d5c9e",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=6bd4516589f23ec25ae6",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=b1123c792a51f9b3ec11",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=0484e3ac2d8ba983953a",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=736f885ac022b5571dd7",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=78e0397a4838145a6c79",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=c0888489dad7dffe00a7",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=b209d3c7dea80946c0e1",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=818ceb6be0fe9f4d06a4",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=325286e1d4e26f766ddd",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=009566c6461a90ed56e2",
     "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=38b2085e829a84df0e5f",
     "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=5ad84de6090be8706c25",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=47202a90d27229c18568",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=388ee5b424fc37d19061",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=af38547bd60f92575c03",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=a16bef3e89f926038ac6",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=80a8d22b3b4bf997babf",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=d89e1295d8dbd07858b7",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=a6dae0b5bed2ac300522",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=f8562a0dd73fdc9a3f71",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=3d0bbcd0c36d74bf739a",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=55135fff8801bdf735c4",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=782e7ef35b43f548081d",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=1ed3a7818d9f904975c0",
-    "/chunks/database.js": "/chunks/database.js?id=0c6acc17960dbbf52e29",
+    "/chunks/database.js": "/chunks/database.js?id=1ae81800a700012ddb82",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=253ce639751cc8799458",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=3977252278c2d609449d",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=94aba21b70f5648f6c95",
     "/chunks/files.js": "/chunks/files.js?id=a4f88b13671ef8b37818",
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=64ac90ff8ae7d3ee3ed1",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=2f2e1987e91a74932dcb",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=44dd372c3414f407ed37",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=8e13225bf4eda83750fc",
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=ff0431daf69e651d2785",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=b3f6fb91be8517fbc085",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
     "/chunks/invoices.js": "/chunks/invoices.js?id=8cf63565e1e854db7305",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=7ca5818ed80a238091ae",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=cfa38a0cc6f82dd5b80d",
     "/chunks/pages.js": "/chunks/pages.js?id=f5c86b24fcbe15b15d1d",
     "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=24a9a66699c014e7bdee",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=36f5ad70d43c837644cb",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=a9c2cc16215004822f4d",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=865c61f0ad5c02045349",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=e8da481270be8010fe35",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=77285e7872778009215a",
     "/chunks/plans.js": "/chunks/plans.js?id=1dd67aa61e7482424e6d",
-    "/chunks/platform.js": "/chunks/platform.js?id=44ed2bf47235b69b61c7",
+    "/chunks/platform.js": "/chunks/platform.js?id=0d98132eb10309463177",
     "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e10f4637f079008e5d87",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=aafbc2aab40dc434335a",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
-    "/chunks/profile.js": "/chunks/profile.js?id=8abf481ae271193981cb",
+    "/chunks/profile.js": "/chunks/profile.js?id=f588150c33883516722c",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=58edfb3a35062e1ba4e0",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
-    "/chunks/settings.js": "/chunks/settings.js?id=c5190d68a948d7ac468b",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=e790399c3a9603f19f1b",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=b7245d7c706b34608f6b",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=9decf768ce0631bbd783",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=38a54ecbe68314add389",
+    "/chunks/settings.js": "/chunks/settings.js?id=b7a593ddda1ac39edc94",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0920151cdeb1c2bdb36a",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f73f0faf411f750a1c07",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=8e6097bde7181d6800fa",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=979e74627582832e7a79",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9a1352324cbee9630496",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=b1e1ae3cff004140701e",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=e67e12955133c57194d1",
@@ -83,22 +83,22 @@
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=f2fb680ebf4873ff4436",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=04b378323ff1494fa85d",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=0307551ea7ad8e9bd3c2",
-    "/chunks/status-check.js": "/chunks/status-check.js?id=ed4bd5bcf44162d9290a",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=651c25f263156a115fb0",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=abb4bf292f15532bb41e",
+    "/chunks/status-check.js": "/chunks/status-check.js?id=a3e3ddecf11f2476d5ec",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=629a6eae27148dfcd3cc",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=2f3eea4ae324e6ffcf44",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=8ac19b3fcfd57d79e5b1",
     "/chunks/team-folders.js": "/chunks/team-folders.js?id=0e69f4432e968cc512f9",
     "/chunks/trash.js": "/chunks/trash.js?id=5fe84aadd8729e68849e",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=37d49ff61bc07f1bb1ac",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=0b40203411b63118a5eb",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=c337938c53b404b7b632",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
     "/chunks/user.js": "/chunks/user.js?id=24100ba3c089f04cbdd6",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=f1c6a91fd6b14a2f6ec7",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=2c0fed8b4f490c5d7dbd",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=57d78ad1c876a2c007f1",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=b8b52fc2dd1511cf8389",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=b0bf0f0584a27c209381",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=1b084ff6ad88f525a198",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=70a811ada7b123ce9bd7",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=6cee8a74926ea9938322",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=5fa6f523e2e2cd327da6",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=bc9388e177e8e8e7601a",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=cd9d2e6441a5ce09ee69",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
     "/chunks/users.js": "/chunks/users.js?id=6deee497a896c8dc2560",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
@@ -283,5 +283,65 @@
     "/chunks/user.a57643db5e2532f28c66.hot-update.js": "/chunks/user.a57643db5e2532f28c66.hot-update.js",
     "/chunks/user.1d312004a3b95d3f99b0.hot-update.js": "/chunks/user.1d312004a3b95d3f99b0.hot-update.js",
     "/chunks/user.47aeb624caff9279062a.hot-update.js": "/chunks/user.47aeb624caff9279062a.hot-update.js",
-    "/chunks/user.78da4d817aa2c69d91b0.hot-update.js": "/chunks/user.78da4d817aa2c69d91b0.hot-update.js"
+    "/chunks/user.78da4d817aa2c69d91b0.hot-update.js": "/chunks/user.78da4d817aa2c69d91b0.hot-update.js",
+    "/chunks/settings.12479af724a5ba5a8a78.hot-update.js": "/chunks/settings.12479af724a5ba5a8a78.hot-update.js",
+    "/chunks/settings.2f16be26cf28ae4103db.hot-update.js": "/chunks/settings.2f16be26cf28ae4103db.hot-update.js",
+    "/chunks/settings.4e9e1a94da37e76d9bd6.hot-update.js": "/chunks/settings.4e9e1a94da37e76d9bd6.hot-update.js",
+    "/chunks/settings.cbfc237e4eeab6a438cc.hot-update.js": "/chunks/settings.cbfc237e4eeab6a438cc.hot-update.js",
+    "/chunks/settings.0a689e9c57cfd84cebf4.hot-update.js": "/chunks/settings.0a689e9c57cfd84cebf4.hot-update.js",
+    "/chunks/settings.cca011d200d4f5b9e3f5.hot-update.js": "/chunks/settings.cca011d200d4f5b9e3f5.hot-update.js",
+    "/chunks/settings.e8e697922ed061648f59.hot-update.js": "/chunks/settings.e8e697922ed061648f59.hot-update.js",
+    "/chunks/profile.9a482245a891dabe0fa5.hot-update.js": "/chunks/profile.9a482245a891dabe0fa5.hot-update.js",
+    "/chunks/profile.857cac1a7f58358e136f.hot-update.js": "/chunks/profile.857cac1a7f58358e136f.hot-update.js",
+    "/chunks/settings-password.606a306537103cf0ff98.hot-update.js": "/chunks/settings-password.606a306537103cf0ff98.hot-update.js",
+    "/chunks/settings-password.b0d5733bdb70cbbe269a.hot-update.js": "/chunks/settings-password.b0d5733bdb70cbbe269a.hot-update.js",
+    "/chunks/settings-password.dbcf2e3b380ffe75925c.hot-update.js": "/chunks/settings-password.dbcf2e3b380ffe75925c.hot-update.js",
+    "/chunks/settings-password.c1df0d653a0b29354357.hot-update.js": "/chunks/settings-password.c1df0d653a0b29354357.hot-update.js",
+    "/chunks/settings-password.8cfd695391ead0c20996.hot-update.js": "/chunks/settings-password.8cfd695391ead0c20996.hot-update.js",
+    "/chunks/settings-password.96ac678dfbe34dfe5cea.hot-update.js": "/chunks/settings-password.96ac678dfbe34dfe5cea.hot-update.js",
+    "/chunks/settings-password.b7d9c82ea7a3a0ac04f4.hot-update.js": "/chunks/settings-password.b7d9c82ea7a3a0ac04f4.hot-update.js",
+    "/chunks/settings-password.81fd99926014877bb1dc.hot-update.js": "/chunks/settings-password.81fd99926014877bb1dc.hot-update.js",
+    "/chunks/settings-password.3679f055aa50618b26c9.hot-update.js": "/chunks/settings-password.3679f055aa50618b26c9.hot-update.js",
+    "/chunks/admin.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/admin.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/admin-account.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/admin-account.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-appearance.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-appearance.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-billings.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-billings.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-email.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-email.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-index.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-index.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-language.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-language.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-others.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-others.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-payments.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-payments.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/app-setup.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/app-setup.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/billings-detail.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/billings-detail.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/contact-us.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/contact-us.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/database.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/database.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/environment-setup.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/environment-setup.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/installation-disclaimer.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/installation-disclaimer.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/page-edit.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/page-edit.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/plan-create.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/plan-create.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/plan-delete.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/plan-delete.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/plan-settings.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/plan-settings.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/plan-subscribers.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/plan-subscribers.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/platform.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/platform.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/platform~chunks/shared.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/platform~chunks/shared.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/profile.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/profile.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/settings.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/settings.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/settings-create-payment-methods.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/settings-create-payment-methods.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/settings-invoices.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/settings-invoices.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/settings-password.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/settings-password.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/settings-payment-methods.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/settings-payment-methods.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/status-check.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/status-check.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/stripe-credentials.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/stripe-credentials.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/subscription-plans.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/subscription-plans.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/upgrade-billing.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/upgrade-billing.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/upgrade-plan.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/upgrade-plan.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/user-create.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-create.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/user-delete.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-delete.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/user-detail.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-detail.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/user-invoices.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-invoices.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/user-password.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-password.d7ae8020dd2f8634e23d.hot-update.js",
+    "/chunks/user-storage.d7ae8020dd2f8634e23d.hot-update.js": "/chunks/user-storage.d7ae8020dd2f8634e23d.hot-update.js",
+    "/js/main.9e048af49ecf3c110fb4.hot-update.js": "/js/main.9e048af49ecf3c110fb4.hot-update.js",
+    "/js/main.322fdb792626c316f23d.hot-update.js": "/js/main.322fdb792626c316f23d.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 96d109a4..ed525dc5 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -139,7 +139,7 @@ export default {
 }
 
 .input-dark {
-	@apply w-full bg-light-background py-3.5 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
+	@apply w-full bg-light-background py-3 px-4.5 rounded-lg appearance-none border-transparent text-base font-bold border
 }
 
 [v-cloak],
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 3300f721..0c848392 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -14,20 +14,18 @@
 		<SidebarNavigation />
         <PanelNavigationUser />
 
-        <div v-if="user" id="single-page">
-            <div v-if="! isLoading" id="page-content" class="medium-width">
-                <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
+        <div v-if="user" class="pr-6 w-full overflow-x-hidden relative pt-6" style="background: rgba(244, 245, 246, 0.6)">
+            <div v-if="! isLoading" id="page-content">
 
-                <div class="content-page">
-
-                    <!--User thumbnail-->
+				<div class="card shadow-card">
+					<!--User thumbnail-->
                     <div class="page-detail-headline">
                         <div class="user-thumbnail">
                             <div class="avatar">
                                 <UserImageInput
-                                        v-model="avatar"
-                                        :avatar="user.data.relationships.settings.data.attributes.avatar.md"
-                                />
+									v-model="avatar"
+									:avatar="user.data.relationships.settings.data.attributes.avatar.md"
+								/>
                             </div>
                             <div class="info">
                                 <b class="name">
@@ -46,21 +44,21 @@
                         </div>
                     </div>
 
-                    <!--Incomplete Payment Warning-->
+					<!--Incomplete Payment Warning-->
                     <InfoBox v-if="canShowIncompletePayment" type="error" class="message-box">
                         <i18n path="incomplete_payment.description" tag="p">
                             <a :href="user.data.attributes.incomplete_payment">{{ $t('incomplete_payment.href') }}</a>
                         </i18n>
                     </InfoBox>
 
-                    <!--Upgrade Storage Plan Warning-->
+					<!--Upgrade Storage Plan Warning-->
                     <InfoBox v-if="canShowUpgradeWarning && !canShowIncompletePayment" type="error" class="message-box">
                         <p>{{ $t('upgrade_banner.title') }}</p>
                     </InfoBox>
+				</div>
 
-                    <!--Router Content-->
-                    <router-view :user="user" />
-                </div>
+				<!--Router Content-->
+				<router-view :user="user" />
             </div>
             <div id="loader" v-if="isLoading">
                 <Spinner></Spinner>
@@ -135,13 +133,6 @@
     @import '/resources/sass/vuefilemanager/_variables';
     @import '/resources/sass/vuefilemanager/_mixins';
 
-    .page-detail-headline {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 50px;
-        margin-top: 30px;
-    }
-
     .user-thumbnail {
         display: flex;
         align-items: center;
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index 30a12bfa..beb6ad65 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -1,55 +1,29 @@
 <template>
     <PageTab>
-        <PageTabGroup>
-            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
-                <FormLabel>{{ $t('user_password.title') }}</FormLabel>
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
-										rules="required" v-slot="{ errors }">
-                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
-							   type="password"
-							   class="focus-border-theme"
-							   :class="{'is-error': errors[0]}" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
-										rules="required" v-slot="{ errors }">
-                        <input v-model="newPasswordConfirmation"
-							   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
-							   class="focus-border-theme"
-							   :class="{'is-error': errors[0]}" />
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-                <div class="block-wrapper">
-                    <ButtonBase type="submit" button-style="theme" class="confirm-form">
-                        {{ $t('profile.store_pass') }}
-                    </ButtonBase>
-                </div>
-            </ValidationObserver>
-        </PageTabGroup>
-        <PageTabGroup class="form block-form">
-            <FormLabel icon="smartphone">{{ $t('2fa.settings.title') }}</FormLabel>
-            <div class="block-wrapper">
-				<div class="input-wrapper">
-					<div class="inline-wrapper">
-						<div class="switch-label">
-							<label class="input-label">
-								{{ $t('popup_2fa.switch_title') }}
-							</label>
-							<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
+
+		<div class="card shadow-card">
+			<div class="form block-form">
+				<FormLabel icon="smartphone">
+					{{ $t('2fa.settings.title') }}
+				</FormLabel>
+				<div class="block-wrapper">
+					<div class="input-wrapper">
+						<div class="inline-wrapper">
+							<div class="switch-label">
+								<label class="input-label">
+									{{ $t('popup_2fa.switch_title') }}
+								</label>
+								<small class="input-help" v-html="$t('popup_2fa.switch_info')"></small>
+							</div>
+							<SwitchInput @click.native.prevent.stop="open2faPopup"
+										 class="switch"
+										 :state="user.data.attributes.two_factor_authentication"
+							/>
 						</div>
-						<SwitchInput @click.native.prevent.stop="open2faPopup"
-									 class="switch"
-									 :state="user.data.attributes.two_factor_authentication"
-						/>
 					</div>
 				</div>
 			</div>
+
             <div v-if="user && user.data.attributes.two_factor_authentication" class="block-wrapper">
 				<div class="input-wrapper">
 					<div class="inline-wrapper button-block">
@@ -71,31 +45,69 @@
 					</div>
 				</div>
 			</div>
-        </PageTabGroup>
-		<PageTabGroup class="form block-form">
-            <FormLabel icon="key">{{ $t('personal_token.section_title') }}</FormLabel>
-			<InfoBox v-if="tokens.length === 0">
-				<p>{{ $t("personal_token.section_description") }}</p>
-			</InfoBox>
+		</div>
 
-			<InfoBox v-if="tokens.length > 0">
-				<ul class="tokens-wrapper">
-					<li class="token-item" v-for="token in tokens" :key="token.id">
-						<div class="tokens-details">
-							<b class="name">{{ token.name}}</b>
-							<time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
-						</div>
-						<div @click="confirmDeleteToken(token)" class="tokens-destroyer">
-							<x-icon size="16" class="close-icon hover-text-theme" />
-						</div>
-					</li>
-				</ul>
-			</InfoBox>
+		<div class="card shadow-card">
+			<div class="form block-form">
+				<FormLabel icon="key">
+					{{ $t('personal_token.section_title') }}
+				</FormLabel>
+				<InfoBox v-if="tokens.length === 0">
+					<p>{{ $t("personal_token.section_description") }}</p>
+				</InfoBox>
 
-			<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
-				{{ $t('personal_token.create_token') }}
-			</ButtonBase>
-        </PageTabGroup>
+				<InfoBox v-if="tokens.length > 0">
+					<ul class="tokens-wrapper">
+						<li class="token-item" v-for="token in tokens" :key="token.id">
+							<div class="tokens-details">
+								<b class="name">{{ token.name}}</b>
+								<time class="last-used">{{ $t('last_used') }}: {{ token.last_used_at ? formatDate(token.last_used_at) : $t('never') }}</time>
+							</div>
+							<div @click="confirmDeleteToken(token)" class="tokens-destroyer">
+								<x-icon size="16" class="close-icon hover-text-theme" />
+							</div>
+						</li>
+					</ul>
+				</InfoBox>
+
+				<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
+					{{ $t('personal_token.create_token') }}
+				</ButtonBase>
+			</div>
+		</div>
+
+		<div class="card shadow-card">
+			<ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
+                <FormLabel>{{ $t('user_password.title') }}</FormLabel>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
+										rules="required" v-slot="{ errors }">
+                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
+							   type="password"
+							   class="focus-border-theme input-dark"
+							   :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
+										rules="required" v-slot="{ errors }">
+                        <input v-model="newPasswordConfirmation"
+							   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+							   class="focus-border-theme input-dark"
+							   :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+                <div class="block-wrapper">
+                    <ButtonBase type="submit" button-style="theme" class="confirm-form">
+                        {{ $t('profile.store_pass') }}
+                    </ButtonBase>
+                </div>
+            </ValidationObserver>
+		</div>
     </PageTab>
 </template>
 
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index d54b65a7..68bd18d3 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -1,71 +1,71 @@
 <template>
     <PageTab>
-        <PageTabGroup v-if="userInfo">
-            <div class="form block-form">
+
+		<div class="card shadow-card">
+			<div class="form block-form">
                 <FormLabel>{{ $t('user_settings.title_account') }}</FormLabel>
                 <div class="block-wrapper">
                     <label>{{ $t('page_registration.label_email') }}:</label>
                     <div class="input-wrapper">
                         <input :value="userInfo.email"
-                               :placeholder="$t('page_registration.placeholder_email')"
-                               type="email"
-                               disabled
-                        />
+							   :placeholder="$t('page_registration.placeholder_email')"
+							   type="email"
+							   disabled
+							   class="focus-border-theme input-dark"
+						/>
                     </div>
                 </div>
                 <div class="block-wrapper">
                     <label>{{ $t('page_registration.label_name') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="changeUserName"
-                               v-model="userInfo.name"
-                               :placeholder="$t('page_registration.placeholder_name')"
-                               type="text"
-                               class="focus-border-theme"
-                        />
+							   v-model="userInfo.name"
+							   :placeholder="$t('page_registration.placeholder_name')"
+							   type="text"
+							   class="focus-border-theme input-dark"
+						/>
                     </div>
                 </div>
             </div>
-        </PageTabGroup>
-
-         <PageTabGroup v-if="userInfo">
-            <div class="form block-form">
+		</div>
+		<div class="card shadow-card">
+			<div class="form block-form">
                 <FormLabel>{{$t('user_settings.timezone')}}</FormLabel>
                 <div class="block-wrapper">
                     <label>GMT:</label>
                     <div class="input-wrapper">
                         <SelectInput @input="$updateText('/user/settings', 'timezone', userInfo.timezone)"
-                                    v-model="userInfo.timezone"
-                                    :default="userInfo.timezone"
-                                    :options="timezones"
-                                    :placeholder="$t('user_settings.timezone_plac')"/>
+									 v-model="userInfo.timezone"
+									 :default="userInfo.timezone"
+									 :options="timezones"
+									 :placeholder="$t('user_settings.timezone_plac')"/>
                     </div>
                 </div>
             </div>
-        </PageTabGroup>
-
-        <PageTabGroup v-if="config.isSaaS && billingInfo">
-            <div class="form block-form">
+		</div>
+		<div class="card shadow-card">
+			<div class="form block-form">
                 <FormLabel>{{ $t('user_settings.title_billing') }}</FormLabel>
                 <div class="block-wrapper">
                     <label>{{ $t('user_settings.name') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/settings', 'name', billingInfo.name)"
-                               v-model="billingInfo.name"
-                               :placeholder="$t('user_settings.name_plac')"
-                               type="text"
-                               class="focus-border-theme"
-                        />
+							   v-model="billingInfo.name"
+							   :placeholder="$t('user_settings.name_plac')"
+							   type="text"
+							   class="focus-border-theme input-dark"
+						/>
                     </div>
                 </div>
                 <div class="block-wrapper">
                     <label>{{ $t('user_settings.address') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/settings', 'address', billingInfo.address)"
-                               v-model="billingInfo.address"
-                               :placeholder="$t('user_settings.address_plac')"
-                               type="text"
-                               class="focus-border-theme"
-                        />
+							   v-model="billingInfo.address"
+							   :placeholder="$t('user_settings.address_plac')"
+							   type="text"
+							   class="focus-border-theme input-dark"
+						/>
                     </div>
                 </div>
                 <div class="wrapper-inline">
@@ -73,22 +73,22 @@
                         <label>{{ $t('user_settings.city') }}:</label>
                         <div class="input-wrapper">
                             <input @keyup="$updateText('/user/settings', 'city', billingInfo.city)"
-                                   v-model="billingInfo.city"
-                                   :placeholder="$t('user_settings.city_plac')"
-                                   type="text"
-                                   class="focus-border-theme"
-                            />
+								   v-model="billingInfo.city"
+								   :placeholder="$t('user_settings.city_plac')"
+								   type="text"
+								   class="focus-border-theme input-dark"
+							/>
                         </div>
                     </div>
                     <div class="block-wrapper">
                         <label>{{ $t('user_settings.postal_code') }}:</label>
                         <div class="input-wrapper">
                             <input @keyup="$updateText('/user/settings', 'postal_code', billingInfo.postal_code)"
-                                   v-model="billingInfo.postal_code"
-                                   :placeholder="$t('user_settings.postal_code_plac')"
-                                   type="text"
-                                   class="focus-border-theme"
-                            />
+								   v-model="billingInfo.postal_code"
+								   :placeholder="$t('user_settings.postal_code_plac')"
+								   type="text"
+								   class="focus-border-theme input-dark"
+							/>
                         </div>
                     </div>
                 </div>
@@ -96,22 +96,22 @@
                     <label>{{ $t('user_settings.country') }}:</label>
                     <div class="input-wrapper">
                         <SelectInput @input="$updateText('/user/settings', 'country', billingInfo.country)"
-                                     v-model="billingInfo.country"
-                                     :default="billingInfo.country"
-                                     :options="countries"
-                                     :placeholder="$t('user_settings.country_plac')"
-                        />
+									 v-model="billingInfo.country"
+									 :default="billingInfo.country"
+									 :options="countries"
+									 :placeholder="$t('user_settings.country_plac')"
+						/>
                     </div>
                 </div>
                 <div class="block-wrapper">
                     <label>{{ $t('user_settings.state') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/settings', 'state', billingInfo.state)"
-                               v-model="billingInfo.state"
-                               :placeholder="$t('user_settings.state_plac')"
-                               type="text"
-                               class="focus-border-theme"
-                        />
+							   v-model="billingInfo.state"
+							   :placeholder="$t('user_settings.state_plac')"
+							   type="text"
+							   class="focus-border-theme input-dark"
+						/>
                         <small class="input-help">
                             State, county, province, or region.
                         </small>
@@ -121,15 +121,15 @@
                     <label>{{ $t('user_settings.phone_number') }}:</label>
                     <div class="input-wrapper">
                         <input @keyup="$updateText('/user/settings', 'phone_number', billingInfo.phone_number)"
-                               v-model="billingInfo.phone_number"
-                               :placeholder="$t('user_settings.phone_number_plac')"
-                               type="text"
-                               class="focus-border-theme"
-                        />
+							   v-model="billingInfo.phone_number"
+							   :placeholder="$t('user_settings.phone_number_plac')"
+							   type="text"
+							   class="focus-border-theme input-dark"
+						/>
                     </div>
                 </div>
             </div>
-        </PageTabGroup>
+		</div>
     </PageTab>
 </template>
 
diff --git a/resources/sass/vuefilemanager/_forms.scss b/resources/sass/vuefilemanager/_forms.scss
index a6569cdb..b79ee423 100644
--- a/resources/sass/vuefilemanager/_forms.scss
+++ b/resources/sass/vuefilemanager/_forms.scss
@@ -2,7 +2,7 @@
 @import '/resources/sass/vuefilemanager/_mixins';
 
 .form {
-  max-width: 700px;
+  //max-width: 700px;
 
   &.inline-form {
     display: flex;