Using the lightbulb icon for linking to the documentation (#25013)

* Using the lightbulb icon for linking to the documentation

* Using the LightbulbOutlineIcon component

* Generating the test snapshot
This commit is contained in:
Jesús Espino 2023-10-23 13:41:13 +02:00 committed by GitHub
parent 13aaf6d363
commit bdacc97454
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 7 deletions

View File

@ -54,9 +54,18 @@ Object {
rel="noopener noreferrer"
target="_blank"
>
<i
class="icon icon-help-circle-outline"
/>
<svg
fill="currentColor"
height="1em"
version="1.1"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"
/>
</svg>
<span>
Learn more about notifications
</span>
@ -278,9 +287,18 @@ Object {
rel="noopener noreferrer"
target="_blank"
>
<i
class="icon icon-help-circle-outline"
/>
<svg
fill="currentColor"
height="1em"
version="1.1"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"
/>
</svg>
<span>
Learn more about notifications
</span>

View File

@ -13,6 +13,7 @@
a {
display: flex;
align-items: center;
&:hover,
&:active,
@ -34,6 +35,16 @@
text-decoration: underline;
}
}
> svg {
width: 18px;
height: 18px;
padding: 2px;
margin-right: 4px;
background: rgba(var(--button-bg-rgb), 0.12);
border-radius: 50%;
text-align: center;
}
}
}
}

View File

@ -10,6 +10,7 @@ import {FormattedMessage, injectIntl} from 'react-intl';
import type {Styles as ReactSelectStyles, ValueType} from 'react-select';
import CreatableReactSelect from 'react-select/creatable';
import {LightbulbOutlineIcon} from '@mattermost/compass-icons/components';
import type {ServerError} from '@mattermost/types/errors';
import type {UserNotifyProps, UserProfile} from '@mattermost/types/users';
@ -1102,7 +1103,7 @@ class NotificationsTab extends React.PureComponent<Props, State> {
values={{
a: (chunks: string) => ((
<ExternalLink href='https://mattermost.com/pl/about-notifications'>
<i className='icon icon-help-circle-outline'/>
<LightbulbOutlineIcon/>
<span>{chunks}</span>
</ExternalLink>
)),