Skip to content

Commit 0cb5e3d

Browse files
CorneeltronCorneeltron
authored
Merge pull request #52 from davefranz/styling
Styling fixes
2 parents e8ec11c + 44788e1 commit 0cb5e3d

File tree

8 files changed

+70
-187
lines changed

8 files changed

+70
-187
lines changed

‎src/containers/LeftPanel/Context/Context.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const Context = ({ context, index, dispatchToHooksTestCase }) => {
5050
<div>
5151
<div id={styles.querySelector}>
5252
<div id={styles.contextBox}>
53-
<label htmlFor='contextFile'>Import Context From</label>
53+
<label htmlFor='contextFile' className={styles.queryLabel}>Import Context From</label>
5454
<input
5555
type='text'
5656
id='contextFile'

‎src/containers/LeftPanel/Context/Context.module.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232

3333
.queryLabel {
34-
margin-bottom: 5px;
34+
margin-bottom: 1px;
3535
display: block;
3636
}
3737

@@ -110,8 +110,9 @@
110110
#contextBox {
111111
width: 50%;
112112
margin-right: 7%;
113+
// margin-bottom: 5px;
113114
input {
114-
margin-top: 6px;
115+
margin-top: 1px;
115116
width: 100%;
116117
margin-bottom: 7%
117118

‎src/containers/LeftPanel/Endpoint/Endpoint.jsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -36,20 +36,20 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
3636
ref={provided.innerRef}
3737
{...provided.draggableProps}
3838
{...provided.dragHandleProps}
39-
id={styles.actionCreator}
39+
id={styles.modal}
4040
>
4141
<img src={closeIcon} id={styles.close} alt='close' onClick={handleClickDeleteEndpoint} />
4242

43-
<div id={styles.actionCreatorHeader}>
43+
<div id={styles.header}>
4444
<img src={dragIcon} alt='drag' />
4545
<h3>Endpoint</h3>
4646
</div>
4747

4848

49-
<div id={styles.filesFlexBox}>
50-
<div id={styles.files}>
49+
<div id={styles.groupFlexbox}>
50+
<div id={styles.serverInput}>
5151
<label htmlFor='endpointFile'>Import Server From</label>
52-
<div id={styles.payloadFlexBox}>
52+
<div id={styles.inputFlexBox}>
5353
<input
5454
type='text'
5555
placeholder='File Name'
@@ -61,9 +61,9 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
6161
</div>
6262
</div>
6363

64-
<div id={styles.filesFlexBox}>
65-
<div id={styles.querySelector}>
66-
<label htmlFor='method'>
64+
<div id={styles.groupFlexbox}>
65+
<div id={styles.dropdownWrapper}>
66+
<label htmlFor='method' >
6767
Method
6868
</label>
6969
<div id={styles.dropdownFlex}>
@@ -81,11 +81,11 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
8181
</div>
8282
</div>
8383

84-
<div id={styles.files}>
84+
<div id={styles.alignRight}>
8585
<label htmlFor='route'>
8686
Route
8787
</label>
88-
<div id={styles.payloadFlexBox}>
88+
<div id={styles.inputFlexBox}>
8989
<input
9090
type='text'
9191
name='route'
@@ -95,30 +95,31 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }) => {
9595
</div>
9696
</div>
9797

98-
<div id={styles.stateFlexBox}>
99-
<div id={styles.state}>
98+
<div id={styles.groupFlexbox}>
99+
<div id={styles.labelInput}>
100100
<label htmlFor='requestBody'>
101101
Expected Response
102102
</label>
103-
<div id={styles.payloadFlexBox}>
103+
<div id={styles.inputFlexBox}>
104104
<input
105105
type='text'
106106
name='expectedResponse'
107-
placeholder="body.key or status"
107+
placeholder="eg. status"
108108
onChange={e => handleChangeEndpointFields(e, 'expectedResponse')} />
109109
</div>
110110
</div>
111111

112-
<span id={styles.matcher}>toBe</span>
112+
{/* <span id={styles.matcher}>toBe</span> */}
113113

114-
<div id={styles.state}>
114+
<div id={styles.labelInput}>
115115
<label htmlFor='value'>
116-
Value
116+
Expected Value
117117
</label>
118-
<div id={styles.payloadFlexBox}>
118+
<div id={styles.inputFlexBox}>
119119
<input
120120
type='text'
121121
name='value'
122+
placeholder='eg. 200'
122123
onChange={e => handleChangeEndpointFields(e, 'value')}
123124
/>
124125
</div>

‎src/containers/LeftPanel/Endpoint/Endpoint.module.scss‎

Lines changed: 15 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
@import '../../../assets/stylesheets/colors.scss';
33
@import '../LeftPanel.module.scss';
44

5-
#actionCreator {
5+
6+
#modal {
67
@include box-styling;
78
font-family: $raleway;
89
letter-spacing: 0.5px;
@@ -12,7 +13,7 @@
1213
float: right;
1314
}
1415

15-
#actionCreatorHeader {
16+
#header {
1617
@include box-header-alignment;
1718
justify-content: flex-start;
1819
display: flex;
@@ -29,45 +30,32 @@
2930
}
3031
}
3132

32-
#filesFlexBox {
33+
#groupFlexbox {
3334
display: flex;
3435
align-items: center;
3536
margin-bottom: 15px;
37+
justify-content: space-between;
3638
}
3739

38-
#files {
39-
width: 50%;
40+
#alignRight {
41+
width: 43%;
4042
margin-right: 7%;
4143
input {
4244
margin-top: 6px;
4345
width: 100%;
4446
}
4547
}
4648

47-
48-
49-
#actionFlexBox {
50-
display: flex;
51-
align-items: center;
52-
margin-bottom: 15px;
53-
}
54-
55-
#actions {
56-
width: 50%;
49+
#serverInput {
50+
width: 43%;
5751
margin-right: 7%;
5852
input {
5953
margin-top: 6px;
6054
width: 100%;
6155
}
6256
}
6357

64-
#payloadFlexBox {
65-
display: flex;
66-
align-items: center;
67-
width: 100%;
68-
}
69-
70-
#payloadKey {
58+
#labelInput {
7159
width: 50%;
7260
margin-right: 7%;
7361
input {
@@ -76,14 +64,13 @@
7664
}
7765
}
7866

79-
#payloadType {
80-
margin-right: 7%;
81-
width: 50%;
67+
#dropdownWrapper {
68+
margin-right: 9%;
8269
select {
83-
margin-top: 6px;
8470
font-family: $raleway;
8571
width: 100%;
8672
height: 25px;
73+
margin: 0 3px 0 0;
8774
background-color: white;
8875
border: 1px solid $light-gray;
8976
font-size: 12px;
@@ -95,63 +82,16 @@
9582
#dropdownFlex {
9683
display: flex;
9784
align-items: center;
98-
width: 100%;
85+
width: 340%;
9986
margin-top: 6px;
10087
}
10188

102-
.queryLabel {
103-
margin-bottom: 5px;
104-
display: block;
105-
}
106-
107-
#dropdownFlex {
108-
display: flex;
109-
align-items: center;
110-
width: 111%;
111-
}
112-
113-
#queryFlexBox {
89+
#inputFlexBox {
11490
display: flex;
11591
align-items: center;
11692
width: 100%;
11793
}
11894

119-
#querySelector {
120-
margin-right: 9%;
121-
select {
122-
font-family: $raleway;
123-
width: 100%;
124-
height: 25px;
125-
margin: 0 3px 0 0;
126-
background-color: white;
127-
border: 1px solid $light-gray;
128-
font-size: 12px;
129-
letter-spacing: 0.5px;
130-
color: $dark-gray;
131-
}
132-
}
133-
134-
#filesFlexBox {
135-
display: flex;
136-
align-items: center;
137-
margin-bottom: 15px;
138-
}
139-
140-
#stateFlexBox {
141-
display: flex;
142-
align-items: center;
143-
margin-bottom: 15px;
144-
}
145-
146-
#state {
147-
width: 50%;
148-
margin-right: 7%;
149-
input {
150-
margin-top: 6px;
151-
width: 100%;
152-
}
153-
}
154-
15595
#hastooltip {
15696
@include hastooltip($tooltip-transition-in-duration: 0.3s);
15797
}

‎src/containers/LeftPanel/HookRender/HookRender.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const HookRender = ({ hookRender, index, dispatchToHooksTestCase }) => {
4747

4848
<div id={styles.hookRenderHeader}>
4949
<img src={dragIcon} alt='drag' />
50-
<h3>Hook : Rendering</h3>
50+
<h3>Hook: Rendering</h3>
5151
</div>
5252

5353
<div id={styles.hookRenderFlexBox}>
@@ -79,7 +79,7 @@ const HookRender = ({ hookRender, index, dispatchToHooksTestCase }) => {
7979
</div>
8080
<div id={styles.hookRenderFlexBox}>
8181
<div id={styles.hookRenderType}>
82-
<label htmlFor='returnValue'>Return Value</label>
82+
<label htmlFor='returnValue'>Managed State</label>
8383
<input
8484
type='text'
8585
id='returnValue'
@@ -88,7 +88,7 @@ const HookRender = ({ hookRender, index, dispatchToHooksTestCase }) => {
8888
/>
8989
</div>
9090
<div id={styles.hookRenderType}>
91-
<label htmlFor='expectedReturnValue'>Expected Return Value</label>
91+
<label htmlFor='expectedReturnValue'>Current Value</label>
9292
<input
9393
type='text'
9494
id='expectedReturnValue'

‎src/containers/LeftPanel/HookUpdates/HookUpdates.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const HookUpdates = ({ hookUpdates, index, dispatchToHooksTestCase }) => {
9494
/>
9595
</div>
9696
<div id={styles.state}>
97-
<label htmlFor='updatedState'>Updated State</label>
97+
<label htmlFor='updatedState'>Updated Value</label>
9898
<input
9999
type='text'
100100
id='updatedState'

0 commit comments

Comments
 (0)