feat: add yinyang background image

src/assets/img/yinyang.svg

@@ -0,0 +1,10 @@
+<svg id="yinyang" 
+  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129">
+  <defs>
+    <style>.cls-1,.cls-3{fill:#fff;}.cls-1{stroke:#fff;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;}.cls-2,.cls-3{stroke:#000;}</style>
+  </defs>
+  <path id="right-circle" class="cls-1" d="M302,240a32,32,0,0,1,0-64,64,64,0,0,1,0,128,32,32,0,0,0,0-64Z" transform="translate(-237.5 -175.5)" />
+  <circle id="right-dot" class="cls-2" cx="64.29" cy="31.86" r="11.5" />
+  <path id="left-circle" class="cls-2" d="M302,176a64,64,0,0,0,0,128,32,32,0,0,0,0-64,32,32,0,0,1,0-64Z" transform="translate(-237.5 -175.5)" />
+  <circle id="left-dot" class="cls-3" cx="64.29" cy="95.86" r="11.5" />
+</svg>

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;

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>
   );
 };

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 }) {