maximx1/budget-demo
1
0
Fork 0
Code Issues 5 Pull Requests 1 Projects Releases Wiki Activity

Added some lock icons instead of colored boxes.

Browse Source
This commit is contained in:
Justin Walrath 2022-02-05 00:09:52 -05:00
parent 048c5e2972
commit 0e623276b2
4 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/resources/Lock.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M 12 1 C 8.6761905 1 6 3.6761905 6 7 L 6 8 C 4.9069372 8 4 8.9069372 4 10 L 4 20 C 4 21.093063 4.9069372 22 6 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 10 C 20 8.9069372 19.093063 8 18 8 L 18 7 C 18 3.6761905 15.32381 1 12 1 z M 12 3 C 14.27619 3 16 4.7238095 16 7 L 16 8 L 8 8 L 8 7 C 8 4.7238095 9.7238095 3 12 3 z M 6 10 L 18 10 L 18 20 L 6 20 L 6 10 z M 12 13 C 10.9 13 10 13.9 10 15 C 10 16.1 10.9 17 12 17 C 13.1 17 14 16.1 14 15 C 14 13.9 13.1 13 12 13 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 615 B

1
src/resources/OpenLock.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 18 1 C 14.67619 1 12 3.6761905 12 7 L 12 8 L 2.9296875 8 C 1.8344913 8 1 8.9455845 1 10 L 1 20 C 1 21.054415 1.8344913 22 2.9296875 22 L 14.070312 22 C 15.16551 22 16 21.054415 16 20 L 16 10 C 16 8.9455845 15.167599 8 14.072266 8 L 14 8 L 14 7 C 14 4.7238095 15.72381 3 18 3 C 20.27619 3 22 4.7238095 22 7 L 22 9 L 24 9 L 24 7 C 24 3.6761905 21.32381 1 18 1 z M 3 10 L 14 10 L 14 20 L 3 20 L 3 10 z M 8.5078125 13 C 7.4078125 13 6.5078125 13.9 6.5078125 15 C 6.5078125 16.1 7.4078125 17 8.5078125 17 C 9.6078125 17 10.507812 16.1 10.507812 15 C 10.507812 13.9 9.6078125 13 8.5078125 13 z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 710 B

6
src/views/BudgetPeriodCard.jsx
View File

@ -1,5 +1,7 @@
import { useState, useEffect } from 'react';
import BudgetPeriodTransTable from './BudgetPeriodTransTable';
import Lock from '../resources/Lock.svg';
import OpenLock from '../resources/OpenLock.svg';
import './BudgetPeriodCard.scss';
const BudgetPeriodCard = ({periodData}) => {
@ -34,7 +36,9 @@ const BudgetPeriodCard = ({periodData}) => {
return (
<div className='budget-period-card'>
<div className='card-header'>
<span className={'lock lock-' + (periodData.locked ? 'locked' : 'unlocked')}>&nbsp;</span>
<span className={'lock'}>
<img src={ periodData.locked ? Lock : OpenLock } alt="lock" />
</span>
</div>
<div className='card-body'>
<div className='dates'>

10
src/views/BudgetPeriodCard.scss
View File

@ -15,12 +15,10 @@
right: .5em;
position: absolute;
display: inline-block;
}
.lock-locked {
background-color: blue;
}
.lock-unlocked {
background-color: red;
img {
width: 100%;
height: 100%;
}
}
}
.card-body {