Merge pull request #56 from somangoi/release/v1.1.4

Release/v1.1.4
somangoi · Nov 10, 2022 · 49ccd2d · 49ccd2d
2 parents 6e88079 + 63bce30
commit 49ccd2d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/src/components/FloatingText.tsx b/src/components/FloatingText.tsx
@@ -7,6 +7,7 @@ import {
   Fade,
   ThemeProvider,
   Typography,
+  useMediaQuery,
 } from '@mui/material';
 
 type Props = {
@@ -35,11 +36,13 @@ function FloatingText(props: Props) {
   } = props;
   const [visible, setVisible] = useState<boolean>(false);
   const { scrollY } = useScroll();
+  const isMobile = useMediaQuery('(max-width: 600px)');
 
   const theme = createTheme({
     typography: {
       h1: {
-        fontSize: fontSize,
+        fontFamily: 'inherit',
+        fontSize: !isMobile ? fontSize : `calc(${fontSize} * 0.8)`,
         color: fontColor,
         fontWeight: fontWeight,
         wordBreak: 'keep-all',
@@ -59,22 +62,30 @@ function FloatingText(props: Props) {
     <Fade in={visible}>
       <Wrapper top={top} left={left} centerAlign={centerAlign ? true : false}>
         <ThemeProvider theme={theme}>
-          <Typography variant="h1">{text}</Typography>
+          <TypographyComponent variant="h1">{text}</TypographyComponent>
         </ThemeProvider>
       </Wrapper>
     </Fade>
   );
 }
 
 const Wrapper = styled.div<{ top: string; left: string; centerAlign: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
   position: fixed;
   top: ${({ top }) => top};
-  left: ${({ left }) => left};
+  /* left: ${({ left }) => left}; */
   transform: translate(
     ${({ centerAlign }) => (centerAlign ? '-50%' : '0')},
     ${({ centerAlign }) => (centerAlign ? '-50%' : '0')}
   );
   z-index: 999;
 `;
 
+const TypographyComponent = styled(Typography)`
+  max-width: 600px;
+  width: 80vw;
+`;
 export default FloatingText;
diff --git a/src/pages/Period.tsx b/src/pages/Period.tsx
@@ -197,17 +197,6 @@ function Period({ chapter }: PeriodProps) {
       top: '6rem',
       left: '15%',
     },
-    {
-      id: 'title2-3',
-      text: t('Chapter2-3Title'),
-      fontSize: '2rem',
-      fontColor: 'white',
-      fontWeight: 600,
-      start: 17500,
-      end: 20000,
-      top: '6rem',
-      left: '15%',
-    },
     {
       id: 'title2-4',
       text: t('Chapter2-4Title'),

diff --git a/src/pages/PeriodFAQ.tsx b/src/pages/PeriodFAQ.tsx
@@ -10,12 +10,13 @@ type Props = {
 };
 
 const PeriodFAQ = (props: Props) => {
-  const { t } = useTranslation('PeriodFAQ');
+  const { t } = useTranslation(['PeriodFAQ', 'Period']);
   return (
     <PeriodFAQContainer
       virtualHeight={props.virtualHeight}
       currentScene={props.currentScene}
     >
+      <ComponentTitle>{t('Chapter2-3Title', { ns: 'Period' })}</ComponentTitle>
       <ToggleList title={t('1-1')} content={t('1-2')} />
       <ToggleList title={t('2-1')} content={t('2-2')} />
       <ToggleList title={t('3-1')} content={t('3-2')} />
@@ -33,12 +34,20 @@ const PeriodFAQContainer = styled.div<{
   height: ${({ virtualHeight }) => `${virtualHeight}px`};
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   padding-top: 50rem;
   position: sticky;
   z-index: 999;
   max-width: 600px;
   width: 100%;
 `;
 
+const ComponentTitle = styled.h1`
+  font-size: 2rem;
+  margin-bottom: 3rem;
+
+  @media (max-width: 600px) {
+    font-size: 1.6rem;
+  }
+`;
 export default PeriodFAQ;
diff --git a/src/version.json b/src/version.json
@@ -1,3 +1,3 @@
 {
-  "version": "1.1.3"
+  "version": "1.1.4"
 }