Unverified Commit 03223fe4 authored by ggrund-tsi's avatar ggrund-tsi Committed by GitHub
Browse files

Fix/misc (#65)



* remove warnings; style modal; add dp+imprint

* change style according eu recommendation

* switch button color
Co-authored-by: default avatarGordon Grund <gordon.grund@outlook.de>
parent 9e456fa0
......@@ -27,6 +27,7 @@
$body-bg: #cfcfcf;
$font-family-base: Arial, sans-serif;
$primary: #004494;
$primary-dark: #002F67;
$info:#FFD617;
$dark: #404040;
$gray-100: #F2F5F9;
......@@ -109,12 +110,12 @@ hr {
#data-card{
height: 100%;
background-color: $light;
background-color: white;
border-radius: $data-card-border-radius;
border: none;
}
.data-modal{
background-color: $light;
background-color: white;
border-radius: $data-card-border-radius;
}
......@@ -125,8 +126,14 @@ hr {
border: 0;
}
#modal-header {
background-color: white;
border-top-left-radius: $data-card-border-radius;
border-top-right-radius: $data-card-border-radius;
border: 0;
}
#data-footer {
background-color: $light;
background-color: white;
border: 0;
text-align: right;
padding: 1rem;
......@@ -187,10 +194,36 @@ hr {
// box-shadow: 3px 3px px $info;
outline: 4px solid $info!important;
}
// .btn-primary:hover:not(:focus){
// border: 1px solid $info;
// outline: 3px solid $info;
// }
.btn-outline-primary:focus{
border: 1px solid $info;
background-color: white !important;
color:$primary-dark !important;
font-weight: bold;
box-shadow:none !important;
// box-shadow: 3px 3px px $info;
outline: 4px solid $info!important;
}
.btn-outline-primary:active{
border: 1px solid white !important;
background-color: white !important;
color:$primary-dark !important;
}
.btn-outline-primary{
outline: 1px solid $primary;
color:$primary;
font-weight: bold;
}
.btn-outline-primary:hover:not(:focus){
border: 1px solid $primary-dark;
outline: 1px solid $primary-dark;
box-shadow:none !important;
background-color: white;
color:$primary-dark;
font-weight: bold;
// box-shadow: 3px 3px px $info;
// outline: 4px solid $info!important;
}
.btn-info{
border: 1px solid $info;
color: black;
......@@ -224,7 +257,7 @@ hr {
-webkit-transform: rotate(-45deg);
}
.footer-font {
font-size: 11px;
font-size: 11px !important;
color: white;
}
......@@ -449,4 +482,9 @@ hr {
.bg-gray-1{
height:32px;
background-color: $gray-100;
}
.modal-content{
background-color: white;
border: 0px;
border-radius: $data-card-border-radius;
}
\ No newline at end of file
/*
* Corona-Warn-App / cwa-quick-test-frontend
*
* (C) 2021, T-Systems International GmbH
*
* Deutsche Telekom AG and all other contributors /
* copyright owners license this file to you under the Apache
* License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { Modal, Row, Col, Card, Button, Container } from 'react-bootstrap'
import '../i18n';
import { useTranslation } from 'react-i18next';
const DataprivacyPage = (props: any) => {
const { t } = useTranslation();
const [show, setShow] = React.useState(false);
React.useEffect(() => {
if (props)
setShow(props.show);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.show])
const handleClose = () => {
props.setShow(false)
}
return (
<>
<Modal
size='lg'
scrollable
show={show}
aria-labelledby="example-custom-modal-styling-title"
centered
onHide={handleClose}
>
<Modal.Header id='modal-header' closeButton className='pb-0' >
<Row>
<Col >
<Card.Title className='m-0 jcc-xs-jcfs-md' as={'h3'} >{t('translation:data-privacy')}</Card.Title>
</Col>
</Row>
</Modal.Header>
<hr className='mx-3 mb-0' />
<Modal.Body className='px-3'>
<Container className='px-1 px-sm-2 px-md-3'>
<h5 className='text-justify'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare rhoncus enim, sed tincidunt erat lobortis nec. Etiam ac erat vel sem mattis consequat. Pellentesque aliquam consequat tellus, eu sagittis neque laoreet vitae.
</h5>
</Container>
</Modal.Body>
<hr className='mx-3 mt-0' />
{/*
footer with ok button
*/}
<Modal.Footer id='data-footer'>
<Button
className=''
onClick={handleClose}
>
{t('translation:cancel')}
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default DataprivacyPage;
\ No newline at end of file
......@@ -50,7 +50,7 @@ const ErrorPage = (props: any) => {
keyboard={false}
centered
>
<Modal.Header id='data-header' className='pb-0' >
<Modal.Header id='modal-header' className='pb-0' >
<Row>
<Col >
<Card.Title className='m-0 jcc-xs-jcfs-md' as={'h2'} >{t('translation:error-message')}</Card.Title>
......
......@@ -19,16 +19,23 @@
* under the License.
*/
import { Col, Container, Image, Row } from 'react-bootstrap'
import { Button, Col, Container, Row } from 'react-bootstrap'
import '../i18n';
import { useTranslation } from 'react-i18next';
import DataProtectLogo from '../assets/images/data_protect.png'
const Footer = (props: any) => {
const { t } = useTranslation();
const handleDataPrivacyClick = () => {
props.setDataPrivacyShow(true)
}
const handleImprintClick = () => {
props.setImprintShow(true)
}
return (
// simple footer with imprint and data privacy --> links tbd
<Container className='d-flex px-0 bg-primary'>
......@@ -37,8 +44,19 @@ const Footer = (props: any) => {
<span className='footer-font' >{t('translation:title')}</span>
</Col>
<Col xs='6' className='pr-3 d-flex justify-content-end'>
<span className="footer-font pr-3">{t('translation:data-privacy')}</span>
<span className="footer-font pl-3">{t('translation:imprint')}</span>
<Button
variant='link'
className="footer-font pr-3"
onClick={handleDataPrivacyClick}>
{t('translation:data-privacy')}
</Button>
<Button
variant='link'
className="footer-font pl-3"
onClick={handleImprintClick}>
{t('translation:imprint')}
</Button>
</Col>
</Row>
</Container>
......
......@@ -20,17 +20,13 @@
*/
import React from 'react';
import { Row, Image, Container, Navbar, NavDropdown } from 'react-bootstrap'
import { Image, Container } from 'react-bootstrap'
import '../i18n';
import { useTranslation } from 'react-i18next';
import { useKeycloak } from '@react-keycloak/web';
import useNavigation from '../misc/navigation';
import EULogo from '../assets/images/EU_logo@3x.png'
import dgcaIwLogo from '../assets/images/dgca_issuance_web.png';
import useLocalStorage from '../misc/local-storage';
const Header = (props: any) => {
......
/*
* Corona-Warn-App / cwa-quick-test-frontend
*
* (C) 2021, T-Systems International GmbH
*
* Deutsche Telekom AG and all other contributors /
* copyright owners license this file to you under the Apache
* License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { Modal, Row, Col, Card, Button } from 'react-bootstrap'
import '../i18n';
import { useTranslation } from 'react-i18next';
const ImprintPage = (props: any) => {
const { t } = useTranslation();
const [show, setShow] = React.useState(false);
React.useEffect(() => {
if (props)
setShow(props.show);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.show])
const handleClose = () => {
props.setShow(false)
}
return (
<>
<Modal
// dialogClassName='modal-90w'
size='lg'
scrollable
show={show}
aria-labelledby="example-custom-modal-styling-title"
centered
onHide={handleClose}
>
<Modal.Header id='modal-header' closeButton className='pb-0' >
<Row>
<Col >
<Card.Title className='m-0 jcc-xs-jcfs-md' as={'h3'} >{t('translation:imprint')}</Card.Title>
</Col>
</Row>
</Modal.Header>
<hr className='mx-3 mb-0' />
<Modal.Body className='px-3'>
<h5 className='text-justify'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare rhoncus enim, sed tincidunt erat lobortis nec. Etiam ac erat vel sem mattis consequat. Pellentesque aliquam consequat tellus, eu sagittis neque laoreet vitae.
</h5>
</Modal.Body>
<hr className='mx-3 mt-0' />
{/*
footer with ok button
*/}
<Modal.Footer id='data-footer'>
<Button
className=''
onClick={handleClose}
>
{t('translation:cancel')}
</Button>
</Modal.Footer>
</Modal>
</>
)
}
export default ImprintPage;
// Verantwortlich:
// T-Systems International GmbH
// Katharyn White
// Senior Vice President und CMO
// Friedrich-Ebert-Allee-140
// D – 53113 Bonn
// Kontakt aufnehmen
......@@ -13,7 +13,7 @@ const CardFooter = (props: any) => {
<Row>
<Col xs='6' md='3' className='pl-0 pr-2'>
<Button
className=''
variant='outline-primary'
block
onClick={props.handleCancel}
>
......@@ -23,7 +23,6 @@ const CardFooter = (props: any) => {
<Col xs='6' md='3' className='pr-0 pl-2'>
<Button
className=''
variant='info'
block
type='submit'
>
......
......@@ -75,6 +75,7 @@ const RecordRecoveryCertData = (props: any) => {
setDateValidFrom(new Date(rec.df))
setDateValidTo(new Date(rec.du))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.eudgc]);
React.useEffect(() => {
......
......@@ -99,6 +99,7 @@ const RecordTestCertData = (props: any) => {
setIssuerCountryCode(test.co);
setCertificateIssuer(test.is);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.eudgc]);
React.useEffect(() => {
......@@ -107,15 +108,6 @@ const RecordTestCertData = (props: any) => {
}
}, [navigation]);
// const handleError = (error: any) => {
// let msg = '';
// if (error) {
// msg = error.message
// }
// props.setError({ error: error, message: msg, onCancel: navigation!.toLanding });
// }
const handleSampleDateTimeChange = (evt: Date | [Date, Date] | null) => {
const date = handleDateTimeChange(evt);
setSampleDateTime(date);
......
......@@ -81,6 +81,7 @@ const RecordVaccinationCertData = (props: any) => {
setIssuerCountryCode(vac.co);
setCertificateIssuer(vac.is);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.eudgc]);
......@@ -90,15 +91,6 @@ const RecordVaccinationCertData = (props: any) => {
}
}, [navigation]);
// const handleError = (error: any) => {
// let msg = '';
// if (error) {
// msg = error.message
// }
// props.setError({ error: error, message: msg, onCancel: navigation!.toLanding });
// }
const handleVacLastDate = (evt: Date | [Date, Date] | null) => {
const date = handleDateChange(evt);
setVacLastDate(date);
......
......@@ -152,6 +152,7 @@ const ShowCertificate = (props: any) => {
<Col xs='6' md='4' className='pl-0 pr-2'>
<Button
className=''
variant='outline-primary'
block
onClick={handleBack}
>
......@@ -161,7 +162,6 @@ const ShowCertificate = (props: any) => {
<Col xs='6' md='3' className='pr-0 pl-2'>
<Button
className=''
variant='info'
block
onClick={finishProcess}
>
......
......@@ -41,6 +41,8 @@ import { EUDGC } from './generated-files/dgc-combined-schema';
import RecordTestCertData from './components/record-test-cert-data.component';
import RecordRecoveryCertData from './components/record-recovery-cert-data.component';
import Header from './components/header.component';
import DataprivacyPage from './components/dataprivacy.component';
import ImprintPage from './components/imprint.component';
const Routing = (props: any) => {
......@@ -49,6 +51,8 @@ const Routing = (props: any) => {
const [eudgc, setEudgc] = React.useState<EUDGC>();
const [error, setError] = React.useState<IError>();
const [errorShow, setErrorShow] = React.useState(false);
const [dataPrivacyShow, setDataPrivacyShow] = React.useState(false);
const [imprintShow, setImprintShow] = React.useState(false);
document.title = t('translation:title');
......@@ -72,6 +76,8 @@ const Routing = (props: any) => {
<Route path={navigation.routes.root}>
<Header />
<ErrorPage error={error} show={errorShow} onCancel={error?.onCancel} onHide={() => setErrorShow(false)} />
<DataprivacyPage show={dataPrivacyShow} setShow={setDataPrivacyShow} />
<ImprintPage show={imprintShow} setShow={setImprintShow} />
</Route>
{/*
......@@ -121,7 +127,7 @@ const Routing = (props: any) => {
footer, every time shown. fit its children
*/}
<Route path={navigation.routes.root}>
<Footer />
<Footer setDataPrivacyShow={setDataPrivacyShow} setImprintShow={setImprintShow} />
</Route>
</>
......
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