Skip to content

GitLab

Commit ffbd0e25 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by JoramWilander
Browse files

MM-13410 - Updating styles for new channel modal (#2157) 

* MM-13410 - Updating styles for new channel modal

* Updating test
parent b907df6b
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 37 deletions
components/new_channel_modal/__snapshots__/new_channel_modal.test.jsx.snap
View file @ ffbd0e25
......@@ -88,7 +88,9 @@ exports[`components/NewChannelModal should match snapshot, display only private
<div
className="type-container"
>
<div>
<div
className="flex-parent"
>
<LockIcon
className="icon icon__lock icon--body type-icon"
/>
......@@ -374,7 +376,9 @@ exports[`components/NewChannelModal should match snapshot, display only public c
<div
className="type-container"
>
<div>
<div
className="flex-parent"
>
<GlobeIcon
className="icon icon__globe icon--body type-icon"
/>
......@@ -658,6 +662,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
className="col-sm-9"
>
<div
className="multi-select__radio"
key="channelType"
>
<div
......@@ -671,7 +676,9 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<GlobeIcon
className="icon icon__globe icon--body type-icon"
/>
......@@ -687,7 +694,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
/>
</div>
</label>
<br />
</div>
<div
className="radio"
......@@ -700,7 +706,9 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<LockIcon
className="icon icon__lock icon--body type-icon"
/>
......@@ -716,7 +724,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
/>
</div>
</label>
<br />
</div>
</div>
</div>
......@@ -987,6 +994,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
className="col-sm-9"
>
<div
className="multi-select__radio"
key="channelType"
>
<div
......@@ -1000,7 +1008,9 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<GlobeIcon
className="icon icon__globe icon--body type-icon"
/>
......@@ -1016,7 +1026,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
/>
</div>
</label>
<br />
</div>
<div
className="radio"
......@@ -1029,7 +1038,9 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<LockIcon
className="icon icon__lock icon--body type-icon"
/>
......@@ -1045,7 +1056,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
/>
</div>
</label>
<br />
</div>
</div>
</div>
......@@ -1316,6 +1326,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
className="col-sm-9"
>
<div
className="multi-select__radio"
key="channelType"
>
<div
......@@ -1329,7 +1340,9 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<GlobeIcon
className="icon icon__globe icon--body type-icon"
/>
......@@ -1345,7 +1358,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
/>
</div>
</label>
<br />
</div>
<div
className="radio"
......@@ -1358,7 +1370,9 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<LockIcon
className="icon icon__lock icon--body type-icon"
/>
......@@ -1374,7 +1388,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
/>
</div>
</label>
<br />
</div>
</div>
</div>
......@@ -1655,6 +1668,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
className="col-sm-9"
>
<div
className="multi-select__radio"
key="channelType"
>
<div
......@@ -1668,7 +1682,9 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<GlobeIcon
className="icon icon__globe icon--body type-icon"
/>
......@@ -1684,7 +1700,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
/>
</div>
</label>
<br />
</div>
<div
className="radio"
......@@ -1697,7 +1712,9 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<LockIcon
className="icon icon__lock icon--body type-icon"
/>
......@@ -1713,7 +1730,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
/>
</div>
</label>
<br />
</div>
</div>
</div>
......@@ -1997,6 +2013,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
className="col-sm-9"
>
<div
className="multi-select__radio"
key="channelType"
>
<div
......@@ -2010,7 +2027,9 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<GlobeIcon
className="icon icon__globe icon--body type-icon"
/>
......@@ -2026,7 +2045,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
/>
</div>
</label>
<br />
</div>
<div
className="radio"
......@@ -2039,7 +2057,9 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
onChange={[Function]}
type="radio"
/>
<div>
<div
className="flex-parent"
>
<LockIcon
className="icon icon__lock icon--body type-icon"
/>
......@@ -2055,7 +2075,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
/>
</div>
</label>
<br />
</div>
</div>
</div>
......
components/new_channel_modal/new_channel_modal.jsx
View file @ ffbd0e25
......@@ -196,7 +196,7 @@ export default class NewChannelModal extends React.PureComponent {
}
const publicChannelDesc = (
<div>
<div className='flex-parent'>
<GlobeIcon className='icon icon__globe icon--body type-icon'/>
<FormattedMessage
id='channel_modal.publicName'
......@@ -210,7 +210,7 @@ export default class NewChannelModal extends React.PureComponent {
);
const privateChannelDesc = (
<div>
<div className='flex-parent'>
<LockIcon className='icon icon__lock icon--body type-icon'/>
<FormattedMessage
id='channel_modal.privateName'
......@@ -226,7 +226,10 @@ export default class NewChannelModal extends React.PureComponent {
let typeOptions = null;
if (enableTypeSelection) {
typeOptions = (
<div key='channelType'>
<div
key='channelType'
className='multi-select__radio'
>
<div className='radio'>
<label>
<input
......@@ -238,7 +241,6 @@ export default class NewChannelModal extends React.PureComponent {
/>
{publicChannelDesc}
</label>
<br/>
</div>
<div className='radio'>
<label>
......@@ -251,7 +253,6 @@ export default class NewChannelModal extends React.PureComponent {
/>
{privateChannelDesc}
</label>
<br/>
</div>
</div>
);
......
sass/components/_modal.scss
View file @ ffbd0e25
......@@ -893,13 +893,3 @@
height: calc(90vh - 180px);
}
}
.new-channel {
.type-container {
margin-top: 8px;
}
.type-icon {
padding-left: 1px;
padding-right: 7px;
}
}
sass/layout/_forms.scss
View file @ ffbd0e25
......@@ -98,6 +98,44 @@
}
}
.multi-select__radio {
label {
display: flex;
align-items: center;
}
input[type='radio'] {
margin-top: 0;
width: 13px;
}
.flex-parent {
display: flex;
align-items: center;
}
.icon {
display: flex;
height: 21px;
align-items: center;
padding-right: 1px;
margin-right: 6px;
width: 14px;
justify-content: center;
& + span {
font-weight: 600;
margin-right: 4px;
}
}
span {
&:last-child {
@include opacity(.8);
}
}
}
.form-control {
&.inline {
display: inline-block;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment