fix: dashboard

Author: lakhansamani

dashboard/src/App.tsx

@@ -23,7 +23,6 @@ const theme = extendTheme({
 	styles: {
 		global: {
 			'html, body, #root': {
-				fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
 				height: '100%',
 				outline: 'none',
 			},

dashboard/src/components/EnvComponents/OAuthConfig.tsx

@@ -23,7 +23,7 @@ const OAuthConfig = ({
 		<div>
 			<Box>
 				<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={6}>
-					Your instance information
+					Authorizer Config
 				</Text>
 				<Stack spacing={6} padding="2% 0%">
 					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>

dashboard/src/components/InputField.tsx

@@ -13,6 +13,7 @@ import {
 	Textarea,
 	Switch,
 	Code,
+	Text,
 } from '@chakra-ui/react';
 import {
 	FaRegClone,
@@ -179,14 +180,14 @@ const InputField = ({
 	if (Object.values(ArrayInputType).includes(inputType)) {
 		return (
 			<Flex
-			  border="1px solid #e2e8f0"
-              w="100%"
-        	  borderRadius={5}
-              paddingTop="0.5%"
-              overflowX={variables[inputType].length > 3 ? "scroll" : "hidden"}
-              overflowY="hidden"
-              justifyContent="start"
-              alignItems="center"
+				border="1px solid #e2e8f0"
+				w="100%"
+				borderRadius={5}
+				paddingTop="0.5%"
+				overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
+				overflowY="hidden"
+				justifyContent="start"
+				alignItems="center"
 			>
 				{variables[inputType].map((role: string, index: number) => (
 					<Box key={index} margin="0.5%" role="group">
@@ -301,7 +302,9 @@ const InputField = ({
 	if (Object.values(SwitchInputType).includes(inputType)) {
 		return (
 			<Flex w="25%" justifyContent="space-between">
-				<Code h="75%">Off</Code>
+				<Text h="75%" fontWeight="bold" marginRight="2">
+					Off
+				</Text>
 				<Switch
 					size="md"
 					isChecked={variables[inputType]}
@@ -312,7 +315,9 @@ const InputField = ({
 						});
 					}}
 				/>
-				<Code h="75%">On</Code>
+				<Text h="75%" fontWeight="bold" marginLeft="2">
+					On
+				</Text>
 			</Flex>
 		);
 	}

dashboard/src/components/Menu.tsx

@@ -119,15 +119,15 @@ interface SidebarProps extends BoxProps {
 
 export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 	const { pathname } = useLocation();
-	const [{ fetching, data }] = useQuery({ query: MetaQuery });
+	const [{ data }] = useQuery({ query: MetaQuery });
 	const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
 	return (
 		<Box
 			transition="3s ease"
 			bg={useColorModeValue('white', 'gray.900')}
 			borderRight="1px"
 			borderRightColor={useColorModeValue('gray.200', 'gray.700')}
-			w={{ base: 'full', md: 60 }}
+			w={{ base: 'full', md: '64' }}
 			pos="fixed"
 			h="full"
 			{...rest}
@@ -137,7 +137,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 				alignItems="center"
 				mx="18"
 				justifyContent="space-between"
-				flexDirection="column"
+				flexDirection="row"
 			>
 				<NavLink to="/">
 					<Flex alignItems="center" mt="6">
@@ -298,7 +298,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
 
 	return (
 		<Flex
-			ml={{ base: 0, md: 60 }}
+			ml={{ base: 0, md: 64 }}
 			px={{ base: 4, md: 4 }}
 			height="20"
 			position="fixed"

dashboard/src/layouts/AuthLayout.tsx

@@ -20,6 +20,7 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 			alignItems="center"
 			justifyContent="center"
 			direction={['column', 'column']}
+			padding={['2%', '2%', '2%', '2%']}
 		>
 			<Flex alignItems="center" maxW="100%">
 				<Image

dashboard/src/layouts/DashboardLayout.tsx

@@ -31,7 +31,7 @@ export function DashboardLayout({ children }: { children: ReactNode }) {
 			</Drawer>
 			{/* mobilenav */}
 			<MobileNav onOpen={onOpen} />
-			<Box ml={{ base: 0, md: 60 }} p="4" pt="24">
+			<Box ml={{ base: 0, md: '64' }} p="4" pt="24">
 				{children}
 			</Box>
 		</Box>

dashboard/src/pages/Auth.tsx

@@ -101,10 +101,10 @@ export default function Auth() {
 					</FormControl>
 					<Button
 						isLoading={signUpResult.fetching || loginResult.fetching}
+						loadingText="Submitting"
 						colorScheme="blue"
 						size="lg"
 						w="100%"
-						d="block"
 						type="submit"
 					>
 						{isLogin ? 'Login' : 'Sign up'}