feat: add top background image

src/Global.style.js

@@ -1,17 +1,28 @@
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, keyframes } from 'styled-components';
 import reset from 'styled-reset';
 import BodyBg from './assets/img/bg.texture.png';
+import BgTop from './assets/img/bg.top.png';
+const BgAnimate = keyframes`
+from{
+background-position:0 0,0 -30px;
+}
+to{
+background-position:0 0,0 0;
+
+}
+`;
 const GlobalStyle = createGlobalStyle`
   ${reset}
   *{
     box-sizing:border-box;
-    user-select:none;
+    /* user-select:none; */
     outline:none;
     -webkit-text-size-adjust: none;
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     color:#ffffeb;
     touch-action: manipulation;
   }
+
   span,p,i{
     color:inherit;
   }
@@ -27,9 +38,14 @@ const GlobalStyle = createGlobalStyle`
   body{
     -webkit-overflow-scrolling: touch;
     margin:0 auto;
-    background-image: url(${BodyBg});
+    background-image: url(${BodyBg}),url(${BgTop});
+    background-repeat:repeat,repeat-x;
+    background-position:0 0,0 -40px;
+    background-size:auto,auto 1.5rem;
     transition:background-color 1.6s;
     overflow:hidden;
+    animation: ${BgAnimate} .8s ease forwards;
+    animation-delay:2s;
   }
 
 

src/components/InfoModal.js

@@ -3,6 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 import GitHubButton from 'react-github-btn';
 import Logo from '../assets/img/logo.png';
+import BgImage from '../assets/img/bg.modal.png';
+import RewardImage from '../assets/img/reward.jpg';
 import BounceInDown from './animates/BounceInDown';
 
 const Wrapper = styled.section`
@@ -33,14 +35,22 @@ const Wrapper = styled.section`
     background-color: ${({ bgColor }) => {
       return bgColor;
     }};
+    background-image: url(${BgImage});
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    background-size: contain;
     text-align: center;
     transition: all 0.5s;
     animation: ${BounceInDown} 1s;
 
     > h1 {
-      margin-bottom: 1rem;
+      margin: 1rem;
       img {
         width: 4rem;
+        transition: all 0.8s;
+        &:hover {
+          transform: rotate(180deg);
+        }
       }
     }
     > h2 {
@@ -76,6 +86,10 @@ const Wrapper = styled.section`
         }
       }
     }
+    .reward {
+      width: 13rem;
+      border-radius: 0.4rem;
+    }
   }
 `;
 export default function InfoModal({ closeModal, bgColor }) {
@@ -89,22 +103,8 @@ export default function InfoModal({ closeModal, bgColor }) {
           <img className="logo" src={Logo} alt="logo" />
         </h1>
         <h2>chinese colors</h2>
-        <p>
-          <span>
-            Inspired by
-            <a href="http://nipponcolors.com" target="_blank">
-              Nipponcolors
-            </a>
-          </span>
-        </p>
-        <p>
-          <span>
-            数据来源：
-            <a href="http://blog.sina.com.cn/s/blog_5c3b139d0101deia.html" target="_blank">
-              新浪博客：中国传统颜色卡
-            </a>
-          </span>
-        </p>
+
+        <img className="reward" src={RewardImage} alt="reward image" />
 
         {process.env.NODE_ENV === 'production' && (
           <>
@@ -136,6 +136,22 @@ export default function InfoModal({ closeModal, bgColor }) {
             </p>
           </>
         )}
+        <p>
+          <span>
+            Inspired by
+            <a href="http://nipponcolors.com" target="_blank">
+              Nipponcolors
+            </a>
+          </span>
+        </p>
+        <p>
+          <span>
+            数据来源：
+            <a href="http://blog.sina.com.cn/s/blog_5c3b139d0101deia.html" target="_blank">
+              新浪博客：中国传统颜色卡
+            </a>
+          </span>
+        </p>
         <p>
           <span>
             Copyright © 2019 by

src/components/Preview/Poetry.js

@@ -15,6 +15,7 @@ const Wrapper = styled.article`
   align-items: flex-start;
   background: ${({ bgRgb }) => `rgba(${bgRgb.join(',')},.5)`};
   padding: 0.8rem 1.2rem;
+
   .line {
     font-size: 1.6rem;
     font-weight: bold;

src/components/Preview/Toggle.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   position: absolute;
-  right: 0.5rem;
+  right: 0.8rem;
   top: 3.6rem;
   width: 32px;
 

src/hooks.js

@@ -122,9 +122,9 @@ const useShareColor = (id = null) => {
   return { set: tmpSet, color: tmpColor };
 };
 const useColor = () => {
-  const SelectedColorSet = JSON.parse(localStorage.getItem('SELECTED_COLOR_SET')) || Colors[0];
+  const SelectedColorSet = JSON.parse(localStorage.getItem('SELECTED_COLOR_SET')) || Colors[4];
   const SelectedColor =
-    JSON.parse(localStorage.getItem('SELECTED_COLOR')) || SelectedColorSet.colors[9];
+    JSON.parse(localStorage.getItem('SELECTED_COLOR')) || SelectedColorSet.colors[0];
   const initialValue = {
     sets: Colors.map(set => {
       const newSet = { ...set };