Style improvements

Opetushallitus · May 7, 2024 · cd0d974 · cd0d974
1 parent fc8f7a6
commit cd0d974
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 77 deletions.
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/TabContainer.ts b/src/app/haku/[oid]/hakukohde/[hakukohde]/TabContainer.ts
@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const TabContainer = styled('div')({
+  width: '70%',
+  padding: '1rem 2rem',
+});
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/hakeneet/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/hakeneet/page.tsx
@@ -1,13 +1,9 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
+import { TabContainer } from '../TabContainer';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-const StyledContainer = styled('div')({
-  width: '70%',
-});
-
 export default function HakeneetPage({
   params,
 }: {
@@ -19,9 +15,9 @@ export default function HakeneetPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Hakeneet</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/hakijaryhmat/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/hakijaryhmat/page.tsx
@@ -1,13 +1,9 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
+import { TabContainer } from '../TabContainer';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
-const StyledContainer = styled('div')({
-  width: '70%',
-});
-
 export default function HakijaryhmatPage({
   params,
 }: {
@@ -19,9 +15,9 @@ export default function HakijaryhmatPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Hakijaryhmat</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/hakukohde-tabs.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/hakukohde-tabs.tsx
@@ -8,15 +8,22 @@ import { getHakukohde } from '@/app/lib/kouta';
 import { usePathname, useRouter } from 'next/navigation';
 
 const StyledContainer = styled('div')({
-  padding: '0.5rem 1.5rem',
-  width: '70%',
+  padding: '0.5rem 1.5rem 0',
+  width: '100%',
+  border: '1px solid lightgray',
 });
 
 const StyledHeader = styled('div')({
   textAlign: 'left',
+  h2: {
+    lineHeight: '1rem',
+  },
   '.hakukohdeLabel': {
     fontWeight: 500,
   },
+  '.organisaatioLabel': {
+    fontWeight: 'normal',
+  },
 });
 
 const StyledTabs = styled('div')({
@@ -26,7 +33,7 @@ const StyledTabs = styled('div')({
   '.hakukohde-tab': {
     cursor: 'pointer',
     '&--active': {
-      borderBottom: '2px solid #0a789c',
+      borderBottom: '3px solid #0a789c',
     },
   },
 });
@@ -76,12 +83,12 @@ export const HakukohdeTabs = ({ hakukohdeOid }: { hakukohdeOid: string }) => {
   return (
     <StyledContainer>
       <StyledHeader>
-        <p title={hakukohde.organisaatioOid}>
+        <h2 className="organisaatioLabel" title={hakukohde.organisaatioOid}>
           {getTranslation(hakukohde.jarjestyspaikkaHierarkiaNimi)}
-        </p>
-        <p className="hakukohdeLabel" title={hakukohde.oid}>
+        </h2>
+        <h2 className="hakukohdeLabel" title={hakukohde.oid}>
           {getTranslation(hakukohde.nimi)}
-        </p>
+        </h2>
       </StyledHeader>
       <StyledTabs>
         {ToinenAsteTabs.map((tab, index) => (

diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/harkinnanvaraiset/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/harkinnanvaraiset/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function HarkinnanvaraisetPage({
   params,
@@ -19,9 +15,9 @@ export default function HarkinnanvaraisetPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Harkinnanvaraiset</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/layout.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/layout.tsx
@@ -12,7 +12,12 @@ export default function HakuLayout({
     <>
       <main
         className="mainContainer"
-        style={{ display: 'flex', flexDirection: 'row' }}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 0,
+          width: '100%',
+        }}
       >
         <HakukohdeTabs hakukohdeOid={params.hakukohde} />
         {children}

diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/page.tsx
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/perustiedot/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/perustiedot/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function PerustiedotTab({
   params,
@@ -19,8 +15,8 @@ export default function PerustiedotTab({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/pistesyotto/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/pistesyotto/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function PisteSyottoPage({
   params,
@@ -19,9 +15,9 @@ export default function PisteSyottoPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Pistesyöttö</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/sijoittelun-tulokset/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/sijoittelun-tulokset/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function SijoittelunTuloksetPage({
   params,
@@ -19,9 +15,9 @@ export default function SijoittelunTuloksetPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Sijoittelun Tulokset</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/valinnan-hallinta/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/valinnan-hallinta/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function ValinnanHallintaPage({
   params,
@@ -19,9 +15,9 @@ export default function ValinnanHallintaPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Valinnan Hallinta</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/valintakoekutsut/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/valintakoekutsut/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function ValintakoekutsutPage({
   params,
@@ -19,9 +15,9 @@ export default function ValintakoekutsutPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Valintakoekutsut</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/hakukohde/[hakukohde]/valintalaskennan-tulos/page.tsx b/src/app/haku/[oid]/hakukohde/[hakukohde]/valintalaskennan-tulos/page.tsx
@@ -1,12 +1,8 @@
 'use client';
 
 import { getHakukohde } from '@/app/lib/kouta';
-import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
-
-const StyledContainer = styled('div')({
-  width: '70%',
-});
+import { TabContainer } from '../TabContainer';
 
 export default function ValintalaskennanTulosPage({
   params,
@@ -19,9 +15,9 @@ export default function ValintalaskennanTulosPage({
   });
 
   return (
-    <StyledContainer>
+    <TabContainer>
       <p>Valintalaskennan Tulos</p>
       <p>Hakukohde oid: {hakukohde.oid}</p>
-    </StyledContainer>
+    </TabContainer>
   );
 }
diff --git a/src/app/haku/[oid]/layout.tsx b/src/app/haku/[oid]/layout.tsx
@@ -14,7 +14,7 @@ export default function HakuLayout({
       {header}
       <main
         className="mainContainer"
-        style={{ display: 'flex', flexDirection: 'row' }}
+        style={{ display: 'flex', flexDirection: 'row', textAlign: 'left' }}
       >
         <HakukohdeList oid={params.oid} />
         {children}