From 36d77186b2f39ac6416e391124db9c2c29f0c8ee Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 01:54:02 +0100
Subject: [PATCH 1/7] unrelated: fix wrap of SemesterPicker on resolution
 somewhere between 900-940

---
 src/components/SemesterPicker/SemesterPicker.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/SemesterPicker/SemesterPicker.tsx b/src/components/SemesterPicker/SemesterPicker.tsx
index 51f5233a..9dc3f486 100644
--- a/src/components/SemesterPicker/SemesterPicker.tsx
+++ b/src/components/SemesterPicker/SemesterPicker.tsx
@@ -74,10 +74,9 @@ export const SemesterPicker: FC<{page: 'zadania' | 'vysledky' | 'admin/opravovan
       sx={{
         flexDirection: 'row',
         alignItems: 'center',
-        columnGap: 2,
-        // wrap na nizsich rozliseniach
+        // wrap na velmi nizkych rozliseniach
         flexWrap: 'wrap',
-        rowGap: 1,
+        rowGap: 0.5,
         zIndex: 1000,
         userSelect: 'none',
       }}

From a99869f86500455da9cff67dc6f8be5d66fb6d48 Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 02:18:59 +0100
Subject: [PATCH 2/7] add seminar buttons - variant 1

---
 src/components/PageLayout/TopGrid/TopGrid.tsx | 25 +++++++++++--------
 src/theme.ts                                  | 20 +++++++++++++++
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
index 0ce43396..9fdb1a6a 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.tsx
+++ b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -33,30 +33,29 @@ export const TopGrid: FC = () => {
     <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}}>
       <Grid container disableEqualOverflow spacing={1} p={3}>
         {/* first row */}
-        <Grid xs={12} md={3}>
-          <Stack sx={{alignItems: {xs: 'end', md: 'start'}}}>
+        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}}>
+          <Stack sx={{alignItems: 'start'}}>
             <MenuMain />
           </Stack>
         </Grid>
-        <Grid xs={0} md={6} sx={{display: {xs: 'none', md: 'block'}}} />
-        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}}>
-          <Stack sx={{flexDirection: 'row', spacing: 2, justifyContent: 'flex-end'}}>
+        <Grid xs={9}>
+          <Stack sx={{flexDirection: 'row', gap: 1, justifyContent: {xs: 'start', md: 'end'}}}>
             <Link
               href="/malynar"
-              variant="button1"
+              variant="seminarButton"
               sx={seminar === 'malynar' ? {color: 'white', backgroundColor: 'black'} : {}}
             >
               Malynár
             </Link>
             <Link
-              variant="button1"
+              variant="seminarButton"
               href="/matik"
               sx={seminar === 'matik' ? {color: 'white', backgroundColor: 'black'} : {}}
             >
               Matik
             </Link>
             <Link
-              variant="button1"
+              variant="seminarButton"
               href="/strom"
               sx={seminar === 'strom' ? {color: 'white', backgroundColor: 'black'} : {}}
             >
@@ -64,15 +63,19 @@ export const TopGrid: FC = () => {
             </Link>
           </Stack>
         </Grid>
+        <Grid xs={3} md={0} sx={{display: {xs: 'block', md: 'none'}}}>
+          <Stack sx={{alignItems: 'end'}}>
+            <MenuMain />
+          </Stack>
+        </Grid>
 
         {/* second row */}
-        <Grid xs={0} md={3} sx={{display: {xs: 'none', md: 'block'}}} />
-        <Grid xs={12} md={6}>
+        <Grid xs={12} md={6} mdOffset={3}>
           <Typography variant="h1">{pageTitle}</Typography>
         </Grid>
         {semesterPickerPage && (
           <Grid xs={12} md={3}>
-            <Stack sx={{alignItems: 'flex-end'}}>
+            <Stack sx={{alignItems: 'end'}}>
               <SemesterPicker page={semesterPickerPage} />
             </Stack>
           </Grid>
diff --git a/src/theme.ts b/src/theme.ts
index 8c28f8e3..c02adc28 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -8,6 +8,7 @@ declare module '@mui/material/styles' {
     button1: React.CSSProperties
     button2: React.CSSProperties
     button3: React.CSSProperties
+    seminarButton: React.CSSProperties
     postTitle: React.CSSProperties
     postBody: React.CSSProperties
     postDate: React.CSSProperties
@@ -19,6 +20,7 @@ declare module '@mui/material/styles' {
     button1?: React.CSSProperties
     button2?: React.CSSProperties
     button3?: React.CSSProperties
+    seminarButton?: React.CSSProperties
     postTitle?: React.CSSProperties
     postBody?: React.CSSProperties
     postDate?: React.CSSProperties
@@ -32,6 +34,7 @@ declare module '@mui/material/Typography' {
     button1: true
     button2: true
     button3: true
+    seminarButton: true
     postTitle: true
     postBody: true
     postDate: true
@@ -124,6 +127,12 @@ const _theme = createTheme({
       fontWeight: 800,
       fontStyle: 'italic',
     },
+    seminarButton: {
+      ...font.style,
+      textTransform: 'uppercase',
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
     postTitle: {
       ...font.style,
       fontWeight: 800,
@@ -148,6 +157,7 @@ const _theme = createTheme({
           button1: 'span',
           button2: 'span',
           button3: 'span',
+          seminarButton: 'span',
           postTitle: 'h1',
           postBody: 'span',
           postDate: 'span',
@@ -285,6 +295,16 @@ export const theme: Theme = {
       [xl]: {fontSize: pxToRem(14)},
       lineHeight: 1.5,
     },
+    seminarButton: {
+      ..._theme.typography.seminarButton,
+      // original Figma fontSize: 30px, mobile non-existent
+      fontSize: pxToRem(14),
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(18)},
+      [lg]: {fontSize: pxToRem(22)},
+      [xl]: {fontSize: pxToRem(30)},
+      lineHeight: 1.5,
+    },
     postTitle: {
       ..._theme.typography.postTitle,
       // original Figma fontSize: 36px

From 337ebfa0dfc1fd6533a22405850da8c09a40d721 Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 02:21:27 +0100
Subject: [PATCH 3/7] add seminar buttons - variant 2

---
 src/components/PageLayout/TopGrid/TopGrid.tsx | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
index 9fdb1a6a..c0d11ad9 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.tsx
+++ b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -29,6 +29,32 @@ export const TopGrid: FC = () => {
 
   const {pageTitle} = PageTitleContainer.useContainer()
 
+  const links = (
+    <>
+      <Link
+        href="/malynar"
+        variant="seminarButton"
+        sx={seminar === 'malynar' ? {color: 'white', backgroundColor: 'black'} : {}}
+      >
+        Malynár
+      </Link>
+      <Link
+        variant="seminarButton"
+        href="/matik"
+        sx={seminar === 'matik' ? {color: 'white', backgroundColor: 'black'} : {}}
+      >
+        Matik
+      </Link>
+      <Link
+        variant="seminarButton"
+        href="/strom"
+        sx={seminar === 'strom' ? {color: 'white', backgroundColor: 'black'} : {}}
+      >
+        Strom
+      </Link>
+    </>
+  )
+
   return (
     <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}}>
       <Grid container disableEqualOverflow spacing={1} p={3}>
@@ -38,34 +64,15 @@ export const TopGrid: FC = () => {
             <MenuMain />
           </Stack>
         </Grid>
-        <Grid xs={9}>
-          <Stack sx={{flexDirection: 'row', gap: 1, justifyContent: {xs: 'start', md: 'end'}}}>
-            <Link
-              href="/malynar"
-              variant="seminarButton"
-              sx={seminar === 'malynar' ? {color: 'white', backgroundColor: 'black'} : {}}
-            >
-              Malynár
-            </Link>
-            <Link
-              variant="seminarButton"
-              href="/matik"
-              sx={seminar === 'matik' ? {color: 'white', backgroundColor: 'black'} : {}}
-            >
-              Matik
-            </Link>
-            <Link
-              variant="seminarButton"
-              href="/strom"
-              sx={seminar === 'strom' ? {color: 'white', backgroundColor: 'black'} : {}}
-            >
-              Strom
-            </Link>
-          </Stack>
+        <Grid xs={0} md={9} sx={{display: {xs: 'none', md: 'block'}}}>
+          <Stack sx={{flexDirection: 'row', gap: 1, justifyContent: 'end'}}>{links}</Stack>
         </Grid>
-        <Grid xs={3} md={0} sx={{display: {xs: 'block', md: 'none'}}}>
-          <Stack sx={{alignItems: 'end'}}>
-            <MenuMain />
+        <Grid xs={12} md={0} sx={{display: {xs: 'block', md: 'none'}}}>
+          <Stack sx={{flexDirection: 'row', gap: 2, justifyContent: 'end'}}>
+            <Stack sx={{flexDirection: 'row', gap: 1}}>{links}</Stack>
+            <Stack>
+              <MenuMain />
+            </Stack>
           </Stack>
         </Grid>
 

From 0a21dc6f12d5b4913b8c3550e24297ed6b0d4ce6 Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 02:36:10 +0100
Subject: [PATCH 4/7] fix menu close button position - right side on mobile

---
 src/components/PageLayout/MenuMain/MenuMain.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index bd891cee..c0cb1a24 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -99,7 +99,11 @@ export const MenuMain: FC = () => {
         }}
       >
         <Box flexGrow={1}>
-          <CloseButton size={iconSize} onClick={toggleMenu} sx={{position: 'absolute', top: 24, left: 24}} />
+          <CloseButton
+            size={iconSize}
+            onClick={toggleMenu}
+            sx={{position: 'absolute', top: 24, left: {xs: undefined, md: 24}, right: {xs: 24, md: undefined}}}
+          />
           {menuItemsIsLoading && (
             <Box sx={{position: 'absolute', top: '50%', left: 0, right: 0, color: 'white'}}>
               <Loading />

From 278fa11aaba917baa1fda65412d019c595389b5e Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 11:36:03 +0100
Subject: [PATCH 5/7] fix menu button shrinking

---
 src/components/PageLayout/MenuMain/MenuMain.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index c0cb1a24..310f26dd 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -71,7 +71,7 @@ export const MenuMain: FC = () => {
     <>
       {!isVisible && (
         <Box
-          sx={{cursor: 'pointer', padding: 0.5, '&:hover': {color: 'white', background: 'black'}}}
+          sx={{cursor: 'pointer', padding: 0.5, flexShrink: 0, '&:hover': {color: 'white', background: 'black'}}}
           onClick={toggleMenu}
         >
           <Menu width={iconSize} height={iconSize} />

From cabd187cfab480a0758a24f3ef641e9212088ba2 Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 13:35:38 +0100
Subject: [PATCH 6/7] fix menu button shrinking + make SeminarButtons wrap

---
 .../PageLayout/MenuMain/MenuMain.tsx          |  2 +-
 src/components/PageLayout/TopGrid/TopGrid.tsx | 53 ++++++++++---------
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index 310f26dd..c0cb1a24 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -71,7 +71,7 @@ export const MenuMain: FC = () => {
     <>
       {!isVisible && (
         <Box
-          sx={{cursor: 'pointer', padding: 0.5, flexShrink: 0, '&:hover': {color: 'white', background: 'black'}}}
+          sx={{cursor: 'pointer', padding: 0.5, '&:hover': {color: 'white', background: 'black'}}}
           onClick={toggleMenu}
         >
           <Menu width={iconSize} height={iconSize} />
diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
index c0d11ad9..7c9d2b65 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.tsx
+++ b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -11,26 +11,12 @@ import {useSeminarInfo} from '@/utils/useSeminarInfo'
 import {Banner} from '../Banner/Banner'
 import {MenuMain} from '../MenuMain/MenuMain'
 
-export const TopGrid: FC = () => {
-  const {seminar} = useSeminarInfo()
-
-  // z napr. `/matik/zadania(/*)` vytiahne `zadania`
-  const pathname = useRouter().pathname.split('/')
-
-  const semesterPickerPage = useMemo(() => {
-    if (pathname[2] === 'zadania' || pathname[2] === 'vysledky') {
-      return pathname[2]
-    }
-    if (pathname[2] === 'admin' && pathname[3] === 'opravovanie') {
-      return 'admin/opravovanie'
-    }
-    return undefined
-  }, [pathname])
-
-  const {pageTitle} = PageTitleContainer.useContainer()
-
-  const links = (
-    <>
+type SeminarButtonsProps = {
+  seminar: string
+}
+const SeminarButtons: FC<SeminarButtonsProps> = ({seminar}) => {
+  return (
+    <Stack sx={{flexDirection: 'row', gap: 1, justifyContent: 'end', flexWrap: 'wrap'}}>
       <Link
         href="/malynar"
         variant="seminarButton"
@@ -52,8 +38,27 @@ export const TopGrid: FC = () => {
       >
         Strom
       </Link>
-    </>
+    </Stack>
   )
+}
+
+export const TopGrid: FC = () => {
+  const {seminar} = useSeminarInfo()
+
+  // z napr. `/matik/zadania(/*)` vytiahne `zadania`
+  const pathname = useRouter().pathname.split('/')
+
+  const semesterPickerPage = useMemo(() => {
+    if (pathname[2] === 'zadania' || pathname[2] === 'vysledky') {
+      return pathname[2]
+    }
+    if (pathname[2] === 'admin' && pathname[3] === 'opravovanie') {
+      return 'admin/opravovanie'
+    }
+    return undefined
+  }, [pathname])
+
+  const {pageTitle} = PageTitleContainer.useContainer()
 
   return (
     <Stack sx={{position: 'sticky', top: 0, width: '100%', backgroundColor: 'white', zIndex: 3}}>
@@ -65,12 +70,12 @@ export const TopGrid: FC = () => {
           </Stack>
         </Grid>
         <Grid xs={0} md={9} sx={{display: {xs: 'none', md: 'block'}}}>
-          <Stack sx={{flexDirection: 'row', gap: 1, justifyContent: 'end'}}>{links}</Stack>
+          <SeminarButtons seminar={seminar} />
         </Grid>
         <Grid xs={12} md={0} sx={{display: {xs: 'block', md: 'none'}}}>
           <Stack sx={{flexDirection: 'row', gap: 2, justifyContent: 'end'}}>
-            <Stack sx={{flexDirection: 'row', gap: 1}}>{links}</Stack>
-            <Stack>
+            <SeminarButtons seminar={seminar} />
+            <Stack sx={{flexShrink: 0}}>
               <MenuMain />
             </Stack>
           </Stack>

From 8b4471f0e7f380a552b465878561e39c634715fb Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Fri, 22 Nov 2024 13:42:37 +0100
Subject: [PATCH 7/7] SemesterPicker - align right also on wrap

---
 src/components/PageLayout/TopGrid/TopGrid.tsx    | 4 +---
 src/components/SemesterPicker/SemesterPicker.tsx | 4 +++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/PageLayout/TopGrid/TopGrid.tsx b/src/components/PageLayout/TopGrid/TopGrid.tsx
index 7c9d2b65..ffee3450 100644
--- a/src/components/PageLayout/TopGrid/TopGrid.tsx
+++ b/src/components/PageLayout/TopGrid/TopGrid.tsx
@@ -87,9 +87,7 @@ export const TopGrid: FC = () => {
         </Grid>
         {semesterPickerPage && (
           <Grid xs={12} md={3}>
-            <Stack sx={{alignItems: 'end'}}>
-              <SemesterPicker page={semesterPickerPage} />
-            </Stack>
+            <SemesterPicker page={semesterPickerPage} />
           </Grid>
         )}
       </Grid>
diff --git a/src/components/SemesterPicker/SemesterPicker.tsx b/src/components/SemesterPicker/SemesterPicker.tsx
index 9dc3f486..8a4e9b9e 100644
--- a/src/components/SemesterPicker/SemesterPicker.tsx
+++ b/src/components/SemesterPicker/SemesterPicker.tsx
@@ -75,10 +75,12 @@ export const SemesterPicker: FC<{page: 'zadania' | 'vysledky' | 'admin/opravovan
         flexDirection: 'row',
         alignItems: 'center',
         // wrap na velmi nizkych rozliseniach
-        flexWrap: 'wrap',
+        flexWrap: 'wrap-reverse',
         rowGap: 0.5,
         zIndex: 1000,
         userSelect: 'none',
+        // pre pouzitie v TopGrid + pri wrapnuti
+        justifyContent: 'end',
       }}
     >
       {page !== 'admin/opravovanie' && <Dropdown title={'Séria'} options={dropdownSeriesList} />}