feat: implement mobile view on not found, ready state

IT-Cotato · Aug 19, 2024 · 69e297a · 69e297a
1 parent cc0fa22
commit 69e297a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ReactComponent as BittenPotato } from '@assets/potato_bitten.svg';
+import { media } from '@theme/media';
 
 const NotFound = () => {
   return (
@@ -52,13 +53,31 @@ const Wrapper = styled.div`
     border: 4px solid ${({ theme }) => theme.colors.primary100_1};
     z-index: 100;
   }
+
+  ${media.landscape`
+    h1 {
+      font-size: 20px;
+    }
+
+    button {
+      padding: 12px 28px;
+      margin-top: 20px;
+      font-size: 16px;
+      border-radius: 80px;
+    }
+  `}
 `;
 
 const StyledBittenPotato = styled(BittenPotato)`
   z-index: 100;
   width: 180px;
   height: 140px;
   margin-bottom: 16px;
+
+  ${media.landscape`
+    width: 140px;
+    height: 120px;
+  `}
 `;
 
 export default NotFound;
diff --git a/src/components/ReadyState.tsx b/src/components/ReadyState.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ReactComponent as WorkingPotato } from '@assets/potato_working.svg';
+import { media } from '@theme/media';
 
 const ReadyState = () => {
   return (
@@ -47,12 +48,30 @@ const Wrapper = styled.div`
     cursor: pointer;
     border: 4px solid ${({ theme }) => theme.colors.primary100_1};
   }
+
+  ${media.landscape`
+    h1 {
+      font-size: 20px;
+    }
+
+    button {
+      padding: 12px 28px;
+      margin-top: 20px;
+      font-size: 16px;
+      border-radius: 80px;
+    }
+  `}
 `;
 
 const StyledWorkingPotato = styled(WorkingPotato)`
   width: 180px;
   height: 140px;
   margin-bottom: 16px;
+
+  ${media.landscape`
+    width: 140px;
+    height: 120px;
+  `}
 `;
 
 export default ReadyState;