Fix/misc (#65)

* remove warnings; style modal; add dp+imprint

* change style according eu recommendation

* switch button color
Co-authored-by: Gordon Grund <gordon.grund@outlook.de>

src/assets/SCSS/custom.scss

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

src/components/dataprivacy.component.tsx

+/*
+ * 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

src/components/error-page.component.tsx

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

src/components/footer.component.tsx

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

src/components/header.component.tsx

@@ -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) => {
 

src/components/imprint.component.tsx

+/*
+ * 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 
+

src/components/modules/card-footer.component.tsx

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

src/components/record-recovery-cert-data.component.tsx

@@ -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(() => {

src/components/record-test-cert-data.component.tsx

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

src/components/record-vaccination-cert-data.component.tsx

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

src/components/show-certificate.component.tsx

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

src/routing.component.tsx

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