From 832a7ae058116975194e3c610f5c040cc943d341 Mon Sep 17 00:00:00 2001
From: primakov <primakovpro@gmail.com>
Date: Tue, 29 Nov 2022 22:58:30 +0300
Subject: [PATCH] keyboard reveal + adaptive fix

---
 src/components/keyboard.style.ts | 12 +++++++++++-
 src/pages/style.ts               |  8 +++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/keyboard.style.ts b/src/components/keyboard.style.ts
index a476ce4..21c127d 100644
--- a/src/components/keyboard.style.ts
+++ b/src/components/keyboard.style.ts
@@ -1,6 +1,15 @@
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
 
+const reveal = keyframes`
+    from {
+        bottom: -600px;
+    }
+    to {
+        bottom: 0;
+    }
+`;
+
 export const Wrapper = styled.div`
     position: absolute;
     bottom: 0;
@@ -12,6 +21,8 @@ export const Wrapper = styled.div`
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    animation: ${reveal} .5s;
+    animation-timing-function: cubic-bezier(0, 0.65, 0.25, 1);
 `;
 
 export const KeyRow = styled.div`
@@ -20,7 +31,6 @@ export const KeyRow = styled.div`
 
 export const BackspaceBtn = styled.img`
     width: 60%;
-    /* height: 8px; */
 `;
 
 export const Key = styled.button`
diff --git a/src/pages/style.ts b/src/pages/style.ts
index 2a2239d..e77a0a0 100644
--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@@ -291,7 +291,13 @@ export const FullScreenButton = styled.button`
 export const InputHolder = styled.div`
     background-color: rgba(0, 0, 0, .0);
     width: calc(100% - 70px);
-    height: 100%;
+    height: 60px;
     right: 70px;
+    top: 12px;
+    left: 12px;
     position: absolute;
+
+    @media screen and (max-width: 600px) {
+        width: 100%;
+    }
 `;