Merge pull request #21 from ubigu/feature/ubigufy

Feature/ubigufy, Admin portal made in Ubigu theme
ubigu · Aug 20, 2024 · 7128b72 · 7128b72
2 parents f68151e + a3695d7
commit 7128b72
Show file tree

Hide file tree

Showing 82 changed files with 1,465 additions and 273 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/src/components/A11yStatement.tsx b/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>
-  )
-}
+  );
+}
diff --git a/client/src/components/Application.tsx b/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 />

diff --git a/client/src/components/CopyToClipboard.tsx b/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';

diff --git a/client/src/components/DataProtectionStatement.tsx b/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>
-  )
-}
+  );
+}
diff --git a/client/src/components/LanguageMenu.tsx b/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',
             },
           }}
         >

diff --git a/client/src/components/SideBar.tsx b/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',

diff --git a/client/src/components/SurveyLanguageMenu.tsx b/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',
             },
           }}
         >

diff --git a/client/src/components/admin/AddSurveySectionActions.tsx b/client/src/components/admin/AddSurveySectionActions.tsx
@@ -1,21 +1,19 @@
 import { SurveyFollowUpSection, SurveyPageSection } from '@interfaces/survey';
-import {
-  Article,
-  AttachFile,
-  CheckBox,
-  ContentPaste,
-  FormatListNumbered,
-  Image,
-  LibraryAddCheck,
-  LinearScale,
-  Looks4,
-  Map,
-  RadioButtonChecked,
-  Subject,
-  TextFields,
-  ViewComfy,
-  ViewComfyAlt,
-} from '@mui/icons-material';
+import ImageSmallIcon from '../icons/ImageSmallIcon';
+import RadioButtonCheckedIcon from '../icons/RadioButtonCheckedIcon';
+import CheckboxCheckedIcon from '../icons/CheckboxCheckedIcon';
+import TextFieldIcon from '../icons/TextFieldIcon';
+import NumericFieldIcon from '../icons/NumericFieldIcon';
+import MapIcon from '../icons/MapIcon';
+import OrderedIcon from '../icons/OrderedIcon';
+import SliderIcon from '../icons/SliderIcon';
+import PaperclipIcon from '../icons/PaperclipIcon';
+import MultiCheckmarkIcon from '../icons/MultiCheckmarkIcon';
+import MatrixIcon from '../icons/MatrixIcon';
+import LikertGroupIcon from '../icons/LikertGroupIcon';
+import TextFileIcon from '../icons/TextFileIcon';
+import TextSectionIcon from '../icons/TextSectionIcon';
+import ClipboardSmallIcon from '../icons/ClipboardSmallIcon';
 import { Fab, Grid, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useClipboard } from '@src/stores/ClipboardContext';
@@ -205,67 +203,67 @@ export default function AddSurveySectionActions(props: Props) {
       type: 'radio',
       label: tr.AddSurveySectionActions.radioQuestion,
       ariaLabel: 'add-radio-question',
-      icon: <RadioButtonChecked />,
+      icon: <RadioButtonCheckedIcon />,
     },
     {
       type: 'checkbox',
       label: tr.AddSurveySectionActions.checkBoxQuestion,
       ariaLabel: 'add-checkbox-question',
-      icon: <CheckBox />,
+      icon: <CheckboxCheckedIcon />,
     },
     {
       type: 'free-text',
       label: tr.AddSurveySectionActions.freeTextQuestion,
       ariaLabel: 'add-free-text-question',
-      icon: <TextFields />,
+      icon: <TextFieldIcon />,
     },
     {
       type: 'numeric',
       label: tr.AddSurveySectionActions.numericQuestion,
       ariaLabel: 'add-numeric-question',
-      icon: <Looks4 />,
+      icon: <NumericFieldIcon />,
     },
     {
       type: 'map',
       label: tr.AddSurveySectionActions.mapQuestion,
       ariaLabel: 'add-map-question',
-      icon: <Map />,
+      icon: <MapIcon />,
     },
     {
       type: 'sorting',
       label: tr.AddSurveySectionActions.sortingQuestion,
       ariaLabel: 'add-sorting-question',
-      icon: <FormatListNumbered />,
+      icon: <OrderedIcon />,
     },
     {
       type: 'slider',
       label: tr.AddSurveySectionActions.sliderQuestion,
       ariaLabel: 'add-slider-question',
-      icon: <LinearScale />,
+      icon: <SliderIcon />,
     },
     {
       type: 'matrix',
       label: tr.AddSurveySectionActions.matrixQuestion,
       ariaLabel: 'add-matrix-question',
-      icon: <ViewComfy />,
+      icon: <MatrixIcon />,
     },
     {
       type: 'multi-matrix',
       label: tr.AddSurveySectionActions.multiMatrixQuestion,
       ariaLabel: 'add-multiple-choice-matrix-question',
-      icon: <ViewComfyAlt />,
+      icon: <LikertGroupIcon />,
     },
     {
       type: 'grouped-checkbox',
       label: tr.AddSurveySectionActions.groupedCheckboxQuestion,
       ariaLabel: 'add-grouped-checkbox-question',
-      icon: <LibraryAddCheck />,
+      icon: <MultiCheckmarkIcon />,
     },
     {
       type: 'attachment',
       label: tr.AddSurveySectionActions.attachmentSection,
       ariaLabel: 'add-attachment-section',
-      icon: <AttachFile />,
+      icon: <PaperclipIcon />,
     },
   ];
 
@@ -279,19 +277,19 @@ export default function AddSurveySectionActions(props: Props) {
       type: 'text',
       label: tr.AddSurveySectionActions.textSection,
       ariaLabel: 'add-text-section',
-      icon: <Subject />,
+      icon: <TextSectionIcon />,
     },
     {
       type: 'image',
       label: tr.AddSurveySectionActions.imageSection,
       ariaLabel: 'add-image-section',
-      icon: <Image />,
+      icon: <ImageSmallIcon />,
     },
     {
       type: 'document',
       label: tr.AddSurveySectionActions.documentSection,
       ariaLabel: 'add-document-section',
-      icon: <Article />,
+      icon: <TextFileIcon />,
     },
   ];
 
@@ -369,7 +367,7 @@ export default function AddSurveySectionActions(props: Props) {
                     }
                   }}
                 >
-                  <ContentPaste />
+                  <ClipboardSmallIcon />
                 </Fab>
                 <Typography>{tr.EditSurveyPage.attachSection}</Typography>
               </div>