apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

single report page and mobile avatar fix

Browse Source
This commit is contained in:
kurpfish
2021-09-28 12:46:16 +03:00
parent 69924802ba
commit 2bc1fb3570
10 changed files with 339 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/TaskItem/TaskItem.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import './taskItem.scss'
export const TaskItem = ({ index, text, hours }) => {
return (
<div className='task-item'>
<div className='task-item__index'>{index}.</div>
<div className='task-item__text'>{text}</div>
<div className='task-item__hours'>
<div className='task-item__hours-value'>{hours}</div>
<div className='task-item__hours-text'>Количество часов</div>
</div>
</div>
)
}

72
src/components/TaskItem/taskItem.scss Normal file
View File

@ -0,0 +1,72 @@
.task-item {
display: flex;
justify-content: flex-start;
align-items: center;
&__index {
margin-top: 0.2rem;
color: #282828;
font-family: 'GT Eesti Pro Display';
font-size: 20px;
font-weight: 700;
line-height: 48.74px;
text-align: left;
letter-spacing: 0.34px;
}
&__text {
min-width: 525px;
max-width: 525px;
margin-left: 1.6rem;
color: #000000;
font-family: 'GT Eesti Pro Display';
font-size: 15px;
font-weight: 400;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
&__hours {
margin-left: 3.3rem;
display: flex;
&-value {
width: 34px;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
border-radius: 50%;
background-color: #ffffff;
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
linear-gradient(
36deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.16) 47%,
rgba(255, 255, 255, 0.17) 50%,
rgba(255, 255, 255, 0) 100%
);
color: #ffffff;
font-family: 'Muller Extra Bold';
font-size: 16px;
font-weight: 400;
text-align: left;
letter-spacing: 0.8px;
}
&-text {
margin-left: 1rem;
width: 69px;
height: 25px;
color: #000000;
font-family: 'GT Eesti Pro Display - Thin';
font-size: 13px;
font-weight: 400;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
}
}