diff --git a/public/assets/icons/logo-black.svg b/public/assets/icons/logo-black.svg new file mode 100644 index 0000000..1299dee --- /dev/null +++ b/public/assets/icons/logo-black.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx b/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx index 3355e11..095cef8 100644 --- a/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx +++ b/src/driven/utils/components/inputs/simple-input/SimpleInput.tsx @@ -33,7 +33,7 @@ export default function SimpleInput(props: ISimpleInput) { value={state} onChange={handleInputChange} name={name} - className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium' + className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium w-full' id={title} /> diff --git a/src/driven/utils/configs/appConfig.ts b/src/driven/utils/configs/appConfig.ts index bb2a9bd..ce23fc4 100644 --- a/src/driven/utils/configs/appConfig.ts +++ b/src/driven/utils/configs/appConfig.ts @@ -7,6 +7,7 @@ export const appConfig = {}; export const routes = { usersList: '/', createUser: '/create-user', + authentication: '/auth', }; export const routesData = { diff --git a/src/driven/utils/constants/assertUrls.ts b/src/driven/utils/constants/assertUrls.ts index 6917d6c..66c35ac 100644 --- a/src/driven/utils/constants/assertUrls.ts +++ b/src/driven/utils/constants/assertUrls.ts @@ -2,6 +2,7 @@ const baseAssetsUrl = 'assets/'; const baseIconsUrl = `${baseAssetsUrl}icons/`; export const icons = { logo: `${baseIconsUrl}logo.svg`, + logoBlack: `${baseIconsUrl}logo-black.svg`, users: `${baseIconsUrl}users.svg`, createUser: `${baseIconsUrl}createuser.svg`, }; diff --git a/src/driven/utils/constants/staticMessages.ts b/src/driven/utils/constants/staticMessages.ts index c4c5b90..6064a1f 100644 --- a/src/driven/utils/constants/staticMessages.ts +++ b/src/driven/utils/constants/staticMessages.ts @@ -15,6 +15,8 @@ export const staticMessages = { qrCode: 'qrCode', createUser: 'Create user', phonenumber: 'Phone Number', + enterPanel: 'Enter to Panel', + enterPhoneNumber: 'Enter your phone number', }, service: { errors: { diff --git a/src/driving/application/core/create-user/view/CreateUserView.tsx b/src/driving/application/core/create-user/view/CreateUserView.tsx index 5bd6243..cb0c09a 100644 --- a/src/driving/application/core/create-user/view/CreateUserView.tsx +++ b/src/driving/application/core/create-user/view/CreateUserView.tsx @@ -21,7 +21,7 @@ export default function CreateUserView(props: ICreateUserViewProps) { state: inputStates[inputName], }} key={inputName} - className='mb-4 w-[48%]' + className='mb-4 w-[48%] px-2' /> ); }); diff --git a/src/driving/application/generic/authentication/index.tsx b/src/driving/application/generic/authentication/index.tsx new file mode 100644 index 0000000..51151e3 --- /dev/null +++ b/src/driving/application/generic/authentication/index.tsx @@ -0,0 +1,3 @@ +import Authentication from './infra/Authentication'; + +export default Authentication; diff --git a/src/driving/application/generic/authentication/infra/Authentication.tsx b/src/driving/application/generic/authentication/infra/Authentication.tsx new file mode 100644 index 0000000..2414a2f --- /dev/null +++ b/src/driving/application/generic/authentication/infra/Authentication.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import AuthenticationView from '../view/AuthenticationView'; + +export default function Authentication() { + return ; +} diff --git a/src/driving/application/generic/authentication/view/AuthenticationView.tsx b/src/driving/application/generic/authentication/view/AuthenticationView.tsx new file mode 100644 index 0000000..75be455 --- /dev/null +++ b/src/driving/application/generic/authentication/view/AuthenticationView.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton'; +import SimpleInput from '~/driven/utils/components/inputs/simple-input/SimpleInput'; +import { icons } from '~/driven/utils/constants/assertUrls'; +import { staticMessages } from '~/driven/utils/constants/staticMessages'; + +export default function AuthenticationView() { + return ( +
+
+
+ page icon +
+
{staticMessages.global.enterPanel}
+
{staticMessages.global.enterPhoneNumber}
+ null} + className='mb-9 w-full self-start' + /> + null} + title={staticMessages.global.submit} + className='bg-gradient-button w-full h-11' + /> + +
+
+ ); +} diff --git a/src/driving/main/Router/Router.tsx b/src/driving/main/Router/Router.tsx index a1dc8a4..edfd23a 100644 --- a/src/driving/main/Router/Router.tsx +++ b/src/driving/main/Router/Router.tsx @@ -3,6 +3,7 @@ import Home from '~/driving/main/pages'; import { routes } from '~/driven/utils/configs/appConfig'; import CreateUser from '../pages/CreateUser'; import MainPageLayout from '../pages/layouts/MainPageLayout'; +import AuthenticationPage from '../pages/Authentication'; export default function Router() { const location = useLocation(); @@ -13,6 +14,7 @@ export default function Router() { } /> } /> + } /> } /> ); diff --git a/src/driving/main/pages/Authentication.tsx b/src/driving/main/pages/Authentication.tsx new file mode 100644 index 0000000..c4dcb47 --- /dev/null +++ b/src/driving/main/pages/Authentication.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import Authentication from '~/driving/application/generic/authentication'; + +export default function AuthenticationPage() { + return ; +} diff --git a/src/driving/main/style/App.css b/src/driving/main/style/App.css index 3e72895..db02ae3 100644 --- a/src/driving/main/style/App.css +++ b/src/driving/main/style/App.css @@ -20,6 +20,7 @@ html,body { --color-primary-300: #0461B8; --color-primary-200: #80C8EF; --color-separated-border: #D4D4D4; + --color-gradient-button: linear-gradient(90deg, #00A6FE -10.23%, #D700FE 114.77%); } th, diff --git a/tailwind.config.cjs b/tailwind.config.cjs index a979fbd..4469893 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -27,6 +27,7 @@ module.exports = { }, gradient: { primary: 'var(--color-gradient-primary-dark)', + button: 'var(--color-gradient-button)' }, separated: { border: 'var(--color-separated-border)'