scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-10-31 02:07:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve styles & adapt brand colors

Browse Source
This commit is contained in:
praveenkumarsirisolla
2023-10-04 13:58:36 +07:00
parent 9c8f2994dc
commit 11a7d99744
14 changed files with 59 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/devices/cznic_turris-omnia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
public/devices/optimcloud_d50.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/devices/xunison_d50.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

147
src/assets/Logo_Dark_Mode.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 586 KiB

147
src/assets/Logo_Light_Mode.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 586 KiB

8
src/components/Form/Fields/StringField/StringInput.tsx
View File

@@ -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>
)}

4
src/layout/Sidebar/NavLinkButton.tsx
View File

@@ -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">

10
src/layout/Sidebar/NestedNavButton/SubNavigationButton.tsx
View File

@@ -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)}

8
src/layout/Sidebar/NestedNavButton/index.tsx
View File

@@ -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} />
))}

9
src/layout/Sidebar/index.tsx
View File

@@ -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>

14
src/pages/LoginPage/LoginForm.tsx
View File

@@ -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}

8
src/pages/LoginPage/index.tsx
View File

@@ -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()}

10
src/theme/additions/card/Card.ts
View File

@@ -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: {

2
src/theme/styles.ts
View File

@@ -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: {