feat: add yinyang background image

Yourrrrlove · Oct 24, 2019 · 8a96949 · 8a96949
1 parent bec67ca
commit 8a96949
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/src/assets/img/chinese.circle.border.png b/src/assets/img/chinese.circle.border.png
diff --git a/src/assets/img/yinyang.svg b/src/assets/img/yinyang.svg
diff --git a/src/components/ColorSet/IconCollection.js b/src/components/ColorSet/IconCollection.js
@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import ChineseBorder from '../../assets/img/chinese.circle.border.png';
 
 const Wrapper = styled.li`
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: #ef7a82;
+  background-color: #ef7a82;
+  background-image: url(${ChineseBorder});
+  background-size: cover;
   position: relative;
   .icon {
     width: 1.4rem;

diff --git a/src/components/ColorSet/index.js b/src/components/ColorSet/index.js
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 
 import styled from 'styled-components';
 import IconCollection from './IconCollection';
+import Yinyang from '../../assets/img/yinyang.svg';
+
 const Wrapper = styled.div`
   ul {
     display: flex;
@@ -37,15 +39,12 @@ const Wrapper = styled.div`
     right: -1.6rem;
     top: 50%;
     transform: translateY(-50%);
+    background-image: url(${Yinyang});
+    background-size: cover;
     width: 3rem;
     height: 3rem;
-    background: #333;
-    border: none;
+    border: 1px solid #000;
     border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 1.2rem;
     transition: all 0.6s;
     box-shadow: 1px -1px 6px black;
   }
@@ -92,9 +91,7 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => {
           return null;
         })}
       </ul>
-      <button onClick={handleSetHover} className="btn">
-        巜
-      </button>
+      <button onClick={handleSetHover} className="btn"></button>
     </Wrapper>
   );
 };

diff --git a/src/components/Preview/Toggle.js b/src/components/Preview/Toggle.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-
+import Yinyang from '../../assets/img/yinyang.svg';
 const Wrapper = styled.div`
   position: absolute;
   right: 0.8rem;
@@ -27,7 +27,9 @@ const Wrapper = styled.div`
     display: block;
     width: 16px;
     margin: 0;
-    background: #ffffff;
+    background-color: #fff;
+    background-image: url(${Yinyang});
+    background-size: cover;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -45,6 +47,7 @@ const Wrapper = styled.div`
   }
   .onoffswitch-checkbox:checked + .onoffswitch-label:before {
     right: 0;
+    transform: rotate(180deg);
   }
 `;
 export default function Toggle({ checkVal = true, togglePoetry }) {