refactor: restructure styles and components for improved theming and consistency

src/components/ChangePasswordDialog.js

@@ -127,16 +127,15 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
           <DialogFooter className="mt-6">
             <Button
               type="button"
-              variant="outline"
               onClick={() => onOpenChange(false)}
-              className="rounded-full px-6"
+              className="btn-outline mr-33"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 disabled:opacity-50"
+              className=" btn-primary"
             >
               {loading ? 'Changing...' : 'Change Password'}
             </Button>