fix: Korjaa käyttöliittymän yksityiskohtia (#483)

* lisää suunnittelusopimusosioon puuttuvia tekstejä * korjaa maksimikooksi tiedostoille 25mb * korjaa checkbox ja radiobutton disabled teksti mustahkoksi * korjaa painikkeisiin typeksi button, jotta enterin painaminen tekstikentässä ei aiheuta painikkeeseen asetettua toimintoa * lisää hover-tyylit ja aktiivisen 'routen' headertyylit * siirrä virkamiehen nimi 'poistu palvelusta' painikkeen keskelle * aseta autocomplete kenttä aukeamaan enterin painalluksella * korjaa teksti projektin tiedot sivun lukutilasta * Korjaa tekstejä
finnishtransportagency · Dec 13, 2022 · 8920d19 · 8920d19
1 parent 142ef9f
commit 8920d19
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 63 deletions.
diff --git a/src/components/form/FileInput.tsx b/src/components/form/FileInput.tsx
@@ -21,7 +21,7 @@ export const FileInput = ({
   hideErrorMessage,
   multiple = false,
   noClick = true,
-  maxSize = 4500000,
+  maxSize = 25000000,
   accept = "image/jpeg, image/png",
   ...otherDropzoneOptions
 }: DropzoneProps) => {
@@ -39,12 +39,12 @@ export const FileInput = ({
         {...getRootProps()}
         className={classNames(
           "border-dashed border border-gray py-4 flex flex-col justify-center items-center relative",
-          isDragActive &&
-            "before:inset-0 before:absolute before:bg-gray-light before:bg-opacity-50 before:z-50 before:pointer-events-none"
+          isDragActive && "before:inset-0 before:absolute before:bg-gray-light before:bg-opacity-50 before:z-50 before:pointer-events-none"
         )}
       >
-        <p className="mb-4 vayla-paragraph flex flex-wrap justify-center">
-          <span>Pudota tiedosto tähän tai</span>
+        <p className="mb-4 flex flex-wrap justify-center text-center">
+          Pudota tiedosto tähän <br />
+          tai
         </p>
         <input name="fileInput" {...getInputProps({ onChange })} />
         <Button

diff --git a/src/components/layout/HassuMuiThemeProvider.tsx b/src/components/layout/HassuMuiThemeProvider.tsx
@@ -267,8 +267,9 @@ export const createLocalizedTheme = (locale: Localization) =>
               ".MuiFormControlLabel-label": {
                 padding: "2px",
                 paddingTop: "9px",
+                color: "#242222",
                 "&.Mui-disabled": {
-                  color: "#999999",
+                  color: "#242222",
                 },
               },
             },

diff --git a/src/components/layout/header/VirkamiesHeaderTopRightContent.tsx b/src/components/layout/header/VirkamiesHeaderTopRightContent.tsx
@@ -9,7 +9,7 @@ const VirkamiesHeaderTopRightContent: FunctionComponent<{ mobile?: true }> = ({
   const logoutHref = process.env.NEXT_PUBLIC_VAYLA_EXTRANET_URL;
 
   return (
-    <div className="flex flex-wrap items-end justify-between md:justify-end gap-x-5 gap-y-3 py-5 md:py-0 vayla-paragraph">
+    <div className="flex flex-wrap items-center justify-between md:justify-end gap-x-5 gap-y-3 py-5 md:py-0 vayla-paragraph">
       <span>{kayttajaNimi}</span>
       {mobile ? (
         <StyledLink href={logoutHref} useNextLink={false}>

diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
@@ -217,12 +217,14 @@ export default function Header(): ReactElement {
 }
 
 const Navigation: FunctionComponent<{ navigationRoutes: NavigationRoute[]; mobile?: true }> = ({ navigationRoutes, mobile }) => {
+  const router = useRouter();
   return (
     <nav className="block md:flex border-t border-gray-light uppercase">
       <ul className="block pb-8 md:pb-0 md:flex md:float-left md:flex-wrap md:space-x-16">
-        {navigationRoutes.map((route, index) => (
-          <HeaderNavigationItem key={index} {...route} mobile={mobile} />
-        ))}
+        {navigationRoutes.map((route, index) => {
+          const isCurrentRoute = route.href === router.pathname;
+          return <HeaderNavigationItem key={index} {...route} isCurrentRoute={isCurrentRoute} mobile={mobile} />;
+        })}
       </ul>
     </nav>
   );

diff --git a/src/components/layout/navigation/HeaderNavigationItem.tsx b/src/components/layout/navigation/HeaderNavigationItem.tsx
@@ -1,28 +1,62 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
-import classNames from "classnames";
+import { styled } from "@mui/material";
 
 export interface NavigationRoute {
   label: string;
   href: string;
   icon?: IconProp;
-  removeLeftPadding?: boolean;
   mobile?: true;
+  isCurrentRoute?: boolean;
 }
 
-const HeaderNavigationItem: FunctionComponent<NavigationRoute> = ({ href, label, icon, removeLeftPadding, mobile }) => (
-  <li>
+const HeaderNavigationItem = styled(({ href, label, icon, mobile, className }: NavigationRoute & { className?: string }) => (
+  <li className={className}>
     <Link href={href}>
-      <a
-        className={classNames("py-1 mt-2 md:mt-0 md:py-6 md:px-2 pr-1 inline-block font-bold md:font-normal", removeLeftPadding && "pl-0")}
-      >
+      <a>
         {icon && !mobile && <FontAwesomeIcon icon={icon} size="lg" className="text-primary-dark mr-10" />}
-        {label}
+        <span>{label}</span>
       </a>
     </Link>
   </li>
-);
+))<NavigationRoute>(({ theme, isCurrentRoute }) => ({
+  "& a": {
+    display: "inline-block",
+    "&:hover": {
+      background: "#F8F8F8",
+    },
+  },
+  "& span": {
+    display: "inline-block",
+    [theme.breakpoints.down("md")]: {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      marginTop: theme.spacing(2),
+      paddingRight: theme.spacing(1),
+      fontWeight: 700,
+    },
+    [theme.breakpoints.up("md")]: {
+      position: "relative",
+      paddingTop: theme.spacing(6),
+      paddingBottom: theme.spacing(6),
+      marginTop: theme.spacing(0),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      fontWeight: isCurrentRoute ? 700 : 400,
+      "&::after": {
+        content: "''",
+        position: "absolute",
+        width: "2rem",
+        bottom: "0.75rem",
+        left: 0,
+        right: 0,
+        margin: "auto",
+        borderBottom: isCurrentRoute ? "3px solid #0064af" : undefined,
+      },
+    },
+  },
+}));
 
 export default HeaderNavigationItem;
diff --git a/src/components/projekti/KayttoOikeusHallinta.tsx b/src/components/projekti/KayttoOikeusHallinta.tsx
@@ -157,6 +157,7 @@ function KayttoOikeusHallintaFormElements({
           append(defaultKayttaja);
         }}
         disabled={disableFields}
+        type="button"
       >
         Lisää uusi +
       </Button>
@@ -216,6 +217,10 @@ const UserFields = ({
 
   const isCurrentKayttajaMissingFromOptions = kayttaja && !options.some((o) => o.uid === kayttaja.uid);
 
+  const [popperOpen, setPopperOpen] = useState(false);
+  const closePopper = () => setPopperOpen(false);
+  const openPopper = () => setPopperOpen(true);
+
   return (
     <ContentSpacer>
       <HassuGrid
@@ -228,6 +233,9 @@ const UserFields = ({
           render={({ field: { onChange, name, onBlur, ref }, fieldState }) => (
             <Autocomplete
               options={isCurrentKayttajaMissingFromOptions ? [...options, kayttaja] : options}
+              open={popperOpen}
+              onOpen={openPopper}
+              onClose={closePopper}
               renderInput={(params) => (
                 <TextField
                   {...params}
@@ -238,6 +246,11 @@ const UserFields = ({
                   inputRef={ref}
                   name={name}
                   onBlur={onBlur}
+                  onKeyDown={(e) => {
+                    if (!popperOpen && e.code === "Enter") {
+                      openPopper();
+                    }
+                  }}
                 />
               )}
               loading={loadingKayttajaResults}
@@ -293,6 +306,7 @@ const UserFields = ({
                   }}
                   disabled={disableFields || !muokattavissa}
                   size="large"
+                  type="button"
                 >
                   <SvgIcon>
                     <FontAwesomeIcon icon="trash" />
@@ -363,6 +377,7 @@ const UserFields = ({
           }}
           endIcon="trash"
           disabled={disableFields || !muokattavissa}
+          type="button"
         >
           Poista
         </Button>

diff --git a/src/components/projekti/ProjektiLiittyvatSuunnitelmat.tsx b/src/components/projekti/ProjektiLiittyvatSuunnitelmat.tsx
@@ -62,18 +62,8 @@ export default function ProjektiLiittyvatSuunnitelmat({ projekti }: Props): Reac
         flexDirection="row"
         errorMessage={errors?.liittyviasuunnitelmia?.message}
       >
-        <RadioButton
-          label="Kyllä"
-          value="true"
-          {...register("liittyviasuunnitelmia")}
-          onChange={() => handleLiittyviaSuunnitelmia(true)}
-        />
-        <RadioButton
-          label="Ei"
-          value="false"
-          {...register("liittyviasuunnitelmia")}
-          onChange={() => handleLiittyviaSuunnitelmia(false)}
-        />
+        <RadioButton label="Kyllä" value="true" {...register("liittyviasuunnitelmia")} onChange={() => handleLiittyviaSuunnitelmia(true)} />
+        <RadioButton label="Ei" value="false" {...register("liittyviasuunnitelmia")} onChange={() => handleLiittyviaSuunnitelmia(false)} />
       </FormGroup>
       {isLiittyviaSuunnitelmia && (
         <SectionContent sx={{ marginLeft: 4 }}>
@@ -100,37 +90,40 @@ export default function ProjektiLiittyvatSuunnitelmat({ projekti }: Props): Reac
                     <div className="hidden lg:block">
                       <IconButton
                         name="linked_plan_trash_button"
-                    icon="trash"
-                    onClick={(event) => {
-                      event.preventDefault();
-                      remove(index);
-                    }}
-                  />
-                </div>
-                <div className="block lg:hidden">
-                  <Button
-                    onClick={(event) => {
-                      event.preventDefault();
-                      remove(index);
-                    }}
-                    endIcon="trash"
-                  >
-                    Poista
-                  </Button>
-                </div>
-              </HassuStack>
-            </HassuGridItem>
-          </HassuGrid>
-        );
-      })}
-      <Button
-        id="linked_plands_new_row"
+                        icon="trash"
+                        type="button"
+                        onClick={(event) => {
+                          event.preventDefault();
+                          remove(index);
+                        }}
+                      />
+                    </div>
+                    <div className="block lg:hidden">
+                      <Button
+                        onClick={(event) => {
+                          event.preventDefault();
+                          remove(index);
+                        }}
+                        endIcon="trash"
+                        type="button"
+                      >
+                        Poista
+                      </Button>
+                    </div>
+                  </HassuStack>
+                </HassuGridItem>
+              </HassuGrid>
+            );
+          })}
+          <Button
+            id="linked_plands_new_row"
             className="mt-7"
             onClick={(event) => {
               event.preventDefault();
               append(defaultSuunnitelma);
             }}
             disabled={!isLiittyviaSuunnitelmia}
+            type="button"
           >
             Uusi rivi +
           </Button>

diff --git a/src/components/projekti/ProjektiSunnittelusopimusTiedot.tsx b/src/components/projekti/ProjektiSunnittelusopimusTiedot.tsx
@@ -89,7 +89,10 @@ export default function ProjektiPerustiedot({ projekti }: Props): ReactElement {
       {hasSuunnitteluSopimus && (
         <SectionContent largeGaps sx={{ marginLeft: 4 }}>
           <SectionContent>
-            <p>Kunnan projektipäällikön tiedot</p>
+            <h5 className="vayla-smallest-title">Kunnan edustajan tiedot</h5>
+            <p>
+              Kunnan edustajaksi merkitty henkilö näkyy automaattisesti valittuna aloituskuulutuksen ja vuorovaikutusten yhteystiedoissa.
+            </p>
             <HassuGrid cols={{ lg: 3 }}>
               <Select
                 id="suunnittelusopimus_yhteyshenkilo"
@@ -114,6 +117,7 @@ export default function ProjektiPerustiedot({ projekti }: Props): ReactElement {
             </HassuGrid>
           </SectionContent>
           <SectionContent>
+            <h5 className="vayla-smallest-title">Kunnan logo</h5>
             <Controller
               render={({ field }) =>
                 logoUrl ? (
@@ -142,6 +146,7 @@ export default function ProjektiPerustiedot({ projekti }: Props): ReactElement {
                         field.onChange(logoTiedosto);
                       }
                     }}
+                    bottomInfoText="Tuetut tiedostomuodot ovat JPG ja PNG. Sallittu tiedostokoko on maksimissaan 25Mt."
                     onChange={(e) => {
                       const logoTiedosto = e.target.files?.[0];
                       if (logoTiedosto) {

diff --git a/src/components/projekti/lukutila/ProjektinTiedotLukutila.tsx b/src/components/projekti/lukutila/ProjektinTiedotLukutila.tsx
@@ -62,8 +62,8 @@ export default function ProjektinTiedotLukutila({ projekti }: Props) {
           <p>{projekti.suunnitteluSopimus ? "Kyllä" : "Ei"}</p>
         </SectionContent>
         <SectionContent>
-          <p className="vayla-label">Kunnan projektipäällikön tiedot</p>
-          <p>{projekti.suunnitteluSopimus?.yhteysHenkilo}</p> {/* TODO */}
+          <p className="vayla-label">Kunnan edustajan tiedot</p>
+          <p>{projekti.suunnitteluSopimus?.yhteysHenkilo}</p>
         </SectionContent>
       </Section>
       <Section smallGaps>

diff --git a/src/locales/fi/projekti.json b/src/locales/fi/projekti.json
@@ -159,7 +159,7 @@
     "palaute": "Palaute",
     "puhelinsoitto": "Puhelinsoitto",
     "toivottu_yhteydenottotapa": "Toivottu yhteydenottotapa",
-    "tuetut_tiedostomuodot_ovat": "Tuetut tiedostomuodot ovat PDF, JPG ja PNG. Sallittu tiedostokoko on maksimissaan 4,5Mt.",
+    "tuetut_tiedostomuodot_ovat": "Tuetut tiedostomuodot ovat PDF, JPG ja PNG. Sallittu tiedostokoko on maksimissaan 25Mt.",
     "olemme_vastaanottaneet_viestisi": "Olemme vastaanottaneet viestisi.",
     "kaikki_viestit_kasitellaan": "Kaikki viestit käsitellään ja ne pyritään huomioimaan suunnittelussa. Viimeistellyt suunnitelmat asetetaan myöhemmin nähtäville.",
     "jos_toivoit_yhteydenottoa": "Jos toivoit yhteydenottoa, hankkeen suunnittelutiimi on sinuun yhteydessä mahdollisimman pian.",

diff --git a/src/locales/sv/projekti.json b/src/locales/sv/projekti.json
@@ -159,7 +159,7 @@
     "palaute": "RUOTSIKSI Palaute",
     "puhelinsoitto": "RUOTSIKSI Puhelinsoitto",
     "toivottu_yhteydenottotapa": "RUOTSIKSI Toivottu yhteydenottotapa",
-    "tuetut_tiedostomuodot_ovat": "RUOTSIKSI Tuetut tiedostomuodot ovat PDF, JPG ja PNG. Sallittu tiedostokoko on maksimissaan 4,5Mt.",
+    "tuetut_tiedostomuodot_ovat": "RUOTSIKSI Tuetut tiedostomuodot ovat PDF, JPG ja PNG. Sallittu tiedostokoko on maksimissaan 25Mt.",
     "olemme_vastaanottaneet_viestisi": "RUOTSIKSI Olemme vastaanottaneet viestisi.",
     "kaikki_viestit_kasitellaan": "RUOTSIKSI Kaikki viestit käsitellään ja ne pyritään huomioimaan suunnittelussa. Viimeistellyt suunnitelmat asetetaan myöhemmin nähtäville.",
     "jos_toivoit_yhteydenottoa": "RUOTSIKSI Jos toivoit yhteydenottoa, hankkeen suunnittelutiimi on sinuun yhteydessä mahdollisimman pian.",

diff --git a/src/pages/yllapito/projekti/[oid]/henkilot.tsx b/src/pages/yllapito/projekti/[oid]/henkilot.tsx
@@ -155,7 +155,7 @@ function Henkilot({ projekti, projektiLoadError, reloadProjekti }: HenkilotFormP
             />
             <Section noDivider>
               <HassuStack alignItems="flex-end">
-                <Button id="save_projekti" className="ml-auto" primary disabled={disableFormEdit}>
+                <Button id="save_projekti" className="ml-auto" type="button" primary disabled={disableFormEdit}>
                   Tallenna
                 </Button>
               </HassuStack>