Skip to content

Commit a075cb3

Browse files
grabbehgrabbeh
committed
Update to style
1 parent 067bb5c commit a075cb3

26 files changed

+9217
-72
lines changed

‎.vscode/settings.json

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
{
2+
}

‎components/Meta.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Meta = () => (
4646
text-rendering: optimizeLegibility;
4747
-webkit-font-smoothing: antialiased;
4848
-moz-osx-font-smoothing: grayscale;
49-
background-color: #EFADA0;
49+
background-color: rgb(243, 244, 245);
5050
}
5151
5252
.bg--blue {
@@ -74,7 +74,7 @@ const Meta = () => (
7474
}
7575
7676
.bg-haus {
77-
background-color: #f3f4f4;
77+
background-color: #ffffff;
7878
}
7979
8080
.bg-pear {
@@ -142,7 +142,7 @@ const Meta = () => (
142142
143143
input, textarea, select {
144144
font-family: shapefont, sans-serif;
145-
background:#f3f4f4;
145+
background: white;
146146
}
147147
148148
input:focus {

‎components/contracts/AddContract.js

+96-17
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import cn from 'classnames'
88
import CheckBox from './CheckBox'
99
import redirect from '../../lib/Redirect'
1010
import Radio from './Radio'
11-
import FormInput from '../styles/FormInput'
11+
import FormSection from '../styles/FormSection'
12+
import FormButton from '../styles/FormButton'
1213
import FormTitle from '../styles/FormTitle'
1314
import ClearFix from '../styles/ClearFix'
1415
import Select from './Select'
15-
import FormButton from '../styles/FormButton'
16+
import DatePicker from 'react-datepicker'
1617

1718
class AddContractForm extends react.Component {
1819
constructor (props) {
@@ -22,6 +23,9 @@ class AddContractForm extends react.Component {
2223
selectedBusinessUnit: '',
2324
selectedLawyer: '',
2425
contract: {
26+
executionDate: null,
27+
effectiveDate: null,
28+
expiryDate: null,
2529
internalParties: ['ACME Inc'],
2630
externalParties: [],
2731
currentStatus: [],
@@ -34,6 +38,24 @@ class AddContractForm extends react.Component {
3438
}
3539
}
3640

41+
handleExecutionDate = date => {
42+
let contract = this.state.contract
43+
contract.executionDate = date
44+
this.setState({ contract })
45+
}
46+
47+
handleEffectiveDate = date => {
48+
let contract = this.state.contract
49+
contract.effectiveDate = date
50+
this.setState({ contract })
51+
}
52+
53+
handleExpiryDate = date => {
54+
let contract = this.state.contract
55+
contract.expiryDate = date
56+
this.setState({ contract })
57+
}
58+
3759
handleClick = e => {
3860
e.preventDefault()
3961
this.props.addContract(this.state.contract)
@@ -55,7 +77,16 @@ class AddContractForm extends react.Component {
5577
handleStatusChange = e => {
5678
let { contract } = this.state
5779
let status = e.target.value
58-
let date = new Date().getTime()
80+
let date = null
81+
if (status !== 'Executed') {
82+
contract.executionDate = null
83+
this.setState({ contract })
84+
date = new Date().getTime()
85+
} else {
86+
if (contract.executionDate) {
87+
date = contract.executionDate.valueOf()
88+
} else date = null
89+
}
5990
contract.statuses.push({ status, date })
6091
contract.currentStatus = status
6192
this.setState({ selectedStatus: status, contract })
@@ -121,6 +152,7 @@ class AddContractForm extends react.Component {
121152
selectedLawyer,
122153
selectedBusinessUnit
123154
} = this.state
155+
124156
let businessUnitSelect = (
125157
<div className='mb2'>
126158
<select
@@ -153,50 +185,97 @@ class AddContractForm extends react.Component {
153185
))}
154186
</div>
155187
)
156-
let { externalParties } = this.state.contract
188+
let {
189+
externalParties,
190+
executionDate,
191+
expiryDate,
192+
effectiveDate
193+
} = this.state.contract
194+
157195
return (
158196
<div>
159197
<Header client={this.props.client} user={this.props.loggedUser} />
160-
<div className='center pa3 mw6 bg-haus mt3'>
198+
<div className='center pa3 mw6 bg-haus mt4 shadow-4'>
161199
<form>
162-
<div className='b f4 bb bw1 w-100 pb2'>Add contract</div>
163-
<FormInput>
200+
<div className='b f4 bb bw1 b--black-50 w-100 pb2'>
201+
Add contract
202+
</div>
203+
<FormSection>
164204
<Input
165205
onChange={this.saveToState}
166206
value={externalParties}
167207
placeholder='External party'
168208
label='External party'
169209
name='externalParty'
170210
/>
171-
</FormInput>
211+
</FormSection>
172212
<ClearFix />
173213
<FormTitle>Tags</FormTitle>
174-
<FormInput>
214+
<FormSection>
175215
{tagInputs}
176-
</FormInput>
216+
</FormSection>
177217
<ClearFix />
178218
<FormTitle>Status</FormTitle>
179-
<FormInput>
219+
<FormSection>
180220
<Radio
181221
handleChange={this.handleStatusChange}
182222
selectedItem={selectedStatus}
183223
items={allStatuses}
184224
/>
185-
</FormInput>
225+
</FormSection>
226+
<ClearFix />
227+
<FormSection>
228+
<FormTitle>Execution date</FormTitle>
229+
<DatePicker
230+
className='pa2'
231+
selected={executionDate}
232+
onChange={this.handleExecutionDate}
233+
placeholderText='Execution date'
234+
showMonthDropdown
235+
showYearDropdown
236+
dateFormat='DD/MM/YYYY'
237+
/>
238+
</FormSection>
239+
<ClearFix />
240+
<FormSection>
241+
<FormTitle>Effective date</FormTitle>
242+
<DatePicker
243+
className='pa2'
244+
selected={effectiveDate}
245+
onChange={this.handleEffectiveDate}
246+
placeholderText='Effective date'
247+
showMonthDropdown
248+
showYearDropdown
249+
dateFormat='DD/MM/YYYY'
250+
/>
251+
</FormSection>
252+
<ClearFix />
253+
<FormSection>
254+
<FormTitle>Expiry date</FormTitle>
255+
<DatePicker
256+
className='pa2'
257+
selected={expiryDate}
258+
onChange={this.handleExpiryDate}
259+
placeholderText='Expiry date'
260+
showMonthDropdown
261+
showYearDropdown
262+
dateFormat='DD/MM/YYYY'
263+
/>
264+
</FormSection>
186265
<ClearFix />
187-
<FormTitle>Business Units</FormTitle>
188-
<FormInput>
266+
<FormTitle>Business Unit</FormTitle>
267+
<FormSection>
189268
{businessUnitSelect}
190-
</FormInput>
269+
</FormSection>
191270
<ClearFix />
192271
<FormTitle>Lawyer</FormTitle>
193-
<FormInput>
272+
<FormSection>
194273
<Select
195274
selectedItem={selectedLawyer}
196275
items={allLawyers}
197276
handleChange={this.handleLawyerChange}
198277
/>
199-
</FormInput>
278+
</FormSection>
200279
<ClearFix />
201280
<FormButton onClick={this.handleClick} />
202281
<ClearFix />

‎components/contracts/CheckBox.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,13 @@ class Checkbox extends Component {
3535
'pointer',
3636
'fr',
3737
'f5',
38-
'pa1',
38+
'pv1',
39+
'ph3',
3940
'bg-white',
40-
isChecked && 'bg-dark-sur',
41+
'bb',
42+
'b--blue',
43+
'bw1',
44+
isChecked && 'bg-blue',
4145
isChecked && 'white'
4246
)}
4347
>

‎components/contracts/CheckboxList.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class CheckboxList extends React.Component {
2424
render () {
2525
let { content, checked } = this.props
2626
return (
27-
<ul className='mt2 pb2 ma0 bb bw1 pa0 pl3 list flex flex-wrap '>
27+
<ul className='mt2 pb2 ma0 bb b--black-50 bw1 pa0 pl3 list flex flex-wrap '>
2828
{this.createCheckboxes(content, checked)}
2929
</ul>
3030
)

‎components/contracts/Contract.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ class Contract extends React.Component {
5151
<div>
5252
<div>
5353
{externalParties.map(party => (
54-
<div key={party} className='pb1 b bb bw1'>{party}</div>
54+
<div key={party} className='pb1 b bb b--black-50 bw1'>
55+
{party}
56+
</div>
5557
))}
5658
</div>
5759
<PartyList parties={internalParties} />

‎components/contracts/ContractHolder.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ const ContractHolder = ({ children, index }) => (
1414
'pa3',
1515
'mb3',
1616
'overflow-hidden',
17-
'h-100'
17+
'h-100',
18+
'shadow-4'
1819
)}
1920
>
2021
{children}

‎components/contracts/ContractsHolder.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,20 @@ class ContractsHolder extends react.Component {
3030
},
3131
tags: [],
3232
businessUnits: [],
33-
lawyers: []
33+
lawyers: [],
34+
expiryDateSearch: false
3435
},
3536
searchTerm: '',
3637
liveInput: false
3738
}
3839
}
3940

41+
toggleExpiryDateSearch = bool => {
42+
let { filters } = this.state
43+
filters.expiryDateSearch = bool
44+
this.setState({ filters })
45+
}
46+
4047
handleSearchInput = event => {
4148
this.setState({ liveInput: true, searchTerm: event.target.value })
4249
clearTimeout(timer)
@@ -84,7 +91,6 @@ class ContractsHolder extends react.Component {
8491
}
8592

8693
toggleCheckbox = label => {
87-
this.state.filters
8894
let { statuses, tags, businessUnits, lawyers } = this.state.initialValues
8995
if (statuses.includes(label)) {
9096
this.updateFilterState('statuses', this.updateSet(this.statuses, label))
@@ -195,6 +201,7 @@ class ContractsHolder extends react.Component {
195201
initialValues={initialValues}
196202
toggleCheckbox={this.toggleCheckbox}
197203
setDate={this.setDate}
204+
toggleExpiryDateSearch={this.toggleExpiryDateSearch}
198205
/>
199206
</div>
200207
<div className='w-50-ns w-100'>

‎components/contracts/Filter.js

+21-6
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ class Filter extends react.Component {
1212
startDate: null,
1313
endDate: null
1414
},
15+
expiryDateSearch: false,
1516
error: {
1617
finishBeforeStart: false
1718
}
@@ -24,6 +25,11 @@ class Filter extends react.Component {
2425
this.setState({ dateRange })
2526
}
2627

28+
handleExpiryToggle = () => {
29+
this.setState({ expiryDateSearch: !this.state.expiryDateSearch })
30+
this.props.toggleExpiryDateSearch(!this.state.expiryDateSearch)
31+
}
32+
2733
handleChangeEnd = date => {
2834
let dateRange = {}
2935
dateRange.endDate = date
@@ -57,8 +63,8 @@ class Filter extends react.Component {
5763
const { error } = this.state
5864

5965
return (
60-
<div className='bg-haus mr3-ns mr0 pa3'>
61-
<div className='f4 b bb bw1 pb2'>Filters</div>
66+
<div className='bg-haus mr3-ns mr0 pa3 shadow-4'>
67+
<div className='f4 b bb b--black-50 bw1 pb2'>Filters</div>
6268
<HideToggle title='Statuses'>
6369
<CheckboxList
6470
content={statuses}
@@ -85,9 +91,17 @@ class Filter extends react.Component {
8591
</HideToggle>
8692
<HideToggle title='Dates'>
8793
<div className='pl3 fl mt2'>
88-
<div className='fl mr2'>
94+
<span className='mr2'>Current status</span>
95+
<span onClick={this.handleExpiryToggle}>
96+
{this.state.expiryDateSearch
97+
? <i className='fa fa-toggle-on fa-lg' />
98+
: <i className='fa fa-toggle-off fa-lg' />}
99+
</span>
100+
<span className='ml2'>Expiry date</span>
101+
<div className='cf' />
102+
<div className='fl mt2 mr2'>
89103
<DatePicker
90-
className=' w4 tc pointer w-100 w-80-ns'
104+
className=' w4 pointer w-100 w-80-ns'
91105
selected={startDate}
92106
selectsStart
93107
startDate={startDate}
@@ -100,9 +114,9 @@ class Filter extends react.Component {
100114
/>
101115

102116
</div>
103-
<div className='fl mr2 mt3 mt0-ns'>
117+
<div className='fl mr2 mt2'>
104118
<DatePicker
105-
className=' w4 tc pointer w-100 w-80-ns'
119+
className=' w4 pointer w-100 w-80-ns'
106120
selected={endDate}
107121
selectsEnd
108122
startDate={startDate}
@@ -120,6 +134,7 @@ class Filter extends react.Component {
120134
Clear
121135
</div>
122136
</HideToggle>
137+
123138
<div>
124139
{error.finishBeforeStart &&
125140
<div className='pt2 pa2 bg-light-red black b mt2'>

‎components/contracts/Header.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ class Header extends react.Component {
1818
render () {
1919
const { user } = this.props
2020
return (
21-
<div className='bg-dark-peach pa2 f4 b'>
22-
<span>Attest</span>
21+
<div className='bg--blue pa2 white f4 '>
22+
<span className='b'>Attest</span>
2323
<span className='fr'>
2424
{user
2525
? <div className='f4-ns f6'>
@@ -29,7 +29,7 @@ class Header extends react.Component {
2929
</span>
3030
</div>
3131
: <Link href='/login'>
32-
<a className='link dim black'>Login</a>
32+
<a className='link dim'>Login</a>
3333
</Link>}
3434
</span>
3535
</div>

0 commit comments

Comments
 (0)