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

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

* MM-13410 - Updating styles for new channel modal

* Updating test
parent b907df6b
...@@ -88,7 +88,9 @@ exports[`components/NewChannelModal should match snapshot, display only private ...@@ -88,7 +88,9 @@ exports[`components/NewChannelModal should match snapshot, display only private
<div <div
className="type-container" className="type-container"
> >
<div> <div
className="flex-parent"
>
<LockIcon <LockIcon
className="icon icon__lock icon--body type-icon" className="icon icon__lock icon--body type-icon"
/> />
...@@ -374,7 +376,9 @@ exports[`components/NewChannelModal should match snapshot, display only public c ...@@ -374,7 +376,9 @@ exports[`components/NewChannelModal should match snapshot, display only public c
<div <div
className="type-container" className="type-container"
> >
<div> <div
className="flex-parent"
>
<GlobeIcon <GlobeIcon
className="icon icon__globe icon--body type-icon" className="icon icon__globe icon--body type-icon"
/> />
...@@ -658,6 +662,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`] ...@@ -658,6 +662,7 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
className="col-sm-9" className="col-sm-9"
> >
<div <div
className="multi-select__radio"
key="channelType" key="channelType"
> >
<div <div
...@@ -671,7 +676,9 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`] ...@@ -671,7 +676,9 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<GlobeIcon <GlobeIcon
className="icon icon__globe icon--body type-icon" className="icon icon__globe icon--body type-icon"
/> />
...@@ -687,7 +694,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`] ...@@ -687,7 +694,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
<div <div
className="radio" className="radio"
...@@ -700,7 +706,9 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`] ...@@ -700,7 +706,9 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<LockIcon <LockIcon
className="icon icon__lock icon--body type-icon" className="icon icon__lock icon--body type-icon"
/> />
...@@ -716,7 +724,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`] ...@@ -716,7 +724,6 @@ exports[`components/NewChannelModal should match snapshot, modal not showing 1`]
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
</div> </div>
</div> </div>
...@@ -987,6 +994,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = ` ...@@ -987,6 +994,7 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
className="col-sm-9" className="col-sm-9"
> >
<div <div
className="multi-select__radio"
key="channelType" key="channelType"
> >
<div <div
...@@ -1000,7 +1008,9 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = ` ...@@ -1000,7 +1008,9 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<GlobeIcon <GlobeIcon
className="icon icon__globe icon--body type-icon" className="icon icon__globe icon--body type-icon"
/> />
...@@ -1016,7 +1026,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = ` ...@@ -1016,7 +1026,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
<div <div
className="radio" className="radio"
...@@ -1029,7 +1038,9 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = ` ...@@ -1029,7 +1038,9 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<LockIcon <LockIcon
className="icon icon__lock icon--body type-icon" className="icon icon__lock icon--body type-icon"
/> />
...@@ -1045,7 +1056,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = ` ...@@ -1045,7 +1056,6 @@ exports[`components/NewChannelModal should match snapshot, modal showing 1`] = `
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
</div> </div>
</div> </div>
...@@ -1316,6 +1326,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1 ...@@ -1316,6 +1326,7 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
className="col-sm-9" className="col-sm-9"
> >
<div <div
className="multi-select__radio"
key="channelType" key="channelType"
> >
<div <div
...@@ -1329,7 +1340,9 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1 ...@@ -1329,7 +1340,9 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<GlobeIcon <GlobeIcon
className="icon icon__globe icon--body type-icon" className="icon icon__globe icon--body type-icon"
/> />
...@@ -1345,7 +1358,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1 ...@@ -1345,7 +1358,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
<div <div
className="radio" className="radio"
...@@ -1358,7 +1370,9 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1 ...@@ -1358,7 +1370,9 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<LockIcon <LockIcon
className="icon icon__lock icon--body type-icon" className="icon icon__lock icon--body type-icon"
/> />
...@@ -1374,7 +1388,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1 ...@@ -1374,7 +1388,6 @@ exports[`components/NewChannelModal should match snapshot, on displayNameError 1
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
</div> </div>
</div> </div>
...@@ -1655,6 +1668,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] = ...@@ -1655,6 +1668,7 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
className="col-sm-9" className="col-sm-9"
> >
<div <div
className="multi-select__radio"
key="channelType" key="channelType"
> >
<div <div
...@@ -1668,7 +1682,9 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] = ...@@ -1668,7 +1682,9 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<GlobeIcon <GlobeIcon
className="icon icon__globe icon--body type-icon" className="icon icon__globe icon--body type-icon"
/> />
...@@ -1684,7 +1700,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] = ...@@ -1684,7 +1700,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
<div <div
className="radio" className="radio"
...@@ -1697,7 +1712,9 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] = ...@@ -1697,7 +1712,9 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<LockIcon <LockIcon
className="icon icon__lock icon--body type-icon" className="icon icon__lock icon--body type-icon"
/> />
...@@ -1713,7 +1730,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] = ...@@ -1713,7 +1730,6 @@ exports[`components/NewChannelModal should match snapshot, on serverError 1`] =
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
</div> </div>
</div> </div>
...@@ -1997,6 +2013,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille ...@@ -1997,6 +2013,7 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
className="col-sm-9" className="col-sm-9"
> >
<div <div
className="multi-select__radio"
key="channelType" key="channelType"
> >
<div <div
...@@ -2010,7 +2027,9 @@ exports[`components/NewChannelModal should match snapshot, private channel fille ...@@ -2010,7 +2027,9 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<GlobeIcon <GlobeIcon
className="icon icon__globe icon--body type-icon" className="icon icon__globe icon--body type-icon"
/> />
...@@ -2026,7 +2045,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille ...@@ -2026,7 +2045,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
<div <div
className="radio" className="radio"
...@@ -2039,7 +2057,9 @@ exports[`components/NewChannelModal should match snapshot, private channel fille ...@@ -2039,7 +2057,9 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
/> />
<div> <div
className="flex-parent"
>
<LockIcon <LockIcon
className="icon icon__lock icon--body type-icon" className="icon icon__lock icon--body type-icon"
/> />
...@@ -2055,7 +2075,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille ...@@ -2055,7 +2075,6 @@ exports[`components/NewChannelModal should match snapshot, private channel fille
/> />
</div> </div>
</label> </label>
<br />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -196,7 +196,7 @@ export default class NewChannelModal extends React.PureComponent { ...@@ -196,7 +196,7 @@ export default class NewChannelModal extends React.PureComponent {
} }
const publicChannelDesc = ( const publicChannelDesc = (
<div> <div className='flex-parent'>
<GlobeIcon className='icon icon__globe icon--body type-icon'/> <GlobeIcon className='icon icon__globe icon--body type-icon'/>
<FormattedMessage <FormattedMessage
id='channel_modal.publicName' id='channel_modal.publicName'
...@@ -210,7 +210,7 @@ export default class NewChannelModal extends React.PureComponent { ...@@ -210,7 +210,7 @@ export default class NewChannelModal extends React.PureComponent {
); );
const privateChannelDesc = ( const privateChannelDesc = (
<div> <div className='flex-parent'>
<LockIcon className='icon icon__lock icon--body type-icon'/> <LockIcon className='icon icon__lock icon--body type-icon'/>
<FormattedMessage <FormattedMessage
id='channel_modal.privateName' id='channel_modal.privateName'
...@@ -226,7 +226,10 @@ export default class NewChannelModal extends React.PureComponent { ...@@ -226,7 +226,10 @@ export default class NewChannelModal extends React.PureComponent {
let typeOptions = null; let typeOptions = null;
if (enableTypeSelection) { if (enableTypeSelection) {
typeOptions = ( typeOptions = (
<div key='channelType'> <div
key='channelType'
className='multi-select__radio'
>
<div className='radio'> <div className='radio'>
<label> <label>
<input <input
...@@ -238,7 +241,6 @@ export default class NewChannelModal extends React.PureComponent { ...@@ -238,7 +241,6 @@ export default class NewChannelModal extends React.PureComponent {
/> />
{publicChannelDesc} {publicChannelDesc}
</label> </label>
<br/>
</div> </div>
<div className='radio'> <div className='radio'>
<label> <label>
...@@ -251,7 +253,6 @@ export default class NewChannelModal extends React.PureComponent { ...@@ -251,7 +253,6 @@ export default class NewChannelModal extends React.PureComponent {
/> />
{privateChannelDesc} {privateChannelDesc}
</label> </label>
<br/>
</div> </div>
</div> </div>
); );
......
...@@ -893,13 +893,3 @@ ...@@ -893,13 +893,3 @@
height: calc(90vh - 180px); height: calc(90vh - 180px);
} }
} }
.new-channel {
.type-container {
margin-top: 8px;
}
.type-icon {
padding-left: 1px;
padding-right: 7px;
}
}
...@@ -98,6 +98,44 @@ ...@@ -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 { .form-control {
&.inline { &.inline {
display: inline-block; 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