Commit 5e39be8a authored by Bilal's avatar Bilal

Updated designs

parent 18c07b99
Pipeline #9502 failed with stage
......@@ -21,6 +21,7 @@
"bootstrap": "^5.3.2",
"cors": "^2.8.5",
"express": "^4.18.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
......
import logo from './ivrnet.png';
import TelepayForm from './component/Telepay';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { CustomNav } from './component/CustomNav';
import { Telepay } from './component/Telepay';
function App() {
return (
<div className='App'>
<div className='row m-0 p-0'>
<div className='d-large position-fixed col-md-2 h-100 logo-back'>
<div className='mb-2'>
<img src={logo} className='App-logo' alt='logo' />
</div>
<h3 className='text-white'>Ivrnet</h3>
</div>
<div className='d-small'>
<div className='mb-2'>
<img src={logo} className='App-logo' alt='logo' />
</div>
<h3 className='text-white'>Ivrnet</h3>
</div>
<div className='offset-md-3 col-md-8'>
<TelepayForm />
</div>
</div>
<CustomNav></CustomNav>
<main className={'main-section'}>
<Telepay />
</main>
</div>
);
}
......
import logo from '../logo.png';
import React, { useState, useEffect } from 'react';
import './style.css';
export const CustomNav = ({ className = '' }) => {
const [isScrolled, setIsScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
const scrollTop = window.scrollY;
const threshold = 120;
setIsScrolled(scrollTop >= threshold);
};
window.removeEventListener('scroll', handleScroll);
window.addEventListener('scroll', handleScroll, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<div className={`sidebar-b ${className} ${isScrolled ? 'scrolled' : ''}`}>
<div className='group'>
<div className='text-wrapper'>Clik2pay</div>
<img className='image' src={logo} alt={''}/>
</div>
<div className='content'>
<div className='tagline'>
<p className='div m-0'>
Telepay will meet your organization’s over-the-phone payment needs today and into the future.
</p>
</div>
</div>
</div>
);
};
import PropTypes from 'prop-types';
import React from 'react';
import './style.css';
export const PrimaryButton = ({ label = 'Label', submitted = false }) => {
return (
<button disabled={submitted} className='primary-button' type={'submit'}>
<div>{label}</div>
</button>
);
};
PrimaryButton.propTypes = {
label: PropTypes.string,
onClick: PropTypes.func,
submitted: PropTypes.bool,
};
This diff is collapsed.
import PropTypes from 'prop-types';
import React from 'react';
import './style.css';
export const Textarea = (
{
fieldType = '',
required = true,
helperText = true,
helperText1 = 'Helper text',
errorMessage = true,
label = 'Label',
errorMessage1 = 'Error message',
inputType = 'text',
onChange,
value = ''
},
) => {
return (
<div className='text-field'>
<div className='label-helper-text'>
<div className='label'>
{required && (
<div className='required'>
<div className='text-wrapper'>*</div>
</div>
)}
<label htmlFor={fieldType}>{label}</label>
</div>
{helperText && (
<div className='div-wrapper'>
<div className='helper-text'>{helperText1}</div>
</div>
)}
</div>
<div className='input-error-message'>
<textarea id={fieldType} value={value} className='rectangle' type={inputType} required
onChange={onChange} />
{errorMessage && (
<div className='div-wrapper'>
<div className='error-message'>{errorMessage1}</div>
</div>
)}
</div>
</div>
);
};
Textarea.propTypes = {
filled: PropTypes.bool,
required: PropTypes.bool,
helperText: PropTypes.bool,
helperText1: PropTypes.string,
errorMessage: PropTypes.bool,
label: PropTypes.string,
errorMessage1: PropTypes.string,
inputType: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.string
};
import PropTypes from 'prop-types';
import React from 'react';
import './style.css';
export const TextField = (
{
required = true,
helperText = true,
helperText1 = 'Helper text',
errorMessage = true,
label = 'Label',
errorMessage1 = 'Error message',
inputType = 'text',
onChange,
className = '',
fieldType = '',
value = '',
},
) => {
return (
<div className={'text-field ' + className}>
<div className='label-helper-text'>
<div className='label'>
{required && (
<div className='required'>
<div className='text-wrapper'>*</div>
</div>
)}
<label htmlFor={fieldType}>{label}</label>
</div>
{helperText && (
<div className='div-wrapper'>
<div className='helper-text'>{helperText1}</div>
</div>
)}
</div>
<div className='input-error-message'>
<input id={fieldType} value={value} className='text-input' type={inputType} required onChange={onChange} />
{errorMessage && (
<div className='div-wrapper'>
<div className='error-message'>{errorMessage1}</div>
</div>
)}
</div>
</div>
);
};
TextField.propTypes = {
filled: PropTypes.bool,
required: PropTypes.bool,
helperText: PropTypes.bool,
helperText1: PropTypes.string,
errorMessage: PropTypes.bool,
label: PropTypes.string,
errorMessage1: PropTypes.string,
inputType: PropTypes.string,
onChange: PropTypes.func,
fieldType: PropTypes.string,
value: PropTypes.string,
};
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment