diff --git a/public/devices/cznic_turris-omnia.png b/public/devices/cznic_turris-omnia.png new file mode 100644 index 0000000..fca487f Binary files /dev/null and b/public/devices/cznic_turris-omnia.png differ diff --git a/public/devices/optimcloud_d50.png b/public/devices/optimcloud_d50.png new file mode 100644 index 0000000..e293af2 Binary files /dev/null and b/public/devices/optimcloud_d50.png differ diff --git a/public/devices/xunison_d50.png b/public/devices/xunison_d50.png new file mode 100644 index 0000000..e293af2 Binary files /dev/null and b/public/devices/xunison_d50.png differ diff --git a/src/assets/Logo_Dark_Mode.svg b/src/assets/Logo_Dark_Mode.svg index c35fa5c..b595dd1 100644 --- a/src/assets/Logo_Dark_Mode.svg +++ b/src/assets/Logo_Dark_Mode.svg @@ -1,140 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/assets/Logo_Light_Mode.svg b/src/assets/Logo_Light_Mode.svg index c27f346..b595dd1 100644 --- a/src/assets/Logo_Light_Mode.svg +++ b/src/assets/Logo_Light_Mode.svg @@ -1,140 +1,9 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/components/Form/Fields/StringField/StringInput.tsx b/src/components/Form/Fields/StringField/StringInput.tsx index 4e60b83..6581156 100644 --- 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, LayoutProps { isError: boolean; @@ -77,12 +78,13 @@ const _StringInput: React.FC = ({ 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 && ( @@ -91,8 +93,10 @@ const _StringInput: React.FC = ({ size="sm" onClick={setShow.toggle} _disabled={{ opacity: 0.8, cursor: 'not-allowed' }} + border="none" + bg="transparent" > - {show ? t('common.hide') : t('common.show')} + {show ? : } )} diff --git a/src/layout/Sidebar/NavLinkButton.tsx b/src/layout/Sidebar/NavLinkButton.tsx index 813565f..ca8c81d 100644 --- a/src/layout/Sidebar/NavLinkButton.tsx +++ b/src/layout/Sidebar/NavLinkButton.tsx @@ -42,7 +42,7 @@ export const NavLinkButton = ({ isActive, route, toggleSidebar }: Props) => { }} > - + {route.icon(false)} @@ -66,7 +66,7 @@ export const NavLinkButton = ({ isActive, route, toggleSidebar }: Props) => { }} > - + {route.icon(false)} diff --git a/src/layout/Sidebar/NestedNavButton/SubNavigationButton.tsx b/src/layout/Sidebar/NestedNavButton/SubNavigationButton.tsx index 78dc72f..952079d 100644 --- 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)} diff --git a/src/layout/Sidebar/NestedNavButton/index.tsx b/src/layout/Sidebar/NestedNavButton/index.tsx index f003e02..31b8622 100644 --- 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 ( @@ -37,11 +37,11 @@ const NestedNavButton = ({ isActive, route }: Props) => { _hover={{ bg: hoverBg, }} - borderRadius="15px" + borderRadius="0px" w="100%" > - + {route.icon(false)} @@ -51,7 +51,7 @@ const NestedNavButton = ({ isActive, route }: Props) => { - + {route.children.map((subRoute) => ( ))} diff --git a/src/layout/Sidebar/index.tsx b/src/layout/Sidebar/index.tsx index f9e125f..4ea39ca 100644 --- 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
- +
{getForm()} diff --git a/src/theme/additions/card/Card.ts b/src/theme/additions/card/Card.ts index 5016b9e..5332baf 100644 --- 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: { diff --git a/src/theme/styles.ts b/src/theme/styles.ts index ba08e0f..9c335d2 100644 --- 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: {