From 6b12df44a0ff4f26c13643a48d3889c510a11cfd Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 14 Aug 2024 12:12:13 +0530
Subject: [PATCH] fix: settings ui

---
 frontend/src/components/Modals/Settings.vue | 116 ++++++++++----------
 frontend/src/components/SettingDetails.vue  |  16 +--
 2 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/Modals/Settings.vue b/frontend/src/components/Modals/Settings.vue
index e1d8a36d..9128cd1f 100644
--- a/frontend/src/components/Modals/Settings.vue
+++ b/frontend/src/components/Modals/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model="show" :options="{ size: '6xl' }">
+	<Dialog v-model="show" :options="{ size: '3xl' }">
 		<template #body>
 			<div class="flex h-[calc(100vh_-_8rem)]">
 				<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
@@ -97,7 +97,7 @@ const tabs = computed(() => {
 							type: 'checkbox',
 						},
 						{
-							label: 'Apply rounding on equivalent amount',
+							label: 'Apply rounding on equivalent',
 							name: 'apply_rounding',
 							type: 'checkbox',
 						},
@@ -105,62 +105,6 @@ const tabs = computed(() => {
 				},
 			],
 		},
-		{
-			label: 'Settings',
-			hideLabel: true,
-			items: [
-				{
-					label: 'Signup',
-					icon: 'LogIn',
-					fields: [
-						{
-							label: 'Show terms of use on signup page',
-							name: 'terms_of_use',
-							type: 'checkbox',
-						},
-						{
-							label: 'Terms of Use Page',
-							name: 'terms_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							label: 'Ask user category during signup',
-							name: 'user_category',
-							type: 'checkbox',
-						},
-						{
-							type: 'Column Break',
-						},
-						{
-							label: 'Show privacy policy on signup page',
-							name: 'privacy_policy',
-							type: 'checkbox',
-						},
-						{
-							label: 'Privacy Policy Page',
-							name: 'privacy_policy_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-						{
-							type: 'Column Break',
-						},
-						{
-							label: 'Show cookie policy on signup page',
-							name: 'cookie_policy',
-							type: 'checkbox',
-						},
-						{
-							label: 'Cookie Policy Page',
-							name: 'cookie_policy_page',
-							type: 'Link',
-							doctype: 'Web Page',
-						},
-					],
-				},
-			],
-		},
 		{
 			label: 'Settings',
 			hideLabel: true,
@@ -236,6 +180,62 @@ const tabs = computed(() => {
 				},
 			],
 		},
+		{
+			label: 'Settings',
+			hideLabel: true,
+			items: [
+				{
+					label: 'Signup',
+					icon: 'LogIn',
+					fields: [
+						{
+							label: 'Show terms of use on signup',
+							name: 'terms_of_use',
+							type: 'checkbox',
+						},
+						{
+							label: 'Terms of Use Page',
+							name: 'terms_page',
+							type: 'Link',
+							doctype: 'Web Page',
+						},
+						{
+							label: 'Show privacy policy on signup',
+							name: 'privacy_policy',
+							type: 'checkbox',
+						},
+						{
+							label: 'Privacy Policy Page',
+							name: 'privacy_policy_page',
+							type: 'Link',
+							doctype: 'Web Page',
+						},
+						
+						
+						{
+							type: 'Column Break',
+						},
+						
+						{
+							label: 'Show cookie policy on signup',
+							name: 'cookie_policy',
+							type: 'checkbox',
+						},
+						{
+							label: 'Cookie Policy Page',
+							name: 'cookie_policy_page',
+							type: 'Link',
+							doctype: 'Web Page',
+						},
+						{
+							label: 'Ask user category during signup',
+							name: 'user_category',
+							type: 'checkbox',
+						},
+					],
+				},
+			],
+		},
 		/* {
 		label: 'Settings',
 		hideLabel: true,
diff --git a/frontend/src/components/SettingDetails.vue b/frontend/src/components/SettingDetails.vue
index fe4abe9d..2fc83667 100644
--- a/frontend/src/components/SettingDetails.vue
+++ b/frontend/src/components/SettingDetails.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="flex flex-col justify-between h-full p-8">
-		<div class="flex space-x-10">
+		<div class="flex space-x-8">
 			<div v-for="(column, index) in columns" :key="index">
-				<div class="flex flex-col space-y-4">
-					<div v-for="field in column" :class="width">
+				<div class="flex flex-col space-y-4 w-60">
+					<div v-for="field in column">
 						<Link
 							v-if="field.type == 'Link'"
 							v-model="field.value"
@@ -31,11 +31,9 @@
 
 <script setup>
 import { FormControl, Button } from 'frappe-ui'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import Link from '@/components/Controls/Link.vue'
 
-let width = ref('w-full')
-
 const props = defineProps({
 	fields: {
 		type: Array,
@@ -71,12 +69,6 @@ const columns = computed(() => {
 		cols.push(currentColumn)
 	}
 
-	if (cols.length == 3) {
-		width.value = 'w-64'
-	} else {
-		width.value = 'w-96'
-	}
-
 	return cols
 })