Skip to content

Commit be8ff57

Browse files
DudaGodDudaGod
authored
fix(tinder): move open button to left side (#380)
1 parent 910ae6b commit be8ff57

File tree

7 files changed

+31
-33
lines changed

7 files changed

+31
-33
lines changed

‎lib/static/components/icons/arrows-close.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ export default class ArrowsClose extends Component {
1414

1515
render() {
1616
const {width, height} = this.props;
17+
const maxSize = Math.max(width, height);
1718

1819
return (
19-
<svg width={width} height={height} fill="none" xmlns="http://www.w3.org/2000/svg">
20-
<path className="arrows-close-icon" d="M4.302 10.789v-.324l-1.15.315a6.259 6.259 0 01-1.65.221c-.6 0-1-.448-1-1.001a1 1 0 011-1h4.5a1 1 0 011 1v4.505a1 1 0 01-1 1c-.553 0-1-.403-1-1 0-.56.074-1.117.222-1.656l.313-1.147h-.32l-1.079 1.437c-.284.379-.595.737-.93 1.072l-1.002 1.002a1 1 0 11-1.414-1.414l1.004-1.004a9.994 9.994 0 011.064-.923l1.442-1.083zm7.4-5.582v.323l1.15-.314a6.258 6.258 0 011.65-.221c.6 0 1 .447 1 1a1 1 0 01-1 1h-4.5a1 1 0 01-1-1V1.492a1 1 0 011-1c.552 0 1 .403 1 1 0 .56-.075 1.116-.222 1.656l-.314 1.147h.321l1.078-1.437c.284-.379.595-.737.93-1.072L13.798.783a1 1 0 111.413 1.414l-1.003 1.004a9.992 9.992 0 01-1.064.923l-1.442 1.083z" fill="#000" />
20+
<svg className="arrows-close" width={width} height={height} viewBox={`0 0 ${maxSize} ${maxSize}`} fill="none" xmlns="http://www.w3.org/2000/svg">
21+
<path className="arrows-close__icon" d="M4.302 10.789v-.324l-1.15.315a6.259 6.259 0 01-1.65.221c-.6 0-1-.448-1-1.001a1 1 0 011-1h4.5a1 1 0 011 1v4.505a1 1 0 01-1 1c-.553 0-1-.403-1-1 0-.56.074-1.117.222-1.656l.313-1.147h-.32l-1.079 1.437c-.284.379-.595.737-.93 1.072l-1.002 1.002a1 1 0 11-1.414-1.414l1.004-1.004a9.994 9.994 0 011.064-.923l1.442-1.083zm7.4-5.582v.323l1.15-.314a6.258 6.258 0 011.65-.221c.6 0 1 .447 1 1a1 1 0 01-1 1h-4.5a1 1 0 01-1-1V1.492a1 1 0 011-1c.552 0 1 .403 1 1 0 .56-.075 1.116-.222 1.656l-.314 1.147h.321l1.078-1.437c.284-.379.595-.737.93-1.072L13.798.783a1 1 0 111.413 1.414l-1.003 1.004a9.992 9.992 0 01-1.064.923l-1.442 1.083z" fill="#000" />
2122
</svg>
2223
);
2324
}

‎lib/static/components/icons/arrows-open.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ export default class ArrowsOpen extends Component {
1414

1515
render() {
1616
const {width, height} = this.props;
17+
const maxSize = Math.max(width, height);
1718

1819
return (
19-
<svg width={width} height={height} fill="none" xmlns="http://www.w3.org/2000/svg">
20-
<path className="arrows-open-icon" d="M11.302 1.789v-.324l-1.15.315A6.258 6.258 0 018.502 2c-.6 0-1-.448-1-1.001a1 1 0 011-1h4.5a1 1 0 011 1v4.505a1 1 0 01-1 1c-.552 0-1-.403-1-1 0-.56.075-1.117.222-1.656l.313-1.147h-.32l-1.078 1.437a10 10 0 01-.93 1.072L9.205 6.213a1 1 0 11-1.414-1.414l1.004-1.004c.332-.332.688-.641 1.064-.923l1.442-1.083zm-8.6 10.418v.323l1.15-.314a6.259 6.259 0 011.65-.221c.6 0 1 .447 1 1a1 1 0 01-1 1h-4.5a1 1 0 01-1-1V8.492a1 1 0 011-1c.552 0 1 .403 1 1 0 .56-.075 1.116-.222 1.656l-.313 1.147h.32l1.078-1.437a10 10 0 01.93-1.072l1.003-1.002a1 1 0 011.414 1.414l-1.004 1.004a9.994 9.994 0 01-1.064.923l-1.442 1.083z" fill="#000" />
20+
<svg className="arrows-open" width={width} height={height} viewBox={`0 0 ${maxSize} ${maxSize}`} fill="none" xmlns="http://www.w3.org/2000/svg">
21+
<path className="arrows-open__icon" d="M11.302 1.789v-.324l-1.15.315A6.258 6.258 0 018.502 2c-.6 0-1-.448-1-1.001a1 1 0 011-1h4.5a1 1 0 011 1v4.505a1 1 0 01-1 1c-.552 0-1-.403-1-1 0-.56.075-1.117.222-1.656l.313-1.147h-.32l-1.078 1.437a10 10 0 01-.93 1.072L9.205 6.213a1 1 0 11-1.414-1.414l1.004-1.004c.332-.332.688-.641 1.064-.923l1.442-1.083zm-8.6 10.418v.323l1.15-.314a6.259 6.259 0 011.65-.221c.6 0 1 .447 1 1a1 1 0 01-1 1h-4.5a1 1 0 01-1-1V8.492a1 1 0 011-1c.552 0 1 .403 1 1 0 .56-.075 1.116-.222 1.656l-.313 1.147h.32l1.078-1.437a10 10 0 01.93-1.072l1.003-1.002a1 1 0 011.414 1.414l-1.004 1.004a9.994 9.994 0 01-1.064.923l-1.442 1.083z" fill="#000" />
2122
</svg>
2223
);
2324
}

‎lib/static/components/modals/screenshot-accepter/header.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,11 @@ class ScreenshotAccepterHeader extends Component {
156156
handler={this.props.actions.toggleScaleImages}
157157
/>
158158
<ControlButton
159-
label={<ArrowsClose />}
160-
title="Close screenshot accepting mode (Escape)"
159+
label={<Fragment>
160+
<ArrowsClose />
161+
Switch accept mode
162+
</Fragment>}
163+
title="Close mode with fast screenshot accepting (Escape)"
161164
isSuiteControl={true}
162165
extendClassNames="screenshot-accepter__arrows-close-btn"
163166
handler={onClose}

‎lib/static/components/modals/screenshot-accepter/style.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@
2929

3030
.button.screenshot-accepter__arrows-open-btn,
3131
.button.screenshot-accepter__arrows-close-btn {
32-
line-height: 0;
33-
vertical-align: middle;
34-
margin-left: auto;
35-
margin-right: 0;
36-
padding-left: 6px;
37-
padding-right: 6px;
38-
border-radius: 2px;
32+
display: flex;
33+
align-items: center;
34+
}
35+
36+
.button.screenshot-accepter__arrows-open-btn .arrows-open,
37+
.button.screenshot-accepter__arrows-close-btn .arrows-close {
38+
margin-right: 5px;
3939
}
4040

4141
.button.screenshot-accepter__arrow-up-btn,
@@ -59,8 +59,8 @@
5959
transform-origin: center;
6060
}
6161

62-
.button:disabled .arrows-open-icon,
63-
.button:disabled .arrows-close-icon {
62+
.button:disabled .arrows-open__icon,
63+
.button:disabled .arrows-close__icon {
6464
fill: rgba(16, 16, 16, .3);
6565
}
6666

‎lib/static/components/state/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,11 @@ class State extends Component {
145145
isDisabled={isFindSameDiffDisabled}
146146
/>
147147
<ControlButton
148-
label={<ArrowsOpen />}
149-
title="Open screenshot accepting mode"
148+
label={<Fragment>
149+
<ArrowsOpen />
150+
Switch accept mode
151+
</Fragment>}
152+
title="Open mode with fast screenshot accepting"
150153
isSuiteControl={true}
151154
isDisabled={isScreenshotAccepterDisabled}
152155
extendClassNames="screenshot-accepter__arrows-open-btn"

‎lib/static/gui.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -159,13 +159,3 @@
159159
.tab-switcher {
160160
margin-bottom: 0;
161161
}
162-
163-
.button.screenshot-accepter__arrows-open-btn {
164-
line-height: 0;
165-
vertical-align: middle;
166-
margin-left: auto;
167-
margin-right: 0;
168-
padding-left: 6px;
169-
padding-right: 6px;
170-
border-radius: 2px;
171-
}

‎test/unit/lib/static/components/state/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -180,12 +180,12 @@ describe('<State/>', () => {
180180
});
181181
});
182182

183-
describe('"Open screenshot accepting mode" button', () => {
183+
describe('"Switch accept mode" button', () => {
184184
describe('in static report', () => {
185185
it('should not render button', () => {
186186
const stateComponent = mkStateComponent({}, {gui: false});
187187

188-
assert.lengthOf(stateComponent.find('[title="Open screenshot accepting mode"]'), 0);
188+
assert.lengthOf(stateComponent.find('[label$="Switch accept mode"]'), 0);
189189
});
190190

191191
it('should not call "getLastImageByStateName" selector', () => {
@@ -199,7 +199,7 @@ describe('<State/>', () => {
199199
it('should render button in gui report', () => {
200200
const stateComponent = mkStateComponent({}, {gui: true});
201201

202-
assert.lengthOf(stateComponent.find('[title="Open screenshot accepting mode"]'), 2);
202+
assert.lengthOf(stateComponent.find('[title="Open mode with fast screenshot accepting"]'), 2);
203203
});
204204

205205
it('should not call "getLastImageByStateName" selector if image id is not passed', () => {
@@ -223,7 +223,7 @@ describe('<State/>', () => {
223223

224224
const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
225225

226-
assert.isTrue(stateComponent.find('[title="Open screenshot accepting mode"]').first().prop('isDisabled'));
226+
assert.isTrue(stateComponent.find('[title="Open mode with fast screenshot accepting"]').first().prop('isDisabled'));
227227
});
228228

229229
it('should be enabled if last image is acceptable', () => {
@@ -241,7 +241,7 @@ describe('<State/>', () => {
241241

242242
const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
243243

244-
assert.isFalse(stateComponent.find('[title="Open screenshot accepting mode"]').first().prop('isDisabled'));
244+
assert.isFalse(stateComponent.find('[title="Open mode with fast screenshot accepting"]').first().prop('isDisabled'));
245245
});
246246

247247
it('should call "openModal" action on button click', () => {
@@ -258,7 +258,7 @@ describe('<State/>', () => {
258258
getLastImageByStateName.returns(image);
259259

260260
const stateComponent = mkStateComponent({imageId: 'img-id'}, initialState);
261-
stateComponent.find('[title="Open screenshot accepting mode"]').first().simulate('click');
261+
stateComponent.find('[title="Open mode with fast screenshot accepting"]').first().simulate('click');
262262

263263
assert.calledOnceWith(actionsStub.openModal, {
264264
id: modalTypes.SCREENSHOT_ACCEPTER,

0 commit comments

Comments
 (0)