zhangyuheng/chinese-colors
1
0
Fork 0
forked from mirror/chinese-colors
Code Pull Requests Activity

refactor: update UI

Browse Source
This commit is contained in:
Tristan 2019-09-21 11:10:30 +08:00
parent 8d97d24638
commit fff1ee7ffd
4 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -107,7 +107,7 @@ const App = () => {
document.body.style.backgroundColor = currColor.hex;
}, [currColor]);
return (
<Suspense fallback={<Loading color="#392f41" size="4" sizeUnit="rem" />}>
<Suspense fallback={<Loading color="rgba(57, 47, 65, 0.8)" size="4" sizeUnit="rem" />}>
<Wrapper>
<aside className="colorSet">
<ColorSet sets={sets} currSetName={currSet.name} setCurrSet={updateCurrSet} />

2
src/components/CirclePercent.js
View File

@ -9,7 +9,7 @@ const Wrapper = styled.div`
background: transparent;
`;
const CirclePercent = ({ progress = 10, color = 'rgba(50,50,50,.96)' }) => {
const CirclePercent = ({ progress = 10, color = 'rgba(102, 87, 87, 0.96)' }) => {
return (
<Wrapper>
<Circle progress={progress} color={color} type="percent" />

7
src/components/CircleProgress.js
View File

@ -29,8 +29,11 @@ const Wrapper = styled.div`
&.percent .circular-chart {
min-width: unset;
overflow: unset;
.circle-bg {
stroke: none;
}
.circle {
stroke-width: 10;
stroke-width: 8;
stroke-linecap: butt;
}
}
@ -55,7 +58,7 @@ const Circle = ({ progress = 10, color = '#333', type = '' }) => {
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
{type !== 'percent' && (
<text x="18" y="20.35" style={{ fill: color }} className="percentage">
<text x="18" y="22" style={{ fill: color }} className="percentage">
{progress}
</text>
)}

6
src/components/Loading.js
View File

@ -1,5 +1,7 @@
import React from 'react';
import styled, { keyframes } from 'styled-components';
import Logo from '../assets/img/logo.png';
const rotate = keyframes`
0% {
transform: rotate(0deg);
@ -69,6 +71,9 @@ const Wrapper = styled.div`
width: 100vw;
height: 100vh;
animation: ${rotate} 3s infinite ease-in;
> img {
width: 2rem;
}
`;
const Ball = styled.div`
@ -98,6 +103,7 @@ const Loading = ({ size = 40, color = '#fff', sizeUnit = 'px' }) => {
const angle = 360 / countBalls;
return (
<Wrapper size={size} sizeUnit={sizeUnit}>
<img src={Logo} alt="loading logo" />
{getBalls({
countBalls,
radius,