fix: update note on features

Author: lakhansamani

dashboard/src/components/EnvComponents/Features.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Stack, Text } from '@chakra-ui/react';
+import { Divider, Flex, Stack, Text } from '@chakra-ui/react';
 import InputField from '../InputField';
 import { SwitchInputType } from '../../constants';
 
@@ -10,7 +10,7 @@ const Features = ({ variables, setVariables }: any) => {
 			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
 				Disable Features
 			</Text>
-			<Stack spacing={6} padding="2% 0%">
+			<Stack spacing={6}>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Disable Login Page:</Text>
@@ -83,9 +83,15 @@ const Features = ({ variables, setVariables }: any) => {
 						/>
 					</Flex>
 				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Multi Factor Authentication:</Text>
+				<Flex alignItems="center">
+					<Flex w="100%" alignItems="baseline" flexDir="column">
+						<Text fontSize="sm">
+							Disable Multi Factor Authentication (MFA):
+						</Text>
+						<Text fontSize="x-small">
+							Note: Enabling this will ignore Enforcing MFA shown below and will
+							also ignore the user MFA setting.
+						</Text>
 					</Flex>
 					<Flex justifyContent="start" mb={3}>
 						<InputField
@@ -96,13 +102,20 @@ const Features = ({ variables, setVariables }: any) => {
 					</Flex>
 				</Flex>
 			</Stack>
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+			<Divider paddingY={5} />
+			<Text fontSize="md" paddingTop={5} fontWeight="bold" mb={5}>
 				Enable Features
 			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Enforce Multi Factor Authentication:</Text>
+			<Stack spacing={6}>
+				<Flex alignItems="center">
+					<Flex w="100%" alignItems="baseline" flexDir="column">
+						<Text fontSize="sm">
+							Enforce Multi Factor Authentication (MFA):
+						</Text>
+						<Text fontSize="x-small">
+							Note: If you disable enforcing after it was enabled, it will still
+							keep MFA enabled for older users.
+						</Text>
 					</Flex>
 					<Flex justifyContent="start" mb={3}>
 						<InputField

dashboard/src/graphql/queries/index.ts

@@ -20,7 +20,7 @@ export const EnvVariablesQuery = `
     _env{
       CLIENT_ID
       CLIENT_SECRET
-	    GOOGLE_CLIENT_ID
+      GOOGLE_CLIENT_ID
       GOOGLE_CLIENT_SECRET
       GITHUB_CLIENT_ID
       GITHUB_CLIENT_SECRET