feat: improve svg components and about view styling (#336)
issue #334 issue #335
This commit is contained in:
GitHub
@@ -1,4 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
ReferrerUrl=https://www.iconfinder.com/search?q=user+&price=free
|
||||
HostUrl=https://www.iconfinder.com/icons/285645/download/png/64
|
||||
@@ -0,0 +1,12 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.8" x="0.5" y="0.5" width="43" height="43" rx="7.5" stroke="#C3D4E9"/>
|
||||
<path d="M18 12V15" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M26 12V15" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.5 19.09H30.5" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M32 29C32 29.75 31.79 30.46 31.42 31.06C30.73 32.22 29.46 33 28 33C26.99 33 26.07 32.63 25.37 32C25.06 31.74 24.79 31.42 24.58 31.06C24.21 30.46 24 29.75 24 29C24 26.79 25.79 25 28 25C29.2 25 30.27 25.53 31 26.36C31.62 27.07 32 27.99 32 29Z" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M26.44 29L27.43 29.99L29.56 28.02" stroke="#222222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M31 18.5V26.36C30.27 25.53 29.2 25 28 25C25.79 25 24 26.79 24 29C24 29.75 24.21 30.46 24.58 31.06C24.79 31.42 25.06 31.74 25.37 32H18C14.5 32 13 30 13 27V18.5C13 15.5 14.5 13.5 18 13.5H26C29.5 13.5 31 15.5 31 18.5Z" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21.9955 23.7H22.0045" stroke="#222222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.2943 23.7H18.3033" stroke="#222222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18.2943 26.7H18.3033" stroke="#222222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.8" x="0.5" y="0.5" width="43" height="43" rx="7.5" fill="white" stroke="#C3D4E9"/>
|
||||
<path d="M15.9 27H28.09C29.99 27 30.99 26 30.99 24.1V12H12.99V24.1C13 26 14 27 15.9 27Z" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 12H32" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 32L22 30V27" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M26 32L22 30" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.5 21L20.65 18.37C20.9 18.16 21.23 18.22 21.4 18.5L22.6 20.5C22.77 20.78 23.1 20.83 23.35 20.63L26.5 18" stroke="#222222" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
@@ -0,0 +1,8 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="8" fill="white" fill-opacity="0.2"/>
|
||||
<path d="M18 14H22C24 14 24 13 24 12C24 10 23 10 22 10H18C17 10 16 10 16 12C16 14 17 14 18 14Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M22 30H17C12 30 11 28 11 24V18C11 13.44 12.67 12.2 16 12.02" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24 12.02C27.33 12.2 29 13.43 29 18V23" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M23 27V24H26" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M29 30L23.04 24.04" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 970 B |
@@ -0,0 +1,6 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="8" fill="white" fill-opacity="0.2"/>
|
||||
<path d="M17.31 22.7L18.81 24.2L22.81 20.2" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 14H22C24 14 24 13 24 12C24 10 23 10 22 10H18C17 10 16 10 16 12C16 14 17 14 18 14Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24 12.02C27.33 12.2 29 13.43 29 18V24C29 28 28 30 23 30H17C12 30 11 28 11 24V18C11 13.44 12.67 12.2 16 12.02" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 728 B |
@@ -0,0 +1,7 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="40" height="40" rx="8" fill="white" fill-opacity="0.2"/>
|
||||
<path d="M16 20.2H23" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 24.2H20.38" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M18 14H22C24 14 24 13 24 12C24 10 23 10 22 10H18C17 10 16 10 16 12C16 14 17 14 18 14Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M24 12.02C27.33 12.2 29 13.43 29 18V24C29 28 28 30 23 30H17C12 30 11 28 11 24V18C11 13.44 12.67 12.2 16 12.02" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 860 B |
@@ -4,6 +4,7 @@ import { AxisOptions, Chart } from 'react-charts';
|
||||
import { TasksChartResponse } from '../../types/TasksChartResponse';
|
||||
import api from '../../api-service/api';
|
||||
import ApiConfig from '../../api-service/apiConfig';
|
||||
import ChartIcon from '../../assets/chart-icon.svg';
|
||||
import './style.css';
|
||||
|
||||
type Series = {
|
||||
@@ -47,17 +48,10 @@ function CompletedTasks(): React.ReactNode {
|
||||
return (
|
||||
<div className="completed-tasks">
|
||||
<Row>
|
||||
<Col xs={2}>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.8" x="0.5" y="0.5" width="43" height="43" rx="7.5" fill="white" stroke="#C3D4E9" />
|
||||
<path d="M15.9 27H28.09C29.99 27 30.99 26 30.99 24.1V12H12.99V24.1C13 26 14 27 15.9 27Z" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12 12H32" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18 32L22 30V27" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M26 32L22 30" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17.5 21L20.65 18.37C20.9 18.16 21.23 18.22 21.4 18.5L22.6 20.5C22.77 20.78 23.1 20.83 23.35 20.63L26.5 18" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<Col xs={1} sm={2} md={1}>
|
||||
<img src={ChartIcon} alt="Chart Icon" />
|
||||
</Col>
|
||||
<Col xs={10}>
|
||||
<Col xs={11} sm={10} md={11}>
|
||||
<div className="plus-jakarta-sans-semibold title">Completed Tasks</div>
|
||||
<span className="plus-jakarta-sans-regular description">Summary from the last 7 days</span>
|
||||
</Col>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import AuthContext from '../../context/AuthContext';
|
||||
import UserIcon from '../../assets/user.png';
|
||||
import NavButton from '../NavButton';
|
||||
import SidebarIcon from '../SidebarIcon';
|
||||
import { env } from '../../env';
|
||||
import './style.css';
|
||||
|
||||
@@ -28,19 +29,6 @@ function Sidebar(): React.ReactNode {
|
||||
signOut();
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the color for the selected navigation link.
|
||||
*
|
||||
* @param {string} path - The path of the navigation link.
|
||||
* @returns {string} The color for the selected navigation link.
|
||||
*/
|
||||
const getSelectedColor = (path: string): string => {
|
||||
if (path === current) {
|
||||
return '#4CD964';
|
||||
}
|
||||
return '#6A8996';
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles the navigation link click event.
|
||||
*
|
||||
@@ -66,30 +54,28 @@ function Sidebar(): React.ReactNode {
|
||||
<Nav className="flex-column p-3 plus-jakarta-sans-thin">
|
||||
<NavLink to="/home" className="mb-2" onClick={() => navLinkClicked('/home')}>
|
||||
<div className={`sidebar-nav ${current === '/home' ? 'selected' : ''}`}>
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.4" d="M14.056 0.966675H17.4373C18.8376 0.966675 19.9723 2.23093 19.9723 3.79117V7.55857C19.9723 9.1188 18.8376 10.3831 17.4373 10.3831H14.056C12.6557 10.3831 11.521 9.1188 11.521 7.55857V3.79117C11.521 2.23093 12.6557 0.966675 14.056 0.966675Z" fill={getSelectedColor('/home')} />
|
||||
<path d="M5.91626 13.617C7.31658 13.617 8.45126 14.8812 8.45126 16.4414V20.2088C8.45126 21.768 7.31658 23.0333 5.91626 23.0333H2.535C1.13468 23.0333 0 21.768 0 20.2088V16.4414C0 14.8812 1.13468 13.617 2.535 13.617H5.91626ZM17.4372 13.617C18.8375 13.617 19.9722 14.8812 19.9722 16.4414V20.2088C19.9722 21.768 18.8375 23.0333 17.4372 23.0333H14.056C12.6556 23.0333 11.521 21.768 11.521 20.2088V16.4414C11.521 14.8812 12.6556 13.617 14.056 13.617H17.4372ZM5.91626 0.966675C7.31658 0.966675 8.45126 2.23093 8.45126 3.79117V7.55857C8.45126 9.1188 7.31658 10.3831 5.91626 10.3831H2.535C1.13468 10.3831 0 9.1188 0 7.55857V3.79117C0 2.23093 1.13468 0.966675 2.535 0.966675H5.91626Z" fill={getSelectedColor('/home')} />
|
||||
</svg>
|
||||
<SidebarIcon
|
||||
iconName="dashboard"
|
||||
selected={current === '/home'}
|
||||
/>
|
||||
Dashboard
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink to="/tasks" className="mb-2" onClick={() => navLinkClicked('/tasks')}>
|
||||
<div className={`sidebar-nav ${current === '/tasks' ? 'selected' : ''}`}>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.3333 7.56248V16.5C18.3333 19.25 16.6925 20.1666 14.6666 20.1666H7.33329C5.30746 20.1666 3.66663 19.25 3.66663 16.5V7.56248C3.66663 4.58331 5.30746 3.89581 7.33329 3.89581C7.33329 4.46415 7.56243 4.97748 7.93827 5.35331C8.3141 5.72914 8.82746 5.95831 9.39579 5.95831H12.6041C13.7408 5.95831 14.6666 5.03248 14.6666 3.89581C16.6925 3.89581 18.3333 4.58331 18.3333 7.56248Z" stroke={getSelectedColor('/tasks')} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M14.6667 3.89581C14.6667 5.03248 13.7409 5.95831 12.6042 5.95831H9.39587C8.82754 5.95831 8.31418 5.72914 7.93835 5.35331C7.56252 4.97748 7.33337 4.46415 7.33337 3.89581C7.33337 2.75915 8.25921 1.83331 9.39587 1.83331H12.6042C13.1725 1.83331 13.6859 2.06248 14.0617 2.43832C14.4376 2.81415 14.6667 3.32748 14.6667 3.89581Z" stroke={getSelectedColor('/tasks')} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.33337 11.9167H11" stroke={getSelectedColor('/tasks')} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.33337 15.5833H14.6667" stroke={getSelectedColor('/tasks')} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<SidebarIcon
|
||||
iconName="tasks"
|
||||
selected={current === '/tasks'}
|
||||
/>
|
||||
{t('home_nav_tasks')}
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink to="/notes" className="mb-2" onClick={() => navLinkClicked('/notes')}>
|
||||
<div className={`sidebar-nav ${current === '/notes' ? 'selected' : ''}`}>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2411 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V3.75C3.125 3.58424 3.19085 3.42527 3.30806 3.30806C3.42527 3.19085 3.58424 3.125 3.75 3.125H16.25C16.4158 3.125 16.5747 3.19085 16.6919 3.30806C16.8092 3.42527 16.875 3.58424 16.875 3.75V12.2411C16.875 12.3232 16.8588 12.4045 16.8274 12.4803C16.796 12.5561 16.75 12.625 16.6919 12.6831L12.6831 16.6919C12.625 16.75 12.5561 16.796 12.4803 16.8274C12.4045 16.8588 12.3232 16.875 12.2411 16.875V16.875Z" stroke={getSelectedColor('/notes')} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16.8188 12.4994H12.5V16.8181" stroke={getSelectedColor('/notes')} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<SidebarIcon
|
||||
iconName="notes"
|
||||
selected={current === '/notes'}
|
||||
/>
|
||||
{t('home_nav_notes')}
|
||||
</div>
|
||||
</NavLink>
|
||||
@@ -100,28 +86,27 @@ function Sidebar(): React.ReactNode {
|
||||
<Nav className="flex-column p-3 plus-jakarta-sans-thin">
|
||||
<NavLink to="/account" className="mb-2" onClick={() => navLinkClicked('/account')}>
|
||||
<div className={`sidebar-nav ${current === '/account' ? 'selected' : ''}`}>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z" stroke={getSelectedColor('/account')} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M1.83337 11.8066V10.1933C1.83337 9.23998 2.61254 8.45165 3.57504 8.45165C5.23421 8.45165 5.91254 7.27832 5.07837 5.83915C4.60171 5.01415 4.88587 3.94165 5.72004 3.46498L7.30587 2.55748C8.03004 2.12665 8.96504 2.38332 9.39587 3.10748L9.49671 3.28165C10.3217 4.72082 11.6784 4.72082 12.5125 3.28165L12.6134 3.10748C13.0442 2.38332 13.9792 2.12665 14.7034 2.55748L16.2892 3.46498C17.1234 3.94165 17.4075 5.01415 16.9309 5.83915C16.0967 7.27832 16.775 8.45165 18.4342 8.45165C19.3875 8.45165 20.1759 9.23082 20.1759 10.1933V11.8066C20.1759 12.76 19.3967 13.5483 18.4342 13.5483C16.775 13.5483 16.0967 14.7216 16.9309 16.1608C17.4075 16.995 17.1234 18.0583 16.2892 18.535L14.7034 19.4425C13.9792 19.8733 13.0442 19.6166 12.6134 18.8925L12.5125 18.7183C11.6875 17.2791 10.3309 17.2791 9.49671 18.7183L9.39587 18.8925C8.96504 19.6166 8.03004 19.8733 7.30587 19.4425L5.72004 18.535C4.88587 18.0583 4.60171 16.9858 5.07837 16.1608C5.91254 14.7216 5.23421 13.5483 3.57504 13.5483C2.61254 13.5483 1.83337 12.76 1.83337 11.8066Z" stroke={getSelectedColor('/account')} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<SidebarIcon
|
||||
iconName="account"
|
||||
selected={current === '/account'}
|
||||
/>
|
||||
{t('footer_my_account')}
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavLink to="/about" className="mb-2" onClick={() => navLinkClicked('/about')}>
|
||||
<div className={`sidebar-nav ${current === '/about' ? 'selected' : ''}`}>
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.5834 16.8943H11.9167L7.83753 19.6076C7.23253 20.0109 6.41671 19.5801 6.41671 18.8468V16.8943C3.66671 16.8943 1.83337 15.0609 1.83337 12.3109V6.81087C1.83337 4.06087 3.66671 2.22754 6.41671 2.22754H15.5834C18.3334 2.22754 20.1667 4.06087 20.1667 6.81087V12.3109C20.1667 15.0609 18.3334 16.8943 15.5834 16.8943Z" stroke={getSelectedColor('/about')} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11 10.4133V10.2209C11 9.59753 11.3851 9.26752 11.7701 9.00168C12.1459 8.74502 12.5217 8.41503 12.5217 7.81003C12.5217 6.96669 11.8434 6.28833 11 6.28833C10.1567 6.28833 9.47839 6.96669 9.47839 7.81003" stroke={getSelectedColor('/about')} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.9958 12.6042H11.0041" stroke="#222222" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<SidebarIcon
|
||||
iconName="about"
|
||||
selected={current === '/about'}
|
||||
/>
|
||||
{t('home_nav_about')}
|
||||
</div>
|
||||
</NavLink>
|
||||
<NavButton className="mb-2" onClick={() => goOut()}>
|
||||
<div className="sidebar-nav">
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.4082 0.333374C14.3045 0.333374 16.6667 2.65504 16.6667 5.51337V11.1017H9.54461C9.0342 11.1017 8.63061 11.4984 8.63061 12C8.63061 12.49 9.0342 12.8984 9.54461 12.8984H16.6667V18.475C16.6667 21.3334 14.3045 23.6667 11.3845 23.6667H5.60372C2.69553 23.6667 0.333374 21.345 0.333374 18.4867V5.52504C0.333374 2.65504 2.70741 0.333374 5.61559 0.333374H11.4082ZM19.6303 7.97527C19.9803 7.61361 20.5519 7.61361 20.9019 7.96361L24.3086 11.3586C24.4836 11.5336 24.5769 11.7553 24.5769 12.0003C24.5769 12.2336 24.4836 12.4669 24.3086 12.6303L20.9019 16.0253C20.7269 16.2003 20.4936 16.2936 20.2719 16.2936C20.0386 16.2936 19.8053 16.2003 19.6303 16.0253C19.2803 15.6753 19.2803 15.1036 19.6303 14.7536L21.4969 12.8986H16.6669V11.1019H21.4969L19.6303 9.24694C19.2803 8.89694 19.2803 8.32527 19.6303 7.97527Z" fill="#FB1A41" />
|
||||
</svg>
|
||||
<SidebarIcon
|
||||
iconName="logout"
|
||||
/>
|
||||
{t('logout')}
|
||||
</div>
|
||||
</NavButton>
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: background-color 0.2s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
|
||||
type SidebarIconName = 'dashboard' | 'tasks' | 'notes' | 'account' | 'about' | 'logout';
|
||||
|
||||
interface Props {
|
||||
iconName: SidebarIconName;
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the SidebarIcon component containing all the icons for the sidebar.
|
||||
*
|
||||
* @param {Props} props - The properties for the SidebarIcon component.
|
||||
* @param {SidebarIconName} props.iconName - The name to find the right icon.
|
||||
* @param {boolean} [props.selected] - Define if the icon is selected.
|
||||
* @returns {React.ReactNode} The SidebarIcon component rendered.
|
||||
*/
|
||||
function SidebarIcon(props: React.PropsWithChildren<Props>): React.ReactNode {
|
||||
const color = props.selected ? '#4CD964' : '#6A8996';
|
||||
|
||||
if (props.iconName === 'dashboard') {
|
||||
return (
|
||||
<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.4" d="M14.056 0.966675H17.4373C18.8376 0.966675 19.9723 2.23093 19.9723 3.79117V7.55857C19.9723 9.1188 18.8376 10.3831 17.4373 10.3831H14.056C12.6557 10.3831 11.521 9.1188 11.521 7.55857V3.79117C11.521 2.23093 12.6557 0.966675 14.056 0.966675Z" fill={color} />
|
||||
<path d="M5.91626 13.617C7.31658 13.617 8.45126 14.8812 8.45126 16.4414V20.2088C8.45126 21.768 7.31658 23.0333 5.91626 23.0333H2.535C1.13468 23.0333 0 21.768 0 20.2088V16.4414C0 14.8812 1.13468 13.617 2.535 13.617H5.91626ZM17.4372 13.617C18.8375 13.617 19.9722 14.8812 19.9722 16.4414V20.2088C19.9722 21.768 18.8375 23.0333 17.4372 23.0333H14.056C12.6556 23.0333 11.521 21.768 11.521 20.2088V16.4414C11.521 14.8812 12.6556 13.617 14.056 13.617H17.4372ZM5.91626 0.966675C7.31658 0.966675 8.45126 2.23093 8.45126 3.79117V7.55857C8.45126 9.1188 7.31658 10.3831 5.91626 10.3831H2.535C1.13468 10.3831 0 9.1188 0 7.55857V3.79117C0 2.23093 1.13468 0.966675 2.535 0.966675H5.91626Z" fill={color} />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
else if (props.iconName === 'tasks') {
|
||||
return (
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.3333 7.56248V16.5C18.3333 19.25 16.6925 20.1666 14.6666 20.1666H7.33329C5.30746 20.1666 3.66663 19.25 3.66663 16.5V7.56248C3.66663 4.58331 5.30746 3.89581 7.33329 3.89581C7.33329 4.46415 7.56243 4.97748 7.93827 5.35331C8.3141 5.72914 8.82746 5.95831 9.39579 5.95831H12.6041C13.7408 5.95831 14.6666 5.03248 14.6666 3.89581C16.6925 3.89581 18.3333 4.58331 18.3333 7.56248Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M14.6667 3.89581C14.6667 5.03248 13.7409 5.95831 12.6042 5.95831H9.39587C8.82754 5.95831 8.31418 5.72914 7.93835 5.35331C7.56252 4.97748 7.33337 4.46415 7.33337 3.89581C7.33337 2.75915 8.25921 1.83331 9.39587 1.83331H12.6042C13.1725 1.83331 13.6859 2.06248 14.0617 2.43832C14.4376 2.81415 14.6667 3.32748 14.6667 3.89581Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.33337 11.9167H11" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M7.33337 15.5833H14.6667" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
else if (props.iconName === 'notes') {
|
||||
return (
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2411 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V3.75C3.125 3.58424 3.19085 3.42527 3.30806 3.30806C3.42527 3.19085 3.58424 3.125 3.75 3.125H16.25C16.4158 3.125 16.5747 3.19085 16.6919 3.30806C16.8092 3.42527 16.875 3.58424 16.875 3.75V12.2411C16.875 12.3232 16.8588 12.4045 16.8274 12.4803C16.796 12.5561 16.75 12.625 16.6919 12.6831L12.6831 16.6919C12.625 16.75 12.5561 16.796 12.4803 16.8274C12.4045 16.8588 12.3232 16.875 12.2411 16.875V16.875Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16.8188 12.4994H12.5V16.8181" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
else if (props.iconName === 'account') {
|
||||
return (
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z" stroke={color} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M1.83337 11.8066V10.1933C1.83337 9.23998 2.61254 8.45165 3.57504 8.45165C5.23421 8.45165 5.91254 7.27832 5.07837 5.83915C4.60171 5.01415 4.88587 3.94165 5.72004 3.46498L7.30587 2.55748C8.03004 2.12665 8.96504 2.38332 9.39587 3.10748L9.49671 3.28165C10.3217 4.72082 11.6784 4.72082 12.5125 3.28165L12.6134 3.10748C13.0442 2.38332 13.9792 2.12665 14.7034 2.55748L16.2892 3.46498C17.1234 3.94165 17.4075 5.01415 16.9309 5.83915C16.0967 7.27832 16.775 8.45165 18.4342 8.45165C19.3875 8.45165 20.1759 9.23082 20.1759 10.1933V11.8066C20.1759 12.76 19.3967 13.5483 18.4342 13.5483C16.775 13.5483 16.0967 14.7216 16.9309 16.1608C17.4075 16.995 17.1234 18.0583 16.2892 18.535L14.7034 19.4425C13.9792 19.8733 13.0442 19.6166 12.6134 18.8925L12.5125 18.7183C11.6875 17.2791 10.3309 17.2791 9.49671 18.7183L9.39587 18.8925C8.96504 19.6166 8.03004 19.8733 7.30587 19.4425L5.72004 18.535C4.88587 18.0583 4.60171 16.9858 5.07837 16.1608C5.91254 14.7216 5.23421 13.5483 3.57504 13.5483C2.61254 13.5483 1.83337 12.76 1.83337 11.8066Z" stroke={color} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
else if (props.iconName === 'about') {
|
||||
return (
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.5834 16.8943H11.9167L7.83753 19.6076C7.23253 20.0109 6.41671 19.5801 6.41671 18.8468V16.8943C3.66671 16.8943 1.83337 15.0609 1.83337 12.3109V6.81087C1.83337 4.06087 3.66671 2.22754 6.41671 2.22754H15.5834C18.3334 2.22754 20.1667 4.06087 20.1667 6.81087V12.3109C20.1667 15.0609 18.3334 16.8943 15.5834 16.8943Z" stroke={color} strokeWidth="2" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11 10.4133V10.2209C11 9.59753 11.3851 9.26752 11.7701 9.00168C12.1459 8.74502 12.5217 8.41503 12.5217 7.81003C12.5217 6.96669 11.8434 6.28833 11 6.28833C10.1567 6.28833 9.47839 6.96669 9.47839 7.81003" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.9958 12.6042H11.0041" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.4082 0.333374C14.3045 0.333374 16.6667 2.65504 16.6667 5.51337V11.1017H9.54461C9.0342 11.1017 8.63061 11.4984 8.63061 12C8.63061 12.49 9.0342 12.8984 9.54461 12.8984H16.6667V18.475C16.6667 21.3334 14.3045 23.6667 11.3845 23.6667H5.60372C2.69553 23.6667 0.333374 21.345 0.333374 18.4867V5.52504C0.333374 2.65504 2.70741 0.333374 5.61559 0.333374H11.4082ZM19.6303 7.97527C19.9803 7.61361 20.5519 7.61361 20.9019 7.96361L24.3086 11.3586C24.4836 11.5336 24.5769 11.7553 24.5769 12.0003C24.5769 12.2336 24.4836 12.4669 24.3086 12.6303L20.9019 16.0253C20.7269 16.2003 20.4936 16.2936 20.2719 16.2936C20.0386 16.2936 19.8053 16.2003 19.6303 16.0253C19.2803 15.6753 19.2803 15.1036 19.6303 14.7536L21.4969 12.8986H16.6669V11.1019H21.4969L19.6303 9.24694C19.2803 8.89694 19.2803 8.32527 19.6303 7.97527Z" fill="#FB1A41" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SidebarIcon;
|
||||
@@ -3,6 +3,10 @@ import { Col, Row } from 'react-bootstrap';
|
||||
import { SummaryResponse } from '../../types/SummaryResponse';
|
||||
import api from '../../api-service/api';
|
||||
import ApiConfig from '../../api-service/apiConfig';
|
||||
import CalendarIcon from '../../assets/calendar-icon.svg';
|
||||
import NotesIcon from '../../assets/notes-icon.svg';
|
||||
import NotesArrowIcon from '../../assets/notes-arrow-icon.svg';
|
||||
import NotesCheckIcon from '../../assets/notes-check-icon.svg';
|
||||
import './style.css';
|
||||
|
||||
/**
|
||||
@@ -15,7 +19,7 @@ import './style.css';
|
||||
function TaskProgress(): React.ReactNode {
|
||||
const [completedTasks, setCompletedTasks] = useState<number>(0);
|
||||
const [pendingTasks, setPendingTasks] = useState<number>(0);
|
||||
const [totalTasks, setTotalTasks] = useState<number>();
|
||||
const [totalNotes, setTotalNotes] = useState<number>();
|
||||
|
||||
/**
|
||||
* Fetches the tasks progress.
|
||||
@@ -27,7 +31,7 @@ function TaskProgress(): React.ReactNode {
|
||||
const { pendingTaskCount } = response;
|
||||
setCompletedTasks(doneTaskCount);
|
||||
setPendingTasks(pendingTaskCount);
|
||||
setTotalTasks(doneTaskCount + pendingTaskCount);
|
||||
setTotalNotes(response.notesCount);
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e);
|
||||
@@ -41,74 +45,46 @@ function TaskProgress(): React.ReactNode {
|
||||
return (
|
||||
<div className="completed-tasks">
|
||||
<Row>
|
||||
<Col xs={2}>
|
||||
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.8" x="0.5" y="0.5" width="43" height="43" rx="7.5" stroke="#C3D4E9" />
|
||||
<path d="M18 12V15" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M26 12V15" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.5 19.09H30.5" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M32 29C32 29.75 31.79 30.46 31.42 31.06C30.73 32.22 29.46 33 28 33C26.99 33 26.07 32.63 25.37 32C25.06 31.74 24.79 31.42 24.58 31.06C24.21 30.46 24 29.75 24 29C24 26.79 25.79 25 28 25C29.2 25 30.27 25.53 31 26.36C31.62 27.07 32 27.99 32 29Z" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M26.44 29L27.43 29.99L29.56 28.02" stroke="#222222" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M31 18.5V26.36C30.27 25.53 29.2 25 28 25C25.79 25 24 26.79 24 29C24 29.75 24.21 30.46 24.58 31.06C24.79 31.42 25.06 31.74 25.37 32H18C14.5 32 13 30 13 27V18.5C13 15.5 14.5 13.5 18 13.5H26C29.5 13.5 31 15.5 31 18.5Z" stroke="#222222" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21.9955 23.7H22.0045" stroke="#222222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18.2943 23.7H18.3033" stroke="#222222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18.2943 26.7H18.3033" stroke="#222222" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<Col xs={1} sm={2} md={1}>
|
||||
<img src={CalendarIcon} alt="Calendar Icon" />
|
||||
</Col>
|
||||
<Col xs={10}>
|
||||
<Col xs={11} sm={10} md={11}>
|
||||
<div className="plus-jakarta-sans-semibold title">Tasks</div>
|
||||
<span className="plus-jakarta-sans-regular description">Progress</span>
|
||||
<span className="plus-jakarta-sans-regular description">Track all your progress</span>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col className="chart-container text-center">
|
||||
<div className="task-progress total">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 12.2H15" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8 16.2H12.38" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10 6H14C16 6 16 5 16 4C16 2 15 2 14 2H10C9 2 8 2 8 4C8 6 9 6 10 6Z" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16 4.02002C19.33 4.20002 21 5.43002 21 10V16C21 20 20 22 15 22H9C4 22 3 20 3 16V10C3 5.44002 4.67 4.20002 8 4.02002" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
|
||||
<div>Total</div>
|
||||
<div>{totalTasks}</div>
|
||||
<img src={NotesIcon} alt="Notes Icon" />
|
||||
<div className="tpg-text plus-jakarta-sans-regular">
|
||||
Total
|
||||
<br />
|
||||
Notes
|
||||
</div>
|
||||
<div className="tpg-value plus-jakarta-sans-semibold">{totalNotes}</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="chart-container text-center">
|
||||
<div className="task-progress pending">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_b_16_4697)">
|
||||
<rect width="40" height="40" rx="8" fill="white" fillOpacity="0.2" />
|
||||
<path d="M18 14H22C24 14 24 13 24 12C24 10 23 10 22 10H18C17 10 16 10 16 12C16 14 17 14 18 14Z" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M22 30H17C12 30 11 28 11 24V18C11 13.44 12.67 12.2 16 12.02" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M24 12.02C27.33 12.2 29 13.43 29 18V23" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M23 27V24H26" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M29 30L23.04 24.04" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_b_16_4697" x="-6" y="-6" width="52" height="52" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="3" />
|
||||
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_16_4697" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_16_4697" result="shape" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
<div>Pending</div>
|
||||
<div>{pendingTasks}</div>
|
||||
<img src={NotesArrowIcon} alt="Notes Arrow Icon" />
|
||||
<div className="tpg-text plus-jakarta-sans-regular">
|
||||
Pending
|
||||
<br />
|
||||
Tasks
|
||||
</div>
|
||||
<div className="tpg-value plus-jakarta-sans-semibold">{pendingTasks}</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col className="chart-container text-center">
|
||||
<div className="task-progress completed">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 12.2H15" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8 16.2H12.38" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10 6H14C16 6 16 5 16 4C16 2 15 2 14 2H10C9 2 8 2 8 4C8 6 9 6 10 6Z" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16 4.02002C19.33 4.20002 21 5.43002 21 10V16C21 20 20 22 15 22H9C4 22 3 20 3 16V10C3 5.44002 4.67 4.20002 8 4.02002" stroke="white" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
|
||||
<div>Completed</div>
|
||||
<div>{completedTasks}</div>
|
||||
<img src={NotesCheckIcon} alt="Notes Check Icon" />
|
||||
<div className="tpg-text plus-jakarta-sans-regular">
|
||||
Completed
|
||||
<br />
|
||||
Tasks
|
||||
</div>
|
||||
<div className="tpg-value plus-jakarta-sans-semibold">{completedTasks}</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
@@ -24,9 +24,9 @@
|
||||
color: #fff;
|
||||
width: 90px;
|
||||
}
|
||||
.task-progress svg {
|
||||
.task-progress img {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.task-progress.total {
|
||||
background-color: #3563E9;
|
||||
@@ -37,4 +37,10 @@
|
||||
.task-progress.completed {
|
||||
background-color: #4CD964;
|
||||
}
|
||||
.tpg-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
.tpg-value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,7 +109,7 @@ const enTranslations = {
|
||||
about_dev_description_two: ' for any questions or feedback.',
|
||||
|
||||
account_my_account_tittle: 'My Account',
|
||||
account_my_account_hello: 'Hello! This is where you can manage your preferences.',
|
||||
account_my_account_hello: 'Hello! This is where you can manage your preferences',
|
||||
account_my_account_logged: 'You\'re logged in as: ',
|
||||
account_app_lang_tittle: 'App Language',
|
||||
account_app_lang_description: 'You can choose one of these languages:',
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Card, Col, Container, Row
|
||||
} from 'react-bootstrap';
|
||||
import { Col, Container, Row } from 'react-bootstrap';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
/**
|
||||
@@ -16,10 +14,26 @@ function About(): React.ReactNode {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Container className="my-5">
|
||||
<Container>
|
||||
<h1 className="poppins-regular home-hello main-margin">
|
||||
About
|
||||
{' '}
|
||||
<b>TaskNoteApp</b>
|
||||
</h1>
|
||||
<p className="poppins-regular home-subtitle">
|
||||
Here you can find more information about this app and the developer
|
||||
</p>
|
||||
|
||||
<Row className="mb-3">
|
||||
<Col xs={12}>
|
||||
<h2 className="poppins-regular">Tasks and notes made</h2>
|
||||
<h2 className="poppins-bold home-productive">Easy</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="justify-content-center mb-4">
|
||||
<Col xs={12}>
|
||||
<Card className="p-4 shadow-sm border-radius-30">
|
||||
<div className="user-info-card">
|
||||
<h2 className="mb-4 poppins-bold about-title">{t('about_app_title')}</h2>
|
||||
<p className="poppins-medium">{t('about_app_description')}</p>
|
||||
<h4 className="mt-4 poppins-medium">{t('about_app_features')}</h4>
|
||||
@@ -30,13 +44,13 @@ function About(): React.ReactNode {
|
||||
</ul>
|
||||
<h4 className="mt-4 poppins-medium">{t('about_app_help_title')}</h4>
|
||||
<p className="poppins-light">{t('about_app_help_description')}</p>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row className="justify-content-center">
|
||||
<Col xs={8}>
|
||||
<Card className="p-4 shadow-sm border-radius-30 min-height-350">
|
||||
<div className="user-info-card min-height-350">
|
||||
<h2 className="mb-4 poppins-bold about-title">{t('about_tech_title')}</h2>
|
||||
<p className="poppins-light">{t('about_tech_description')}</p>
|
||||
<ul className="poppins-light">
|
||||
@@ -48,10 +62,10 @@ function About(): React.ReactNode {
|
||||
<li>{t('about_tech_list_six')}</li>
|
||||
<li>{t('about_tech_list_seven')}</li>
|
||||
</ul>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<Card className="p-4 shadow-sm border-radius-30 min-height-350">
|
||||
<div className="user-info-card min-height-350">
|
||||
<h2 className="mb-4 poppins-bold about-title">{t('about_dev_title')}</h2>
|
||||
<p className="poppins-light">
|
||||
{t('about_dev_description')}
|
||||
@@ -60,7 +74,7 @@ function About(): React.ReactNode {
|
||||
</a>
|
||||
{t('about_dev_description_two')}
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user