improve styles & adapt brand colors

2025-10-29 09:22:21 +00:00 · 2023-10-04 13:58:36 +07:00
parent 9c8f2994dc
commit 11a7d99744
14 changed files with 59 additions and 308 deletions
--- a/public/devices/cznic_turris-omnia.png
+++ b/public/devices/cznic_turris-omnia.png
--- a/public/devices/optimcloud_d50.png
+++ b/public/devices/optimcloud_d50.png
--- a/public/devices/xunison_d50.png
+++ b/public/devices/xunison_d50.png
--- a/src/assets/Logo_Dark_Mode.svg
+++ b/src/assets/Logo_Dark_Mode.svg
--- a/src/assets/Logo_Light_Mode.svg
+++ b/src/assets/Logo_Light_Mode.svg
--- a/src/components/Form/Fields/StringField/StringInput.tsx
+++ b/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>
          )}
--- a/src/layout/Sidebar/NavLinkButton.tsx
+++ b/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">
--- a/src/layout/Sidebar/NestedNavButton/SubNavigationButton.tsx
+++ b/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 hoverBg = useColorModeValue('blue.100', 'blue.800');
+  const activeBg = useColorModeValue('#67ACFF', 'blue.900');
+  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)}
--- a/src/layout/Sidebar/NestedNavButton/index.tsx
+++ b/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} />
          ))}
--- a/src/layout/Sidebar/index.tsx
+++ b/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"
-            border="0.5px solid"
+            borderRadius="10px"
+            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>
--- a/src/pages/LoginPage/LoginForm.tsx
+++ b/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}
--- a/src/pages/LoginPage/index.tsx
+++ b/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()}
--- a/src/theme/additions/card/Card.ts
+++ b/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)',
-      borderRadius: '15px',
-      border: '0.5px solid',
+      boxShadow: '1.5px 1.5px 3px 0px rgba(174, 174, 192, 0.40), -1px -1px 3px 0px #FFF',
+      borderRadius: '10px',
+      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',
-      border: '0.5px solid',
+      borderRadius: '5px',
+      border: '0.5px solid none',
    }),
  },
  defaultProps: {
--- a/src/theme/styles.ts
+++ b/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: {