Feature/ubigufy

client/src/components/A11yStatement.tsx

@@ -2,40 +2,62 @@ import { React } from 'react';
 
 export function A11yStatement() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center', width: '60%', margin: '36px' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignContent: 'center',
+        justifyContent: 'center',
+        width: '60%',
+        margin: '36px',
+      }}
+    >
       <h1> Saavutettavuusseloste </h1>
-      <p>Tämä saavutettavuusseloste koskee Ubigu Oy:n tarjoamaa Kartalla -sovellusta.</p>
+      <p>
+        Tämä saavutettavuusseloste koskee Ubigu Oy:n tarjoamaa Kartalla
+        -sovellusta.
+      </p>
       <h2>Palvelun saavutettavuuden nykytila</h2>
-      <p>Palvelu täyttää kansainvälisen WCAG 2.1 saavutettavuussäädöksen tason AA-vaatimukset osittain. Palvelussa on pieniä puuttaita saavutettavuuteen liittyne, jotka on kuvattu alla. </p>
+      <p>
+        Palvelu täyttää kansainvälisen WCAG 2.1 saavutettavuussäädöksen tason
+        AA-vaatimukset osittain. Palvelussa on pieniä puuttaita
+        saavutettavuuteen liittyne, jotka on kuvattu alla.{' '}
+      </p>
       <h3> Puutteet saavutettavuudessa</h3>
       <ul>
         <li>
           <p>
-            Responsiivisuusongelmia:
-            Palvelun käyttöliittymät ja toiminnallisuudet eivät toimi eri päätelaitteilla ja tuetlilla selaimilla kriteeristön asettamissa rajoissa. Erityisesti karttapohjaisissa kysymyksissä on runsaasti responsiivisuuteen liittyviä ongelmia. (WCAG 1.4.10 Responsiivisuus)
+            Responsiivisuusongelmia: Palvelun käyttöliittymät ja
+            toiminnallisuudet eivät toimi eri päätelaitteilla ja tuetlilla
+            selaimilla kriteeristön asettamissa rajoissa. Erityisesti
+            karttapohjaisissa kysymyksissä on runsaasti responsiivisuuteen
+            liittyviä ongelmia. (WCAG 1.4.10 Responsiivisuus)
           </p>
         </li>
         <li>
           <p>
-            Heikkoja kontrasteja:
-            Palvelussa saattaa olla heikkoja kontrasteja kuvissa ja kartoissa, joita hyödynnetään kyselyissä. (WCAG 1.4.3 Kontrasti, minimi, 1.4.11 Ei-tekstimuotoisen sisällön kontrasti)
+            Heikkoja kontrasteja: Palvelussa saattaa olla heikkoja kontrasteja
+            kuvissa ja kartoissa, joita hyödynnetään kyselyissä. (WCAG 1.4.3
+            Kontrasti, minimi, 1.4.11 Ei-tekstimuotoisen sisällön kontrasti)
           </p>
         </li>
         <li>
           <p>
-            Liian pieni kosketusalue:
-            Mobiiliversiossa interaktiivisten elementtien kosketusalueet ovat liian pienet ja vaikeuttavat palvelun käyttämistä. (WCAG 3.2.1 Kohdistaminen)
+            Liian pieni kosketusalue: Mobiiliversiossa interaktiivisten
+            elementtien kosketusalueet ovat liian pienet ja vaikeuttavat
+            palvelun käyttämistä. (WCAG 3.2.1 Kohdistaminen)
           </p>
         </li>
       </ul>
       <h3> Lainsäädännön ulkopuoliset puutteet </h3>
       <ul>
         <li>
           <p>
-            Kartat, joita ei ole tarkoitettu navigointikäyttöön (esimerkiksi sää- tai maastokartat)
+            Kartat, joita ei ole tarkoitettu navigointikäyttöön (esimerkiksi
+            sää- tai maastokartat)
           </p>
         </li>
       </ul>
     </div>
-  )
-}
+  );
+}

client/src/components/Application.tsx

@@ -42,10 +42,10 @@ const Application = () => {
           <SurveyLanguageRouter />
           <Switch>
             <Route path="/saavutettavuusseloste" exact>
-              <A11yStatement/>
+              <A11yStatement />
             </Route>
             <Route path="/tietosuojaseloste" exact>
-              <DataProtectionStatement/>
+              <DataProtectionStatement />
             </Route>
             <Route path="/:name" exact>
               <SurveyPage />

client/src/components/CopyToClipboard.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from '@mui/material';
-import FileCopyIcon from '@mui/icons-material/FileCopy';
+import FileCopyIcon from './icons/FileCopyIcon';
 import { useToasts } from '@src/stores/ToastContext';
 import { useTranslations } from '@src/stores/TranslationContext';
 import React from 'react';

client/src/components/DataProtectionStatement.tsx

@@ -2,26 +2,60 @@ import { React } from 'react';
 
 export function DataProtectionStatement() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center', width: '60%', margin: '36px' }}>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignContent: 'center',
+        justifyContent: 'center',
+        width: '60%',
+        margin: '36px',
+      }}
+    >
       <h1> Tietosuoja- ja tiedonhallintaselote </h1>
-      <p>Tämä tietosuoja- ja tiedonhallintaseloste koskee Ubigu Oy:n tarjoamaa Kartalla -sovellusta.</p>
+      <p>
+        Tämä tietosuoja- ja tiedonhallintaseloste koskee Ubigu Oy:n tarjoamaa
+        Kartalla -sovellusta.
+      </p>
       <h2>1. Rekisterinpitäjä</h2>
       <p> Ubigu Oy</p>
 
       <h2>2. Henkilötiedot</h2>
-      <p>Web-sovellus ei kerää käyttäjien henkilötietoja automaattisesti. Henkilötietoja pyydetään ja käsitellään vain käyttäjän antaessa ne erikseen luvan esimerkiksi yhteydenottolomakkeen kautta. Tällöin kerättävät tiedot voivat sisältää nimen, sähköpostiosoitteen ja viestin sisällön.</p>
+      <p>
+        Web-sovellus ei kerää käyttäjien henkilötietoja automaattisesti.
+        Henkilötietoja pyydetään ja käsitellään vain käyttäjän antaessa ne
+        erikseen luvan esimerkiksi yhteydenottolomakkeen kautta. Tällöin
+        kerättävät tiedot voivat sisältää nimen, sähköpostiosoitteen ja viestin
+        sisällön.
+      </p>
 
       <h2>3. Tietojen käyttötarkoitus</h2>
-      <p>Kerätyt henkilötiedot käytetään ainoastaan käyttäjän yhteydenottopyynnön käsittelyyn. Tietoja ei käytetä markkinointiin eikä jaeta kolmansille osapuolille.</p>
+      <p>
+        Kerätyt henkilötiedot käytetään ainoastaan käyttäjän yhteydenottopyynnön
+        käsittelyyn. Tietoja ei käytetä markkinointiin eikä jaeta kolmansille
+        osapuolille.
+      </p>
 
       <h2>4. Tietojen säilytys ja suojaus</h2>
-      <p>Henkilötietoja säilytetään vain niin kauan kuin on tarpeen yhteydenottopyynnön käsittelyyn. Tietoja suojataan asianmukaisesti teknisin ja organisatorisin toimenpitein.</p>
+      <p>
+        Henkilötietoja säilytetään vain niin kauan kuin on tarpeen
+        yhteydenottopyynnön käsittelyyn. Tietoja suojataan asianmukaisesti
+        teknisin ja organisatorisin toimenpitein.
+      </p>
 
       <h2>5. Käyttäjän oikeudet</h2>
-      <p>Käyttäjällä on oikeus tarkastaa häntä koskevat henkilötiedot, pyytää niiden oikaisua tai poistoa sekä vastustaa tietojen käsittelyä. Pyynnöt tulee lähettää web-sovelluksen ylläpitäjälle.</p>
+      <p>
+        Käyttäjällä on oikeus tarkastaa häntä koskevat henkilötiedot, pyytää
+        niiden oikaisua tai poistoa sekä vastustaa tietojen käsittelyä. Pyynnöt
+        tulee lähettää web-sovelluksen ylläpitäjälle.
+      </p>
 
       <h2>6. Muutokset tietosuojaselosteeseen</h2>
-      <p>Web-sovelluksen ylläpitäjä pidättää oikeuden tehdä muutoksia tähän tietosuojaselosteeseen. Muutoksista ilmoitetaan web-sovelluksen sivuilla.</p>
+      <p>
+        Web-sovelluksen ylläpitäjä pidättää oikeuden tehdä muutoksia tähän
+        tietosuojaselosteeseen. Muutoksista ilmoitetaan web-sovelluksen
+        sivuilla.
+      </p>
     </div>
-  )
-}
+  );
+}

client/src/components/LanguageMenu.tsx

@@ -2,7 +2,7 @@ import { MenuItem, Select, Tooltip } from '@mui/material';
 import { useTranslations } from '@src/stores/TranslationContext';
 import { LanguageCode } from '@interfaces/survey';
 import { makeStyles } from '@mui/styles';
-import LanguageIcon from '@mui/icons-material/Language';
+import LanguageIcon from './icons/LanguageIcon';
 import React from 'react';
 
 interface Props {
@@ -48,10 +48,14 @@ export default function LanguageMenu({ style }: Props) {
               borderWidth: 0,
               '&>legend': { display: 'none' },
             },
-            '& svg': {
+            '&>.MuiSvgIcon-root': {
               // The component is used in admin panel and survey, must adapt
               color: 'inherit',
               fill: 'currentColor',
+              position: 'absolute',
+              right: '0px',
+              pointerEvents: 'none',
+              marginRight: '2px',
             },
           }}
         >

client/src/components/SideBar.tsx

@@ -8,10 +8,8 @@ const useStyles = makeStyles({
     // TODO: use theme colors?
     background: '#333',
     color: '#fafafa',
-    fill: '#fafafa',
     '& *': {
       color: '#fafafa',
-      fill: '#fafafa',
     },
     '& hr': {
       borderColor: '#555',

client/src/components/SurveyLandingPage.tsx

@@ -202,7 +202,12 @@ export default function SurveyLandingPage({
         }}
       >
         <Footer>
-          <Link color="primary" underline="hover" href="/saavutettavuusseloste" target="_blank">
+          <Link
+            color="primary"
+            underline="hover"
+            href="/saavutettavuusseloste"
+            target="_blank"
+          >
             {tr.FooterLinks.accessibility}
           </Link>
           {survey.displayPrivacyStatement && (

client/src/components/SurveyLanguageMenu.tsx

@@ -2,7 +2,7 @@ import { MenuItem, Select, Tooltip } from '@mui/material';
 import { useTranslations } from '@src/stores/TranslationContext';
 import { LanguageCode } from '@interfaces/survey';
 import { makeStyles } from '@mui/styles';
-import LanguageIcon from '@mui/icons-material/Language';
+import LanguageIcon from './icons/LanguageIcon';
 import React from 'react';
 
 interface Props {
@@ -53,10 +53,14 @@ export default function SurveyLanguageMenu({
             '&>fieldset': {
               display: 'none',
             },
-            '& svg': {
+            '&>.MuiSvgIcon-root': {
               // The component is used in admin panel and survey, must adapt
               color: 'inherit',
               fill: 'currentColor',
+              position: 'absolute',
+              right: '0px',
+              pointerEvents: 'none',
+              marginRight: '2px',
             },
           }}
         >

client/src/components/SurveyStepper.tsx

@@ -595,11 +595,21 @@ export default function SurveyStepper({
         </Stepper>
       </main>
       <Footer>
-        <Link color="primary" underline="hover" href="/saavutettavuusseloste" target="_blank">
+        <Link
+          color="primary"
+          underline="hover"
+          href="/saavutettavuusseloste"
+          target="_blank"
+        >
           {tr.FooterLinks.accessibility}
         </Link>
         {survey.displayPrivacyStatement && (
-          <Link color="primary" underline="hover" href="/tietosuojaseloste" target="_blank">
+          <Link
+            color="primary"
+            underline="hover"
+            href="/tietosuojaseloste"
+            target="_blank"
+          >
             {tr.FooterLinks.privacyStatement}
           </Link>
         )}

client/src/components/SurveyThanksPage.tsx

@@ -144,7 +144,12 @@ export default function SurveyThanksPage({ survey, isTestSurvey }: Props) {
         }}
       >
         <Footer>
-          <Link color="primary" underline="hover" href="/saavutettavuusseloste" target="_blank">
+          <Link
+            color="primary"
+            underline="hover"
+            href="/saavutettavuusseloste"
+            target="_blank"
+          >
             {tr.FooterLinks.accessibility}
           </Link>
           {survey.displayPrivacyStatement && (