add styling

gegyhamdani · Mar 20, 2020 · 0bae434 · 0bae434 · vercel · Mar 20, 2020
1 parent acec48b
commit 0bae434
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
@@ -19,7 +19,7 @@ const Layout = ({ confirmed, recovered, death, updated }) => {
     <Main>
       <Container>
         <Square1>
-          <Date style={{ fontSize: "1.2em" }}>{updated}</Date>
+          <Date style={{ fontSize: "1.1em" }}>Update Terakhir: {updated}</Date>
           <Title>Data Terbaru Corona di Indonesia</Title>
           <Information>
             <Data>

diff --git a/src/components/Layout/styles.js b/src/components/Layout/styles.js
@@ -1,8 +1,20 @@
 import styled, { keyframes } from "styled-components";
 
+const opacityFrame = keyframes`
+  from {
+    opacity: 0
+  }
+
+  to {
+    opacity: 1
+  }
+`;
+
 export const Main = styled.div`
+  animation: ${opacityFrame} 2s linear forwards;
   background-color: #ffd300;
   left: 0;
+  opacity: 0;
   position: fixed;
   top: 0;
   width: 100vw;