diff --git a/package.json b/package.json index 9af8c5a..87842f6 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-copy-to-clipboard": "^5.1.0", "react-dom": "^18.2.0", "react-github-btn": "^1.4.0", + "react-icons": "^5.0.0", "react-router-dom": "^6.21.1", "smooth-scroll-into-view-if-needed": "^2.0.2", "styled-components": "^6.1.2", diff --git a/src/components/Bgm.jsx b/src/components/Bgm.jsx index 2d95cf0..959ba62 100644 --- a/src/components/Bgm.jsx +++ b/src/components/Bgm.jsx @@ -1,4 +1,5 @@ import React, { useState, useRef } from 'react'; +import { TfiHeadphone } from 'react-icons/tfi'; import styled, { keyframes } from 'styled-components'; const Rotation = keyframes` from { @@ -16,7 +17,7 @@ const Swing = keyframes` transform: translateX(0); } `; -const StyledWraper = styled.aside` +const StyledWrapper = styled.aside` position: fixed; left: 0.4rem; bottom: 0.4rem; @@ -25,6 +26,7 @@ const StyledWraper = styled.aside` border-radius: 50%; cursor: pointer; background: #fff; + color: #333; padding: 0.3rem; box-shadow: 0 0 6px black; display: flex; @@ -76,23 +78,8 @@ export default function Bgm() { }; return ( - - - - + + {!played &&
👈 点击播放
} - + ); } diff --git a/src/components/ColorSet/IconCollection.jsx b/src/components/ColorSet/IconCollection.jsx index d544753..f0417c2 100644 --- a/src/components/ColorSet/IconCollection.jsx +++ b/src/components/ColorSet/IconCollection.jsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { BiCollection } from 'react-icons/bi'; import styled from 'styled-components'; import ChineseBorder from '../../assets/img/chinese.circle.border.png'; @@ -47,22 +48,7 @@ const IconCollection = ({ showCollection, ...rest }) => { {showTip &&

暂无收藏

} - - - + ); }; diff --git a/src/components/ColorSet/index.jsx b/src/components/ColorSet/index.jsx index 96bb25b..2ad8ec6 100644 --- a/src/components/ColorSet/index.jsx +++ b/src/components/ColorSet/index.jsx @@ -1,8 +1,7 @@ import React, { useState } from 'react'; - +import { GiYinYang } from 'react-icons/gi'; import styled from 'styled-components'; import IconCollection from './IconCollection'; -import Yinyang from '../../assets/img/yinyang.svg'; const Wrapper = styled.div` ul { @@ -39,14 +38,13 @@ const Wrapper = styled.div` right: -1.6rem; top: 50%; transform: translateY(-50%); - background-image: url(${Yinyang}); - background-size: cover; width: 3rem; height: 3rem; - border: 1px solid #000; border-radius: 50%; + border: none; transition: all 0.6s; - box-shadow: 1px -1px 6px black; + /* box-shadow: 1px -1px 6px black; */ + padding: 0; } &.expand .btn { transform: translateY(-50%) rotateZ(180deg); @@ -56,14 +54,14 @@ const Wrapper = styled.div` const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => { const [isHover, setIsHover] = useState(false); - const handleSetClick = name => { + const handleSetClick = (name) => { console.log('clicked set name', name); setCurrSet(name); }; const handleSetHover = () => { - setIsHover(prev => !prev); + setIsHover((prev) => !prev); }; return ( @@ -80,7 +78,7 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => { onClick={handleSetClick.bind(null, name)} key={name} style={{ - background: `rgba(${RGB.join(',')})` + background: `rgba(${RGB.join(',')})`, }} className={name == currSetName ? 'selected' : ''} > @@ -91,7 +89,9 @@ const ColorSet = ({ currSetName = '', setCurrSet, sets = [] }) => { return null; })} - + ); }; diff --git a/src/components/ColorTitle/IconCopy.jsx b/src/components/ColorTitle/IconCopy.jsx index a9ac92a..89f6be5 100644 --- a/src/components/ColorTitle/IconCopy.jsx +++ b/src/components/ColorTitle/IconCopy.jsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; +import { IoCopyOutline } from 'react-icons/io5'; import { CopyToClipboard } from 'react-copy-to-clipboard'; // import FadeInDown from '../animates/FadeInDown'; const Wrapper = styled.div` @@ -10,6 +11,7 @@ const Wrapper = styled.div` position: relative; .icon { width: 1.4rem; + margin-top: 4px; } > .hex { font-size: 0.6rem; @@ -17,6 +19,7 @@ const Wrapper = styled.div` background: rgba(51, 51, 51, 0.5); border-radius: 0.2rem; text-transform: uppercase; + margin-top: 5px; } .copyTip { position: absolute; @@ -46,29 +49,9 @@ const IconFav = ({ currColorHex }) => { }} > - - - - + {currColorHex} - {copied ? 已复制! : null} + {copied ? 已复制！ : null} ); diff --git a/src/components/ColorTitle/IconDownload.jsx b/src/components/ColorTitle/IconDownload.jsx index 2cdced0..1be0d8a 100644 --- a/src/components/ColorTitle/IconDownload.jsx +++ b/src/components/ColorTitle/IconDownload.jsx @@ -1,5 +1,5 @@ // import React from 'react'; - +import { MdDownload } from 'react-icons/md'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -20,27 +20,7 @@ const Wrapper = styled.div` const IconDownload = ({ handleDownload }) => { return ( - - - - + ); }; diff --git a/src/components/ColorTitle/IconFav.jsx b/src/components/ColorTitle/IconFav.jsx index c42e8a0..20e91c9 100644 --- a/src/components/ColorTitle/IconFav.jsx +++ b/src/components/ColorTitle/IconFav.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; +import { IoMdHeart } from 'react-icons/io'; const Wrapper = styled.div` position: absolute; @@ -48,22 +49,7 @@ const IconFav = ({ currColor }) => { }; return ( - - - + ); }; diff --git a/src/components/IconBack.jsx b/src/components/IconBack.jsx index 8a0c1d3..6fa5eb4 100644 --- a/src/components/IconBack.jsx +++ b/src/components/IconBack.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; - +import { IoArrowBackCircleOutline } from 'react-icons/io5'; import Icon from './Icon'; const IconBack = () => { @@ -10,30 +10,7 @@ const IconBack = () => { handleClick={() => { navigateTo('/'); }} - icon={ - - - - - } + icon={} > ); }; diff --git a/src/components/IconImage.jsx b/src/components/IconImage.jsx index 7243272..4183411 100644 --- a/src/components/IconImage.jsx +++ b/src/components/IconImage.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import Icon from './Icon'; +import { GoImage } from 'react-icons/go'; const IconImage = ({ path = '' }) => { const navigateTo = useNavigate(); @@ -10,29 +11,7 @@ const IconImage = ({ path = '' }) => { handleClick={() => { navigateTo(path); }} - icon={ - - - - - } + icon={} > ); }; diff --git a/src/components/IconInfo.jsx b/src/components/IconInfo.jsx index 85f8c23..0dd9888 100644 --- a/src/components/IconInfo.jsx +++ b/src/components/IconInfo.jsx @@ -1,35 +1,8 @@ -import React from 'react'; import Icon from './Icon'; +import { GoInfo } from 'react-icons/go'; const IconInfo = ({ showInfoModal }) => { - return ( - - - - - } - > - ); + return }>; }; export default IconInfo; diff --git a/src/components/IconScreenshot.jsx b/src/components/IconScreenshot.jsx index 2a52cf7..0507711 100644 --- a/src/components/IconScreenshot.jsx +++ b/src/components/IconScreenshot.jsx @@ -1,35 +1,8 @@ -import React from 'react'; +import { MdOutlineCloudDownload } from 'react-icons/md'; import Icon from './Icon'; const IconInfo = ({ showPreview }) => { - return ( - - - - - } - > - ); + return }>; }; export default IconInfo; diff --git a/src/components/IconTwitter.jsx b/src/components/IconTwitter.jsx new file mode 100644 index 0000000..cb9a557 --- /dev/null +++ b/src/components/IconTwitter.jsx @@ -0,0 +1,18 @@ +import { FaXTwitter } from 'react-icons/fa6'; +import styled from 'styled-components'; + +const StyledWrapper = styled.a` + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 0.8rem; +`; +const IconTwitter = () => { + return ( + + + + ); +}; + +export default IconTwitter; diff --git a/src/components/Preview/IconClose.jsx b/src/components/Preview/IconClose.jsx index 5ad4d7d..567d17c 100644 --- a/src/components/Preview/IconClose.jsx +++ b/src/components/Preview/IconClose.jsx @@ -1,35 +1,8 @@ -import React from 'react'; +import { IoMdCloseCircleOutline } from 'react-icons/io'; import Icon from '../Icon'; const IconClose = ({ closePreview }) => { - return ( - - - - - } - /> - ); + return } />; }; export default IconClose; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 2b89611..1dc1a8b 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -9,6 +9,7 @@ const IconInfo = lazy(() => import('../components/IconInfo')); const IconImage = lazy(() => import('../components/IconImage')); const Header = lazy(() => import('../components/Header')); const IconScreenshot = lazy(() => import('../components/IconScreenshot')); +const IconTwitter = lazy(() => import('../components/IconTwitter')); const ColorSet = lazy(() => import('../components/ColorSet')); const ICP = lazy(() => import('../components/ICP')); const Preview = lazy(() => import('../components/Preview')); @@ -91,6 +92,7 @@ const Index = () => { + {preview && ( diff --git a/yarn.lock b/yarn.lock index 8df578f..783be00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,6 +2606,11 @@ react-github-btn@^1.4.0: dependencies: github-buttons "^2.22.0" +react-icons@^5.0.0: + version "5.0.0" + resolved "https://registry.npmmirror.com/react-icons/-/react-icons-5.0.0.tgz#3a860fac02787984e4c11d9d05bec53226de0dc9" + integrity sha512-8gBBjYRrO14BU9RuMEVptG5aB1gwNPAAgsKOuPggx2hg332pTky/r8FidEJW95cL6IG2mYCEHaYuAxw74wLefw== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"