improve styles & adapt brand colors

src/components/Form/Fields/StringField/StringInput.tsx

@@ -14,6 +14,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import { ConfigurationFieldExplanation } from '../../ConfigurationFieldExplanation';
 import { FieldInputProps } from 'models/Form';
+import {Eye, EyeSlash } from 'iconsax-react';
 
 export interface StringInputProps extends FieldInputProps<string | undefined | string[]>, LayoutProps {
   isError: boolean;
@@ -77,12 +78,13 @@ const _StringInput: React.FC<StringInputProps> = ({
             value={value}
             onChange={onChange}
             onBlur={onBlur}
-            borderRadius="15px"
+            borderRadius="5px"
             fontSize="sm"
             type={hideButton && !show ? 'password' : 'text'}
             autoComplete="off"
             border="2px solid"
             _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
+            boxShadow="-1px -1px 1px 0px #F0F0F3 inset, 1px 1px 1px 0px rgba(174, 174, 192, 0.25) inset"
           />
           {hideButton && (
             <InputRightElement width="4.5rem">
@@ -91,8 +93,10 @@ const _StringInput: React.FC<StringInputProps> = ({
                 size="sm"
                 onClick={setShow.toggle}
                 _disabled={{ opacity: 0.8, cursor: 'not-allowed' }}
+                border="none"
+                bg="transparent"
               >
-                {show ? t('common.hide') : t('common.show')}
+                {show ? <EyeSlash/> : <Eye/>}
               </Button>
             </InputRightElement>
           )}

src/layout/Sidebar/NavLinkButton.tsx

@@ -42,7 +42,7 @@ export const NavLinkButton = ({ isActive, route, toggleSidebar }: Props) => {
             }}
           >
             <Flex alignItems="center" w="100%">
-              <IconBox color="blue.300" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
+              <IconBox color="#489BFF" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
                 {route.icon(false)}
               </IconBox>
               <Text color={activeTextColor} fontSize="md" fontWeight="bold">
@@ -66,7 +66,7 @@ export const NavLinkButton = ({ isActive, route, toggleSidebar }: Props) => {
             }}
           >
             <Flex alignItems="center" w="100%">
-              <IconBox color="blue.300" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
+              <IconBox color="#489BFF" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
                 {route.icon(false)}
               </IconBox>
               <Text color={inactiveTextColor} fontSize="md" fontWeight="bold">

src/layout/Sidebar/NestedNavButton/SubNavigationButton.tsx

@@ -11,10 +11,10 @@ type Props = {
 
 const SubNavigationButton = ({ isActive, route }: Props) => {
   const { t } = useTranslation();
-  const activeTextColor = useColorModeValue('gray.700', 'white');
+  const activeTextColor = useColorModeValue('white', 'white');
   const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
-  const activeBg = useColorModeValue('blue.50', 'blue.900');
+  const activeBg = useColorModeValue('#67ACFF', 'blue.900');
-  const hoverBg = useColorModeValue('blue.100', 'blue.800');
+  const hoverBg = useColorModeValue('#4499FF', 'blue.800');
 
   const isCurrentlyActive = isActive(route.path);
 
@@ -27,7 +27,11 @@ const SubNavigationButton = ({ isActive, route }: Props) => {
         bg={isCurrentlyActive ? activeBg : 'transparent'}
         _hover={{
           bg: hoverBg,
+          boxShadow: "1.5px 1.5px 3px 0px rgba(174, 174, 192, 0.40), -1px -1px 3px 0px #FFF"
         }}
+        borderStartRadius="0px"
+        borderRadius="10px"
+        mb="1px"
         border="none"
       >
         {t(route.name)}

src/layout/Sidebar/NestedNavButton/index.tsx

@@ -24,7 +24,7 @@ type Props = {
 const NestedNavButton = ({ isActive, route }: Props) => {
   const { t } = useTranslation();
   const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
-  const hoverBg = useColorModeValue('blue.100', 'blue.800');
+  const hoverBg = useColorModeValue('#C6E0FF', 'blue.800');
 
   return (
     <AccordionItem w="152px" borderTop="0px" borderBottom="0px">
@@ -37,11 +37,11 @@ const NestedNavButton = ({ isActive, route }: Props) => {
         _hover={{
           bg: hoverBg,
         }}
-        borderRadius="15px"
+        borderRadius="0px"
         w="100%"
       >
         <Flex alignItems="center" w="100%">
-          <IconBox color="blue.300" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
+          <IconBox color="#489BFF" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
             {route.icon(false)}
           </IconBox>
           <Text size="md" fontWeight="bold" color={inactiveTextColor}>
@@ -51,7 +51,7 @@ const NestedNavButton = ({ isActive, route }: Props) => {
         <AccordionIcon />
       </AccordionButton>
       <AccordionPanel pl="18px" paddingEnd={0} pr="-18px">
-        <Box pl={1} pr={-1} borderLeft="1px solid #63b3ed">
+        <Box pl={1} pr={-1} borderLeft="1px solid #489BFF">
           {route.children.map((subRoute) => (
             <SubNavigationButton key={subRoute.path} route={subRoute} isActive={isActive} />
           ))}

src/layout/Sidebar/index.tsx

@@ -122,18 +122,19 @@ export const Sidebar = ({ routes, isOpen, toggle, logo, version, topNav, childre
         <Box hidden={isCompact} position="fixed">
           <Box
             shadow={navbarShadow}
-            bg={useColorModeValue('white', 'gray.700')}
+            bg={useColorModeValue('#FEFEFE', 'gray.700')}
             transition={variantChange}
             w="200px"
             maxW="200px"
             h="calc(100vh - 32px)"
             my="16px"
             ml="16px"
-            borderRadius="15px"
+            borderRadius="10px"
-            border="0.5px solid"
+            border="0.5px solid none"
+            boxShadow="4px 4px 6px 0px rgba(174, 174, 192, 0.40), -1px -1px 3px 0px #FFF;"
           >
             {brand}
-            <Flex direction="column" h="calc(100vh - 160px)" alignItems="center" overflowY="auto">
+            <Flex direction="column" h="calc(100vh - 185px)" alignItems="center" overflowY="auto">
               {sidebarContent}
             </Flex>
           </Box>

src/pages/LoginPage/LoginForm.tsx

@@ -40,7 +40,7 @@ const _LoginForm: React.FC<_LoginFormProps> = ({ setActiveForm }) => {
   const { t } = useTranslation();
   const { setToken } = useAuth();
   const { accessPolicyLink, passwordPolicyLink } = useApiRequirements();
-  const titleColor = useColorModeValue('blue.300', 'white');
+  const titleColor = useColorModeValue('#489BFF', 'white');
   const textColor = useColorModeValue('gray.400', 'white');
   const { mutateAsync: login, error } = useLogin();
   const forgotPassword = () => setActiveForm({ form: 'forgot-password' });
@@ -129,8 +129,11 @@ const _LoginForm: React.FC<_LoginFormProps> = ({ setActiveForm }) => {
                 color={textColor}
                 onClick={forgotPassword}
                 fontWeight="medium"
-                variant="ghost"
+                variant="none"
                 pl={{ base: '0px' }}
+                _hover={{
+                bg:"none"
+                }}
               >
                 {t('login.forgot_password')}
               </Button>
@@ -143,17 +146,18 @@ const _LoginForm: React.FC<_LoginFormProps> = ({ setActiveForm }) => {
             <Button
               fontSize="15px"
               type="submit"
-              bg="blue.300"
+              bg="#489BFF"
               w="100%"
               h="45"
               mb="20px"
               color="white"
               mt="20px"
+              borderRadius="5px"
               _hover={{
-                bg: 'blue.500',
+                bg: '#489BFF',
               }}
               _active={{
-                bg: 'blue.300',
+                bg:  "#489BFF",
               }}
               isLoading={isSubmitting}
               isDisabled={!isValid}

src/pages/LoginPage/index.tsx

@@ -14,7 +14,7 @@ interface LoginPageProps {
 const LoginPage = ({ lightLogo, darkLogo }: LoginPageProps) => {
   const [activeForm, setActiveForm] = useState<LoginFormProps>({ form: 'login' });
   const { colorMode } = useColorMode();
-  const loginBg = useColorModeValue('gray.100', 'gray.700');
+  const loginBg = useColorModeValue('#F0F0F3', 'gray.700');
 
   const getForm = React.useCallback(() => {
     if (activeForm.form === 'login') return <LoginForm setActiveForm={setActiveForm} />;
@@ -29,16 +29,16 @@ const LoginPage = ({ lightLogo, darkLogo }: LoginPageProps) => {
     <Box px="5%" h="100vh" display="flex" alignItems="center">
       <Center display="block" w="100%">
         <Center h="100%" w="100%" mb={6} alignItems="center">
-          <Image maxH="300px" w="100%" maxW="600px" src={colorMode === 'light' ? lightLogo : darkLogo} />
+          <Image maxH="185px" w="100%" maxW="600px" src={colorMode === 'light' ? lightLogo : darkLogo} />
         </Center>
         <Center>
           <Flex
-            borderRadius="40px"
+            borderRadius="15px"
             w="100%"
             maxW="600px"
             bgColor={loginBg}
             p="48px"
-            boxShadow={colorMode === 'light' ? 'xl' : 'dark-lg'}
+            boxShadow="1.5px 1.5px 3px 0px rgba(174, 174, 192, 0.40), -1px -1px 3px 0px #FFF"
             direction="column"
           >
             {getForm()}

src/theme/additions/card/Card.ts

@@ -12,16 +12,16 @@ const Card = {
     panel: (props: { colorMode: string }) => ({
       bg: props.colorMode === 'dark' ? 'gray.700' : 'white',
       width: '100%',
-      boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.05)',
+      boxShadow: '1.5px 1.5px 3px 0px rgba(174, 174, 192, 0.40), -1px -1px 3px 0px #FFF',
-      borderRadius: '15px',
+      borderRadius: '10px',
-      border: '0.5px solid',
+      border: '0.5px solid none',
     }),
     widget: (props: { colorMode: string }) => ({
       bg: props.colorMode === 'dark' ? 'gray.800' : 'gray.100',
       width: '100%',
       boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)',
-      borderRadius: '15px',
+      borderRadius: '5px',
-      border: '0.5px solid',
+      border: '0.5px solid none',
     }),
   },
   defaultProps: {

src/theme/styles.ts

@@ -45,7 +45,7 @@ export default {
   styles: {
     global: (props: { colorMode: string }) => ({
       body: {
-        bg: mode('gray.50', 'gray.800')(props),
+        bg: mode('#F0F0F3', 'gray.800')(props),
         fontFamily: 'Inter, sans-serif',
       },
       html: {