From dc8ce7b8dc2c8b44660949d7438450463f9b1fa2 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Thu, 21 Dec 2023 16:41:55 -0800
Subject: [PATCH] system settings ui redesign complete

---
 backend/storage/settings.json                 | 1076 ++++++++++-------
 .../pages/SystemSettings/Settings/index.tsx   |  254 ++--
 2 files changed, 742 insertions(+), 588 deletions(-)

diff --git a/backend/storage/settings.json b/backend/storage/settings.json
index 98f127d..afc8999 100644
--- a/backend/storage/settings.json
+++ b/backend/storage/settings.json
@@ -1,4 +1,468 @@
 {
+  "_prisma_migrations": {
+    "slug": "_prisma_migrations",
+    "table": {
+      "name": "_prisma_migrations",
+      "pk": "id",
+      "verbose": "_prisma_migrations"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "varchar(36)",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "checksum",
+        "verbose": "checksum",
+        "control": {
+          "text": true
+        },
+        "type": "varchar(64)",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "finished_at",
+        "verbose": "finished_at",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": true,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "migration_name",
+        "verbose": "migration_name",
+        "control": {
+          "text": true
+        },
+        "type": "varchar(255)",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "logs",
+        "verbose": "logs",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": true,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "rolled_back_at",
+        "verbose": "rolled_back_at",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": true,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "started_at",
+        "verbose": "started_at",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "now()",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "applied_steps_count",
+        "verbose": "applied_steps_count",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": "0",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
+  "system_settings": {
+    "slug": "system_settings",
+    "table": {
+      "name": "system_settings",
+      "pk": "id",
+      "verbose": "system_settings"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "label",
+        "verbose": "label",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "value",
+        "verbose": "value",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
+  "users": {
+    "slug": "users",
+    "table": {
+      "name": "users",
+      "pk": "id",
+      "verbose": "users"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "email",
+        "verbose": "email",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "password",
+        "verbose": "password",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "role",
+        "verbose": "role",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": "'default'::text",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
+  "organization_users": {
+    "slug": "organization_users",
+    "table": {
+      "name": "organization_users",
+      "pk": "id",
+      "verbose": "organization_users"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "user_id",
+        "verbose": "user_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "organization_id",
+        "verbose": "organization_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
   "organizations": {
     "slug": "organizations",
     "table": {
@@ -331,154 +795,6 @@
       "readonly": false
     }
   },
-  "organization_workspaces": {
-    "slug": "organization_workspaces",
-    "table": {
-      "name": "organization_workspaces",
-      "pk": "id",
-      "verbose": "organization_workspaces"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "name",
-        "verbose": "name",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "slug",
-        "verbose": "slug",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "uuid",
-        "verbose": "uuid",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "fname",
-        "verbose": "fname",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "organization_id",
-        "verbose": "organization_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "workspace_documents": {
     "slug": "workspace_documents",
     "table": {
@@ -759,222 +1075,6 @@
       "readonly": false
     }
   },
-  "users": {
-    "slug": "users",
-    "table": {
-      "name": "users",
-      "pk": "id",
-      "verbose": "users"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "email",
-        "verbose": "email",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "password",
-        "verbose": "password",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "role",
-        "verbose": "role",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": "'default'::text",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
-  "system_settings": {
-    "slug": "system_settings",
-    "table": {
-      "name": "system_settings",
-      "pk": "id",
-      "verbose": "system_settings"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "label",
-        "verbose": "label",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "value",
-        "verbose": "value",
-        "control": {
-          "text": true
-        },
-        "type": "text",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "jobs": {
     "slug": "jobs",
     "table": {
@@ -1139,6 +1239,154 @@
       "readonly": false
     }
   },
+  "organization_workspaces": {
+    "slug": "organization_workspaces",
+    "table": {
+      "name": "organization_workspaces",
+      "pk": "id",
+      "verbose": "organization_workspaces"
+    },
+    "columns": [
+      {
+        "name": "id",
+        "verbose": "id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "name",
+        "verbose": "name",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "slug",
+        "verbose": "slug",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "uuid",
+        "verbose": "uuid",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "organization_id",
+        "verbose": "organization_id",
+        "control": {
+          "text": true
+        },
+        "type": "integer",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "createdAt",
+        "verbose": "createdAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "lastUpdatedAt",
+        "verbose": "lastUpdatedAt",
+        "control": {
+          "text": true
+        },
+        "type": "timestamp",
+        "allowNull": false,
+        "defaultValue": "CURRENT_TIMESTAMP",
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      },
+      {
+        "name": "fname",
+        "verbose": "fname",
+        "control": {
+          "text": true
+        },
+        "type": "text",
+        "allowNull": false,
+        "defaultValue": null,
+        "listview": {
+          "show": true
+        },
+        "editview": {
+          "show": true
+        }
+      }
+    ],
+    "mainview": {
+      "show": true
+    },
+    "listview": {
+      "order": {},
+      "page": 25
+    },
+    "editview": {
+      "readonly": false
+    }
+  },
   "organization_notifications": {
     "slug": "organization_notifications",
     "table": {
@@ -1303,106 +1551,6 @@
       "readonly": false
     }
   },
-  "organization_users": {
-    "slug": "organization_users",
-    "table": {
-      "name": "organization_users",
-      "pk": "id",
-      "verbose": "organization_users"
-    },
-    "columns": [
-      {
-        "name": "id",
-        "verbose": "id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "user_id",
-        "verbose": "user_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "organization_id",
-        "verbose": "organization_id",
-        "control": {
-          "text": true
-        },
-        "type": "integer",
-        "allowNull": false,
-        "defaultValue": null,
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "createdAt",
-        "verbose": "createdAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      },
-      {
-        "name": "lastUpdatedAt",
-        "verbose": "lastUpdatedAt",
-        "control": {
-          "text": true
-        },
-        "type": "timestamp",
-        "allowNull": false,
-        "defaultValue": "CURRENT_TIMESTAMP",
-        "listview": {
-          "show": true
-        },
-        "editview": {
-          "show": true
-        }
-      }
-    ],
-    "mainview": {
-      "show": true
-    },
-    "listview": {
-      "order": {},
-      "page": 25
-    },
-    "editview": {
-      "readonly": false
-    }
-  },
   "organization_rag_tests": {
     "slug": "organization_rag_tests",
     "table": {
diff --git a/frontend/src/pages/SystemSettings/Settings/index.tsx b/frontend/src/pages/SystemSettings/Settings/index.tsx
index 1997eaa..eac978f 100644
--- a/frontend/src/pages/SystemSettings/Settings/index.tsx
+++ b/frontend/src/pages/SystemSettings/Settings/index.tsx
@@ -1,21 +1,23 @@
 import { useState } from 'react';
 import { APP_NAME } from '../../../utils/constants';
 import System from '../../../models/system';
-import { ExternalLink, Eye, EyeOff } from 'react-feather';
 import paths from '../../../utils/paths';
+import {
+  CaretDown,
+  EyeSlash,
+  Eye,
+  ArrowSquareOut,
+} from '@phosphor-icons/react';
+import showToast from '../../../utils/toast';
 
 export default function Settings({ settings }: { settings: any[] }) {
-  const [result, setResult] = useState<{
-    show: boolean;
-    success: boolean;
-    error: null | string;
-  }>({ show: false, success: false, error: null });
+  const [hasChanges, setHasChanges] = useState(false);
+
   const getSetting = (label: string) => {
     return settings.find((setting) => setting.label === label);
   };
   const handleSubmit = async (e: any) => {
     e.preventDefault();
-    setResult({ show: false, success: false, error: null });
     const form = new FormData(e.target);
     const data = {
       allow_account_creation: form.get('allow_account_creation') === 'yes',
@@ -26,111 +28,119 @@ export default function Settings({ settings }: { settings: any[] }) {
       data.open_ai_api_key = form.get('open_ai_api_key') || null;
 
     const { success, error } = await System.updateSettings(data);
-    setResult({ show: true, success, error });
+
+    if (success) {
+      showToast('Settings updated successfully', 'success');
+      setHasChanges(false);
+    } else {
+      showToast(`Error updating settings: ${error}`, 'error');
+    }
   };
 
   return (
-    <div className="col-span-12 flex-1 rounded-sm bg-white pb-6 xl:col-span-4">
-      <div className="flex items-start justify-between">
-        <div>
-          <h4 className="mb-6 px-7.5 text-3xl font-semibold text-black dark:text-white">
-            System Settings
-          </h4>
+    <>
+      <div className="col-span-12 -mt-18 h-screen flex-1 rounded-sm xl:col-span-4">
+        <div className="flex items-start justify-between">
+          <div className="mb-6 flex flex-col gap-y-1 px-7.5 ">
+            <div className="flex items-center gap-x-2">
+              <div className="-mt-10 flex items-center gap-x-4">
+                <button
+                  onClick={() => window.history.back()}
+                  className="flex h-[34px] w-[34px] rotate-90 items-center justify-center rounded-full border border-transparent  bg-zinc-900 text-white transition-all duration-300 hover:border-white/20 hover:bg-opacity-5 hover:text-white"
+                >
+                  <CaretDown weight="bold" size={18} />
+                </button>
+                <div className="z-10 text-lg font-medium text-white">
+                  System Settings
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-6">
+          <form onSubmit={handleSubmit}>
+            <div className="my-4 flex flex-col gap-y-2 border-b border-white/20 pb-4">
+              <label className="text-sm font-medium text-white">
+                Allow account creation
+              </label>
+              <span className="text-sm text-white/60">
+                Allow anyone to create an account from the new account sign up
+                page. If disabled only an admin can create new accounts.
+              </span>
+
+              <label className="relative inline-flex cursor-pointer items-center">
+                <input
+                  onChange={() => setHasChanges(true)}
+                  type="checkbox"
+                  name="allow_account_creation"
+                  value="yes"
+                  className="peer sr-only"
+                  defaultChecked={
+                    getSetting('allow_account_creation')?.value === 'true'
+                  }
+                />
+                <div className="peer h-6 w-11 rounded-full bg-white/10 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-white/10 after:bg-white/60 after:transition-all after:content-[''] peer-checked:bg-sky-400 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300"></div>
+                <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
+              </label>
+            </div>
+
+            <div className="my-4 flex flex-col gap-y-2 border-b border-white/20 pb-4">
+              <label className="text-sm font-medium text-white">
+                Account domain restriction
+              </label>
+              <p className="text-sm text-white/60">
+                Force all accounts created to have emails ending in
+                @yourdomain.com
+              </p>
+              <div className="relative">
+                <input
+                  onChange={() => setHasChanges(true)}
+                  type="text"
+                  name="account_creation_domain_scope"
+                  placeholder="yourdomain.xyz"
+                  defaultValue={
+                    getSetting('account_creation_domain_scope')?.value
+                  }
+                  className="mt-2 inline-flex h-11 w-[210px] items-center justify-start gap-2.5 rounded-lg bg-white bg-opacity-10 p-2.5 text-sm font-medium leading-tight text-white placeholder:text-opacity-60"
+                />
+              </div>
+            </div>
+
+            <div className="my-4 flex flex-col gap-y-2 pb-4">
+              <label className="text-sm font-medium text-white">
+                OpenAI API Key
+              </label>
+              <p className="text-sm text-white/60">
+                Required only if you will be updating or uploading new documents
+                or embeddings via {APP_NAME}.
+              </p>
+              <div className="relative">
+                <input
+                  onChange={() => setHasChanges(true)}
+                  type="password"
+                  name="open_ai_api_key"
+                  placeholder="sk-xxxxxxxx"
+                  defaultValue={getSetting('open_ai_api_key')?.value}
+                  className="max-w-1/2 mt-2 inline-flex h-11 min-w-[350px] items-center justify-start gap-2.5 rounded-lg bg-white bg-opacity-10 p-2.5 text-sm font-medium leading-tight text-white placeholder:text-opacity-60"
+                />
+              </div>
+            </div>
+
+            <div className="mb-8 flex justify-end">
+              <button
+                hidden={!hasChanges}
+                type="submit"
+                className="w-fit cursor-pointer rounded-lg border border-white/20 bg-transparent px-4 py-2 text-white transition hover:bg-sky-400 hover:bg-opacity-90"
+              >
+                Save Settings
+              </button>
+            </div>
+          </form>
+          <DebugCredentials settings={settings} />
         </div>
       </div>
-
-      <div className="px-6">
-        {result.show && (
-          <>
-            {result.success ? (
-              <p className="my-2 w-full rounded-lg border-green-800 bg-green-50 px-4 py-2 text-lg text-green-800">
-                Settings updated successfully.
-              </p>
-            ) : (
-              <p className="my-2 w-full rounded-lg border-red-800 bg-red-50 px-4 py-2 text-lg text-red-800">
-                {result.error}
-              </p>
-            )}
-          </>
-        )}
-
-        <form onSubmit={handleSubmit}>
-          <div className="my-4">
-            <label className=" block flex items-center gap-x-1 font-medium text-black dark:text-white">
-              Allow account creation
-            </label>
-            <p className="mb-2.5 text-sm text-slate-600">
-              Allow anyone to create an account from the new account sign up
-              page. If disabled only an admin can create new accounts.
-            </p>
-
-            <label className="relative inline-flex cursor-pointer items-center">
-              <input
-                type="checkbox"
-                name="allow_account_creation"
-                value="yes"
-                className="peer sr-only"
-                defaultChecked={
-                  getSetting('allow_account_creation')?.value === 'true'
-                }
-              />
-              <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
-              <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"></span>
-            </label>
-          </div>
-
-          <div className="my-4">
-            <label className=" block flex items-center gap-x-1 font-medium text-black dark:text-white">
-              Account domain restriction
-            </label>
-            <p className="mb-2.5 text-sm text-slate-600">
-              force all accounts created to have emails ending in
-              @yourdomain.com
-            </p>
-            <div className="relative">
-              <input
-                type="text"
-                name="account_creation_domain_scope"
-                placeholder="yourdomain.xyz"
-                defaultValue={
-                  getSetting('account_creation_domain_scope')?.value
-                }
-                className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
-              />
-            </div>
-          </div>
-
-          <div className="my-4">
-            <label className=" block flex items-center gap-x-1 font-medium text-black dark:text-white">
-              OpenAI API Key
-            </label>
-            <p className="mb-2.5 text-sm text-slate-600">
-              Required only if you will be updating or uploading new documents
-              or embeddings via {APP_NAME}.
-            </p>
-            <div className="relative">
-              <input
-                type="password"
-                name="open_ai_api_key"
-                placeholder="sk-xxxxxxxx"
-                defaultValue={getSetting('open_ai_api_key')?.value}
-                className="w-full rounded-lg border border-stroke bg-transparent py-4 pl-6 pr-10 outline-none focus:border-primary focus-visible:shadow-none dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary"
-              />
-            </div>
-          </div>
-
-          <div className="mb-5">
-            <button
-              type="submit"
-              className="w-full cursor-pointer rounded-lg border border-primary bg-primary p-4 text-white transition hover:bg-opacity-90"
-            >
-              Save Settings
-            </button>
-          </div>
-        </form>
-        <DebugCredentials settings={settings} />
-      </div>
-    </div>
+    </>
   );
 }
 
@@ -142,13 +152,12 @@ function DebugCredentials({ settings }: { settings: {} }) {
 
   return (
     <>
-      <div className="my-4 h-[1px] w-full bg-gray-400" />
-      <div className="flex w-full flex-col gap-y-2 rounded-lg border border-gray-500 bg-gray-100 p-4">
+      <div className="flex w-fit flex-col gap-y-2 rounded-lg border border-white/20 p-4">
         <div className="flex flex-col">
-          <p className="font-semibold text-gray-600">
+          <p className="text-sm font-medium text-white">
             Database Debug Credentials
           </p>
-          <p className="text-sm text-gray-600">
+          <p className="mt-4 text-sm text-white/60">
             Use these credentials to for direct application database access.
             <br />
             Changes done via the database admin UI will <b>not</b> impact
@@ -160,36 +169,33 @@ function DebugCredentials({ settings }: { settings: {} }) {
           </p>
         </div>
 
-        <div className="relative w-1/3">
+        <div className="relative">
           <input
             type="text"
-            className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-4 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            className="max-w-1/2 mt-2 inline-flex h-11 min-w-[350px] items-center justify-start gap-2.5 rounded-lg bg-white bg-opacity-10 p-2.5 text-sm font-medium leading-tight text-white placeholder:text-opacity-60"
             defaultValue={getSetting('debug_username')?.value}
             placeholder="db username"
             disabled={true}
           />
         </div>
 
-        <div className="relative w-1/3">
+        <div className="relative">
           <input
             type={showPwd ? 'text' : 'password'}
-            className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-4 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            className="max-w-1/2 mt-2 h-11 min-w-[350px] rounded-lg bg-white bg-opacity-10 pl-2.5 pr-10 text-sm font-medium leading-tight text-white placeholder:text-opacity-60"
             defaultValue={getSetting('debug_pwd')?.value}
             placeholder="db password"
             disabled={true}
           />
           <button
-            onClick={() => {
-              const newType = showPwd ? 'password' : 'text';
-              setShowPwd(newType === 'text');
-            }}
+            onClick={() => setShowPwd(!showPwd)}
             type="button"
-            className="absolute bottom-2.5 right-2.5 rounded-lg p-2 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring-0"
+            className="max-w-1/2 absolute inset-y-0 right-0 mr-14 mt-2 flex min-w-[350px] items-center justify-center px-2.5 text-white hover:text-white/40 focus:outline-none focus:ring-0"
           >
             {!showPwd ? (
-              <EyeOff className="h-4 w-4" />
+              <EyeSlash size={18} weight="bold" />
             ) : (
-              <Eye className="h-4 w-4" />
+              <Eye size={18} weight="bold" />
             )}
           </button>
         </div>
@@ -198,10 +204,10 @@ function DebugCredentials({ settings }: { settings: {} }) {
           <a
             href={paths.debug.vdbms()}
             target="_blank"
-            className="flex items-center gap-x-2 rounded-lg px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-200"
+            className="flex items-center gap-x-2 rounded-lg px-4 py-2 text-sm font-medium text-white/60 hover:bg-sky-400 hover:bg-opacity-90 hover:text-white"
           >
             Go to {APP_NAME} database manager
-            <ExternalLink className="h-4 w-4" />
+            <ArrowSquareOut size={18} weight="bold" />
           </a>
         </div>
       </div>