Skip to content

Commit f36824e

Browse files
linuslundahllinuslundahl
authored
Merge pull request #974 from linuslundahl/fix/server-user-add-ui-fixes
Server user add UI fixes
2 parents 9aaa122 + 448ede0 commit f36824e

File tree

13 files changed

+415
-216
lines changed

13 files changed

+415
-216
lines changed

‎src/browser/components/DataTables.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ export const StyledTh = styled.th`
3232
text-align: left;
3333
height: 39px;
3434
font-weight: bold;
35-
padding: 0 16px;
35+
padding: 10px 16px 10px 0;
3636
line-height: 39px;
3737
border-bottom: ${props => props.theme.inFrameBorder};
3838
`
3939
export const StyledTd = styled.td`
4040
border-bottom: ${props => props.theme.inFrameBorder};
4141
vertical-align: top;
4242
line-height: 26px;
43-
padding: 0 16px;
43+
padding: 10px 16px 10px 0;
4444
`
4545

4646
export const StyledJsonPre = styled.pre`

‎src/browser/components/Form.jsx‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,56 @@
2121
import React, { Component } from 'react'
2222
import styled from 'styled-components'
2323

24-
const StyledSettingTextInput = styled.input`
24+
export const StyledSelect = styled.select`
25+
background-color: #fff;
26+
border: ${props => props.theme.formButtonBorder};
27+
border-radius: 4px;
28+
color: ${props => props.theme.inputText};
29+
display: block;
30+
height: 34px;
31+
font-size: 14px;
32+
padding: 6px 12px;
33+
min-width: 120px;
34+
width: 100%;
35+
`
36+
export const StyledInput = styled.input`
37+
background-color: #fff;
38+
border: ${props => props.theme.formButtonBorder};
39+
border-radius: 4px;
40+
color: ${props => props.theme.inputText};
41+
display: block;
42+
height: 34px;
43+
font-size: 14px;
44+
padding: 6px 12px;
45+
width: 100%;
46+
47+
&[type='checkbox'] {
48+
display: inline-block;
49+
margin-right: 5px;
50+
vertical-align: middle;
51+
width: auto;
52+
}
53+
`
54+
55+
export const StyledForm = styled.form`
56+
width: 100%;
57+
`
58+
59+
export const StyledFormElement = styled.div`
60+
margin: 0 0 10px 0;
61+
`
62+
63+
export const StyledFormElementWrapper = styled.div`
64+
display: flex;
65+
> div {
66+
flex-grow: 1;
67+
&:not(:last-child) {
68+
margin-right: 10px;
69+
}
70+
}
71+
`
72+
73+
const StyledSettingTextInput = styled(StyledInput)`
2574
height: 34px;
2675
color: #555;
2776
font-size: 14px;
@@ -35,9 +84,19 @@ const StyledSettingTextInput = styled.input`
3584
const StyledCheckbox = styled.input`
3685
margin-right: 10px;
3786
`
38-
const StyledLabel = styled.label`
39-
margin-left: 10px;
87+
const StyledRadio = styled.input`
88+
margin-right: 10px;
89+
`
90+
export const StyledLabel = styled.label`
91+
/* margin-left: 10px; */
4092
display: inline-block;
93+
font-weight: 600;
94+
vertical-align: middle;
95+
96+
input[type='radio'] + & {
97+
font-weight: 400;
98+
}
99+
41100
&:first-letter {
42101
text-transform: uppercase;
43102
}
@@ -74,7 +133,7 @@ export class RadioSelector extends Component {
74133
{this.props.options.map(option => {
75134
return (
76135
<StyledRadioEntry key={option}>
77-
<input
136+
<StyledRadio
78137
type='radio'
79138
value={option}
80139
checked={this.isSelectedValue(option)}

‎src/browser/components/buttons/index.jsx‎

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -97,12 +97,13 @@ export const NavigationButtonContainer = styled.li`
9797
`
9898

9999
const StyledFormButton = styled.button`
100-
color: ${props => props.theme.secondaryButtonText};
101-
background-color: ${props => props.theme.secondaryButtonBackground};
102-
border: ${props => props.theme.secondaryButtonBorder};
100+
color: ${props => props.theme.primaryButtonText};
101+
background-color: ${props => props.theme.primaryButtonBackground};
102+
border: 1px solid ${props => props.theme.primaryButtonBackground};
103103
font-family: ${props => props.theme.primaryFontFamily};
104-
padding: 6px 12px;
105-
font-weight: 400;
104+
padding: 6px 18px;
105+
margin-right: 10px;
106+
font-weight: 600;
106107
font-size: 14px;
107108
text-align: center;
108109
white-space: nowrap;
@@ -113,7 +114,53 @@ const StyledFormButton = styled.button`
113114
&:hover {
114115
background-color: ${props => props.theme.secondaryButtonBackgroundHover};
115116
color: ${props => props.theme.secondaryButtonTextHover};
116-
border: ${props => props.theme.secondaryButtonBorderHover};
117+
border: 1px solid ${props => props.theme.secondaryButtonBackgroundHover};
118+
}
119+
`
120+
121+
const StyledTagButton = styled(StyledFormButton)`
122+
background-color: ${props => props.theme.secondaryButtonBackgroundHover};
123+
color: ${props => props.theme.secondaryButtonTextHover};
124+
border: 1px solid ${props => props.theme.secondaryButtonBackgroundHover};
125+
font-weight: 400;
126+
padding: 6px 30px 6px 12px;
127+
position: relative;
128+
text-align: left;
129+
130+
> i {
131+
background-color: ${props => props.theme.primaryButtonText};
132+
border-radius: 50%;
133+
color: ${props => props.theme.secondaryButtonBackgroundHover};
134+
position: absolute;
135+
right: 5px;
136+
top: 50%;
137+
transform: translateY(-50%);
138+
width: 18px;
139+
height: 18px;
140+
display: flex;
141+
align-items: center;
142+
justify-content: center;
143+
144+
> span {
145+
display: inline-block;
146+
vertical-align: middle;
147+
}
148+
149+
svg {
150+
display: block;
151+
width: 8px !important;
152+
height: 8px !important;
153+
}
154+
155+
line {
156+
stroke-width: 4px;
157+
}
158+
}
159+
160+
&:hover {
161+
> i {
162+
color: ${props => props.theme.secondaryButtonBackgroundHover};
163+
}
117164
}
118165
`
119166

@@ -138,6 +185,16 @@ export const StyledErrorBoundaryButton = styled(StyledFormButton)`
138185
background-color: #fbf1f0;
139186
}
140187
`
188+
export const StyledDestructiveButton = styled(StyledFormButton)`
189+
color: #fff;
190+
border: 1px solid #da4433;
191+
background-color: #da4433;
192+
&:hover {
193+
color: #fff;
194+
border: 1px solid #da4433;
195+
background-color: #da4433;
196+
}
197+
`
141198
const StyledDrawerFormButton = styled(StyledSecondaryFormButton)`
142199
color: #bcc0c9;
143200
border-color: #bcc0c9;
@@ -151,7 +208,9 @@ const StyledDrawerFormButton = styled(StyledSecondaryFormButton)`
151208
const buttonTypes = {
152209
primary: StyledFormButton,
153210
secondary: StyledSecondaryFormButton,
154-
drawer: StyledDrawerFormButton
211+
drawer: StyledDrawerFormButton,
212+
destructive: StyledDestructiveButton,
213+
tag: StyledTagButton
155214
}
156215

157216
export const FormButton = props => {

‎src/browser/modules/Frame/styled.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const StyledFrameMainSection = styled.div`
8787
`
8888

8989
export const StyledFrameAside = styled.div`
90-
flex: 1 0 25%;
90+
flex: 0 0 25%;
9191
padding: 0 15px;
9292
width: 25%;
9393
font-family: ${props => props.theme.primaryFontFamily};

‎src/browser/modules/Stream/Auth/ConnectionFrame.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,18 @@ export class ConnectionFrame extends Component {
5656
<React.Fragment>
5757
<StyledConnectionAside>
5858
<Render if={!this.state.success}>
59-
<div>
59+
<React.Fragment>
6060
<H3>Connect to Neo4j</H3>
6161
<Lead>
6262
Database access requires an authenticated connection.
6363
</Lead>
64-
</div>
64+
</React.Fragment>
6565
</Render>
6666
<Render if={this.state.success}>
67-
<div>
67+
<React.Fragment>
6868
<H3>Connected to Neo4j</H3>
6969
<Lead>Nice to meet you.</Lead>
70-
</div>
70+
</React.Fragment>
7171
</Render>
7272
</StyledConnectionAside>
7373
<StyledConnectionBodyContainer>

‎src/browser/modules/Stream/Auth/styled.jsx‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,13 @@
1919
*/
2020

2121
import styled from 'styled-components'
22+
import { StyledInput } from 'browser-components/Form'
23+
import { StyledFrameAside } from '../../Frame/styled'
2224

2325
export const StyledConnectionForm = styled.form`
2426
padding: 0 15px;
2527
`
26-
export const StyledConnectionAside = styled.div`
27-
flex: 0 0 25%;
28-
width: 25%;
29-
padding: 0 15px;
30-
font-family: ${props => props.theme.primaryFontFamily};
31-
font-size: 16px;
32-
font-weight: 300;
33-
color: ${props => props.theme.asideText};
34-
`
28+
export const StyledConnectionAside = styled(StyledFrameAside)``
3529
export const StyledConnectionFormEntry = styled.div`
3630
padding-bottom: 15px;
3731
`
@@ -41,15 +35,8 @@ export const StyledConnectionLabel = styled.label`
4135
font-weight: 600;
4236
line-height: 2;
4337
`
44-
export const StyledConnectionTextInput = styled.input`
45-
display: block;
46-
height: 34px;
47-
color: #555;
48-
font-size: 14px;
49-
padding: 6px 12px;
50-
background-color: #fff;
51-
border: 1px solid #ccc;
52-
border-radius: 4px;
38+
export const StyledConnectionTextInput = styled(StyledInput)`
39+
min-width: 200px;
5340
width: 44%;
5441
`
5542
export const StyledConnectionBodyContainer = styled.div`

‎src/browser/modules/Stream/CypherFrame/__snapshots__/TableView.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ exports[`TableViews TableView does not display bodyMessage if rows 1`] = `
5151
<thead>
5252
<tr>
5353
<th
54-
class="table-header DataTables__StyledTh-bf850j-2 gjWFrA"
54+
class="table-header DataTables__StyledTh-bf850j-2 ikUpyS"
5555
>
5656
x
5757
</th>
@@ -62,7 +62,7 @@ exports[`TableViews TableView does not display bodyMessage if rows 1`] = `
6262
class="table-row DataTables__StyledBodyTr-bf850j-1 iGjwRr"
6363
>
6464
<td
65-
class="table-properties DataTables__StyledTd-bf850j-3 jDsjVi"
65+
class="table-properties DataTables__StyledTd-bf850j-3 lfnTDs"
6666
>
6767
<span>
6868
"y"

‎src/browser/modules/User/RolesSelector.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@
2020
import React from 'react'
2121
import { StyledSelect } from './styled'
2222

23-
const RolesSelector = ({ roles = [], onChange = null, selectedValue = 0 }) => {
23+
const RolesSelector = ({
24+
roles = [],
25+
onChange = null,
26+
selectedValue = 0,
27+
id
28+
}) => {
2429
let options = [
2530
<option key={'-1'} value={0}>
2631
{' '}
@@ -36,12 +41,18 @@ const RolesSelector = ({ roles = [], onChange = null, selectedValue = 0 }) => {
3641
)
3742
})
3843
)
44+
45+
const args = {
46+
...(id && { id, name: id })
47+
}
48+
3949
return (
4050
<StyledSelect
4151
className='roles-selector'
4252
placeholder='Select role'
4353
value={selectedValue}
4454
onChange={onChange}
55+
{...args}
4556
>
4657
{options}
4758
</StyledSelect>

0 commit comments

Comments
 (0)