mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
MM-28014 Improve Channel Intros (#26413)
* added SVGs for channel intros and initial changes to styles and layout * cleaned up svgs, made theme use theme colors * updated action buttons in channel intro * adding mobile view changes * fixed lint issues * fixed test issues * fixed test and i18n issues * updates to action button styles and reworked grouping of buttons * updated off-topic and town square intro to remove the add members button * updated default add members text and groups text * fixed lint issue on action button css * imported action button in module scss instead * fixes from code review * changed avatar tokens not to be so custom * fixed type issue with avatar component * fixed single quote issue with tests * Revert "changed avatar tokens not to be so custom" This reverts commit700f172f0d. * Revert "fixed type issue with avatar component" This reverts commit5ad1092ba4. * fixed avatar types and order of sizes
This commit is contained in:
Matthew Birtch
GitHub
parent
5a97ba09d5
commit
e43ed713d8
@ -59,13 +59,13 @@ describe('Keyboard Shortcuts', () => {
|
||||
});
|
||||
|
||||
// # Verify that we are in the test channel
|
||||
cy.get('#channelIntro').contains('.channel-intro__title', `Beginning of ${testChannel.display_name}`).should('be.visible');
|
||||
cy.get('#channelIntro').contains('.channel-intro__title', `${testChannel.display_name}`).should('be.visible');
|
||||
|
||||
// # Verify that the right channel is displayed in LHS
|
||||
cy.uiGetLhsSection('CHANNELS').findByText(testChannel.display_name).should('be.visible');
|
||||
|
||||
// # Verify that the current user(sysadmin) created the channel
|
||||
cy.get('#channelIntro').contains('.channel-intro__content', `This is the start of the ${testChannel.display_name} channel, created by sysadmin`).should('be.visible');
|
||||
cy.get('#channelIntro').contains('.channel-intro__created', 'Public channel created by sysadmin').should('be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -51,10 +51,10 @@ describe('Messaging', () => {
|
||||
|
||||
// # Verify that we are in a DM channel
|
||||
cy.get('#channelIntro').should('be.visible').within(() => {
|
||||
cy.get('.channel-intro-profile').
|
||||
cy.get('.channel-intro__title').
|
||||
should('be.visible').
|
||||
and('have.text', secondUser.username);
|
||||
cy.get('.channel-intro-text').
|
||||
cy.get('.channel-intro__text').
|
||||
should('be.visible').
|
||||
and('contain', `This is the start of your direct message history with ${secondUser.username}.`).
|
||||
and('contain', 'Direct messages and files shared here are not shown to people outside this area.');
|
||||
|
||||
@ -137,8 +137,8 @@ describe('Group Message', () => {
|
||||
});
|
||||
|
||||
// * Assert that intro message includes the right copy
|
||||
const expectedChannelInfo = `This is the start of your group message history with ${sortedParticipants[0].username}, ${sortedParticipants[1].username}.Messages and files shared here are not shown to people outside this area.`;
|
||||
cy.get('#channelIntro p.channel-intro-text').first().should('contain', expectedChannelInfo);
|
||||
const expectedChannelInfo = 'This is the start of your group message history with these teammates.';
|
||||
cy.get('#channelIntro p.channel-intro__text').first().should('contain', expectedChannelInfo);
|
||||
cy.get('#channelIntro .profile-icon').should('have.length', '2');
|
||||
|
||||
cy.location().then((loc) => {
|
||||
|
||||
@ -95,12 +95,12 @@ function verifyDMChannelViaSendMessage(postId, team, channel, profileSelector, u
|
||||
// * Verify that it redirects into the DM channel and matches channel intro
|
||||
cy.get('#channelIntro').should('be.visible').within(() => {
|
||||
cy.url().should('include', `/${team.name}/messages/@${user.username}`);
|
||||
cy.get('.channel-intro-profile').
|
||||
cy.get('.channel-intro__title').
|
||||
should('be.visible').
|
||||
and('have.text', user.username);
|
||||
cy.get('.channel-intro-text').
|
||||
cy.get('.channel-intro__text').
|
||||
should('be.visible').
|
||||
and('contain', `This is the start of your direct message history with ${user.username}.`).
|
||||
and('contain', 'Direct messages and files shared here are not shown to people outside this area.');
|
||||
and('contain', 'Messages and files shared here are not shown to anyone else.');
|
||||
});
|
||||
}
|
||||
|
||||
@ -136,7 +136,7 @@ describe('Multi-user group messages', () => {
|
||||
// * Original messages does not exist
|
||||
cy.contains('.post-message__text', 'historical').should('not.exist');
|
||||
|
||||
cy.contains('p.channel-intro-text span', 'This is the start of your group message history with');
|
||||
cy.contains('p.channel-intro__text', 'This is the start of your group message history with');
|
||||
|
||||
// * New user is added to the GM
|
||||
cy.get('.member-rhs__trigger').click();
|
||||
|
||||
@ -0,0 +1,169 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
type SvgProps = {
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
|
||||
const PrivateChannelIntroSvg = (props: SvgProps) => (
|
||||
<svg
|
||||
width={props.width ?? '151'}
|
||||
height={props.height ?? '149'}
|
||||
viewBox='0 0 220 218'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
xmlnsXlink='http://www.w3.org/1999/xlink'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d='M198.504 122.404a70.65 70.65 0 0 0 21.494-50.184A70.65 70.65 0 0 0 199.311 21.7a70.65 70.65 0 0 0-100.702.789L-33 154.084 66.913 254l131.591-131.596Z'
|
||||
fill='url(#b)'
|
||||
fillOpacity={0.12}
|
||||
/>
|
||||
<ellipse
|
||||
cx={90.15}
|
||||
cy={214.903}
|
||||
rx={37.683}
|
||||
ry={1.903}
|
||||
fill='#000'
|
||||
fillOpacity={0.12}
|
||||
/>
|
||||
<path
|
||||
d='m77.95 52.356.4-11.97-.91-4.74c1.665-4.31 4.111-4.008 5.611-4.145 3.42-.31 5.702-2.196 7.275-.53.855.997 1.818 5.07 1.973 8.235.109 1.675.691 3.102-.546 3.944-.852.468-1.744.86-2.664 1.172l.455 8.959-11.594-.925Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M91.244 35.418a17.311 17.311 0 0 1 3.083 2.745c.282 1.254-3.146 1.894-3.146 1.894l.063-4.64Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M85.452 44.797a7.792 7.792 0 0 0 3.583-.448c.427-.174-.791.604-1.228.76a3.5 3.5 0 0 1-1.819.384c-.436-.073-1-.732-.536-.696Z'
|
||||
fill='#7A5600'
|
||||
/>
|
||||
<path
|
||||
d='M94.936 29.543a1.57 1.57 0 0 0-.767-.82 1.555 1.555 0 0 0-1.115-.095c-3.228.54-2.62-2.288-7.375-1.483-3.31.559-6.801 0-9.73 1.693a6.266 6.266 0 0 0-2.873 2.874 2.982 2.982 0 0 0-.166 2.009c.18.668.586 1.252 1.148 1.651.2.119.437.22.537.43a.92.92 0 0 1-.055.659c-.409 1.235-.773 2.745.146 3.66.509.513 1.364.75 1.564 1.446.109.385 0 .796.045 1.2.191 1.06 1.819 1.234 2.592.484a4.594 4.594 0 0 0 1.01-3.02c.08-.96.108-2.068-.601-2.745-.327-.311-.791-.494-.964-.915a1.252 1.252 0 0 1 .518-1.373 2.51 2.51 0 0 1 3.692.915c.264.604.346 1.4.91 1.693.736.366 1.573-.457 1.673-1.272a14.106 14.106 0 0 0-.246-2.452c0-.824.418-1.83 1.237-1.83.27.014.537.07.79.164 1.607.456 3.301.5 4.93.129a5.04 5.04 0 0 0 2.236-.916 2.186 2.186 0 0 0 .864-2.086Z'
|
||||
fill='#4A2407'
|
||||
/>
|
||||
<path
|
||||
d='m88.698 34.65.046-.092c-2.428-.22-5.456-.412-7.53-.385-2.073.028-3.028.32-4.11 2.197-.181.32.346.549.537.228a2.998 2.998 0 0 1 1.02-1.28 2.97 2.97 0 0 1 1.535-.55c1.055-.082 2.146 0 3.192 0 1.336 0 3.41.192 5.137.357.055-.165.11-.32.173-.476Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M89.016 36.434a1.765 1.765 0 0 1-.681-1.767c.127-.96.836-1.656 1.573-1.555.395.113.731.377.937.736.205.359.264.784.163 1.185-.127.916-.837 1.657-1.573 1.556a1.014 1.014 0 0 1-.419-.155Zm1.092-2.746a.535.535 0 0 0-.255-.091c-.5-.073-.982.448-1.082 1.162-.1.714.227 1.354.727 1.428.5.073.973-.458 1.073-1.172a1.335 1.335 0 0 0-.463-1.363v.036Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M84.543 51.578c23.642.183 23.578-2.05 25.951 26.017 2.373 28.066 2.41 29.081-20.968 30.628-15.586 1.034-24.788 7.321-25.597-1.3-.819-8.784-1.337-8.528-2.728-23.453-3.155-33.026-2.619-32.093 23.342-31.892Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M95.163 72.324c6.747 7.705 21.987 13.662 33.763 13.662 1.682.01 3.357-.205 4.983-.64a16.561 16.561 0 0 0 2.9-1.09c9.694-4.767 12.576-19.482 14.686-24.533 2.6-6.214-.1-2.352 1.655-5.902.627-1.273 2.173-2.096 2.673-2.746.718-.915-.655-2.15-5.838 1.382-8.184 5.49-7.274 16.554-15.331 17.716a12.045 12.045 0 0 1-3.046 0 19.195 19.195 0 0 1-2.682-.485c-14.376-3.569-15.595-17.24-29.743-17.798 0-.037-10.776 12.674-4.02 20.434ZM21.246 62.047c-.273.769.91 4.576 1.228 8.062.782 8.4 3.346 21.294 15.258 26.218a14 14 0 0 0 4.737 1.006 16.815 16.815 0 0 0 3.092-.146c7.274-.915 15.267-6.25 19.232-14.569 5.455-11.484 7.674-30.966 7.674-30.966-5.256 0-18.186-1.016-22.887 19.885a11.266 11.266 0 0 1-1.9 4.522 11.18 11.18 0 0 1-3.638 3.274c-.9.479-1.88.789-2.891.915a7.63 7.63 0 0 1-4.038-.578 7.685 7.685 0 0 1-3.173-2.579c-7.056-9.507-7.93-19.738-13.012-20.745-5.083-1.006 1.646 1.958.318 5.701Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M99.182 51.853c14.149.558 15.368 14.23 29.744 17.799 1.5.4 3.048.591 4.601.567.664 4.878 1.145 9.782 1.609 14.696-1.996.7-4.097 1.05-6.21 1.034-11.776 0-27.016-5.957-33.763-13.671-6.747-7.714 4.02-20.425 4.02-20.425ZM42.824 79.855c3.037-1.034 5.765-3.853 6.756-8.318 4.665-20.901 17.631-19.895 22.878-19.885 0 0-2.192 19.482-7.665 30.967-4.42 9.26-13.786 14.778-21.697 14.724a59.965 59.965 0 0 0-.272-17.488Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M111.549 93.938c13.785 40.667 14.622 57.368 13.339 71.378-1.282 14.01-11.439 28.423-24.687 38.974-2.792 1.995-6.283 3.404-4.074 8.84 3.21 7.906-5.237-2.48-7.347-7.651-2.11-5.17 20.259-14.165 15.094-41.774-5.164-27.608-19.022-38.901-27.688-58.438s35.363-11.329 35.363-11.329Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M111.549 93.938c13.785 40.667 14.622 57.368 13.339 71.378-1.282 14.01-11.439 28.423-24.687 38.974-2.792 1.995-6.283 3.404-4.074 8.84 3.21 7.906-5.237-2.48-7.347-7.651-2.11-5.17 20.259-14.165 15.094-41.774-5.164-27.608-19.022-38.901-27.688-58.438s35.363-11.329 35.363-11.329Z'
|
||||
fill='#000'
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<path
|
||||
d='M93.827 126.818c1.218 2.333 2.618 4.831 4.092 7.412l-.5.412c-1.537-2.746-3.001-5.363-4.12-7.513-.182-.348.337-.659.528-.311ZM101.337 192.997c-.909 1.016-1.818 2.023-2.682 3.029l-.382-.421c.91-.979 1.764-1.967 2.628-2.964l.436.356Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M95.454 96.647c1.674 45.572-2.664 66.537-22.278 81.279-19.613 14.742-34.817 15.273-35.408 22.703-.59 7.431-2.364 5.729-3.055-1.894-.91-10.35-5.201-2.663 17.595-20.361s12.03-64.331 10.912-78.149c-1.119-13.818 32.234-3.578 32.234-3.578Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M37.486 193.043c11.44-5.673 23.333-11.997 28.643-24.387 5.91-13.791 3.392-29.283 3.019-43.76-.218-8.73 0-17.469.564-26.181 0-.394.636-.394.609 0-.482 8.007-.737 16.023-.6 24.049.136 8.025.91 16.051.91 24.094-.046 6.964-.801 14.029-3.302 20.572a36.272 36.272 0 0 1-11.075 15.172c-5.556 4.575-12.02 7.806-18.413 10.981-.4.165-.71-.366-.355-.54ZM105.184 188.276a64.163 64.163 0 0 1-1.173 1.519 49.519 49.519 0 0 1-1.819 2.159l-.436-.348a66.933 66.933 0 0 0 2.864-3.578l.564.248ZM108.185 183.627a41.36 41.36 0 0 1-2.21 3.514l-.527-.238c.772-1.116 1.5-2.26 2.164-3.45l.573.174ZM109.885 178.31l.591.147a27.344 27.344 0 0 1-1.609 3.925l-.582-.174c.372-.759.736-1.528 1.045-2.333.21-.485.382-1.043.555-1.565ZM111.567 166.661a35.5 35.5 0 0 1 .173 3.66l-.6-.064a34.013 34.013 0 0 0-.182-3.596h.609ZM110.367 160.173c.127.476.245.915.354 1.4.291 1.235.519 2.498.691 3.761h-.618a43.044 43.044 0 0 0-1.027-4.978l.6-.183ZM108.794 155.396a55.344 55.344 0 0 1 1.191 3.413l-.6.211a56.088 56.088 0 0 0-1.155-3.413l.564-.211ZM106.503 150.107c.636 1.345 1.236 2.69 1.818 4.026l-.545.211a62.06 62.06 0 0 0-1.774-4.045l.501-.192ZM100.783 139.254a233.79 233.79 0 0 1 2.537 4.575l-.509.375c-.801-1.445-1.665-2.983-2.556-4.575l.528-.375ZM98.61 135.465c.49.861.99 1.73 1.491 2.617l-.519.394a375.76 375.76 0 0 1-1.473-2.599l.5-.412ZM103.966 145.046a117.118 117.118 0 0 1 1.936 3.798l-.536.192a68.798 68.798 0 0 0-.828-1.629 753.93 753.93 0 0 0-1.063-1.995l.491-.366ZM111.685 171.721a27.304 27.304 0 0 1-.827 5.409l-.591-.138c.451-1.746.725-3.533.818-5.335l.6.064ZM97.746 197.06c-.691.787-1.382 1.565-2.055 2.371a9.449 9.449 0 0 0-.419-.431 128.89 128.89 0 0 1 2.083-2.361c.127.138.263.275.39.421ZM94.381 200.053l.428.439a65.667 65.667 0 0 0-2.2 2.791c-.228.311-.755 0-.528-.311.736-.997 1.555-1.958 2.3-2.919Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M77.996 51.533a5.046 5.046 0 0 0 2.482 2.114c3.737 1.546 8.493 1.546 10.584-2.05 17.186 0 17.341.768 19.469 25.998 1.072 12.683 1.664 19.839-.155 24.021-9.484 4.127-20.387 5.491-30.325 7.431a276.323 276.323 0 0 1-13.03 2.187c-1.765-.43-2.81-1.666-3.056-4.31-.818-8.785-1.337-8.53-2.728-23.454-2.9-29.96-2.728-31.974 16.759-31.937Z'
|
||||
fill='#fff'
|
||||
/>
|
||||
<path
|
||||
d='M77.996 51.533a5.046 5.046 0 0 0 2.482 2.114c3.737 1.546 8.493 1.546 10.584-2.05 17.186 0 17.341.768 19.469 25.998 1.072 12.683 1.664 19.839-.155 24.021-9.484 4.127-20.387 5.491-30.325 7.431a276.323 276.323 0 0 1-13.03 2.187c-1.765-.43-2.81-1.666-3.056-4.31-.818-8.785-1.337-8.53-2.728-23.454-2.9-29.96-2.728-31.974 16.759-31.937Z'
|
||||
fill='var(--center-channel-color)'
|
||||
fillOpacity={0.08}
|
||||
/>
|
||||
<path
|
||||
d='M101.101 99.621a68.896 68.896 0 0 1-6.083-15.264 185.738 185.738 0 0 1-4.965-32.77c18.186 0 20.005-.667 22.214 25.047.11 1.244-1.327 3.477-.909 4.75 3.519 9.937 16.122 20.131 15.086 22.419-1.446 3.276-6.966 6.772-13.913 9.517a59.502 59.502 0 0 1-5.547 1.135 88.873 88.873 0 0 0-5.883-14.834ZM61.056 101.918c-.519 6.085-1.2 11.292-.773 15.95 3.991-.668 8.001-1.089 12.03-1.373a85.83 85.83 0 0 0 7.801-29.438c.528-6.086 2.155-29.457 1.755-32.944-.254-2.342-3.155-.366-3.746-2.599-19.605 0-21.705 1.464-18.832 31.489.137 1.5 2.146 3.404 2.21 4.822.164 4.703.015 9.41-.445 14.093Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M91.308 50.416c1.346 1.09 1.1.787.182 2.498-.919 1.712-1.382 3.258-2.137 1.181-.755-2.077-.855-1.748.127-2.983.982-1.236 1.146-1.254 1.828-.696ZM80.05 50.764c3.047 1.345 1.928 1.034 2.51 3.056 1.264 4.347-.5 2.041-4.82-.466-2.936-1.712-2.59-1.977-1.563-3.02s.718-.998 3.71.43c2.991 1.427-2.892-1.318.163 0ZM41.187 80.431a45.816 45.816 0 0 1 1.282 16.902 16.823 16.823 0 0 0 3.092-.146 49.5 49.5 0 0 0-1.419-17.57 1.061 1.061 0 0 0-.1-.284 8.382 8.382 0 0 1-2.891.915c.008.062.02.123.036.183ZM131.608 70.137a185.107 185.107 0 0 0 2.301 15.172 16.609 16.609 0 0 0 2.901-1.089 175.18 175.18 0 0 1-2.155-14.093 12.048 12.048 0 0 1-3.047.01Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M96.418 207.209c-1.046 1.299-1.446 3.038-.291 5.875 3.21 7.906-5.238-2.48-7.347-7.65-.519-1.282.454-2.791 2.136-4.759 1.883 2.141 3.701 4.338 5.502 6.534ZM37.35 189.227c.127.311.254.613.372.915.91 2.068 1.728 4.137 2.637 6.186a5.968 5.968 0 0 0-1.786 1.858 6.013 6.013 0 0 0-.841 2.443c-.582 7.422-2.365 5.729-3.056-1.894-.627-6.891-2.719-5.792 2.674-9.508Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M5.54 14.596h38.906a5.439 5.439 0 0 1 3.844 1.574 5.416 5.416 0 0 1 1.604 3.825V44.67a5.41 5.41 0 0 1-1.604 3.826 5.43 5.43 0 0 1-3.844 1.573h-5.742v9.237l-8.612-9.236H5.554a5.439 5.439 0 0 1-3.844-1.574A5.418 5.418 0 0 1 .106 44.67V19.995a5.412 5.412 0 0 1 1.599-3.82 5.435 5.435 0 0 1 3.835-1.58Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M30.092 50.07H5.554a5.439 5.439 0 0 1-3.845-1.575A5.417 5.417 0 0 1 .106 44.67V29.69S1.82 43.542 2.127 44.761c.308 1.22.919 3.044 3.813 3.347 2.894.302 24.152 1.962 24.152 1.962Z'
|
||||
fill='#000'
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<path
|
||||
d='M38.282 28.805a3.51 3.51 0 0 0-3.238 2.16 3.49 3.49 0 0 0 .76 3.81 3.508 3.508 0 0 0 5.982-2.472 3.487 3.487 0 0 0-2.162-3.233 3.506 3.506 0 0 0-1.342-.265ZM24.993 28.805a3.51 3.51 0 0 0-3.238 2.16 3.49 3.49 0 0 0 .76 3.81 3.508 3.508 0 0 0 5.983-2.472 3.487 3.487 0 0 0-2.163-3.233 3.506 3.506 0 0 0-1.342-.265ZM11.718 28.805a3.51 3.51 0 0 0-3.24 2.156 3.49 3.49 0 0 0 .756 3.813 3.507 3.507 0 0 0 5.985-2.471 3.487 3.487 0 0 0-2.16-3.231 3.507 3.507 0 0 0-1.34-.267Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M45.856 24.928a10.99 10.99 0 0 0-5.26-6.628.38.38 0 0 1 .157-.72c2.453-.147 7.404.376 5.852 7.311a.385.385 0 0 1-.602.241.385.385 0 0 1-.147-.204Z'
|
||||
fill='#fff'
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<path
|
||||
d='M146.892 70.45h56.197a7.926 7.926 0 0 1 3.003.58 7.85 7.85 0 0 1 2.55 1.671 7.75 7.75 0 0 1 1.708 2.509c.398.939.604 1.946.608 2.964v35.298a7.67 7.67 0 0 1-.608 2.964 7.748 7.748 0 0 1-1.708 2.509 7.868 7.868 0 0 1-2.55 1.672 7.941 7.941 0 0 1-3.003.58h-8.294v13.213l-12.44-13.213h-35.443a7.879 7.879 0 0 1-5.554-2.252 7.748 7.748 0 0 1-1.708-2.509 7.65 7.65 0 0 1-.607-2.964V78.174a7.706 7.706 0 0 1 2.308-5.466 7.892 7.892 0 0 1 5.541-2.258Z'
|
||||
fill='#FFBC1F'
|
||||
/>
|
||||
<path
|
||||
d='M182.355 121.197h-35.443a7.879 7.879 0 0 1-5.554-2.252 7.748 7.748 0 0 1-1.708-2.509 7.65 7.65 0 0 1-.607-2.964v-21.43s2.474 19.817 2.919 21.561c.445 1.744 1.327 4.354 5.507 4.787 4.18.433 34.886 2.807 34.886 2.807Z'
|
||||
fill='#CC8F00'
|
||||
/>
|
||||
<path
|
||||
d='M194.185 90.777c-1.001 0-1.98.293-2.813.843a5.018 5.018 0 0 0-1.864 2.246 4.953 4.953 0 0 0-.288 2.89c.195.97.677 1.862 1.385 2.562a5.08 5.08 0 0 0 2.592 1.369c.982.193 2 .094 2.925-.284a5.052 5.052 0 0 0 2.272-1.843 4.964 4.964 0 0 0-.627-6.32 5.104 5.104 0 0 0-3.582-1.463ZM174.99 90.777c-1.002 0-1.98.293-2.813.843a5.018 5.018 0 0 0-1.864 2.246 4.937 4.937 0 0 0-.288 2.89c.195.97.677 1.862 1.385 2.562a5.08 5.08 0 0 0 2.592 1.369c.982.193 2 .094 2.925-.284a5.052 5.052 0 0 0 2.272-1.843 4.964 4.964 0 0 0-.628-6.32 5.05 5.05 0 0 0-1.643-1.084 5.108 5.108 0 0 0-1.938-.379ZM155.816 90.777a5.102 5.102 0 0 0-2.814.84 5.013 5.013 0 0 0-1.868 2.244 4.955 4.955 0 0 0 1.093 5.455 5.11 5.11 0 0 0 5.518 1.087 5.05 5.05 0 0 0 2.273-1.842 4.959 4.959 0 0 0-.625-6.318 5.052 5.052 0 0 0-1.641-1.085 5.11 5.11 0 0 0-1.936-.38Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M205.125 85.23a15.668 15.668 0 0 0-2.84-5.491 15.868 15.868 0 0 0-4.756-3.991.545.545 0 0 1-.29-.601.545.545 0 0 1 .515-.429c3.543-.21 10.695.538 8.453 10.46a.553.553 0 0 1-.52.445.563.563 0 0 1-.562-.393Z'
|
||||
fill='#FFD470'
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id='b'
|
||||
x1={93.5}
|
||||
y1={1}
|
||||
x2={-66.697}
|
||||
y2={161.197}
|
||||
gradientUnits='userSpaceOnUse'
|
||||
>
|
||||
<stop
|
||||
offset={0.01}
|
||||
stopColor='var(--button-bg)'
|
||||
/>
|
||||
<stop
|
||||
offset={0.766}
|
||||
stopColor='var(--button-bg)'
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default PrivateChannelIntroSvg;
|
||||
@ -0,0 +1,255 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
type SvgProps = {
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
|
||||
const PublicChannelIntroSvg = (props: SvgProps) => (
|
||||
<svg
|
||||
width={props.width ?? '151'}
|
||||
height={props.height ?? '149'}
|
||||
viewBox='0 0 220 218'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
xmlnsXlink='http://www.w3.org/1999/xlink'
|
||||
>
|
||||
<path
|
||||
d='M198.504 121.404C205.236 114.883 210.603 107.088 214.293 98.4721C217.984 89.8565 219.923 80.5927 219.998 71.2204C220.073 61.848 218.283 52.5543 214.731 43.8807C211.18 35.207 205.938 27.3266 199.311 20.6985C192.685 14.0705 184.805 8.82714 176.133 5.27394C167.46 1.72074 158.167 -0.0713105 148.795 0.00213777C139.423 0.0755861 130.159 2.01307 121.543 5.70176C112.927 9.39045 105.131 14.7566 98.6093 21.4877L-33 153.084L66.9127 253L198.504 121.404Z'
|
||||
fill='url(#paint0_linear_522_36531)'
|
||||
fillOpacity='0.12'
|
||||
/>
|
||||
<path
|
||||
d='M110.977 59.1699C107.992 64.1563 98.3678 60.1672 96.5466 69.6413C100.09 69.6413 113.157 71.4462 113.157 71.4462L110.977 59.1699Z'
|
||||
fill='#4A2407'
|
||||
/>
|
||||
<path
|
||||
d='M96.1184 108.824C91.9085 116.313 57.7621 131.093 65.9031 169.199C71.6655 196.195 84.8125 206.966 81.5382 211.474C79.1098 214.765 77.199 218.773 82.9713 214.036C89.938 208.342 92.4161 212.122 87.8978 198.399C83.5884 185.335 79.7966 150.53 101.323 138.184C122.85 125.838 129.877 119.664 119.238 104.506C115.346 98.941 96.1184 108.824 96.1184 108.824Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M78.9806 202.139C79.6972 201.94 85.788 200.005 88.097 199.028C92.3367 211.992 89.8088 208.432 82.9715 214.037C77.1992 218.774 79.11 214.765 81.5384 211.474C82.8521 209.639 81.4986 206.747 78.9806 202.139Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M120.83 70.6089L121.377 59.5291L122.86 55.4404C121.945 51.3715 119.586 49.4566 118.262 49.0976C115.277 48.3596 113.585 48.2399 111.953 49.5164C111.057 50.2843 109.674 53.7948 109.076 56.5472C108.758 58.0332 108.081 59.22 109.076 60.1375C109.758 60.6741 110.48 61.1575 111.236 61.5835L111.395 68.5645L120.83 70.6089Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M110.977 52.3286C110.007 52.803 109.1 53.3996 108.28 54.1037C107.942 55.101 110.559 56.0983 110.559 56.0983L110.977 52.3286Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M114.421 62.5006C113.318 62.45 112.242 62.1464 111.276 61.6132C110.927 61.3938 111.913 62.2613 112.271 62.4607C112.729 62.7861 113.264 62.9856 113.824 63.0392C114.242 63.0392 114.839 62.5306 114.421 62.5006Z'
|
||||
fill='#8B6918'
|
||||
/>
|
||||
<path
|
||||
d='M133.858 112.723C135.848 140.328 136.535 177.356 161.376 183.529C186.217 189.703 185.262 186.651 185.262 195.906C185.262 205.16 183.341 203.794 182.206 197.9C180.753 190.281 153.613 203.884 135.202 188.685C116.79 173.487 109.017 144.107 106.21 113.97C104.24 92.6279 133.858 112.723 133.858 112.723Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M175.07 186.602C185.819 188.885 185.271 188.816 185.271 195.866C185.271 205.121 183.351 203.755 182.216 197.861C181.709 195.218 178.106 195.128 172.851 195.507C173.91 192.628 174.654 189.642 175.07 186.602Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M48.8448 72.9125C49.4221 71.9152 54.239 71.7559 59.9019 76.3633C65.5648 80.9707 74.7707 86.7049 85.0116 74.2389C94.1976 63.0396 100.308 67.2581 109.614 67.6271C112.918 68.046 126.254 69.7513 129.658 70.0604C134.634 69.9707 143.123 72.3442 148.995 58.6317C151.244 53.3761 153.573 45.8167 156.808 40.6807C159.027 37.1703 161.207 35.0262 163.267 34.1685C164.789 33.5402 163.944 34.747 162.769 36.4922C161.983 37.679 162.859 37.5392 162.421 39.0451C162.162 39.9227 162.043 40.4414 161.754 41.1993C161.506 41.8807 161.3 42.5767 161.137 43.2835C161.008 43.822 160.878 44.3904 160.769 44.9988L160.679 45.4178C159.485 51.9799 158.838 61.6034 157.942 65.4729C154.817 78.7865 147.99 86.645 135.52 89.4075C135.43 91.2923 135.301 93.3966 135.132 95.6304C132.892 127.045 136.077 118.568 115.695 118.568C95.3123 118.568 89.8882 130.814 92.9535 113.252C94.3966 105.025 93.9488 95.461 95.5312 85.7076C92.4261 87.6423 87.4101 91.6114 82.3742 92.858C66.6993 96.7075 52.2386 76.2135 52.0993 74.907C51.8803 72.8926 48.2775 73.9397 48.8448 72.9125Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M91.1424 90.3054C93.2224 88.9989 94.0783 86.6054 95.5313 85.7078C94.9521 89.4286 94.5635 93.1766 94.3669 96.9372C94.1978 99.5999 94.0684 102.223 93.8892 104.766C93.7239 107.612 93.4117 110.448 92.9537 113.263C89.8884 130.815 95.3124 118.588 115.695 118.558C133.539 118.558 133.32 125.07 134.495 105.593V105.464C134.554 104.626 134.604 103.748 134.664 102.821C134.793 100.687 134.943 98.3034 135.132 95.6207C135.291 93.3469 135.43 91.2825 135.52 89.3977C140.984 88.181 145.373 87.7823 148.846 84.5611C147.055 79.4051 144.756 72.6736 141.322 68.3953C137.65 70.5195 133.908 70.1604 130.982 70.0606H129.658L127.896 69.8812C126.612 69.7416 124.911 69.5421 123.109 69.3227C122.114 74.4287 114.212 73.6708 111.604 71.8857C110.04 70.7852 108.805 69.2784 108.031 67.5275C106.927 67.4278 105.872 67.2983 104.847 67.1586C103.822 67.019 102.926 66.8893 102 66.7796C96.3972 66.1014 91.4609 66.3806 85.0118 74.2392C84.6137 74.7278 84.2156 75.1667 83.8274 75.5956C85.9528 80.6489 88.396 85.5621 91.1424 90.3054Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M91.1424 90.3054C93.2224 88.9989 94.0783 86.6054 95.5313 85.7078C94.9521 89.4286 94.5635 93.1766 94.3669 96.9372C94.1977 99.5999 94.0684 102.223 93.8892 104.766C93.7239 107.612 93.4117 110.448 92.9537 113.263C89.8884 130.815 95.3124 118.588 115.695 118.558C133.539 118.558 133.32 125.07 134.495 105.593V105.464C134.554 104.626 134.604 103.748 134.664 102.821C134.793 100.687 134.943 98.3034 135.132 95.6207C135.291 93.3469 135.43 91.2825 135.52 89.3977C140.984 88.181 145.373 87.7823 148.846 84.5611C147.055 79.4051 144.756 72.6736 141.322 68.3953C137.65 70.5195 133.908 70.1604 130.982 70.0606H129.658L127.896 69.8812C126.612 69.7416 124.911 69.5421 123.109 69.3227C122.114 74.4287 114.212 73.6708 111.604 71.8857C110.04 70.7852 108.805 69.2784 108.031 67.5275C106.927 67.4278 105.872 67.2983 104.847 67.1586C103.822 67.019 102.926 66.8893 102 66.7796C96.3972 66.1014 91.4609 66.3806 85.0118 74.2392C84.6137 74.7278 84.2156 75.1667 83.8274 75.5956C85.9528 80.6489 88.396 85.5621 91.1424 90.3054Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M91.1424 90.3054C93.2224 88.9989 94.0783 86.6054 95.5313 85.7078C94.9521 89.4286 94.5635 93.1766 94.3669 96.9372C94.1977 99.5999 94.0684 102.223 93.8892 104.766C93.7239 107.612 93.4117 110.448 92.9537 113.263C89.8884 130.815 95.3124 118.588 115.695 118.558C133.539 118.558 133.32 125.07 134.495 105.593V105.464C134.554 104.626 134.604 103.748 134.664 102.821C134.793 100.687 134.943 98.3034 135.132 95.6207C135.291 93.3469 135.43 91.2825 135.52 89.3977C140.984 88.181 145.373 87.7823 148.846 84.5611C147.055 79.4051 144.756 72.6736 141.322 68.3953C137.65 70.5195 133.908 70.1604 130.982 70.0606H129.658L127.896 69.8812C126.612 69.7416 124.911 69.5421 123.109 69.3227C122.114 74.4287 114.212 73.6708 111.604 71.8857C110.04 70.7852 108.805 69.2784 108.031 67.5275C106.927 67.4278 105.872 67.2983 104.847 67.1586C103.822 67.019 102.926 66.8893 102 66.7796C96.3972 66.1014 91.4609 66.3806 85.0118 74.2392C84.6137 74.7278 84.2156 75.1667 83.8274 75.5956C85.9528 80.6489 88.396 85.5621 91.1424 90.3054Z'
|
||||
fill='var(--center-channel-color)'
|
||||
fillOpacity='0.08'
|
||||
/>
|
||||
<path
|
||||
d='M76.7511 127.124C80.6011 132.559 85.0294 137.558 89.9579 142.033L90.3858 142.412C91.3811 143.3 92.3763 144.157 93.3715 145.005C93.7726 144.53 94.2156 144.093 94.6952 143.699L95.1331 143.33C96.7454 141.973 99.0543 140.338 101.353 138.712C104.588 136.479 107.783 134.414 108.897 133.726C109.713 138.234 110.679 142.702 111.813 146.94L111.962 147.508C112.152 148.176 112.331 148.845 112.52 149.503C120.04 149.349 127.516 148.308 134.793 146.401L135.35 146.242L136.495 145.893C136.625 145.851 136.758 145.818 136.893 145.793C136.754 144.925 136.624 143.968 136.495 142.931C136.495 142.731 136.495 142.542 136.425 142.342C135.052 130.495 134.335 109.143 134.495 105.633V105.503C134.063 105.151 133.654 104.771 133.27 104.366C133.105 104.193 132.935 104.014 132.763 103.828C129.051 99.6589 127.219 93.6055 126.154 89.9156C126.523 81.7579 127.279 77.4298 130.981 70.0998C130.514 70.0998 128.623 69.9702 127.896 69.8905C125.501 75.3418 124.035 81.1566 123.557 87.0934C116.59 85.8269 109.624 84.6998 102.657 83.6227C102.903 78.0868 103.619 72.582 104.797 67.1677C103.802 67.038 102.876 66.8985 101.95 66.7888C100.616 72.9064 99.9814 79.1563 100.059 85.4178C99.6614 86.4151 98.8752 89.407 98.2979 90.504C97.097 92.7304 95.7678 94.8848 94.317 96.9564C94.1478 99.6191 94.0184 102.242 93.8393 104.785C93.6602 107.328 93.4312 109.771 93.073 112.155C89.6195 115.266 84.0363 119.335 78.7217 124.91C78.5923 125.05 78.453 125.189 78.3236 125.339C77.826 125.897 77.2886 126.496 76.7511 127.124Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M120.92 110.739C121.694 110.796 122.466 110.6 123.119 110.18C123.985 109.542 124.314 108.335 124.552 106.6C125.15 102.361 124.861 102.003 123.288 100.008C122.781 99.3697 122.144 98.5718 121.358 97.405C120.701 96.4579 120.125 95.4571 119.636 94.4132C118.641 92.2989 118.233 91.8204 113.157 90.8331C104.946 89.2375 104.309 89.716 101.921 92.8873C101.483 93.4657 100.995 94.114 100.378 94.8819C96.7257 99.21 96.6958 99.7587 96.5863 101.793C96.5863 102.342 96.5167 103.02 96.3972 103.917C96.2181 105.194 96.2082 106.041 96.6859 106.67C97.4323 107.667 99.154 107.856 103.294 108.365C104.996 108.574 107.116 108.834 109.713 109.223C111.704 109.522 113.446 109.801 114.958 110.05C116.928 110.415 118.919 110.645 120.92 110.739ZM113.097 91.0625V91.3417C118.073 92.339 118.253 92.7078 119.168 94.6126C119.669 95.6963 120.259 96.7371 120.93 97.7242C121.736 98.9109 122.373 99.7186 122.92 100.367C124.443 102.282 124.632 102.531 124.075 106.52C123.816 108.395 123.488 109.263 122.87 109.721C121.796 110.509 119.576 110.14 115.137 109.402C113.625 109.153 111.913 108.874 109.883 108.574C107.275 108.185 105.155 107.926 103.453 107.717C99.7114 107.258 97.8304 107.019 97.2333 106.241C96.875 105.772 96.8949 105.034 97.0541 103.917C97.1835 103 97.2133 102.302 97.2432 101.743C97.3527 99.8584 97.3726 99.3597 100.906 95.1711C101.533 94.4232 102.03 93.7649 102.458 93.1766C104.648 90.2845 105.046 89.756 113.137 91.3317L113.097 91.0625Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M117.834 93.7353C118.042 94.1682 118.281 94.5848 118.551 94.9819C118.75 95.291 118.262 95.5803 118.053 95.2711C117.784 94.8741 117.544 94.4574 117.337 94.0245C117.177 93.6954 117.685 93.4062 117.834 93.7353Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M119.407 96.6076C119.745 97.1361 120.084 97.6049 120.452 98.1435C120.661 98.4426 120.173 98.7319 119.954 98.4327C119.596 97.9341 119.248 97.4354 118.959 96.8968C118.68 96.5877 119.218 96.2984 119.407 96.6076Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M121.895 99.998C122.154 100.352 122.441 100.685 122.751 100.995C123.019 101.245 122.611 101.653 122.343 101.394C122.03 101.086 121.744 100.752 121.487 100.397C121.268 100.108 121.666 99.6988 121.895 99.998Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M123.029 103.788C123.029 103.419 123.577 103.419 123.597 103.788C123.627 104.17 123.627 104.553 123.597 104.935C123.597 105.304 123 105.304 123.029 104.935C123.059 104.553 123.059 104.17 123.029 103.788Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M122.522 106.87C122.582 106.501 123.139 106.66 123.069 107.019C123 107.378 122.91 108.017 122.82 108.505C122.731 108.994 122.213 108.715 122.273 108.346L122.522 106.87Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M118.043 107.817C118.771 108.017 119.513 108.157 120.263 108.236C120.621 108.236 120.631 108.844 120.263 108.804C119.463 108.727 118.67 108.583 117.894 108.375C117.822 108.354 117.762 108.305 117.725 108.239C117.688 108.174 117.679 108.096 117.698 108.024C117.718 107.951 117.765 107.889 117.829 107.85C117.893 107.812 117.97 107.8 118.043 107.817Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M112.48 107.179C113.207 107.225 113.932 107.312 114.65 107.438C115.018 107.498 114.859 108.046 114.5 107.986C113.841 107.876 113.177 107.8 112.51 107.757C112.112 107.727 112.112 107.179 112.48 107.179Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M107.036 106.55L109.027 106.8C109.385 106.8 109.385 107.418 109.027 107.368L107.036 107.129C106.678 107.079 106.668 106.5 107.036 106.55Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M101.642 105.992L103.314 106.181C103.672 106.181 103.682 106.8 103.314 106.76L101.642 106.56C101.284 106.52 101.274 105.952 101.642 105.992Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M98.776 104.686L99.393 105.254C99.6617 105.503 99.2636 105.912 98.985 105.663L98.3679 105.084C98.0693 104.835 98.4674 104.436 98.776 104.686Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M98.0591 101.345C98.0591 100.986 98.6761 100.976 98.6363 101.345C98.5674 102.008 98.5342 102.674 98.5368 103.34C98.5244 103.406 98.4892 103.466 98.4374 103.509C98.3856 103.552 98.3205 103.576 98.2532 103.576C98.1859 103.576 98.1207 103.552 98.0689 103.509C98.0171 103.466 97.982 103.406 97.9695 103.34C97.9584 102.674 97.9883 102.008 98.0591 101.345Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M99.2933 98.333L99.8705 97.4755C100.07 97.1663 100.567 97.4755 100.358 97.7647L99.7909 98.6223C99.5819 98.9314 99.0942 98.6422 99.2933 98.333Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M113.436 92.2194C114.105 92.2522 114.77 92.3356 115.426 92.4687C115.784 92.5485 115.635 93.0971 115.277 93.0273C114.675 92.8963 114.062 92.8196 113.446 92.7979C113.067 92.768 113.067 92.2194 113.436 92.2194Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M109.086 91.4412C109.72 91.471 110.352 91.5409 110.977 91.6506C111.346 91.7105 111.186 92.259 110.828 92.1992C110.252 92.0994 109.67 92.0395 109.086 92.0197C108.728 91.9998 108.728 91.4313 109.086 91.4412Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M105.334 91.222C105.772 91.1488 106.215 91.1154 106.658 91.1222C106.724 91.1347 106.784 91.1699 106.827 91.2218C106.87 91.2737 106.893 91.3392 106.893 91.4066C106.893 91.474 106.87 91.5392 106.827 91.5911C106.784 91.643 106.724 91.6782 106.658 91.6907C106.268 91.6851 105.878 91.7152 105.494 91.7806C105.125 91.8304 104.976 91.2819 105.334 91.222Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M102.757 94.0245L103.423 93.0272C103.632 92.728 104.13 93.0272 103.911 93.3164L103.244 94.3137C103.015 94.6129 102.518 94.3336 102.757 94.0245Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M101.104 96.9185L101.682 96.1505C101.901 95.8613 102.398 96.1506 102.179 96.4398L101.602 97.2077C101.383 97.5168 100.885 97.2376 101.104 96.9185Z'
|
||||
fill='#2D3039'
|
||||
/>
|
||||
<path
|
||||
d='M124.722 84.6503C126.901 85.2486 127.249 84.8 126.971 87.7918C126.692 90.7837 126.971 90.4944 124.154 89.9658C122.164 89.5769 122.572 88.9687 122.91 87.0938C123.249 85.2189 123.507 84.3212 124.722 84.6503Z'
|
||||
fill='#FFBC1F'
|
||||
/>
|
||||
<path
|
||||
d='M100.876 81.4888C103.115 81.798 103.404 81.2994 103.523 84.3012C103.643 87.303 103.036 87.0836 101.015 86.8244C98.9949 86.5651 99.3233 86.0862 99.403 84.1515C99.4826 82.2168 99.6319 81.3193 100.876 81.4888Z'
|
||||
fill='#FFBC1F'
|
||||
/>
|
||||
<path
|
||||
d='M119.277 62.3013C119.277 62.3013 116.869 63.7374 117.954 68.0157C115.028 63.6476 118.869 57.6541 118.869 57.6541C118.961 57.7858 119.083 57.8932 119.225 57.9675C119.367 58.0417 119.525 58.0804 119.685 58.0804C119.846 58.0804 120.004 58.0417 120.146 57.9675C120.288 57.8932 120.41 57.7858 120.502 57.6541C123.408 54.6623 121.328 53.6649 120.502 54.0139C119.466 54.3603 118.394 54.588 117.307 54.6922C115.615 54.9715 113.963 52.2288 113.963 52.2288L114.391 53.4753C113.68 53.0728 113.083 52.4953 112.656 51.7973C112.229 51.0994 111.987 50.304 111.953 49.4862C113.495 44.5497 123 43.6723 126.543 51.1219C130.086 58.5716 126.543 71.4263 136.893 69.9304C116.332 79.0555 119.277 62.3013 119.277 62.3013Z'
|
||||
fill='#4A2407'
|
||||
/>
|
||||
<path
|
||||
d='M78.7719 124.89C84.6537 133.217 95.1235 143.31 95.1235 143.31'
|
||||
stroke='#1E325C'
|
||||
strokeWidth='0.58'
|
||||
strokeMiterlimit='10'
|
||||
/>
|
||||
<path
|
||||
d='M111.813 146.92C122.074 147.309 136.495 142.931 136.495 142.931'
|
||||
stroke='#1E325C'
|
||||
strokeWidth='0.58'
|
||||
strokeMiterlimit='10'
|
||||
/>
|
||||
<path
|
||||
d='M61.8512 14.2181H99.1357C99.819 14.2158 100.496 14.3497 101.128 14.6122C101.76 14.8748 102.335 15.2608 102.82 15.7483C103.305 16.2358 103.69 16.8152 103.954 17.4533C104.217 18.0915 104.354 18.776 104.356 19.4678V43.4568C104.354 44.1485 104.217 44.833 103.954 45.4712C103.69 46.1094 103.305 46.6888 102.82 47.1762C102.335 47.6637 101.76 48.0497 101.128 48.3123C100.496 48.5748 99.819 48.7088 99.1357 48.7064H93.6333V57.6861L85.3797 48.7064H61.8645C61.1812 48.7088 60.5041 48.5748 59.872 48.3123C59.2398 48.0497 58.6649 47.6637 58.1801 47.1762C57.6954 46.6888 57.3102 46.1094 57.0465 45.4712C56.7829 44.833 56.646 44.1485 56.6437 43.4568V19.4678C56.6484 18.0731 57.1992 16.7372 58.1755 15.753C59.1517 14.7689 60.4736 14.2169 61.8512 14.2181Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M85.3796 48.7064H61.8645C61.1812 48.7088 60.5041 48.5748 59.872 48.3123C59.2398 48.0497 58.6649 47.6637 58.1801 47.1762C57.6954 46.6887 57.3102 46.1094 57.0465 45.4712C56.7829 44.833 56.6461 44.1485 56.6438 43.4567V28.8931C56.6438 28.8931 58.2857 42.3605 58.5806 43.5459C58.8755 44.7313 59.461 46.5049 62.2342 46.7991C65.0074 47.0932 85.3796 48.7064 85.3796 48.7064Z'
|
||||
fill='black'
|
||||
fillOpacity='0.16'
|
||||
/>
|
||||
<path
|
||||
d='M93.2285 28.033C92.5642 28.033 91.9148 28.2324 91.3625 28.606C90.8101 28.9796 90.3796 29.5107 90.1254 30.132C89.8712 30.7533 89.8047 31.437 89.9343 32.0966C90.0639 32.7562 90.3838 33.362 90.8535 33.8376C91.3232 34.3131 91.9217 34.6369 92.5732 34.7681C93.2247 34.8993 93.9001 34.832 94.5138 34.5746C95.1275 34.3173 95.6521 33.8815 96.0211 33.3223C96.3902 32.7631 96.5872 32.1057 96.5872 31.4332C96.5877 30.9865 96.5013 30.5441 96.3327 30.1313C96.1641 29.7185 95.9167 29.3434 95.6047 29.0276C95.2927 28.7117 94.9222 28.4613 94.5145 28.2906C94.1067 28.1199 93.6697 28.0324 93.2285 28.033Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M80.4931 28.033C79.8288 28.033 79.1795 28.2324 78.6271 28.606C78.0748 28.9796 77.6443 29.5107 77.3901 30.132C77.1359 30.7533 77.0694 31.437 77.199 32.0966C77.3286 32.7562 77.6485 33.362 78.1182 33.8376C78.5879 34.3131 79.1864 34.6369 79.8379 34.7681C80.4894 34.8993 81.1647 34.832 81.7784 34.5746C82.3922 34.3173 82.9167 33.8815 83.2858 33.3223C83.6548 32.7631 83.8518 32.1057 83.8518 31.4332C83.8524 30.9865 83.7659 30.5441 83.5973 30.1313C83.4287 29.7185 83.1814 29.3434 82.8694 29.0276C82.5574 28.7117 82.1869 28.4613 81.7791 28.2906C81.3714 28.1199 80.9344 28.0324 80.4931 28.033Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M67.7719 28.033C67.1075 28.0321 66.4577 28.2308 65.9048 28.6038C65.3518 28.9769 64.9207 29.5077 64.6658 30.1289C64.4109 30.7501 64.3437 31.434 64.4728 32.0938C64.6019 32.7537 64.9215 33.36 65.391 33.836C65.8606 34.312 66.459 34.6362 67.1107 34.7678C67.7623 34.8994 68.4379 34.8323 69.0518 34.5751C69.6658 34.3178 70.1906 33.882 70.5599 33.3228C70.9291 32.7635 71.1262 32.1059 71.1262 31.4332C71.1268 30.9869 71.0405 30.5448 70.8722 30.1323C70.7038 29.7198 70.4569 29.3449 70.1453 29.0291C69.8338 28.7133 69.4638 28.4628 69.0566 28.2919C68.6493 28.1209 68.2128 28.033 67.7719 28.033Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M100.487 24.263C100.108 22.9055 99.4678 21.6372 98.6028 20.5313C97.7378 19.4253 96.6652 18.5035 95.4468 17.819C95.3747 17.7821 95.3166 17.7219 95.2818 17.648C95.2471 17.5741 95.2375 17.4906 95.2546 17.4106C95.2717 17.3306 95.3145 17.2586 95.3764 17.2059C95.4383 17.1532 95.5157 17.1227 95.5965 17.1193C97.9471 16.9767 102.692 17.4848 101.205 24.2274C101.189 24.3097 101.146 24.3842 101.084 24.4392C101.021 24.4941 100.942 24.5262 100.86 24.5303C100.777 24.5344 100.695 24.5103 100.628 24.4618C100.56 24.4134 100.511 24.3434 100.487 24.263Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
fillOpacity='0.16'
|
||||
/>
|
||||
<path
|
||||
d='M55.5543 38.8059H7.46272C6.58138 38.8029 5.70809 38.9732 4.8927 39.307C4.07732 39.6408 3.3358 40.1316 2.71049 40.7514C2.08518 41.3712 1.58833 42.1079 1.2483 42.9193C0.908278 43.7307 0.731737 44.601 0.72876 45.4805V75.9807C0.731737 76.8602 0.908278 77.7305 1.2483 78.5419C1.58833 79.3534 2.08518 80.09 2.71049 80.7098C3.3358 81.3296 4.07732 81.8204 4.8927 82.1542C5.70809 82.488 6.58138 82.6583 7.46272 82.6553H14.5601V94.0724L25.2061 82.6553H55.5373C56.4186 82.6583 57.2919 82.488 58.1073 82.1542C58.9227 81.8204 59.6642 81.3296 60.2895 80.7098C60.9148 80.09 61.4117 79.3534 61.7517 78.5419C62.0917 77.7305 62.2683 76.8602 62.2712 75.9807V45.4805C62.2652 43.7072 61.5547 42.0087 60.2955 40.7574C59.0364 39.5062 57.3313 38.8044 55.5543 38.8059Z'
|
||||
fill='#FFBC1F'
|
||||
/>
|
||||
<path
|
||||
d='M25.2061 82.6553H55.5372C56.4186 82.6583 57.2919 82.488 58.1073 82.1542C58.9226 81.8204 59.6642 81.3295 60.2895 80.7098C60.9148 80.09 61.4116 79.3533 61.7516 78.5419C62.0917 77.7305 62.2682 76.8602 62.2712 75.9807V57.4641C62.2712 57.4641 60.1533 74.5869 59.7729 76.094C59.3925 77.6012 58.6374 79.8563 55.0603 80.2302C51.4832 80.6042 25.2061 82.6553 25.2061 82.6553Z'
|
||||
fill='#CC8F00'
|
||||
/>
|
||||
<path
|
||||
d='M15.0822 56.3705C15.9391 56.3705 16.7766 56.624 17.4891 57.0991C18.2015 57.5741 18.7568 58.2493 19.0847 59.0393C19.4126 59.8292 19.4984 60.6985 19.3312 61.5371C19.164 62.3757 18.7514 63.146 18.1456 63.7506C17.5397 64.3552 16.7678 64.767 15.9274 64.9338C15.087 65.1006 14.216 65.015 13.4244 64.6878C12.6327 64.3606 11.9561 63.8064 11.4801 63.0955C11.0041 62.3845 10.75 61.5487 10.75 60.6937C10.7493 60.1257 10.8608 59.5632 11.0783 59.0384C11.2957 58.5135 11.6148 58.0366 12.0172 57.635C12.4196 57.2335 12.8975 56.915 13.4235 56.698C13.9494 56.481 14.5131 56.3697 15.0822 56.3705Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M31.509 56.3705C32.3658 56.3705 33.2034 56.624 33.9158 57.0991C34.6283 57.5741 35.1835 58.2493 35.5114 59.0393C35.8393 59.8292 35.9251 60.6985 35.7579 61.5371C35.5908 62.3757 35.1782 63.146 34.5723 63.7506C33.9664 64.3552 33.1945 64.767 32.3542 64.9338C31.5138 65.1006 30.6427 65.015 29.8511 64.6878C29.0595 64.3606 28.3829 63.8064 27.9069 63.0955C27.4308 62.3845 27.1768 61.5487 27.1768 60.6937C27.176 60.1257 27.2876 59.5632 27.505 59.0384C27.7225 58.5135 28.0415 58.0366 28.444 57.635C28.8464 57.2335 29.3243 56.915 29.8502 56.698C30.3762 56.481 30.9399 56.3697 31.509 56.3705Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M47.9174 56.3705C48.7744 56.3694 49.6126 56.622 50.3258 57.0963C51.0389 57.5707 51.5951 58.2455 51.9238 59.0353C52.2526 59.8252 52.3392 60.6946 52.1727 61.5336C52.0062 62.3726 51.594 63.1434 50.9884 63.7486C50.3827 64.3538 49.6108 64.7661 48.7703 64.9334C47.9298 65.1006 47.0584 65.0154 46.2665 64.6883C45.4745 64.3613 44.7976 63.8071 44.3213 63.0961C43.845 62.385 43.5908 61.549 43.5908 60.6937C43.5901 60.1262 43.7014 59.5642 43.9185 59.0397C44.1356 58.5152 44.4542 58.0386 44.856 57.6371C45.2579 57.2355 45.7351 56.917 46.2603 56.6997C46.7856 56.4824 47.3487 56.3705 47.9174 56.3705Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M5.71976 51.5772C6.20841 49.8512 7.0344 48.2387 8.15016 46.8326C9.26591 45.4265 10.6494 44.2545 12.2209 43.3841C12.314 43.3372 12.3889 43.2607 12.4337 43.1668C12.4786 43.0728 12.491 42.9667 12.4689 42.8649C12.4468 42.7632 12.3915 42.6716 12.3117 42.6046C12.2319 42.5376 12.1321 42.4989 12.0279 42.4946C8.99589 42.3133 2.87515 42.9592 4.79427 51.5319C4.81451 51.6366 4.86936 51.7314 4.95003 51.8012C5.0307 51.8711 5.13252 51.9119 5.23919 51.9171C5.34586 51.9223 5.4512 51.8917 5.53833 51.83C5.62547 51.7684 5.68935 51.6794 5.71976 51.5772Z'
|
||||
fill='#FFD470'
|
||||
/>
|
||||
<ellipse
|
||||
cx='119.099'
|
||||
cy='216.167'
|
||||
rx='38.5938'
|
||||
ry='1.95397'
|
||||
fill='black'
|
||||
fillOpacity='0.12'
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id='paint0_linear_522_36531'
|
||||
x1='93.5'
|
||||
y1='-1.73437e-05'
|
||||
x2='-66.6967'
|
||||
y2='160.197'
|
||||
gradientUnits='userSpaceOnUse'
|
||||
>
|
||||
<stop
|
||||
offset='0.0104167'
|
||||
stopColor='var(--button-bg)'
|
||||
/>
|
||||
<stop
|
||||
offset='0.765625'
|
||||
stopColor='var(--button-bg)'
|
||||
stopOpacity='0'
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default PublicChannelIntroSvg;
|
||||
@ -0,0 +1,180 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
type SvgProps = {
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
|
||||
const SvgComponent = (props: SvgProps) => (
|
||||
<svg
|
||||
width={props.width ?? '151'}
|
||||
height={props.height ?? '149'}
|
||||
viewBox='0 0 220 218'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
xmlnsXlink='http://www.w3.org/1999/xlink'
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d='M198.504 122.404a70.65 70.65 0 0 0 21.494-50.184A70.65 70.65 0 0 0 199.311 21.7a70.65 70.65 0 0 0-100.702.789L-33 154.084 66.913 254l131.591-131.596Z'
|
||||
fill='url(#b)'
|
||||
fillOpacity={0.12}
|
||||
/>
|
||||
<path
|
||||
d='M93.501 206.803c-.199-2.561 1.33-5.7 3.77-9.466.44-.678.906-1.382 1.396-2.093 4.832-7.065 12.057-16.13 17.222-27.572 9.059-20.089 6.643-52.734 3.977-70.496 0 0-15.362-5.207-22.503 2.042-.28.26-.541.54-.78.837-3.322 4.261-2.774 13.728.556 25.848 5.356 19.52 5.519 28.937 3.211 37.265-1.993 7.199-5.868 13.602-9.356 25.003a363.918 363.918 0 0 0-1.752 5.834c-1.562 5.391-2.267 8.504-2.367 10.421 2.2.854 4.418 1.616 6.626 2.377Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='m89.6 192.85 1.386.485.581.201 4.152 1.473a4.582 4.582 0 0 1 2.11 1.507c4.799-7.232 12.605-16.741 18.077-28.844 9.059-20.089 6.643-52.734 3.977-70.496 0 0-16.558-5.617-23.25 2.921-3.322 4.261-2.774 13.728.556 25.848 9.964 36.378 1.387 37.667-6.145 62.276a123.469 123.469 0 0 0-1.445 4.629Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='m89.6 192.85 1.386.485.581.201 4.152 1.473a4.582 4.582 0 0 1 2.11 1.507c4.799-7.232 12.605-16.741 18.077-28.844 9.059-20.089 6.643-52.734 3.977-70.496 0 0-16.558-5.617-23.25 2.921-3.322 4.261-2.774 13.728.556 25.848 9.964 36.378 1.387 37.667-6.145 62.276a123.469 123.469 0 0 0-1.445 4.629Z'
|
||||
fill='#000'
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<path
|
||||
d='M93.568 202.836c.208.071.422.121.64.15a7.508 7.508 0 0 0 0 5.09c.58 1.833 1.893 4.252 2.3 5.482 1.237 3.725-.05 3.29-3.87-2.009-3.82-5.298-7.224-1.766-5.173-10.881 2.042.72 4.077 1.442 6.103 2.168Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M47.598 164.533c4.285-6.504-.747-4.905 11.858.695.706.326 1.486.653 2.317.996l1.843.745c14.947 5.859 27.86 4.059 36.579-3.75a29.527 29.527 0 0 0 4.534-5.131c7.722-11.041 4.625-35.156-7.366-58.861a128.127 128.127 0 0 0-3.263-6.044L77.592 82.126s-11.335 12.087 3.321 42.781c13.967 29.297-1.702 31.716-17.072 30.586a98.88 98.88 0 0 1-2.234-.184h-.241c-15.777-1.49-13.784-3.039-15.57 4.737-1.785 7.776-2.898 11.61 1.802 4.487Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M60.444 165.671c.963.41 2.018.837 3.172 1.298 17.82 6.955 32.725 3.097 41.112-8.89 8.387-11.986 4.011-39.399-10.628-64.904L77.592 82.118s-11.335 12.086 3.321 42.781c14.49 30.368-2.906 31.858-18.783 30.443a262.56 262.56 0 0 0-.49 2.729c0 .209-.075.418-.1.628a142.651 142.651 0 0 0-.531 3.205c0 .201-.067.419-.1.62a157.687 157.687 0 0 0-.465 3.147Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M45.796 160.013c1.445-6.295.449-6.479 8.304-5.533a330.188 330.188 0 0 0-1.212 7.383c-4.152-2.511-2.101-2.21-5.315 2.67-4.675 7.123-3.579 3.298-1.777-4.52Z'
|
||||
fill='#1E325C'
|
||||
/>
|
||||
<path
|
||||
d='M103.201 50.025a46.435 46.435 0 0 0-2.591-12.614c-1.736-4.394-5.198-7.835-6.726-7.667-3.496.368-6.162-1.063-7.415.929-1.013 1.791.149 11.442 1.278 12.263.823.423 1.7.728 2.608.904l1.453 7.901 11.393-1.716Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M87.706 34.385a119.714 119.714 0 0 0-2.871 3.642c-.112.878 2.808 1.327 2.808 1.327l.063-4.969Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M92.605 43.22a7.796 7.796 0 0 1-3.62.16c-.457-.093.921.46 1.378.551 1.345.268 1.096.377 2.416 0 .474-.1.308-.811-.174-.711Z'
|
||||
fill='#8B6918'
|
||||
/>
|
||||
<path
|
||||
d='M100.784 28.07c1.594 1.197 2.749 5.022 3.322 6.939.573 1.916-.573 3.766-.773 5.759a2.516 2.516 0 0 1-.913 2.034c-1.021.602-2.267-.394-2.823-1.449-.557-1.054-.922-2.352-1.977-2.896-.755-.393-1.827-.36-2.242-1.113-.349-.62 0-1.415-.224-2.093-.274-.895-1.328-1.247-2.234-1.456l-5.405-1.29a7.612 7.612 0 0 1-2.898-1.13 2.33 2.33 0 0 1-1.035-1.197 2.353 2.353 0 0 1-.035-1.588c.173-.517.52-.956.98-1.243.461-.286 1.007-.4 1.543-.324 1.212 0 2.109.703 3.23.963 1.14.121 2.29.121 3.43 0 2.366.008 6.045-1.423 8.054.084Z'
|
||||
fill='#4A2407'
|
||||
/>
|
||||
<path
|
||||
d='M27.993 31.502c2.923.31 5.688 4.185 9.375 11.509 3.686 7.324 12.604 16.207 22.569 10.633 9.964-5.575 18.12-4.799 30.285-4.858 2.067-.175 15.279-.209 18.085.11 20.619.686 22.022 22.156 32.734 20.875 13.652-1.674 11.875-17.369 18.401-21.236 6.527-3.867 4.717-1.046 2.666-.067-2.051.98 0 1.909-.98 6.814s-.706 22.223-13.427 28.267c-9.292 4.411-20.433-.327-28.761-6.922.049 1.674-.067 3.616 0 5.491.34 9.785 2.981 16.174 3.031 19.932-12.23-.412-24.177.133-36.375 1.102-3.13.168-10.195.714-13.334.932 0 0 .673-5.996 1.213-13.83.747-10.807.355-16.139.944-22.199C52.15 74.961 37.633 61 34.561 54.587c-5.896-12.38-4.825-16.858-4.916-18.725-.15-3.005-4.567-4.695-1.652-4.36Z'
|
||||
fill='#AD831F'
|
||||
/>
|
||||
<path
|
||||
d='M58.036 54.303c.448 5.156 1.154 12.405 2.923 16.816.913-.1 1.76-.168 2.599-.226l.614-.042 1.412-.1.614-.05c2.49-.21 4.949-.696 7.333-1.449a51.714 51.714 0 0 0-.183 5.625v.62c0 1.063.05 2.16.083 3.348v5.834c0 1.674-.116 3.532-.266 5.65-.09 1.44-.207 2.83-.323 4.135 0 .21 0 .427-.058.628-.092 1.088-.2 2.1-.3 3.038 0 .21 0 .41-.058.611-.382 3.449-.697 5.65-.697 5.65 3.122-.217 10.712-1.113 13.86-1.28a324.381 324.381 0 0 1 36.652-.837 20.93 20.93 0 0 0-.631-4.135c0-.21-.091-.427-.149-.645-.133-.603-.283-1.247-.432-1.925l-.15-.645c-.191-.837-.382-1.674-.564-2.645a75.323 75.323 0 0 1-.623-3.54 58.092 58.092 0 0 1-.54-5.224v-2.679c-.05-1.405-.091-2.745-.124-4.025l3.662 2.921.481.385.831.653.473.385c1.378 1.088 2.425 1.908 2.491 1.908 4.061-3.8 5.879-10.697 7.415-15.987a25.15 25.15 0 0 1-2.125-2.31c-.166-.184-.316-.377-.474-.57a86.48 86.48 0 0 1-1.179-1.481l-.498-.645c-.125-.159-.241-.318-.374-.477-3.462-4.42-7.573-9.425-14.54-11.593a25.179 25.179 0 0 0-2.433-.627 25.996 25.996 0 0 0-2.674-.386l-.672-.058c-.299 0-.606 0-.914-.05h-.074c-.316 0-.831-.067-1.354-.1-.077.139-.163.273-.257.4-5.697 7.827-14.49 5.55-19.93-.418H83.43c-2.192 0-4.276 0-6.286.1a38.226 38.226 0 0 0-13.701 2.872l-.59.251c-.506.234-1.013.477-1.52.737l-.59.293c-.29.15-.572.31-.83.477-.605.316-1.232.587-1.876.812Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M58.036 54.303c.448 5.156 1.154 12.405 2.923 16.816.913-.1 1.76-.168 2.599-.226l.614-.042 1.412-.1.614-.05c2.49-.21 4.949-.696 7.333-1.449a51.714 51.714 0 0 0-.183 5.625v.62c0 1.063.05 2.16.083 3.348v5.834c0 1.674-.116 3.532-.266 5.65-.09 1.44-.207 2.83-.323 4.135 0 .21 0 .427-.058.628-.092 1.088-.2 2.1-.3 3.038 0 .21 0 .41-.058.611-.382 3.449-.697 5.65-.697 5.65 3.122-.217 10.712-1.113 13.86-1.28a324.381 324.381 0 0 1 36.652-.837 20.93 20.93 0 0 0-.631-4.135c0-.21-.091-.427-.149-.645-.133-.603-.283-1.247-.432-1.925l-.15-.645c-.191-.837-.382-1.674-.564-2.645a75.323 75.323 0 0 1-.623-3.54 58.092 58.092 0 0 1-.54-5.224v-2.679c-.05-1.405-.091-2.745-.124-4.025l3.662 2.921.481.385.831.653.473.385c1.378 1.088 2.425 1.908 2.491 1.908 4.061-3.8 5.879-10.697 7.415-15.987a25.15 25.15 0 0 1-2.125-2.31c-.166-.184-.316-.377-.474-.57a86.48 86.48 0 0 1-1.179-1.481l-.498-.645c-.125-.159-.241-.318-.374-.477-3.462-4.42-7.573-9.425-14.54-11.593a25.179 25.179 0 0 0-2.433-.627 25.996 25.996 0 0 0-2.674-.386l-.672-.058c-.299 0-.606 0-.914-.05h-.074c-.316 0-.831-.067-1.354-.1-.077.139-.163.273-.257.4-5.697 7.827-14.49 5.55-19.93-.418H83.43c-2.192 0-4.276 0-6.286.1a38.226 38.226 0 0 0-13.701 2.872l-.59.251c-.506.234-1.013.477-1.52.737l-.59.293c-.29.15-.572.31-.83.477-.605.316-1.232.587-1.876.812Z'
|
||||
fill='var(--center-channel-color)'
|
||||
fillOpacity={0.08}
|
||||
/>
|
||||
<path
|
||||
d='M72.46 98.75c16.408-1.097 32.849-3.24 49.183-.62 0-.21-.091-.427-.149-.644-16.268-2.553-32.626-.444-48.993.652 0 .21-.025.41-.042.611ZM72.817 95.117a176.064 176.064 0 0 1 48.245.46l-.149-.644a176.874 176.874 0 0 0-48.038-.444c-.017.192-.033.41-.058.628ZM73.448 78.845v.62c15.254-.947 30.674 1.531 45.721 4.042v-.628c-15.063-2.52-30.475-4.963-45.721-4.034ZM73.348 74.877v.62c15.364.07 30.66 2.057 45.539 5.917a.29.29 0 0 0 .191 0v-.569a185.289 185.289 0 0 0-45.73-5.968ZM84.01 48.745c1.86 4.486 4.841 8.37 10.148 8.688 6.053.41 13.286-2.704 15.827-8.454l-.673-.059c-2.549 5.4-9.4 8.295-15.154 7.894-4.941-.335-7.731-3.893-9.5-8.07h-.648ZM60.668 52.997a271.09 271.09 0 0 0 2.89 17.896l.614-.042a248.464 248.464 0 0 1-2.914-18.147l-.59.293ZM123.927 80.762l.473.385a54.45 54.45 0 0 0 7.764-16.39c-.166-.184-.315-.376-.473-.569a54.074 54.074 0 0 1-7.764 16.574ZM129.972 62.062a43.948 43.948 0 0 1-7.399 17.661l.482.386a44.553 44.553 0 0 0 7.415-17.403l-.498-.644ZM62.777 51.967a157.128 157.128 0 0 0 2.807 18.784l.615-.05a157.363 157.363 0 0 1-2.832-18.985l-.59.251Z'
|
||||
fill='var(--center-channel-color)'
|
||||
fillOpacity={0.16}
|
||||
/>
|
||||
<path
|
||||
d='M88.918 34.121h3.82c2.076.093 3.039.419 4.06 2.336.183.326-.365.544-.54.21a3.036 3.036 0 0 0-.98-1.306 3 3 0 0 0-1.51-.603 31.487 31.487 0 0 0-3.206-.118h-1.561c-.042-.15-.058-.334-.083-.519Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M88.453 36.524a2.354 2.354 0 0 0 .673-2.41c-.29-1.24-1.304-2.06-2.25-1.834-.947.226-1.495 1.423-1.205 2.662.29 1.239 1.304 2.059 2.259 1.833.19-.046.368-.131.523-.251Zm-1.769-3.516a.976.976 0 0 1 .324-.159c.64-.15 1.337.477 1.553 1.406.216.93-.125 1.8-.764 1.95-.64.151-1.337-.476-1.561-1.397a1.789 1.789 0 0 1 .49-1.775l-.042-.025Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M105.6 35.52c2.267 0 3.886 2.67 4.592 5.507.532 2.126 3.787 2.553 5.921 2.11 2.259-.46 4.085-2.445 6.386-2.512 1.66-.058 3.172.913 4.658 1.674 1.486.762 3.322 1.39 4.783.637 1.661-.837 2.275-2.989 3.928-3.759 1.652-.77 3.687.193 5.04 1.482a12.257 12.257 0 0 1 3.72 7.659 7.413 7.413 0 0 1-.755 4.403 4.169 4.169 0 0 1-1.542 1.612 4.125 4.125 0 0 1-2.145.58c-1.869-.116-3.471-1.799-5.331-1.581-1.055.2-1.993.8-2.624 1.674-.665.837-1.171 1.783-1.844 2.611a8.17 8.17 0 0 1-3.943 2.658 8.108 8.108 0 0 1-4.743.002 8.17 8.17 0 0 1-3.945-2.655 8.266 8.266 0 0 1-1.817-4.416c-.108-1.096 0-2.285-.632-3.189-.83-1.214-2.491-1.398-3.927-1.373-1.437.025-3.048.109-4.152-.837-2.375-2.026-.291-6.654-2.633-8.713a8.225 8.225 0 0 0-1.992-1.089c-.914-.443-2.608-2.235-.972-2.854.531-.192 1.42.16 1.951.226.669.093 1.343.14 2.018.142Z'
|
||||
fill='#4A2407'
|
||||
/>
|
||||
<path
|
||||
d='M103.4 39.353c.159-1.226.215-2.464.166-3.7-.058-1.59 2.4-1.59 2.491 0a25.445 25.445 0 0 1-.249 4.361c-.094.31-.305.572-.587.728a1.228 1.228 0 0 1-.924.11 1.263 1.263 0 0 1-.745-.57 1.28 1.28 0 0 1-.152-.929Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<g clipPath='url(#i)'>
|
||||
<path
|
||||
d='M15.08 8.147 12.596 2.27a.388.388 0 0 0-.602-.152l-1.58.98a.506.506 0 0 0-.075.68l3.995 4.822a.533.533 0 0 0 .602.074.523.523 0 0 0 .151-.526h-.005Zm-3.84 3.014a.474.474 0 0 1-.677.151l-7-3.619c-.302-.2-.35-.477-.15-.828l1.278-1.96a.593.593 0 0 1 .827-.074l5.647 5.65a.506.506 0 0 1 .075.68ZM9.96 14.85l-5.872-2.41c-.286-.1-.477 0-.525.302l-.377 1.809a.406.406 0 0 0 .377.528l6.246.603c.2 0 .351-.126.451-.377a.49.49 0 0 0-.3-.455Z'
|
||||
fill='#FFBC1F'
|
||||
/>
|
||||
<path
|
||||
d='m24.272 37.986 1.205.677a1.887 1.887 0 0 0 1.543.228c.527-.15.972-.503 1.242-.98l3.236-5.427a2.05 2.05 0 0 0-.75-2.856l-1.205-.68a1.89 1.89 0 0 0-1.544-.226c-.526.151-.972.503-1.241.98l-3.239 5.427a2.47 2.47 0 0 0-.188 1.62 1.947 1.947 0 0 0 .941 1.237Z'
|
||||
fill='#28427B'
|
||||
/>
|
||||
<path
|
||||
d='M38.344 28.816c1.335-2.422 1.833-6.06.222-7.258l-10.613-7.835-7.99 12.508 11.669 6.33c2.131 1.048 5.378-1.322 6.712-3.745Z'
|
||||
fill='var(--button-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M13.428 13.195a38.767 38.767 0 0 0-3.952 7.912c-.827 2.41-.915 3.892-.262 4.445.854.401 2.186-.276 3.995-2.034 1.809-1.758 3.629-4.069 5.459-6.933 1.832-2.856 3.163-5.481 3.995-7.875.831-2.394.894-3.888.188-4.482-.8-.352-2.118.35-3.952 2.108a37.81 37.81 0 0 0-5.47 6.859Z'
|
||||
fill='#82889C'
|
||||
/>
|
||||
<path
|
||||
d='M9.057 25.403c.254.603.779.954 1.58 1.054 3.621.192 8.424.715 10.842.903 2.417.188 5.8-3.125 6.7-4.67.9-1.547 2.906-5.503 1.504-8.067-1.403-2.565-3.785-6.259-5.494-9.495-.402-.651-.904-.954-1.506-.903a.59.59 0 0 1 .225.075c.601.502.451 1.93-.45 4.284a44.12 44.12 0 0 1-4.067 7.798 43.539 43.539 0 0 1-5.345 6.97c-1.756 1.81-3.01 2.563-3.764 2.262a.508.508 0 0 1-.225-.225v.014Z'
|
||||
fill='#DDDFE4'
|
||||
/>
|
||||
<path
|
||||
opacity={0.5}
|
||||
d='M36.157 24.797a1 1 0 0 0 .603.229.941.941 0 0 0 .827-.454 1.145 1.145 0 0 0 .226-.857.909.909 0 0 0-.451-.64l-4.366-2.788a1.027 1.027 0 0 0-.856-.188 1.04 1.04 0 0 0-.643.488c-.146.236-.199.518-.148.791a.896.896 0 0 0 .451.64l4.366 2.788-.008-.009Z'
|
||||
fill='#fff'
|
||||
fillOpacity={0.48}
|
||||
/>
|
||||
</g>
|
||||
<ellipse
|
||||
cx={104.099}
|
||||
cy={216.167}
|
||||
rx={38.594}
|
||||
ry={1.954}
|
||||
fill='#000'
|
||||
fillOpacity={0.12}
|
||||
/>
|
||||
<path
|
||||
d='M148.892 76.45h56.197a7.926 7.926 0 0 1 3.003.58 7.861 7.861 0 0 1 2.55 1.671 7.75 7.75 0 0 1 1.708 2.509c.398.939.604 1.946.607 2.964v35.298a7.65 7.65 0 0 1-.607 2.964 7.748 7.748 0 0 1-1.708 2.509 7.879 7.879 0 0 1-5.553 2.252h-8.294v13.213l-12.44-13.213h-35.444a7.879 7.879 0 0 1-5.553-2.252 7.748 7.748 0 0 1-1.708-2.509 7.65 7.65 0 0 1-.607-2.964V84.174a7.706 7.706 0 0 1 2.308-5.466 7.892 7.892 0 0 1 5.541-2.258Z'
|
||||
fill='#FFBC1F'
|
||||
/>
|
||||
<path
|
||||
d='M184.355 127.197h-35.444a7.941 7.941 0 0 1-3.003-.58 7.868 7.868 0 0 1-2.55-1.672 7.748 7.748 0 0 1-1.708-2.509 7.65 7.65 0 0 1-.607-2.964v-21.43s2.474 19.817 2.919 21.561c.444 1.744 1.327 4.354 5.507 4.787 4.18.433 34.886 2.807 34.886 2.807Z'
|
||||
fill='#CC8F00'
|
||||
/>
|
||||
<path
|
||||
d='M196.185 96.777c-1.002 0-1.98.293-2.813.843a5.018 5.018 0 0 0-1.864 2.246 4.944 4.944 0 0 0-.288 2.89 4.982 4.982 0 0 0 1.385 2.562c.708.7 1.61 1.176 2.592 1.369.982.193 2 .094 2.925-.284a5.05 5.05 0 0 0 2.272-1.843 4.964 4.964 0 0 0-.628-6.32 5.05 5.05 0 0 0-1.643-1.084 5.108 5.108 0 0 0-1.938-.379ZM176.99 96.777c-1.002 0-1.98.293-2.813.843a5.018 5.018 0 0 0-1.864 2.246 4.936 4.936 0 0 0-.288 2.89 4.982 4.982 0 0 0 1.385 2.562c.708.7 1.61 1.176 2.592 1.369.982.193 2 .094 2.925-.284a5.05 5.05 0 0 0 2.272-1.843 4.964 4.964 0 0 0-.628-6.32 5.05 5.05 0 0 0-1.643-1.084 5.108 5.108 0 0 0-1.938-.379ZM157.816 96.777a5.108 5.108 0 0 0-2.815.84 5.017 5.017 0 0 0-1.867 2.244 4.946 4.946 0 0 0-.291 2.891 4.99 4.99 0 0 0 1.384 2.564 5.112 5.112 0 0 0 5.518 1.087 5.05 5.05 0 0 0 2.273-1.842 4.967 4.967 0 0 0-.625-6.318 5.062 5.062 0 0 0-1.641-1.085 5.11 5.11 0 0 0-1.936-.38Z'
|
||||
fill='var(--center-channel-bg)'
|
||||
/>
|
||||
<path
|
||||
d='M207.125 91.23a15.668 15.668 0 0 0-2.84-5.491 15.872 15.872 0 0 0-4.757-3.991.548.548 0 0 1-.289-.601.54.54 0 0 1 .183-.301.554.554 0 0 1 .332-.128c3.543-.21 10.695.538 8.453 10.46a.553.553 0 0 1-.52.445.563.563 0 0 1-.562-.393Z'
|
||||
fill='#FFD470'
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id='b'
|
||||
x1={93.5}
|
||||
y1={1}
|
||||
x2={-66.697}
|
||||
y2={161.197}
|
||||
gradientUnits='userSpaceOnUse'
|
||||
>
|
||||
<stop
|
||||
offset={0.01}
|
||||
stopColor='var(--button-bg)'
|
||||
/>
|
||||
<stop
|
||||
offset={0.766}
|
||||
stopColor='var(--button-bg)'
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default SvgComponent;
|
||||
@ -2,12 +2,10 @@
|
||||
.MoreThanMaxFreeUsers {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 10px;
|
||||
|
||||
.titleAndButton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 5px;
|
||||
margin-left: 20px;
|
||||
|
||||
> span {
|
||||
@ -17,56 +15,10 @@
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: fit-content;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: var(--button-bg);
|
||||
color: var(--button-color);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
|
||||
span {
|
||||
color: var(--button-color);
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--button-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
|
||||
color: var(--button-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.MoreThanMaxFreeUsersWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.channelIntroButton {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.channelIntroButton {
|
||||
border-radius: 4px;
|
||||
color: var(--button-bg);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--button-bg-rgb), 0.04);
|
||||
}
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@ -14,7 +14,6 @@ import {trackEvent} from 'actions/telemetry_actions';
|
||||
|
||||
import AddGroupsToChannelModal from 'components/add_groups_to_channel_modal';
|
||||
import ChannelInviteModal from 'components/channel_invite_modal';
|
||||
import EmptyStateThemeableSvg from 'components/common/svg_images_components/empty_state_themeable_svg';
|
||||
import InvitationModal from 'components/invitation_modal';
|
||||
import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
|
||||
import TeamPermissionGate from 'components/permissions_gates/team_permission_gate';
|
||||
@ -30,18 +29,16 @@ export interface AddMembersButtonProps {
|
||||
totalUsers?: number;
|
||||
usersLimit: number;
|
||||
channel: Channel;
|
||||
setHeader?: React.ReactNode;
|
||||
pluginButtons?: React.ReactNode;
|
||||
}
|
||||
|
||||
const AddMembersButton: React.FC<AddMembersButtonProps> = ({totalUsers, usersLimit, channel, setHeader, pluginButtons}: AddMembersButtonProps) => {
|
||||
const AddMembersButton: React.FC<AddMembersButtonProps> = ({totalUsers, usersLimit, channel, pluginButtons}: AddMembersButtonProps) => {
|
||||
const currentTeamId = useSelector(getCurrentTeamId);
|
||||
|
||||
if (!totalUsers) {
|
||||
return (<LoadingSpinner/>);
|
||||
}
|
||||
|
||||
const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
|
||||
const inviteUsers = totalUsers < usersLimit;
|
||||
|
||||
return (
|
||||
@ -49,63 +46,50 @@ const AddMembersButton: React.FC<AddMembersButtonProps> = ({totalUsers, usersLim
|
||||
teamId={currentTeamId}
|
||||
permissions={[Permissions.ADD_USER_TO_TEAM, Permissions.INVITE_GUEST]}
|
||||
>
|
||||
{inviteUsers && !isPrivate ? (
|
||||
{inviteUsers ? (
|
||||
<LessThanMaxFreeUsers
|
||||
pluginButtons={pluginButtons}
|
||||
setHeader={setHeader}
|
||||
/>
|
||||
) : (
|
||||
<MoreThanMaxFreeUsers
|
||||
channel={channel}
|
||||
pluginButtons={pluginButtons}
|
||||
setHeader={setHeader}
|
||||
/>
|
||||
)}
|
||||
</TeamPermissionGate>
|
||||
);
|
||||
};
|
||||
|
||||
const LessThanMaxFreeUsers = ({setHeader, pluginButtons}: {setHeader: React.ReactNode; pluginButtons: React.ReactNode}) => {
|
||||
const LessThanMaxFreeUsers = ({pluginButtons}: {pluginButtons: React.ReactNode}) => {
|
||||
const {formatMessage} = useIntl();
|
||||
|
||||
return (
|
||||
<>
|
||||
{pluginButtons}
|
||||
{setHeader}
|
||||
<div className='LessThanMaxFreeUsers'>
|
||||
<EmptyStateThemeableSvg
|
||||
width={128}
|
||||
height={113}
|
||||
/>
|
||||
<div className='titleAndButton'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.inviteOthersToWorkspace.title'
|
||||
defaultMessage='Let’s add some people to the workspace!'
|
||||
<ToggleModalButton
|
||||
ariaLabel={localizeMessage('intro_messages.inviteOthers', 'Invite others to the workspace')}
|
||||
id='introTextInvite'
|
||||
className='btn btn-sm btn-primary'
|
||||
modalId={ModalIdentifiers.INVITATION}
|
||||
dialogType={InvitationModal}
|
||||
onClick={() => trackEvent('channel_intro_message', 'click_invite_button')}
|
||||
>
|
||||
<i
|
||||
className='icon-email-plus-outline'
|
||||
title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
|
||||
/>
|
||||
<ToggleModalButton
|
||||
ariaLabel={localizeMessage('intro_messages.inviteOthers', 'Invite others to the workspace')}
|
||||
id='introTextInvite'
|
||||
className='intro-links color--link cursor--pointer'
|
||||
modalId={ModalIdentifiers.INVITATION}
|
||||
dialogType={InvitationModal}
|
||||
onClick={() => trackEvent('channel_intro_message', 'click_invite_button')}
|
||||
>
|
||||
<i
|
||||
className='icon-email-plus-outline'
|
||||
title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id='intro_messages.inviteOthersToWorkspace.button'
|
||||
defaultMessage='Invite others to the workspace'
|
||||
/>
|
||||
</ToggleModalButton>
|
||||
</div>
|
||||
<FormattedMessage
|
||||
id='intro_messages.inviteOthersToWorkspace.button'
|
||||
defaultMessage='Invite others to the workspace'
|
||||
/>
|
||||
</ToggleModalButton>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const MoreThanMaxFreeUsers = ({channel, setHeader, pluginButtons}: {channel: Channel; setHeader: React.ReactNode; pluginButtons: React.ReactNode}) => {
|
||||
const MoreThanMaxFreeUsers = ({channel, pluginButtons}: {channel: Channel; pluginButtons: React.ReactNode}) => {
|
||||
const {formatMessage} = useIntl();
|
||||
|
||||
const modalId = channel.group_constrained ? ModalIdentifiers.ADD_GROUPS_TO_CHANNEL : ModalIdentifiers.CHANNEL_INVITE;
|
||||
@ -125,7 +109,7 @@ const MoreThanMaxFreeUsers = ({channel, setHeader, pluginButtons}: {channel: Cha
|
||||
permissions={[isPrivate ? Permissions.MANAGE_PRIVATE_CHANNEL_MEMBERS : Permissions.MANAGE_PUBLIC_CHANNEL_MEMBERS]}
|
||||
>
|
||||
<ToggleModalButton
|
||||
className='intro-links color--link'
|
||||
className='action-button'
|
||||
modalId={modalId}
|
||||
dialogType={modal}
|
||||
dialogProps={{channel}}
|
||||
@ -134,26 +118,20 @@ const MoreThanMaxFreeUsers = ({channel, setHeader, pluginButtons}: {channel: Cha
|
||||
className='icon-account-plus-outline'
|
||||
title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
|
||||
/>
|
||||
{isPrivate && channel.group_constrained &&
|
||||
{channel.group_constrained &&
|
||||
<FormattedMessage
|
||||
id='intro_messages.inviteGropusToChannel.button'
|
||||
defaultMessage='Add groups to this private channel'
|
||||
defaultMessage='Add groups'
|
||||
/>}
|
||||
{isPrivate && !channel.group_constrained &&
|
||||
<FormattedMessage
|
||||
id='intro_messages.inviteMembersToPrivateChannel.button'
|
||||
defaultMessage='Add members to this private channel'
|
||||
/>}
|
||||
{!isPrivate &&
|
||||
{!channel.group_constrained &&
|
||||
<FormattedMessage
|
||||
id='intro_messages.inviteMembersToChannel.button'
|
||||
defaultMessage='Add members to this channel'
|
||||
defaultMessage='Add people'
|
||||
/>}
|
||||
</ToggleModalButton>
|
||||
</ChannelPermissionGate>
|
||||
</div>
|
||||
{pluginButtons}
|
||||
{setHeader}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -41,13 +41,19 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
fullWidth: true,
|
||||
locale: 'en',
|
||||
channelProfiles: [],
|
||||
isReadOnly: false,
|
||||
isFavorite: false,
|
||||
enableUserCreation: false,
|
||||
teamIsGroupConstrained: false,
|
||||
creatorName: 'creatorName',
|
||||
currentUser: users[0],
|
||||
stats: {},
|
||||
usersLimit: 10,
|
||||
isMobileView: false,
|
||||
actions: {
|
||||
getTotalUsersStats: jest.fn().mockResolvedValue([]),
|
||||
favoriteChannel: jest.fn().mockResolvedValue([]),
|
||||
unfavoriteChannel: jest.fn().mockResolvedValue([]),
|
||||
},
|
||||
};
|
||||
|
||||
@ -89,13 +95,12 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
<ChannelIntroMessage{...baseProps}/>, initialState,
|
||||
);
|
||||
|
||||
const beginningHeading = screen.getByText('Beginning of test channel');
|
||||
const beginningHeading = screen.getByText('test channel');
|
||||
|
||||
expect(beginningHeading).toBeInTheDocument();
|
||||
expect(beginningHeading).toHaveClass('channel-intro__title');
|
||||
|
||||
expect(screen.getByText(`This is the start of the test channel channel, created by ${baseProps.creatorName} on October 17, 2017.`));
|
||||
expect(screen.getByText('Any member can join and read this channel.')).toBeInTheDocument();
|
||||
expect(screen.getByText('This is the start of test channel. Any team member can join and read this channel.')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@ -116,13 +121,13 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
/>, initialState,
|
||||
);
|
||||
|
||||
expect(screen.queryByText('Beginning of test channel')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('test channel')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Any member can join and read this channel.')).not.toBeInTheDocument();
|
||||
|
||||
// there are no profiles in the dom, channel type is GM_CHANNEL, teammate text should be displayed
|
||||
expect(screen.getByText('This is the start of your group message history with these teammates. Messages and files shared here are not shown to people outside this area.')).toBeInTheDocument();
|
||||
expect(screen.getByText('This is the start of your group message history with these teammates. ', {exact: false})).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('This is the start of your', {exact: false})).toHaveClass('channel-intro-text');
|
||||
expect(screen.getByText('This is the start of your', {exact: false})).toHaveClass('channel-intro__text');
|
||||
});
|
||||
|
||||
test('should match component state, with profiles', () => {
|
||||
@ -133,12 +138,12 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
/>, initialState,
|
||||
);
|
||||
|
||||
expect(screen.getByText('This is the start of your group message history with test channel', {exact: false})).toBeInTheDocument();
|
||||
expect(screen.getByText('This is the start of your group message history with these teammates. ', {exact: false})).toBeInTheDocument();
|
||||
|
||||
const headerDialog = screen.getByLabelText('Set a Header dialog');
|
||||
const headerDialog = screen.getByLabelText('Set header dialog');
|
||||
expect(headerDialog).toBeInTheDocument();
|
||||
expect(headerDialog).toHaveTextContent('Set a Header');
|
||||
expect(headerDialog).toHaveClass('style--none intro-links color--link channelIntroButton');
|
||||
expect(headerDialog).toHaveTextContent('Set header');
|
||||
expect(headerDialog).toHaveClass('action-button');
|
||||
|
||||
// one for user1 and one for guest
|
||||
|
||||
@ -150,12 +155,7 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
expect(image[1]).toHaveAttribute('src', '/api/v4/users/guest1/image?_=0');
|
||||
expect(image[1]).toHaveAttribute('loading', 'lazy');
|
||||
|
||||
const editIcon = screen.getByTitle('Edit Icon');
|
||||
|
||||
expect(editIcon).toBeInTheDocument();
|
||||
expect(editIcon).toHaveClass('icon-pencil-outline');
|
||||
|
||||
const notificationPreferencesButton = screen.getByText('Notification Preferences');
|
||||
const notificationPreferencesButton = screen.getByText('Notifications');
|
||||
expect(notificationPreferencesButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -177,9 +177,9 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
/>, initialState,
|
||||
);
|
||||
|
||||
const message = screen.getByText('This is the start of your direct message history with this teammate', {exact: false});
|
||||
const message = screen.getByText('This is the start of your direct message history with this teammate. Messages and files shared here are not shown to anyone else.', {exact: false});
|
||||
expect(message).toBeInTheDocument();
|
||||
expect(message).toHaveClass('channel-intro-text');
|
||||
expect(message).toHaveClass('channel-intro__text');
|
||||
});
|
||||
|
||||
test('should match component state, with teammate', () => {
|
||||
@ -190,7 +190,7 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
teammateName='my teammate'
|
||||
/>, initialState,
|
||||
);
|
||||
expect(screen.getByText('This is the start of your direct message history with my teammate', {exact: false})).toBeInTheDocument();
|
||||
expect(screen.getByText('This is the start of your direct message history with my teammate.', {exact: false})).toBeInTheDocument();
|
||||
|
||||
const teammate = screen.getByLabelText('my teammate');
|
||||
|
||||
@ -204,16 +204,11 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
expect(image).toHaveAttribute('src', '/api/v4/users/user1/image?_=0');
|
||||
expect(image).toHaveAttribute('loading', 'lazy');
|
||||
|
||||
const headerDialog = screen.getByLabelText('Set a Header dialog');
|
||||
const headerDialog = screen.getByLabelText('Set header dialog');
|
||||
|
||||
expect(headerDialog).toBeInTheDocument();
|
||||
expect(headerDialog).toHaveTextContent('Set a Header');
|
||||
expect(headerDialog).toHaveClass('style--none intro-links color--link channelIntroButton');
|
||||
|
||||
const editIcon = screen.getByTitle('Edit Icon');
|
||||
|
||||
expect(editIcon).toBeInTheDocument();
|
||||
expect(editIcon).toHaveClass('icon-pencil-outline');
|
||||
expect(headerDialog).toHaveTextContent('Set header');
|
||||
expect(headerDialog).toHaveClass('action-button');
|
||||
});
|
||||
});
|
||||
|
||||
@ -236,13 +231,12 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
/>, initialState,
|
||||
);
|
||||
|
||||
const beginningHeading = screen.getByText('Beginning of test channel');
|
||||
const beginningHeading = screen.getByText('test channel');
|
||||
|
||||
expect(beginningHeading).toBeInTheDocument();
|
||||
expect(beginningHeading).toHaveClass('channel-intro__title');
|
||||
|
||||
expect(screen.getByText('Welcome to test channel!')).toBeInTheDocument();
|
||||
expect(screen.getByText('Messages can only be posted by system admins. Everyone automatically becomes a permanent member of this channel when they join the team.', {exact: false})).toBeInTheDocument();
|
||||
expect(screen.getByText('Messages can only be posted by admins. Everyone automatically becomes a permanent member of this channel when they join the team.', {exact: false})).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should match component state without any permission', () => {
|
||||
@ -256,12 +250,11 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
//no permission is given, invite link should not be in the dom
|
||||
expect(screen.queryByText('Add other groups to this team')).not.toBeInTheDocument();
|
||||
|
||||
const beginningHeading = screen.getByText('Beginning of test channel');
|
||||
const beginningHeading = screen.getByText('test channel');
|
||||
|
||||
expect(beginningHeading).toBeInTheDocument();
|
||||
expect(beginningHeading).toHaveClass('channel-intro__title');
|
||||
expect(screen.getByText('Welcome to test channel!')).toBeInTheDocument();
|
||||
expect(screen.getByText('Post messages here that you want everyone to see. Everyone automatically becomes a permanent member of this channel when they join the team.', {exact: false})).toBeInTheDocument();
|
||||
expect(screen.getByText('Post messages here that you want everyone to see. Everyone automatically becomes a member of this channel when they join the team.', {exact: false})).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@ -283,12 +276,8 @@ describe('components/post_view/ChannelIntroMessages', () => {
|
||||
{...props}
|
||||
/>, initialState,
|
||||
);
|
||||
expect(screen.getByText('Beginning of off-topic')).toBeInTheDocument();
|
||||
screen.getByText('This is the start of off-topic, a channel for non-work-related conversations.');
|
||||
expect(screen.getByText('This is the start of off-topic, a channel for non-work-related conversations.')).toHaveClass('channel-intro__content');
|
||||
|
||||
// stats.total_users_count is not specified, loading icon should be in the dom
|
||||
screen.getByTitle('Loading Icon');
|
||||
expect(screen.getByText('This is the start of off-topic, a channel for non-work-related conversations.')).toHaveClass('channel-intro__text');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import React from 'react';
|
||||
import {FormattedDate, FormattedMessage, defineMessages} from 'react-intl';
|
||||
|
||||
import {BellRingOutlineIcon} from '@mattermost/compass-icons/components';
|
||||
import {BellRingOutlineIcon, GlobeIcon, PencilOutlineIcon, StarOutlineIcon, LockOutlineIcon, StarIcon} from '@mattermost/compass-icons/components';
|
||||
import type {Channel, ChannelMembership} from '@mattermost/types/channels';
|
||||
import type {UserProfile as UserProfileType} from '@mattermost/types/users';
|
||||
|
||||
@ -14,6 +14,9 @@ import {isChannelMuted} from 'mattermost-redux/utils/channel_utils';
|
||||
|
||||
import AddGroupsToTeamModal from 'components/add_groups_to_team_modal';
|
||||
import ChannelNotificationsModal from 'components/channel_notifications_modal';
|
||||
import ChannelIntroPrivateSvg from 'components/common/svg_images_components/channel_intro_private_svg';
|
||||
import ChannelIntroPublicSvg from 'components/common/svg_images_components/channel_intro_public_svg';
|
||||
import ChannelIntroTownSquareSvg from 'components/common/svg_images_components/channel_intro_town_square_svg';
|
||||
import EditChannelHeaderModal from 'components/edit_channel_header_modal';
|
||||
import FormattedMarkdownMessage from 'components/formatted_markdown_message';
|
||||
import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';
|
||||
@ -21,7 +24,6 @@ import TeamPermissionGate from 'components/permissions_gates/team_permission_gat
|
||||
import ProfilePicture from 'components/profile_picture';
|
||||
import ToggleModalButton from 'components/toggle_modal_button';
|
||||
import UserProfile from 'components/user_profile';
|
||||
import EditIcon from 'components/widgets/icons/fa_edit_icon';
|
||||
|
||||
import {Constants, ModalIdentifiers} from 'utils/constants';
|
||||
import {getMonthLong} from 'utils/i18n';
|
||||
@ -38,19 +40,32 @@ type Props = {
|
||||
channelProfiles: UserProfileType[];
|
||||
enableUserCreation?: boolean;
|
||||
isReadOnly?: boolean;
|
||||
isFavorite: boolean;
|
||||
teamIsGroupConstrained?: boolean;
|
||||
creatorName: string;
|
||||
teammate?: UserProfileType;
|
||||
teammateName?: string;
|
||||
currentUser: UserProfileType;
|
||||
stats: any;
|
||||
usersLimit: number;
|
||||
channelMember?: ChannelMembership;
|
||||
isMobileView: boolean;
|
||||
actions: {
|
||||
getTotalUsersStats: () => any;
|
||||
favoriteChannel: (channelId: string) => any;
|
||||
unfavoriteChannel: (channelId: string) => any;
|
||||
};
|
||||
}
|
||||
|
||||
export default class ChannelIntroMessage extends React.PureComponent<Props> {
|
||||
toggleFavorite = () => {
|
||||
if (this.props.isFavorite) {
|
||||
this.props.actions.unfavoriteChannel(this.props.channel.id);
|
||||
} else {
|
||||
this.props.actions.favoriteChannel(this.props.channel.id);
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.props.stats?.total_users_count) {
|
||||
this.props.actions.getTotalUsersStats();
|
||||
@ -61,18 +76,21 @@ export default class ChannelIntroMessage extends React.PureComponent<Props> {
|
||||
const {
|
||||
currentUserId,
|
||||
channel,
|
||||
channelMember,
|
||||
creatorName,
|
||||
fullWidth,
|
||||
locale,
|
||||
channelProfiles,
|
||||
enableUserCreation,
|
||||
isReadOnly,
|
||||
channelProfiles,
|
||||
isFavorite,
|
||||
teamIsGroupConstrained,
|
||||
creatorName,
|
||||
teammate,
|
||||
teammateName,
|
||||
currentUser,
|
||||
stats,
|
||||
usersLimit,
|
||||
channelMember,
|
||||
isMobileView,
|
||||
} = this.props;
|
||||
|
||||
let centeredIntro = '';
|
||||
@ -81,15 +99,15 @@ export default class ChannelIntroMessage extends React.PureComponent<Props> {
|
||||
}
|
||||
|
||||
if (channel.type === Constants.DM_CHANNEL) {
|
||||
return createDMIntroMessage(channel, centeredIntro, teammate, teammateName);
|
||||
return createDMIntroMessage(channel, centeredIntro, currentUser, isFavorite, isMobileView, this.toggleFavorite, teammate, teammateName);
|
||||
} else if (channel.type === Constants.GM_CHANNEL) {
|
||||
return createGMIntroMessage(channel, centeredIntro, channelProfiles, currentUserId, channelMember);
|
||||
return createGMIntroMessage(channel, centeredIntro, isFavorite, isMobileView, this.toggleFavorite, channelProfiles, currentUserId, currentUser, channelMember);
|
||||
} else if (channel.name === Constants.DEFAULT_CHANNEL) {
|
||||
return createDefaultIntroMessage(channel, centeredIntro, stats, usersLimit, enableUserCreation, isReadOnly, teamIsGroupConstrained);
|
||||
return createDefaultIntroMessage(channel, centeredIntro, currentUser, isFavorite, isMobileView, this.toggleFavorite, stats, usersLimit, enableUserCreation, isReadOnly, teamIsGroupConstrained);
|
||||
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
|
||||
return createOffTopicIntroMessage(channel, centeredIntro, stats, usersLimit);
|
||||
return createOffTopicIntroMessage(channel, centeredIntro, isFavorite, isMobileView, currentUser, this.toggleFavorite, stats, usersLimit);
|
||||
} else if (channel.type === Constants.OPEN_CHANNEL || channel.type === Constants.PRIVATE_CHANNEL) {
|
||||
return createStandardIntroMessage(channel, centeredIntro, stats, usersLimit, locale, creatorName);
|
||||
return createStandardIntroMessage(channel, centeredIntro, currentUser, isFavorite, isMobileView, this.toggleFavorite, stats, usersLimit, locale, creatorName);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -135,47 +153,62 @@ const getGMIntroMessageSpecificPart = (userProfile: UserProfileType | undefined,
|
||||
);
|
||||
};
|
||||
|
||||
function createGMIntroMessage(channel: Channel, centeredIntro: string, profiles: UserProfileType[], currentUserId: string, channelMembership?: ChannelMembership) {
|
||||
function createGMIntroMessage(
|
||||
channel: Channel,
|
||||
centeredIntro: string,
|
||||
isFavorite: boolean,
|
||||
isMobileView: boolean,
|
||||
toggleFavorite: () => void,
|
||||
profiles: UserProfileType[],
|
||||
currentUserId: string,
|
||||
currentUser: UserProfileType,
|
||||
channelMembership?: ChannelMembership,
|
||||
) {
|
||||
const channelIntroId = 'channelIntro';
|
||||
|
||||
if (profiles.length > 0) {
|
||||
const currentUserProfile = profiles.find((v) => v.id === currentUserId);
|
||||
|
||||
const pictures = profiles.
|
||||
filter((profile) => profile.id !== currentUserId).
|
||||
map((profile) => (
|
||||
<ProfilePicture
|
||||
key={'introprofilepicture' + profile.id}
|
||||
src={Utils.imageURLForUser(profile.id, profile.last_picture_update)}
|
||||
size='xl'
|
||||
size='xl-custom-GM'
|
||||
userId={profile.id}
|
||||
username={profile.username}
|
||||
/>
|
||||
));
|
||||
|
||||
const actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{createFavoriteButton(isFavorite, toggleFavorite)}
|
||||
{createSetHeaderButton(channel)}
|
||||
{!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
|
||||
<PluggableIntroButtons channel={channel}/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
id={channelIntroId}
|
||||
className={'channel-intro ' + centeredIntro}
|
||||
>
|
||||
<div className='post-profile-img__container channel-intro-img'>
|
||||
<div className='post-profile-img__container channel-intro-img channel-intro-img__group'>
|
||||
{pictures}
|
||||
</div>
|
||||
<p className='channel-intro-text'>
|
||||
<h2 className='channel-intro__title'>
|
||||
{channel.display_name}
|
||||
</h2>
|
||||
<p className='channel-intro__text'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.GM.common'
|
||||
defaultMessage={'This is the start of your group message history with {names}.{br}'}
|
||||
values={{
|
||||
names: channel.display_name,
|
||||
br: <br/>,
|
||||
}}
|
||||
id='intro_messages.group_message'
|
||||
defaultMessage={'This is the start of your group message history with these teammates. '}
|
||||
/>
|
||||
{getGMIntroMessageSpecificPart(currentUserProfile, channelMembership)}
|
||||
</p>
|
||||
<div style={{display: 'flex'}}>
|
||||
{createNotificationPreferencesButton(channel, currentUserProfile)}
|
||||
<PluggableIntroButtons channel={channel}/>
|
||||
{createSetHeaderButton(channel)}
|
||||
</div>
|
||||
{actionButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -185,7 +218,7 @@ function createGMIntroMessage(channel: Channel, centeredIntro: string, profiles:
|
||||
id={channelIntroId}
|
||||
className={'channel-intro ' + centeredIntro}
|
||||
>
|
||||
<p className='channel-intro-text'>
|
||||
<p className='channel-intro__text'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.group_message'
|
||||
defaultMessage='This is the start of your group message history with these teammates. Messages and files shared here are not shown to people outside this area.'
|
||||
@ -195,7 +228,16 @@ function createGMIntroMessage(channel: Channel, centeredIntro: string, profiles:
|
||||
);
|
||||
}
|
||||
|
||||
function createDMIntroMessage(channel: Channel, centeredIntro: string, teammate?: UserProfileType, teammateName?: string) {
|
||||
function createDMIntroMessage(
|
||||
channel: Channel,
|
||||
centeredIntro: string,
|
||||
currentUser: UserProfileType,
|
||||
isFavorite: boolean,
|
||||
isMobileView: boolean,
|
||||
toggleFavorite: () => void,
|
||||
teammate?: UserProfileType,
|
||||
teammateName?: string,
|
||||
) {
|
||||
const channelIntroId = 'channelIntro';
|
||||
if (teammate) {
|
||||
const src = teammate ? Utils.imageURLForUser(teammate.id, teammate.last_picture_update) : '';
|
||||
@ -207,6 +249,14 @@ function createDMIntroMessage(channel: Channel, centeredIntro: string, teammate?
|
||||
setHeaderButton = createSetHeaderButton(channel);
|
||||
}
|
||||
|
||||
const actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{createFavoriteButton(isFavorite, toggleFavorite)}
|
||||
{setHeaderButton}
|
||||
{pluggableButton}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
id={channelIntroId}
|
||||
@ -215,31 +265,29 @@ function createDMIntroMessage(channel: Channel, centeredIntro: string, teammate?
|
||||
<div className='post-profile-img__container channel-intro-img'>
|
||||
<ProfilePicture
|
||||
src={src}
|
||||
size='xl'
|
||||
size='xl-custom-DM'
|
||||
status={teammate.is_bot ? '' : channel.status}
|
||||
userId={teammate?.id}
|
||||
username={teammate?.username}
|
||||
hasMention={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='channel-intro-profile d-flex'>
|
||||
<h2 className='channel-intro__title'>
|
||||
<UserProfile
|
||||
userId={teammate?.id}
|
||||
disablePopover={false}
|
||||
/>
|
||||
</div>
|
||||
<p className='channel-intro-text'>
|
||||
</h2>
|
||||
<p className='channel-intro__text'>
|
||||
<FormattedMarkdownMessage
|
||||
id='intro_messages.DM'
|
||||
defaultMessage='This is the start of your direct message history with {teammate}.\nDirect messages and files shared here are not shown to people outside this area.'
|
||||
defaultMessage='This is the start of your direct message history with {teammate}. Messages and files shared here are not shown to anyone else.'
|
||||
values={{
|
||||
teammate: teammateName,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<div style={{display: 'flex'}}>
|
||||
{pluggableButton}
|
||||
{setHeaderButton}
|
||||
</div>
|
||||
{actionButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -249,22 +297,34 @@ function createDMIntroMessage(channel: Channel, centeredIntro: string, teammate?
|
||||
id={channelIntroId}
|
||||
className={'channel-intro ' + centeredIntro}
|
||||
>
|
||||
<p className='channel-intro-text'>
|
||||
<p className='channel-intro__text'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.teammate'
|
||||
defaultMessage='This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'
|
||||
defaultMessage='This is the start of your direct message history with this teammate. Messages and files shared here are not shown to anyone else.'
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function createOffTopicIntroMessage(channel: Channel, centeredIntro: string, stats: any, usersLimit: number) {
|
||||
function createOffTopicIntroMessage(
|
||||
channel: Channel,
|
||||
centeredIntro: string,
|
||||
isFavorite: boolean,
|
||||
isMobileView: boolean,
|
||||
currentUser: UserProfileType,
|
||||
toggleFavorite: () => void,
|
||||
stats: any,
|
||||
usersLimit: number,
|
||||
) {
|
||||
const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
|
||||
const children = createSetHeaderButton(channel);
|
||||
const totalUsers = stats.total_users_count;
|
||||
const inviteUsers = totalUsers < usersLimit;
|
||||
|
||||
let setHeaderButton = null;
|
||||
let actionButtons = null;
|
||||
|
||||
if (children) {
|
||||
setHeaderButton = (
|
||||
<ChannelPermissionGate
|
||||
@ -279,7 +339,6 @@ function createOffTopicIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
|
||||
const channelInviteButton = (
|
||||
<AddMembersButton
|
||||
setHeader={setHeaderButton}
|
||||
totalUsers={totalUsers}
|
||||
usersLimit={usersLimit}
|
||||
channel={channel}
|
||||
@ -287,21 +346,32 @@ function createOffTopicIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
/>
|
||||
);
|
||||
|
||||
if (inviteUsers) {
|
||||
actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{actionButtons = channelInviteButton}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{createFavoriteButton(isFavorite, toggleFavorite)}
|
||||
{setHeaderButton}
|
||||
{createNotificationPreferencesButton(channel, currentUser)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id='channelIntro'
|
||||
className={'channel-intro ' + centeredIntro}
|
||||
>
|
||||
<ChannelIntroPublicSvg/>
|
||||
<h2 className='channel-intro__title'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.beginning'
|
||||
defaultMessage='Beginning of {name}'
|
||||
values={{
|
||||
name: channel.display_name,
|
||||
}}
|
||||
/>
|
||||
{channel.display_name}
|
||||
</h2>
|
||||
<p className='channel-intro__content'>
|
||||
<p className='channel-intro__text'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.offTopic'
|
||||
defaultMessage='This is the start of {display_name}, a channel for non-work-related conversations.'
|
||||
@ -310,7 +380,7 @@ function createOffTopicIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
{channelInviteButton}
|
||||
{actionButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -318,6 +388,10 @@ function createOffTopicIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
function createDefaultIntroMessage(
|
||||
channel: Channel,
|
||||
centeredIntro: string,
|
||||
currentUser: UserProfileType,
|
||||
isFavorite: boolean,
|
||||
isMobileView: boolean,
|
||||
toggleFavorite: () => void,
|
||||
stats: any,
|
||||
usersLimit: number,
|
||||
enableUserCreation?: boolean,
|
||||
@ -327,9 +401,12 @@ function createDefaultIntroMessage(
|
||||
let teamInviteLink = null;
|
||||
const totalUsers = stats.total_users_count;
|
||||
const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
|
||||
const inviteUsers = totalUsers < usersLimit;
|
||||
|
||||
let setHeaderButton = null;
|
||||
let pluginButtons = null;
|
||||
let actionButtons = null;
|
||||
|
||||
if (!isReadOnly) {
|
||||
pluginButtons = <PluggableIntroButtons channel={channel}/>;
|
||||
const children = createSetHeaderButton(channel);
|
||||
@ -358,7 +435,6 @@ function createDefaultIntroMessage(
|
||||
>
|
||||
{!teamIsGroupConstrained &&
|
||||
<AddMembersButton
|
||||
setHeader={setHeaderButton}
|
||||
totalUsers={totalUsers}
|
||||
usersLimit={usersLimit}
|
||||
channel={channel}
|
||||
@ -386,53 +462,75 @@ function createDefaultIntroMessage(
|
||||
);
|
||||
}
|
||||
|
||||
if (inviteUsers) {
|
||||
actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{actionButtons = teamInviteLink}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{createFavoriteButton(isFavorite, toggleFavorite)}
|
||||
{setHeaderButton}
|
||||
{createNotificationPreferencesButton(channel, currentUser)}
|
||||
{teamIsGroupConstrained && pluginButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id='channelIntro'
|
||||
className={'channel-intro ' + centeredIntro}
|
||||
>
|
||||
<ChannelIntroTownSquareSvg/>
|
||||
<h2 className='channel-intro__title'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.beginning'
|
||||
defaultMessage='Beginning of {name}'
|
||||
values={{
|
||||
name: channel.display_name,
|
||||
}}
|
||||
/>
|
||||
{channel.display_name}
|
||||
</h2>
|
||||
<p className='channel-intro__content'>
|
||||
<p className='channel-intro__text'>
|
||||
{!isReadOnly &&
|
||||
<FormattedMarkdownMessage
|
||||
<FormattedMessage
|
||||
id='intro_messages.default'
|
||||
defaultMessage='**Welcome to {display_name}!**\n \nPost messages here that you want everyone to see. Everyone automatically becomes a permanent member of this channel when they join the team.'
|
||||
defaultMessage='Welcome to {display_name}. Post messages here that you want everyone to see. Everyone automatically becomes a member of this channel when they join the team.'
|
||||
values={{
|
||||
display_name: channel.display_name,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
{isReadOnly &&
|
||||
<FormattedMarkdownMessage
|
||||
<FormattedMessage
|
||||
id='intro_messages.readonly.default'
|
||||
defaultMessage='**Welcome to {display_name}!**\n \nMessages can only be posted by system admins. Everyone automatically becomes a permanent member of this channel when they join the team.'
|
||||
defaultMessage='Welcome to {display_name}. Messages can only be posted by admins. Everyone automatically becomes a permanent member of this channel when they join the team.'
|
||||
values={{
|
||||
display_name: channel.display_name,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</p>
|
||||
{teamInviteLink}
|
||||
{teamIsGroupConstrained && pluginButtons}
|
||||
{teamIsGroupConstrained && setHeaderButton}
|
||||
<br/>
|
||||
{actionButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function createStandardIntroMessage(channel: Channel, centeredIntro: string, stats: any, usersLimit: number, locale: string, creatorName: string) {
|
||||
function createStandardIntroMessage(
|
||||
channel: Channel,
|
||||
centeredIntro: string,
|
||||
currentUser: UserProfileType,
|
||||
isFavorite: boolean,
|
||||
isMobileView: boolean,
|
||||
toggleFavorite: () => void,
|
||||
stats: any,
|
||||
usersLimit: number,
|
||||
locale: string,
|
||||
creatorName: string,
|
||||
) {
|
||||
const uiName = channel.display_name;
|
||||
let memberMessage;
|
||||
let teamInviteLink = null;
|
||||
const channelIsArchived = channel.delete_at !== 0;
|
||||
const totalUsers = stats.total_users_count;
|
||||
const inviteUsers = totalUsers < usersLimit;
|
||||
|
||||
if (channelIsArchived) {
|
||||
memberMessage = '';
|
||||
@ -440,14 +538,20 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
memberMessage = (
|
||||
<FormattedMessage
|
||||
id='intro_messages.onlyInvited'
|
||||
defaultMessage=' Only invited members can see this private channel.'
|
||||
defaultMessage='This is the start of {display_name}. Only invited members can see this private channel.'
|
||||
values={{
|
||||
display_name: channel.display_name,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
memberMessage = (
|
||||
<FormattedMessage
|
||||
id='intro_messages.anyMember'
|
||||
defaultMessage=' Any member can join and read this channel.'
|
||||
defaultMessage='This is the start of {display_name}. Any team member can join and read this channel.'
|
||||
values={{
|
||||
display_name: channel.display_name,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -467,7 +571,7 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
createMessage = (
|
||||
<FormattedMessage
|
||||
id='intro_messages.noCreatorPrivate'
|
||||
defaultMessage='This is the start of the {name} private channel, created on {date}.'
|
||||
defaultMessage='Private channel created on {date}.'
|
||||
values={{name: (uiName), date}}
|
||||
/>
|
||||
);
|
||||
@ -475,7 +579,7 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
createMessage = (
|
||||
<FormattedMessage
|
||||
id='intro_messages.noCreator'
|
||||
defaultMessage='This is the start of the {name} channel, created on {date}.'
|
||||
defaultMessage='Public channel created on {date}.'
|
||||
values={{name: (uiName), date}}
|
||||
/>
|
||||
);
|
||||
@ -485,7 +589,7 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='intro_messages.creatorPrivate'
|
||||
defaultMessage='This is the start of the {name} private channel, created by {creator} on {date}.'
|
||||
defaultMessage='Private channel created by {creator} on {date}.'
|
||||
values={{
|
||||
name: (uiName),
|
||||
creator: (creatorName),
|
||||
@ -499,7 +603,7 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='intro_messages.creator'
|
||||
defaultMessage='This is the start of the {name} channel, created by {creator} on {date}.'
|
||||
defaultMessage='Public channel created by {creator} on {date}.'
|
||||
values={{
|
||||
name: (uiName),
|
||||
creator: (creatorName),
|
||||
@ -512,31 +616,20 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
|
||||
let purposeMessage;
|
||||
if (channel.purpose && channel.purpose !== '') {
|
||||
if (channel.type === Constants.PRIVATE_CHANNEL) {
|
||||
purposeMessage = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='intro_messages.purposePrivate'
|
||||
defaultMessage=" This private channel's purpose is: {purpose}"
|
||||
values={{purpose: channel.purpose}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
} else if (channel.type === Constants.OPEN_CHANNEL) {
|
||||
purposeMessage = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='intro_messages.purpose'
|
||||
defaultMessage=" This channel's purpose is: {purpose}"
|
||||
values={{purpose: channel.purpose}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
purposeMessage = (
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='intro_messages.purpose'
|
||||
defaultMessage=" This channel's purpose is: {purpose}"
|
||||
values={{purpose: channel.purpose}}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
|
||||
let setHeaderButton = null;
|
||||
let actionButtons = null;
|
||||
const children = createSetHeaderButton(channel);
|
||||
if (children) {
|
||||
setHeaderButton = (
|
||||
@ -550,37 +643,51 @@ function createStandardIntroMessage(channel: Channel, centeredIntro: string, sta
|
||||
);
|
||||
}
|
||||
|
||||
const channelInviteButton = (
|
||||
teamInviteLink = (
|
||||
<AddMembersButton
|
||||
totalUsers={totalUsers}
|
||||
usersLimit={usersLimit}
|
||||
channel={channel}
|
||||
setHeader={setHeaderButton}
|
||||
pluginButtons={<PluggableIntroButtons channel={channel}/>}
|
||||
/>
|
||||
);
|
||||
|
||||
if (inviteUsers) {
|
||||
actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{actionButtons = teamInviteLink}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
actionButtons = (
|
||||
<div className='channel-intro__actions'>
|
||||
{createFavoriteButton(isFavorite, toggleFavorite)}
|
||||
{teamInviteLink}
|
||||
{setHeaderButton}
|
||||
{!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
|
||||
<PluggableIntroButtons channel={channel}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id='channelIntro'
|
||||
className={'channel-intro ' + centeredIntro}
|
||||
>
|
||||
{isPrivate ? <ChannelIntroPrivateSvg/> : <ChannelIntroPublicSvg/>}
|
||||
<h2 className='channel-intro__title'>
|
||||
<FormattedMessage
|
||||
id='intro_messages.beginning'
|
||||
defaultMessage='Beginning of {name}'
|
||||
values={{
|
||||
name: (uiName),
|
||||
}}
|
||||
/>
|
||||
{channel.display_name}
|
||||
</h2>
|
||||
<p className='channel-intro__content'>
|
||||
<div className='channel-intro__created'>
|
||||
{isPrivate ? <LockOutlineIcon size={14}/> : <GlobeIcon size={14}/>}
|
||||
{createMessage}
|
||||
</div>
|
||||
<p className='channel-intro__text'>
|
||||
{memberMessage}
|
||||
{purposeMessage}
|
||||
<br/>
|
||||
</p>
|
||||
{channelInviteButton}
|
||||
{actionButtons}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -594,38 +701,63 @@ function createSetHeaderButton(channel: Channel) {
|
||||
return (
|
||||
<ToggleModalButton
|
||||
modalId={ModalIdentifiers.EDIT_CHANNEL_HEADER}
|
||||
ariaLabel={Utils.localizeMessage('intro_messages.setHeader', 'Set a Header')}
|
||||
className={'intro-links color--link channelIntroButton'}
|
||||
ariaLabel={Utils.localizeMessage('intro_messages.setHeader', 'Set header')}
|
||||
className={'action-button'}
|
||||
dialogType={EditChannelHeaderModal}
|
||||
dialogProps={{channel}}
|
||||
>
|
||||
<EditIcon/>
|
||||
<PencilOutlineIcon
|
||||
size={24}
|
||||
/>
|
||||
<FormattedMessage
|
||||
id='intro_messages.setHeader'
|
||||
defaultMessage='Set a Header'
|
||||
defaultMessage='Set header'
|
||||
/>
|
||||
</ToggleModalButton>
|
||||
);
|
||||
}
|
||||
|
||||
function createNotificationPreferencesButton(channel: Channel, currentUser?: UserProfileType) {
|
||||
const isGM = channel.type === 'G';
|
||||
if (!isGM || !currentUser) {
|
||||
return null;
|
||||
function createFavoriteButton(isFavorite: boolean, toggleFavorite: () => void, classes?: string) {
|
||||
let favoriteText;
|
||||
if (isFavorite) {
|
||||
favoriteText = (
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.favorited'
|
||||
defaultMessage='Favorited'
|
||||
/>);
|
||||
} else {
|
||||
favoriteText = (
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.favorite'
|
||||
defaultMessage='Favorite'
|
||||
/>);
|
||||
}
|
||||
return (
|
||||
<button
|
||||
id='toggleFavoriteIntroButton'
|
||||
className={`action-button ${isFavorite ? 'active' : ''} ${classes}`}
|
||||
onClick={toggleFavorite}
|
||||
aria-label={'Favorite'}
|
||||
>
|
||||
{isFavorite ? <StarIcon size={24}/> : <StarOutlineIcon size={24}/>}
|
||||
{favoriteText}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function createNotificationPreferencesButton(channel: Channel, currentUser: UserProfileType) {
|
||||
return (
|
||||
<ToggleModalButton
|
||||
modalId={ModalIdentifiers.CHANNEL_NOTIFICATIONS}
|
||||
ariaLabel={Utils.localizeMessage('intro_messages.notificationPreferences', 'Notification Preferences')}
|
||||
className={'intro-links color--link channelIntroButton'}
|
||||
className={'action-button'}
|
||||
dialogType={ChannelNotificationsModal}
|
||||
dialogProps={{channel, currentUser}}
|
||||
>
|
||||
<BellRingOutlineIcon size={16}/>
|
||||
<BellRingOutlineIcon size={24}/>
|
||||
<FormattedMessage
|
||||
id='intro_messages.notificationPreferences'
|
||||
defaultMessage='Notification Preferences'
|
||||
defaultMessage='Notifications'
|
||||
/>
|
||||
</ToggleModalButton>
|
||||
);
|
||||
|
||||
@ -5,14 +5,16 @@ import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import type {Dispatch} from 'redux';
|
||||
|
||||
import {favoriteChannel, unfavoriteChannel} from 'mattermost-redux/actions/channels';
|
||||
import {getTotalUsersStats} from 'mattermost-redux/actions/users';
|
||||
import {getCurrentChannel, getDirectTeammate, getMyCurrentChannelMembership} from 'mattermost-redux/selectors/entities/channels';
|
||||
import {getCurrentChannel, getDirectTeammate, getMyCurrentChannelMembership, isCurrentChannelFavorite} from 'mattermost-redux/selectors/entities/channels';
|
||||
import {getConfig} from 'mattermost-redux/selectors/entities/general';
|
||||
import {get} from 'mattermost-redux/selectors/entities/preferences';
|
||||
import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
|
||||
import {getProfilesInCurrentChannel, getCurrentUserId, getUser, getTotalUsersStats as getTotalUsersStatsSelector} from 'mattermost-redux/selectors/entities/users';
|
||||
import {getCurrentUser, getProfilesInCurrentChannel, getCurrentUserId, getUser, getTotalUsersStats as getTotalUsersStatsSelector} from 'mattermost-redux/selectors/entities/users';
|
||||
|
||||
import {getCurrentLocale} from 'selectors/i18n';
|
||||
import {getIsMobileView} from 'selectors/views/browser';
|
||||
|
||||
import {Preferences} from 'utils/constants';
|
||||
import {getDisplayNameByUser} from 'utils/utils';
|
||||
@ -29,6 +31,7 @@ function mapStateToProps(state: GlobalState) {
|
||||
const channel = getCurrentChannel(state) || {};
|
||||
const channelMember = getMyCurrentChannelMembership(state);
|
||||
const teammate = getDirectTeammate(state, channel.id);
|
||||
const currentUser = getCurrentUser(state);
|
||||
const creator = getUser(state, channel.creator_id);
|
||||
|
||||
const usersLimit = 10;
|
||||
@ -43,13 +46,16 @@ function mapStateToProps(state: GlobalState) {
|
||||
channelProfiles: getProfilesInCurrentChannel(state),
|
||||
enableUserCreation,
|
||||
isReadOnly,
|
||||
isFavorite: isCurrentChannelFavorite(state),
|
||||
teamIsGroupConstrained: Boolean(team.group_constrained),
|
||||
creatorName: getDisplayNameByUser(state, creator),
|
||||
teammate,
|
||||
teammateName: getDisplayNameByUser(state, teammate),
|
||||
currentUser,
|
||||
stats,
|
||||
usersLimit,
|
||||
channelMember,
|
||||
isMobileView: getIsMobileView(state),
|
||||
};
|
||||
}
|
||||
|
||||
@ -57,6 +63,8 @@ function mapDispatchToProps(dispatch: Dispatch) {
|
||||
return {
|
||||
actions: bindActionCreators({
|
||||
getTotalUsersStats,
|
||||
favoriteChannel,
|
||||
unfavoriteChannel,
|
||||
}, dispatch),
|
||||
};
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ const PluggableIntroButtons = React.memo((props: Props) => {
|
||||
return (
|
||||
<button
|
||||
key={buttonProps.id}
|
||||
className={'intro-links color--link channelIntroButton style--none'}
|
||||
className={'action-button'}
|
||||
onClick={() => buttonProps.action?.(props.channel, props.channelMember)}
|
||||
>
|
||||
{buttonProps.icon}
|
||||
|
||||
@ -11,7 +11,7 @@ import BotDefaultIcon from 'images/bot_default_icon.png';
|
||||
|
||||
import './avatar.scss';
|
||||
|
||||
export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
||||
export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl-custom-GM' | 'xl-custom-DM' | 'xxl';
|
||||
|
||||
export const getAvatarWidth = (size: TAvatarSizeToken) => {
|
||||
switch (size) {
|
||||
@ -27,6 +27,10 @@ export const getAvatarWidth = (size: TAvatarSizeToken) => {
|
||||
return 36;
|
||||
case 'xl':
|
||||
return 50;
|
||||
case 'xl-custom-GM':
|
||||
return 72;
|
||||
case 'xl-custom-DM':
|
||||
return 96;
|
||||
case 'xxl':
|
||||
return 128;
|
||||
}
|
||||
|
||||
@ -3969,34 +3969,29 @@
|
||||
"interactive_dialog.submit": "Submit",
|
||||
"interactive_dialog.submitting": "Submitting...",
|
||||
"intro_messages.addGroupsToTeam": "Add other groups to this team",
|
||||
"intro_messages.anyMember": " Any member can join and read this channel.",
|
||||
"intro_messages.beginning": "Beginning of {name}",
|
||||
"intro_messages.creator": "This is the start of the {name} channel, created by {creator} on {date}.",
|
||||
"intro_messages.creatorPrivate": "This is the start of the {name} private channel, created by {creator} on {date}.",
|
||||
"intro_messages.default": "**Welcome to {display_name}!**\n \nPost messages here that you want everyone to see. Everyone automatically becomes a permanent member of this channel when they join the team.",
|
||||
"intro_messages.DM": "This is the start of your direct message history with {teammate}.\nDirect messages and files shared here are not shown to people outside this area.",
|
||||
"intro_messages.anyMember": "This is the start of {display_name}. Any team member can join and read this channel.",
|
||||
"intro_messages.creator": "Public channel created by {creator} on {date}.",
|
||||
"intro_messages.creatorPrivate": "Private channel created by {creator} on {date}.",
|
||||
"intro_messages.default": "Welcome to {display_name}. Post messages here that you want everyone to see. Everyone automatically becomes a member of this channel when they join the team.",
|
||||
"intro_messages.DM": "This is the start of your direct message history with {teammate}. Messages and files shared here are not shown to anyone else.",
|
||||
"intro_messages.GM.all": "You'll be notified <b>for all activity</b> in this group message.",
|
||||
"intro_messages.GM.common": "This is the start of your group message history with {names}.{br}",
|
||||
"intro_messages.GM.mention": "You have selected to be notified <b>only when mentioned</b> in this group message.",
|
||||
"intro_messages.GM.muted": "This group message is currently <b>muted</b>, so you will not be notified.",
|
||||
"intro_messages.GM.none": "You have selected to <b>never</b> be notified in this group message.",
|
||||
"intro_messages.group_message": "This is the start of your group message history with these teammates. Messages and files shared here are not shown to people outside this area.",
|
||||
"intro_messages.inviteGropusToChannel.button": "Add groups to this private channel",
|
||||
"intro_messages.inviteMembersToChannel.button": "Add members to this channel",
|
||||
"intro_messages.inviteMembersToPrivateChannel.button": "Add members to this private channel",
|
||||
"intro_messages.group_message": "This is the start of your group message history with these teammates. ",
|
||||
"intro_messages.inviteGropusToChannel.button": "Add groups",
|
||||
"intro_messages.inviteMembersToChannel.button": "Add people",
|
||||
"intro_messages.inviteOthers": "Invite others to this team",
|
||||
"intro_messages.inviteOthersToWorkspace.button": "Invite others to the workspace",
|
||||
"intro_messages.inviteOthersToWorkspace.title": "Let’s add some people to the workspace!",
|
||||
"intro_messages.noCreator": "This is the start of the {name} channel, created on {date}.",
|
||||
"intro_messages.noCreatorPrivate": "This is the start of the {name} private channel, created on {date}.",
|
||||
"intro_messages.notificationPreferences": "Notification Preferences",
|
||||
"intro_messages.noCreator": "Public channel created on {date}.",
|
||||
"intro_messages.noCreatorPrivate": "Private channel created on {date}.",
|
||||
"intro_messages.notificationPreferences": "Notifications",
|
||||
"intro_messages.offTopic": "This is the start of {display_name}, a channel for non-work-related conversations.",
|
||||
"intro_messages.onlyInvited": " Only invited members can see this private channel.",
|
||||
"intro_messages.onlyInvited": "This is the start of {display_name}. Only invited members can see this private channel.",
|
||||
"intro_messages.purpose": " This channel's purpose is: {purpose}",
|
||||
"intro_messages.purposePrivate": " This private channel's purpose is: {purpose}",
|
||||
"intro_messages.readonly.default": "**Welcome to {display_name}!**\n \nMessages can only be posted by system admins. Everyone automatically becomes a permanent member of this channel when they join the team.",
|
||||
"intro_messages.setHeader": "Set a Header",
|
||||
"intro_messages.teammate": "This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.",
|
||||
"intro_messages.readonly.default": "Welcome to {display_name}. Messages can only be posted by admins. Everyone automatically becomes a permanent member of this channel when they join the team.",
|
||||
"intro_messages.setHeader": "Set header",
|
||||
"intro_messages.teammate": "This is the start of your direct message history with this teammate. Messages and files shared here are not shown to anyone else.",
|
||||
"invitation_modal.confirm.done": "Done",
|
||||
"invitation_modal.confirm.not-sent-header": "Invitations Not Sent",
|
||||
"invitation_modal.confirm.sent-header": "Successful Invites",
|
||||
|
||||
68
webapp/channels/src/sass/components/_action-button.scss
Normal file
68
webapp/channels/src/sass/components/_action-button.scss
Normal file
@ -0,0 +1,68 @@
|
||||
.action-button {
|
||||
display: inline-flex;
|
||||
width: 92px;
|
||||
height: 64px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(var(--center-channel-color-rgb), 0.04);
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
gap: 8px;
|
||||
line-height: 1;
|
||||
outline: none !important;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: rgba(var(--button-bg-rgb), 0.04);
|
||||
color: var(--button-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--button-bg-rgb), 0.08);
|
||||
color: var(--button-bg);
|
||||
|
||||
i {
|
||||
color: var(--button-bg);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--button-bg);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--center-channel-color-rgb), 0.08);
|
||||
color: rgba(var(--center-channel-color-rgb), 0.88);
|
||||
|
||||
i {
|
||||
color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
@import 'announcement-bar';
|
||||
@import 'badge';
|
||||
@import 'buttons';
|
||||
@import 'action-button';
|
||||
@import 'channel-header__icon';
|
||||
@import 'channel-invite-modal';
|
||||
@import 'channel-switcher';
|
||||
|
||||
@ -520,63 +520,118 @@
|
||||
}
|
||||
|
||||
.channel-intro {
|
||||
padding: 110px 15px 0;
|
||||
max-width: 648px;
|
||||
padding: 120px 24px 32px 24px;
|
||||
margin: 0 auto 10px;
|
||||
|
||||
&.channel-intro--centered {
|
||||
max-width: 1020px;
|
||||
}
|
||||
|
||||
.intro-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.fa,
|
||||
svg,
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
text-align: center;
|
||||
|
||||
.channel-intro-profile {
|
||||
margin: 0 0 4px;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
|
||||
.user-popover {
|
||||
overflow: hidden;
|
||||
max-width: calc(100% - 100px);
|
||||
font-family: Metropolis, sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-intro-img {
|
||||
.status-wrapper {
|
||||
height: 50px;
|
||||
margin: 0 10px 10px 0;
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
border: solid 2px var(--center-channel-bg);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 100px;
|
||||
&__group button {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.status-wrapper {
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
max-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-intro__title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 28px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 40px;
|
||||
|
||||
@media screen and (max-width: 768px) and (min-width: 414px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span,
|
||||
button {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.Tag {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
padding: 4px;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-intro__content {
|
||||
padding: 10px 15px;
|
||||
border-radius: 3px;
|
||||
background: $bg--gray;
|
||||
.channel-intro__created {
|
||||
margin-bottom: 20px;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.75);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
display: inline;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-intro__text {
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.channel-intro__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Team Header in Sidebar
|
||||
|
||||
@ -346,6 +346,7 @@ export const ModalIdentifiers = {
|
||||
CREATE_DM_CHANNEL: 'create_dm_channel',
|
||||
EDIT_CHANNEL_HEADER: 'edit_channel_header',
|
||||
EDIT_CHANNEL_PURPOSE: 'edit_channel_purpose',
|
||||
NOTIFICATIONS: 'notifications',
|
||||
DELETE_POST: 'delete_post',
|
||||
CONVERT_CHANNEL: 'convert_channel',
|
||||
RESET_STATUS: 'reset_status',
|
||||
|
||||
@ -341,7 +341,7 @@ export function applyTheme(theme: Theme) {
|
||||
changeCss('.app__body .attachment .attachment__content, .app__body .attachment-actions button', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.16));
|
||||
changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.5));
|
||||
changeCss('.app__body .attachment-actions button:focus, .app__body .attachment-actions button:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.03));
|
||||
changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
|
||||
changeCss('.app__body .input-group-addon, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
|
||||
changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor);
|
||||
changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
|
||||
changeCss('.app__body .search-item-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user