From 6faad76ac90d363af28ae8a203718ecfde49240b Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Mon, 22 Feb 2021 15:31:43 +0100
Subject: [PATCH] settings

---
 packages/dashboard/src/components/Layout.js | 23 +++++++++------------
 packages/dashboard/src/pages/index.js       |  6 +-----
 packages/dashboard/src/pages/settings.js    | 13 ++++++------
 3 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/packages/dashboard/src/components/Layout.js b/packages/dashboard/src/components/Layout.js
index 2b60faa4..bf6858e0 100644
--- a/packages/dashboard/src/components/Layout.js
+++ b/packages/dashboard/src/components/Layout.js
@@ -131,13 +131,11 @@ export default function Layout({ title, children }) {
                           aria-orientation="vertical"
                           aria-labelledby="user-menu"
                         >
-                          <a
-                            href="#"
-                            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                            role="menuitem"
-                          >
-                            Settings (coming soon)
-                          </a>
+                          <Link href="/settings">
+                            <a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
+                              Settings
+                            </a>
+                          </Link>
                           <a
                             href="#"
                             className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
@@ -242,12 +240,11 @@ export default function Layout({ title, children }) {
                 </div>
               </div>
               <div className="mt-3 px-2 space-y-1">
-                <a
-                  href="#"
-                  className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
-                >
-                  Settings (coming soon)
-                </a>
+                <Link href="/">
+                  <a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
+                    Settings
+                  </a>
+                </Link>
                 <a
                   href="#"
                   className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
diff --git a/packages/dashboard/src/pages/index.js b/packages/dashboard/src/pages/index.js
index d4dcf77e..d0bd884a 100644
--- a/packages/dashboard/src/pages/index.js
+++ b/packages/dashboard/src/pages/index.js
@@ -130,11 +130,7 @@ export default function Home() {
               </div>
             </div>
             <div className="bg-gray-50 px-4 py-4 sm:px-6">
-              <div className="text-sm">
-                <abbr title="Coming soon" className="font-medium text-gray-500">
-                  View current payments
-                </abbr>
-              </div>
+              <div className="text-sm font-medium text-gray-500">Upgrade options coming soon!</div>
             </div>
           </div>
           <div className="flex flex-col bg-white overflow-hidden shadow rounded-lg">
diff --git a/packages/dashboard/src/pages/settings.js b/packages/dashboard/src/pages/settings.js
index ef9d2e05..7960b61a 100644
--- a/packages/dashboard/src/pages/settings.js
+++ b/packages/dashboard/src/pages/settings.js
@@ -1,4 +1,5 @@
 import { Configuration, PublicApi } from "@ory/kratos-client";
+import Layout from "../components/Layout";
 import config from "../config";
 import SelfServiceForm from "../components/Form/SelfServiceForm";
 
@@ -72,13 +73,11 @@ export default function Settings({ flow }) {
   console.log(flow);
 
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Update your settings</h2>
+    <Layout title="Settings">
+      <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
+        <SelfServiceForm config={flow.methods.password.config} fieldsConfig={fieldsConfig} />
+        <SelfServiceForm config={flow.methods.profile.config} fieldsConfig={fieldsConfig} />
       </div>
-
-      <SelfServiceForm config={flow.methods.password.config} fieldsConfig={fieldsConfig} />
-      <SelfServiceForm config={flow.methods.profile.config} fieldsConfig={fieldsConfig} />
-    </div>
+    </Layout>
   );
 }