phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[MM-62232] Update loading and welcome screens, theming fixes (#3279)

Browse Source 
* Replace images with new SVG components, replace backgrounds

* Add Denim and Onyx themes, fix associated themeing issues

* Add back elevation variables

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Devin Binnie
2025-01-13 09:42:27 -05:00
committed by GitHub
parent 453b79a451
commit 34b5f52f0c
31 changed files with 1869 additions and 1063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/renderer/assets/StippleMask.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

1
src/renderer/assets/svg/background-dark.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 697 KiB

1
src/renderer/assets/svg/background-light.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 696 KiB

64
src/renderer/assets/svg/calls.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

210
src/renderer/assets/svg/chat2.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

72
src/renderer/assets/svg/collaborate.svg
View File

@@ -1,72 +0,0 @@
<svg width="300" height="245" viewBox="0 0 300 245" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80.5232" cy="106.668" rx="78.2956" ry="78.1509" fill="white"/>
<path d="M80.5232 185.408C124.089 185.408 159.408 150.156 159.408 106.668C159.408 63.18 124.089 27.9277 80.5232 27.9277C36.9572 27.9277 1.63807 63.18 1.63807 106.668C1.63807 150.156 36.9572 185.408 80.5232 185.408Z" stroke="#3F4350" stroke-opacity="0.16" stroke-width="1.17895"/>
<ellipse cx="80.5232" cy="106.668" rx="78.2956" ry="78.1509" fill="#3F4350" fill-opacity="0.16"/>
<mask id="mask0_2352_4354" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="28" width="157" height="157">
<ellipse cx="80.5232" cy="106.668" rx="78.2956" ry="78.1509" fill="white"/>
</mask>
<g mask="url(#mask0_2352_4354)">
<path d="M47.2334 90.5902H68.9615L69.7233 78.4832C70.976 78.1114 73.8116 75.6613 74.6157 75.3318C77.993 73.98 81.5988 55.2238 80.5239 52.5033C79.1526 49.4617 69.5963 54.1001 64.8139 52.5793C60.4125 51.1768 54.6397 57.0149 54.3773 63.6641L47.2334 90.5902Z" fill="#FFBC1F"/>
<ellipse cx="76.2916" cy="60.2001" rx="1.26966" ry="1.26731" fill="#6F370B"/>
<path d="M104.647 182.622C95.5987 185.917 85.8308 187.708 75.6397 187.708C69.7993 187.708 64.0943 187.117 58.584 185.993C40.4702 182.293 24.4555 172.839 12.5461 159.625C12.3345 153.28 12.3176 145.845 12.58 137.151C14.1628 85.5717 17.4386 88.0894 62.6723 87.7514C113.814 87.3712 106.823 108.899 107.483 127.021C107.906 138.562 106.399 165.057 104.647 182.622Z" fill="white"/>
<path d="M54.9017 99.8161C58.1097 101.007 66.6672 100.45 68.4363 97.8898C69.6551 96.1156 70.8148 94.2906 72.0082 92.4995C72.9647 91.0548 73.9043 89.61 74.8184 88.1399C71.1872 87.8527 67.1581 87.7175 62.672 87.7513C56.6792 87.7935 51.4398 87.7935 46.8267 87.8696C51.2451 92.753 48.765 97.5434 54.9017 99.8161Z" fill="#FFBC1F"/>
<path d="M107.474 115.674C105.891 115.784 104.334 116.029 102.869 116.274C95.3359 117.55 99.4496 119.992 99.7289 147.754C99.8728 161.788 102.328 169.789 100.846 183.805C100.846 183.839 100.829 183.864 100.829 183.898C102.116 183.501 103.394 183.079 104.655 182.614C106.407 165.049 107.914 138.554 107.491 127.013C107.355 123.304 107.542 119.451 107.491 115.666L107.474 115.674Z" fill="#FFBC1F"/>
<path d="M87.6081 173.498C87.2949 182.191 86.4484 180.764 79.2537 176.091C73.7095 172.492 64.3733 181.355 50.7456 183.991C39.4033 180.519 29.0768 174.74 20.3077 167.195C14.4419 152.9 13.2314 133.172 13.2314 121.969C13.2314 120.845 39.835 123.413 39.835 123.413C39.6827 143.75 41.7226 167.482 58.5837 164.483C75.4447 161.492 87.9297 164.804 87.6081 173.498Z" fill="#FFBC1F"/>
<path d="M156.246 129.446C145.141 163.275 113.247 187.708 75.6397 187.708C69.7993 187.708 64.0943 187.117 58.584 185.993V178.516H84.7474C84.7474 178.516 97.4525 130.291 97.334 129.446H156.246Z" fill="#484D5B"/>
<path d="M124.894 129.446H97.3342C97.385 129.826 94.7949 139.998 91.9424 150.982C102.955 143.851 113.924 136.653 124.894 129.446Z" fill="#6C7389"/>
<path d="M110.301 149.74C117.75 145.11 125.216 140.505 132.715 135.96C136.092 133.915 139.36 131.643 142.669 129.446H131.056C117.623 138.275 104.19 147.095 90.6895 155.823C90.0377 158.341 89.386 160.833 88.7681 163.199C95.9459 158.712 103.115 154.209 110.301 149.74Z" fill="#6C7389"/>
<path d="M83.9601 45.7358C82.1995 43.4124 79.5163 45.1275 76.7146 45.9301C70.798 48.4394 63.2731 44.1559 57.8051 47.5269C53.6153 50.1038 52.8873 55.7729 52.5911 60.6816C52.4641 62.836 52.8196 65.6748 54.9442 66.1057C55.6721 66.2493 56.4424 66.0381 57.1618 66.2071C59.1933 66.6718 59.4388 69.4092 59.4218 71.4875C59.3964 75.0783 60.0313 78.8126 62.1558 81.7105C64.2719 84.6084 68.1486 86.4334 71.5767 85.3435C75.6481 84.0508 77.5779 79.5054 78.8476 75.4416C79.5925 73.0337 81.497 68.9529 79.2624 67.7785C76.8669 66.5112 70.4933 69.6204 67.4376 67.5504C65.3638 66.1395 65.4823 63.0979 65.8294 60.614C66.0664 58.9074 66.3626 57.0824 67.5646 55.8489C69.4945 53.855 72.7109 54.2859 75.4872 54.3788C78.0181 54.4718 80.7182 54.0916 82.682 52.4863C84.6457 50.8811 85.5006 47.755 83.9686 45.7442L83.9601 45.7358Z" fill="#6F370B"/>
<path d="M79.0675 57.2853C81.1582 63.3008 82.4702 67.6012 82.4702 67.6012C82.1401 69.5191 76.0288 67.5505 76.0288 67.5505L79.0675 57.2853Z" fill="#FFBC1F"/>
<path d="M62.8927 57.2852C62.8927 57.2852 58.4489 56.0263 58.5928 60.2085C58.7367 64.3906 63.6037 63.4781 63.6037 63.4781L62.9012 57.2852H62.8927Z" fill="#FFBC1F"/>
</g>
<path d="M176.057 21.3763H117.055C115.974 21.3726 114.902 21.5827 113.902 21.9947C112.902 22.4066 111.992 23.0124 111.225 23.7772C110.458 24.5421 109.848 25.4512 109.431 26.4525C109.014 27.4539 108.797 28.5279 108.793 29.6133V67.2532C108.797 68.3386 109.014 69.4126 109.431 70.414C109.848 71.4153 110.458 72.3244 111.225 73.0893C111.992 73.8541 112.902 74.4599 113.902 74.8718C114.902 75.2838 115.974 75.4939 117.055 75.4902H125.763V89.5799L138.824 75.4902H176.036C177.117 75.4939 178.189 75.2838 179.189 74.8718C180.189 74.4599 181.099 73.8541 181.866 73.0893C182.633 72.3244 183.243 71.4153 183.66 70.414C184.077 69.4126 184.294 68.3386 184.298 67.2532V29.6133C184.29 27.4249 183.418 25.3288 181.874 23.7847C180.329 22.2405 178.237 21.3744 176.057 21.3763Z" fill="#FFBC1F"/>
<path d="M138.824 75.4902H176.036C177.117 75.4939 178.189 75.2837 179.189 74.8718C180.189 74.4598 181.099 73.8541 181.866 73.0892C182.633 72.3243 183.243 71.4153 183.66 70.4139C184.077 69.4126 184.294 68.3386 184.298 67.2532V44.4021C184.298 44.4021 181.699 65.5331 181.233 67.393C180.766 69.253 179.839 72.036 175.451 72.4975C171.062 72.959 138.824 75.4902 138.824 75.4902Z" fill="#CC8F00"/>
<path d="M126.403 43.0525C127.455 43.0525 128.482 43.3654 129.356 43.9516C130.23 44.5379 130.912 45.3711 131.314 46.346C131.716 47.3209 131.821 48.3936 131.616 49.4285C131.411 50.4634 130.905 51.4141 130.162 52.1602C129.418 52.9064 128.471 53.4145 127.44 53.6203C126.409 53.8262 125.341 53.7205 124.369 53.3167C123.398 52.9129 122.568 52.2291 121.984 51.3517C121.4 50.4744 121.088 49.4429 121.088 48.3877C121.087 47.6868 121.224 46.9926 121.491 46.3449C121.758 45.6972 122.149 45.1087 122.643 44.6131C123.137 44.1175 123.723 43.7245 124.368 43.4567C125.014 43.1889 125.705 43.0516 126.403 43.0525Z" fill="white"/>
<path d="M146.557 43.0525C147.608 43.0525 148.636 43.3654 149.51 43.9516C150.384 44.5379 151.065 45.3711 151.467 46.346C151.869 47.3209 151.975 48.3936 151.77 49.4285C151.565 50.4634 151.058 51.4141 150.315 52.1602C149.572 52.9064 148.625 53.4145 147.594 53.6203C146.563 53.8262 145.494 53.7205 144.523 53.3167C143.552 52.9129 142.721 52.2291 142.137 51.3517C141.553 50.4744 141.242 49.4429 141.242 48.3877C141.241 47.6868 141.378 46.9926 141.644 46.3449C141.911 45.6972 142.303 45.1087 142.796 44.6131C143.29 44.1175 143.876 43.7245 144.522 43.4567C145.167 43.1889 145.859 43.0516 146.557 43.0525Z" fill="white"/>
<path d="M166.687 43.0525C167.739 43.0511 168.767 43.3628 169.642 43.9482C170.517 44.5336 171.2 45.3664 171.603 46.3411C172.006 47.3159 172.112 48.3888 171.908 49.4242C171.704 50.4596 171.198 51.4109 170.455 52.1577C169.712 52.9046 168.765 53.4134 167.734 53.6198C166.703 53.8262 165.634 53.721 164.662 53.3174C163.69 52.9138 162.86 52.23 162.276 51.3525C161.691 50.4749 161.379 49.4432 161.379 48.3877C161.378 47.6874 161.515 46.9938 161.781 46.3465C162.048 45.6993 162.439 45.1111 162.932 44.6155C163.425 44.12 164.01 43.727 164.655 43.4587C165.299 43.1905 165.99 43.0525 166.687 43.0525Z" fill="white"/>
<path d="M114.917 37.1372C115.516 35.0071 116.53 33.0172 117.898 31.2819C119.267 29.5466 120.965 28.1003 122.893 27.0262C123.007 26.9683 123.099 26.8739 123.154 26.758C123.209 26.642 123.224 26.511 123.197 26.3855C123.17 26.2599 123.102 26.1469 123.004 26.0642C122.906 25.9815 122.784 25.9338 122.656 25.9284C118.936 25.7047 111.427 26.5018 113.781 37.0813C113.806 37.2104 113.873 37.3274 113.972 37.4136C114.071 37.4998 114.196 37.5501 114.327 37.5566C114.458 37.563 114.587 37.5252 114.694 37.4492C114.801 37.3731 114.879 37.2633 114.917 37.1372Z" fill="#FFD470"/>
<ellipse cx="234.835" cy="177.743" rx="63.212" ry="63.0952" fill="white"/>
<path d="M234.835 241.427C270.071 241.427 298.637 212.916 298.637 177.743C298.637 142.57 270.071 114.058 234.835 114.058C199.6 114.058 171.034 142.57 171.034 177.743C171.034 212.916 199.6 241.427 234.835 241.427Z" stroke="#3F4350" stroke-opacity="0.16" stroke-width="1.17895"/>
<ellipse cx="234.835" cy="177.743" rx="63.212" ry="63.0952" fill="#3F4350" fill-opacity="0.16"/>
<mask id="mask1_2352_4354" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="171" y="114" width="128" height="127">
<ellipse cx="234.835" cy="177.743" rx="63.212" ry="63.0952" fill="white"/>
</mask>
<g mask="url(#mask1_2352_4354)">
<path d="M249.562 148.071C245.939 148.071 242.776 148.215 240.024 148.526C219.227 150.865 227.235 160.349 224.381 187.155C221.154 217.514 214.446 235.986 246.502 239.132C278.558 242.277 283.243 223.605 285.923 189.023C288.603 154.449 281.238 148.071 249.562 148.071Z" fill="white"/>
<path d="M234.071 218.971C234.071 218.971 234.087 227.158 231.633 235.544C231.045 237.565 230.315 239.594 229.394 241.52H198.434C201.507 226.057 202.698 210.292 201.975 194.496C201.935 193.481 200.339 193.481 200.387 194.496C201.11 210.3 199.911 226.065 196.814 241.52H170.634C171.261 240.934 170.785 189.344 186.308 170.695C187.539 169.205 188.961 167.865 190.58 166.724C201.395 159.083 209.138 162.079 215.72 171.931C217.126 174.031 218.476 176.441 219.794 179.136C222.652 184.985 225.352 192.134 228.076 200.211C229.322 203.928 230.585 207.843 231.871 211.917C232.189 212.939 232.514 213.97 232.84 215.016C233.245 216.324 233.658 217.64 234.071 218.971Z" fill="#82889C"/>
<path d="M210.281 241.52H196.813C199.91 226.065 201.109 210.3 200.387 194.496C200.339 193.481 201.61 193.545 201.975 194.496C207.7 209.428 213.354 226.057 210.281 241.52Z" fill="#3F4350"/>
<path d="M282.428 218.004C282.81 226.77 283.334 235.544 282.317 241.52H199.204C202.84 233.872 209.717 229.322 219.261 223.481C223.319 221.008 227.861 218.289 232.84 215.016C233.245 214.739 233.658 214.469 234.071 214.192C234.071 214.192 234.396 214.041 234.992 213.772C241.876 210.665 285.184 191.968 282.897 214.176V214.192C282.762 215.515 282.373 216.776 282.428 218.004Z" fill="#A4A9B7"/>
<path d="M282.421 240.831C283.287 234.878 282.794 226.445 282.421 218.004C282.365 216.776 282.755 215.515 282.89 214.192V214.176C285.168 192.039 242.155 210.546 235.056 213.74C246.847 228.815 263.491 239.214 282.413 240.831H282.421Z" fill="#3F4350"/>
<path d="M240.202 148.753C227.026 149.864 193.284 147.044 188.22 162.406C183.609 176.379 198.428 174.453 202.452 184.567C206.468 194.681 206.699 203.03 210.493 194.026C214.287 185.023 209.794 173.559 207.905 168.614C206.024 163.668 222.621 178.727 232.971 173.335C243.322 167.942 240.202 148.753 240.202 148.753Z" fill="white"/>
<path d="M189.987 159.217C189.234 160.227 188.624 161.325 188.219 162.558C183.613 176.47 198.415 174.553 202.435 184.624C206.447 194.695 206.677 203.007 210.466 194.042C214.256 185.077 209.769 173.662 207.882 168.738C205.472 160.163 194.618 158.238 189.987 159.217Z" fill="#A37200"/>
<path d="M270.801 170.603C270.684 169.606 269.651 169.692 269.722 170.705C271.654 196.815 259.778 204.686 259.778 204.686C271.419 198.102 272.397 183.779 270.801 170.603Z" fill="#3F4350" fill-opacity="0.64"/>
<path d="M225.158 161.597C224.632 164.427 223.355 168.174 223.587 171.141C223.672 172.21 224.299 173.183 224.399 174.285C224.577 176.126 224.817 180.218 224.724 182.084C224.678 183.113 226.287 175.314 225.204 172.073C224.175 168.994 225.661 165.287 226.272 162.031C226.457 161.026 225.343 160.6 225.158 161.605V161.597Z" fill="#3F4350" fill-opacity="0.64"/>
<path d="M224.652 204.004H217.007C216.06 204.004 215.201 203.447 214.853 202.591L209.379 189.362C208.764 187.886 209.889 186.269 211.533 186.269H219.177C220.125 186.269 220.983 186.827 221.331 187.682L226.806 200.911C227.421 202.387 226.295 204.004 224.652 204.004Z" fill="#3F4350"/>
<path d="M262.916 148.761C286.561 150.527 292.58 157.615 292.58 184.177C292.58 225.476 268.071 229.19 249.589 220.851C231.106 212.52 220.899 205.036 217.415 198.503C214.604 193.236 220.836 198.503 228.002 199.936C229.8 200.293 231.431 201.275 233.094 201.726C270.748 211.958 275.728 196.65 273.575 178.601C271.421 160.553 262.924 148.753 262.924 148.753L262.916 148.761Z" fill="#A37200"/>
<path d="M262.972 148.753C262.972 148.753 269.362 158.563 271.521 176.621C272.999 189.032 265.626 202.558 259.651 204.535C259.493 210.942 258.023 217.302 254.995 222.862C272.491 228.16 292.58 221.595 292.58 184.172C292.58 157.608 286.572 150.519 262.964 148.753H262.972Z" fill="white"/>
<path d="M182.834 238.871H143.495C142.877 238.81 142.299 238.534 141.86 238.089C141.421 237.645 141.149 237.059 141.089 236.434V184.698C141.143 184.065 141.418 183.471 141.865 183.023C142.309 182.574 142.894 182.296 143.519 182.237H172.693L185.325 194.885V236.409C185.332 236.721 185.277 237.031 185.162 237.32C185.048 237.609 184.876 237.871 184.657 238.091C184.164 238.567 183.515 238.844 182.834 238.871Z" fill="black" fill-opacity="0.2"/>
</g>
<path d="M239.398 140.779L246.251 152.846C251.433 152.305 255.115 149.68 260.321 149.505C257.421 145.904 249.553 133.124 248.757 132.114C247.271 130.223 248.966 125.167 248.018 123.545C244.612 117.607 235.574 121.049 233.509 121.55C231.508 122.027 227.66 124.396 227.66 124.396C229.042 128.823 232.007 135.874 236.007 141.033C236.682 141.908 238 141.447 239.398 140.779Z" fill="#A37200"/>
<path d="M230.664 128.29C229.631 132.651 229.026 135.767 229.026 135.767C229.438 137.2 233.81 136.014 233.81 136.014L230.664 128.29Z" fill="#A37200"/>
<path d="M239.689 140.663C240.72 140.096 241.326 139.565 242.128 138.667C242.488 138.257 242.799 138.789 242.66 139.321C242.554 139.731 241.989 140.35 241.244 140.717C240.77 140.952 238.994 141.047 239.689 140.663Z" fill="#6F370B"/>
<path d="M255.206 125.464C254.154 124.542 252.797 123.81 252.291 122.519C251.842 121.361 252.203 120.062 251.962 118.85C251.545 116.763 249.313 115.362 247.145 115.33C244.977 115.299 239.044 117.55 236.739 117.613C234.435 117.669 232.115 117.472 229.842 117.858C227.57 118.243 225.282 119.322 224.15 121.29C223.018 123.259 223.524 126.18 225.587 127.172C227.321 128.007 229.409 127.29 231.047 126.29C232.685 125.29 234.194 123.983 236.065 123.519C237.936 123.054 240.344 123.881 240.697 125.739C240.898 126.802 240.384 127.857 240.224 128.928C240.063 129.999 240.521 131.377 241.613 131.479C242.857 131.597 243.837 129.975 245.041 130.29C246.109 130.574 246.181 131.983 246.398 133.038C246.904 135.534 249.569 137.353 252.155 137.14C254.74 136.928 256.988 134.849 257.566 132.361C258.144 129.873 257.133 127.156 255.198 125.456L255.206 125.464Z" fill="#4A2407"/>
<path d="M281.965 141.911C282.842 140.124 282.818 138.321 282.818 136.366C282.818 135.751 282.937 135.225 283.137 134.754C283.057 134.236 283.001 133.709 282.977 133.182C282.874 131.004 283.472 128.619 285.201 127.294C285.959 126.712 286.883 126.361 287.537 125.675C288.82 124.31 288.605 122.124 287.999 120.353C286.804 116.842 284.364 113.747 281.184 111.84C278.003 109.933 274.089 109.247 270.47 110.053C268.485 110.491 266.62 111.353 264.651 111.864C262.682 112.374 260.49 112.494 258.712 111.505C256.807 110.452 250.98 108.648 248.803 108.553C229.313 107.707 225.415 119.324 224.299 120.879C223.039 122.459 243.375 117.09 245.559 118.286C246.81 116.459 245.814 132.448 247.6 135.121C248.867 137.02 253.443 143.227 261.757 146.251C266.676 146.802 271.65 147.081 276.369 145.733C277.987 145.27 279.621 144.472 281.128 143.443C281.423 142.948 281.71 142.437 281.973 141.911H281.965Z" fill="#4A2407"/>
<path d="M250.187 156.935C255.811 156.817 260.128 153.323 262.512 148.61C258.718 148.221 254.401 148.071 249.49 148.071C245.862 148.071 242.717 148.221 239.96 148.53C241.766 153.173 244.293 157.062 250.179 156.935H250.187Z" fill="#A37200"/>
<path d="M216.873 165.333C216.251 170.717 215.784 176.111 215.459 181.503C215.386 182.777 217.571 182.599 217.645 181.345C217.96 176.122 218.418 170.908 219.02 165.703C219.159 164.444 217.023 164.064 216.873 165.333Z" fill="#FFBC1F"/>
<path d="M234.495 173.999C231.786 177.683 228.804 181.106 225.562 184.299C224.66 185.184 225.967 186.669 226.869 185.784C230.23 182.473 233.309 178.912 236.125 175.09C236.88 174.066 235.241 172.975 234.495 173.999Z" fill="#FFBC1F"/>
<path d="M245.341 193.568C240.736 193.394 236.121 193.21 231.516 193.036C230.455 192.999 230.609 194.984 231.66 195.032C236.265 195.206 240.881 195.389 245.486 195.563C246.546 195.601 246.393 193.616 245.341 193.568Z" fill="#FFBC1F"/>
<path d="M234.855 139.459C235.685 139.235 236.473 138.864 237.176 138.359C237.464 138.149 237.163 137.683 236.87 137.892C236.157 138.411 235.348 138.779 234.495 138.98L234.855 139.459Z" fill="#4A2407"/>
<ellipse cx="233.619" cy="130.299" rx="1.18044" ry="0.785506" transform="rotate(-13.8713 233.619 130.299)" fill="#4A2407"/>
<g clip-path="url(#clip0_2352_4354)">
<path d="M176.94 230.618H137.601C136.983 230.557 136.405 230.281 135.966 229.836C135.527 229.392 135.255 228.806 135.195 228.181V176.445C135.249 175.812 135.524 175.218 135.971 174.77C136.415 174.321 137 174.043 137.625 173.984H166.799L179.431 186.632V228.156C179.438 228.468 179.383 228.778 179.268 229.067C179.154 229.356 178.982 229.618 178.763 229.838C178.269 230.314 177.621 230.591 176.94 230.618Z" fill="#E8E9ED"/>
<path d="M161.361 182.605H140.693C140.58 182.597 140.469 182.566 140.367 182.514C140.266 182.461 140.176 182.388 140.104 182.299C140.032 182.21 139.979 182.107 139.948 181.996C139.916 181.885 139.908 181.769 139.923 181.654C139.923 181.094 140.182 180.814 140.693 180.814H161.361C161.879 180.814 162.137 181.094 162.137 181.654C162.152 181.769 162.144 181.886 162.112 181.997C162.081 182.108 162.027 182.212 161.954 182.301C161.881 182.39 161.791 182.463 161.689 182.516C161.587 182.568 161.476 182.598 161.361 182.605ZM158.155 188.648C158.39 188.648 158.615 188.554 158.781 188.386C158.946 188.218 159.04 187.99 159.04 187.753C159.04 187.515 158.946 187.287 158.781 187.119C158.615 186.951 158.39 186.857 158.155 186.857H140.711C140.494 186.883 140.295 186.988 140.15 187.153C140.004 187.318 139.924 187.532 139.924 187.753C139.924 187.974 140.004 188.187 140.15 188.352C140.295 188.517 140.494 188.623 140.711 188.648H158.155ZM171.858 194.801C171.98 194.812 172.102 194.796 172.218 194.756C172.334 194.716 172.44 194.652 172.53 194.568C172.62 194.484 172.691 194.382 172.741 194.269C172.79 194.155 172.815 194.033 172.815 193.909C172.815 193.785 172.79 193.663 172.741 193.549C172.691 193.436 172.62 193.334 172.53 193.25C172.44 193.166 172.334 193.102 172.218 193.062C172.102 193.022 171.98 193.006 171.858 193.016H140.693C140.481 193.047 140.287 193.154 140.147 193.318C140.007 193.482 139.929 193.692 139.929 193.909C139.929 194.126 140.007 194.335 140.147 194.499C140.287 194.663 140.481 194.771 140.693 194.801H171.858ZM169.873 200.851C170.382 200.851 170.677 200.552 170.757 199.955C170.74 199.723 170.642 199.505 170.48 199.341C170.317 199.177 170.102 199.077 169.873 199.06H140.693C140.58 199.067 140.469 199.098 140.367 199.151C140.266 199.203 140.176 199.276 140.104 199.366C140.032 199.455 139.979 199.558 139.948 199.669C139.916 199.78 139.908 199.896 139.923 200.01C139.923 200.571 140.182 200.851 140.693 200.851H169.873ZM158.155 207.004C158.39 207.004 158.615 206.91 158.781 206.742C158.946 206.574 159.04 206.346 159.04 206.108C159.04 205.871 158.946 205.643 158.781 205.475C158.615 205.307 158.39 205.213 158.155 205.213H140.711C140.494 205.239 140.295 205.344 140.15 205.509C140.004 205.674 139.924 205.887 139.924 206.108C139.924 206.33 140.004 206.543 140.15 206.708C140.295 206.873 140.494 206.978 140.711 207.004H158.155ZM171.858 213.048C172.375 213.048 172.67 212.749 172.742 212.152C172.727 211.92 172.629 211.701 172.466 211.536C172.303 211.371 172.087 211.272 171.858 211.256H140.693C140.58 211.264 140.469 211.295 140.367 211.347C140.266 211.4 140.176 211.473 140.104 211.562C140.032 211.651 139.979 211.755 139.948 211.865C139.916 211.976 139.908 212.093 139.923 212.207C139.923 212.767 140.182 213.048 140.693 213.048H171.858ZM171.858 219.207C172.087 219.19 172.302 219.09 172.465 218.926C172.627 218.761 172.725 218.543 172.742 218.311C172.728 218.078 172.63 217.859 172.467 217.694C172.304 217.529 172.088 217.43 171.858 217.416H140.693C140.476 217.441 140.277 217.547 140.131 217.712C139.986 217.877 139.906 218.09 139.906 218.311C139.906 218.532 139.986 218.746 140.131 218.911C140.277 219.076 140.476 219.181 140.693 219.207H171.858ZM171.858 225.25C172.375 225.25 172.67 224.952 172.742 224.355C172.739 224.243 172.712 224.133 172.665 224.032C172.618 223.931 172.551 223.841 172.468 223.768C172.385 223.694 172.288 223.638 172.183 223.604C172.078 223.57 171.968 223.558 171.858 223.569H140.693C140.182 223.569 139.923 223.849 139.923 224.41C139.923 224.97 140.182 225.25 140.693 225.25H171.858Z" fill="#989DAE"/>
<path d="M166.774 173.984L179.256 186.632H169.421C168.726 186.65 168.051 186.389 167.544 185.907C167.284 185.655 167.08 185.35 166.946 185.011C166.812 184.673 166.752 184.309 166.768 183.945L166.774 173.984Z" fill="#BABEC9"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M191.842 63.9509C191.927 62.978 192.785 62.2588 193.758 62.3444C199.364 62.8379 208.192 66.1179 216.812 71.1748C224.27 75.5502 231.793 81.3837 237.094 88.1894L239.664 76.5458C239.875 75.5921 240.819 74.9897 241.772 75.2002C242.726 75.4108 243.328 76.3546 243.118 77.3083L239.687 92.8498C239.476 93.8035 238.532 94.406 237.579 94.1954L222.037 90.7642C221.083 90.5537 220.481 89.6099 220.691 88.6561C220.902 87.7024 221.846 87.1 222.8 87.3106L233.81 89.7415C228.911 83.6761 222.029 78.3358 215.023 74.2254C206.604 69.2863 198.303 66.2951 193.448 65.8676C192.475 65.782 191.756 64.9238 191.842 63.9509Z" fill="#C6C9D2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M122.195 218.784C122.233 219.76 121.474 220.583 120.498 220.622C115.681 220.813 107.872 218.994 100.073 215.669C93.498 212.867 86.7069 208.9 81.5376 203.913L80.466 215.83C80.3785 216.802 79.519 217.52 78.5463 217.433C77.5735 217.345 76.8559 216.486 76.9434 215.513L78.3688 199.661C78.4563 198.688 79.3158 197.971 80.2885 198.058L96.1403 199.484C97.1131 199.571 97.8307 200.431 97.7433 201.403C97.6558 202.376 96.7963 203.094 95.8236 203.006L84.6676 202.003C89.3324 206.295 95.4025 209.834 101.46 212.416C109.044 215.649 116.293 217.249 120.357 217.088C121.333 217.049 122.156 217.808 122.195 218.784Z" fill="#C6C9D2"/>
<defs>
<clipPath id="clip0_2352_4354">
<rect width="44.2057" height="56.6333" fill="white" transform="translate(135.171 173.984)"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

127
src/renderer/assets/svg/integrate.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

198
src/renderer/assets/svg/womanLaptop.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

2
src/renderer/components/Carousel/Carousel.tsx
View File

@@ -113,7 +113,6 @@ function Carousel({
<CarouselButton
direction={ButtonDirection.PREV}
disabled={disableNavigation}
darkMode={darkMode}
onClick={handleOnPrevButtonClick}
/>
<CarouselPaginationIndicator
@@ -126,7 +125,6 @@ function Carousel({
<CarouselButton
direction={ButtonDirection.NEXT}
disabled={disableNavigation}
darkMode={darkMode}
onClick={handleOnNextButtonClick}
/>
</div>

3
src/renderer/components/Carousel/CarouselButton.tsx
View File

@@ -15,14 +15,12 @@ export enum ButtonDirection {
type CarouselButtonProps = {
direction: ButtonDirection;
disabled?: boolean;
darkMode?: boolean;
onClick?: () => void;
};
function CarouselButton({
direction = ButtonDirection.NEXT,
disabled = false,
darkMode = false,
onClick = () => null,
}: CarouselButtonProps) {
const handleOnClick = () => {
@@ -36,7 +34,6 @@ function CarouselButton({
'CarouselButton',
'icon-button icon-button-small',
{
'icon-button-inverted': darkMode,
disabled,
},
)}

1
src/renderer/components/Carousel/CarouselPaginationIndicator.tsx
View File

@@ -45,7 +45,6 @@ function CarouselPaginationIndicator({
className={classNames(
'indicatorDot',
{
'indicatorDot-inverted': darkMode,
active: activePage === pageIndex,
disabled,
},

19
src/renderer/components/ConfigureServer.tsx
View File

@@ -6,7 +6,6 @@ import React, {useState, useCallback, useEffect, useRef} from 'react';
import {useIntl, FormattedMessage} from 'react-intl';
import {MODAL_TRANSITION_TIMEOUT, URLValidationStatus} from 'common/utils/constants';
import womanLaptop from 'renderer/assets/svg/womanLaptop.svg';
import Header from 'renderer/components/Header';
import Input, {STATUS, SIZE} from 'renderer/components/Input';
import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground';
@@ -18,6 +17,8 @@ import 'renderer/css/components/Button.scss';
import 'renderer/css/components/ConfigureServer.scss';
import 'renderer/css/components/LoadingScreen.css';
import ServerImage from './Images/server';
type ConfigureServerProps = {
server?: UniqueServer;
prefillURL?: string;
@@ -266,14 +267,13 @@ function ConfigureServer({
}
return (
<div className={classNames('alternate-link', transition, {'alternate-link-inverted': darkMode})}>
<div className={classNames('alternate-link', transition)}>
<span className='alternate-link__message'>
{alternateLinkMessage}
</span>
<a
className={classNames(
'link-button link-small-button alternate-link__link',
{'link-button-inverted': darkMode},
)}
href={alternateLinkURL}
target='_blank'
@@ -291,7 +291,6 @@ function ConfigureServer({
'LoadingScreen',
{'LoadingScreen--darkMode': darkMode},
'ConfigureServer',
{'ConfigureServer-inverted': darkMode},
)}
>
<LoadingBackground/>
@@ -304,6 +303,9 @@ function ConfigureServer({
{!mobileView && getAlternateLink()}
<div className='ConfigureServer__content'>
<div className={classNames('ConfigureServer__message', transition)}>
<div className='ConfigureServer__message-img'>
<ServerImage/>
</div>
<h1 className='ConfigureServer__message-title'>
{messageTitle || formatMessage({id: 'renderer.components.configureServer.title', defaultMessage: 'Let’s connect to a server'})}
</h1>
@@ -318,12 +320,6 @@ function ConfigureServer({
/>)
}
</p>
<div className='ConfigureServer__message-img'>
<img
src={womanLaptop}
draggable={false}
/>
</div>
</div>
<div className={classNames('ConfigureServer__card', transition, {'with-error': nameError || urlError?.type === STATUS.ERROR})}>
<div
@@ -348,7 +344,6 @@ function ConfigureServer({
})}
placeholder={formatMessage({id: 'renderer.components.configureServer.url.placeholder', defaultMessage: 'Server URL'})}
disabled={waiting}
darkMode={darkMode}
/>
<Input
name='name'
@@ -367,7 +362,6 @@ function ConfigureServer({
})}
placeholder={formatMessage({id: 'renderer.components.configureServer.name.placeholder', defaultMessage: 'Server display name'})}
disabled={waiting}
darkMode={darkMode}
/>
<SaveButton
id='connectConfigureServer'
@@ -380,7 +374,6 @@ function ConfigureServer({
}
savingMessage={formatMessage({id: 'renderer.components.configureServer.connect.saving', defaultMessage: 'Connecting…'})}
disabled={!canSave}
darkMode={darkMode}
/>
</div>
</div>

243
src/renderer/components/Images/calls.tsx Normal file
View File

@@ -0,0 +1,243 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const CallsImage = () => (
<svg
width='293'
height='174'
viewBox='0 0 195 116'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<rect
x='-0.000488281'
y='24'
width='195'
height='67'
rx='3'
fill='var(--center-channel-color)'
fillOpacity='0.12'
/>
<path
d='M187.5 36L187.5 63L161 63'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<circle
cx='2.5'
cy='2.5'
r='2.5'
transform='matrix(-1 -8.74228e-08 -8.74228e-08 1 190 31)'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M187.5 102L187.5 75H161'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<circle
cx='187.5'
cy='104.5'
r='2.5'
transform='rotate(180 187.5 104.5)'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M6.49951 20L6.49951 47L32.9995 47'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<circle
cx='6.49951'
cy='17.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<rect
x='51.9995'
y='15'
width='123'
height='80.6667'
rx='4'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4'
/>
<path
d='M53.9995 18.5C53.9995 17.6716 54.6711 17 55.4995 17H171.5C172.328 17 173 17.6716 173 18.5V26H53.9995V18.5Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='58.4995'
cy='21.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='66.4995'
cy='21.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='74.4995'
cy='21.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<rect
opacity='0.32'
x='60.4995'
y='31.5'
width='107'
height='43'
rx='1.5'
stroke='var(--center-channel-color)'
/>
<circle
cx='101'
cy='85'
r='3'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<circle
cx='113'
cy='85'
r='6'
fill='var(--online-indicator)'
/>
<circle
cx='125'
cy='85'
r='3'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M92.9995 39V66H136'
stroke='var(--center-channel-color)'
strokeLinejoin='round'
/>
<rect
x='99.9995'
y='44'
width='3'
height='19'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='105'
y='45'
width='3'
height='18'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='110'
y='53'
width='3'
height='10'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='115'
y='52'
width='3'
height='11'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='120'
y='48'
width='3'
height='15'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='125'
y='46'
width='3'
height='17'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M113 81.5C113.194 81.5 113.371 81.5501 113.53 81.6503C113.696 81.7504 113.827 81.8859 113.924 82.0568C114.021 82.2218 114.07 82.4045 114.07 82.6048V84.8144C114.07 85.0147 114.021 85.2003 113.924 85.3712C113.827 85.5362 113.696 85.6688 113.53 85.7689C113.371 85.8691 113.194 85.9192 113 85.9192C112.805 85.9192 112.626 85.8691 112.46 85.7689C112.3 85.6688 112.172 85.5362 112.075 85.3712C111.978 85.2003 111.929 85.0147 111.929 84.8144V82.6048C111.929 82.4045 111.978 82.2218 112.075 82.0568C112.172 81.8859 112.3 81.7504 112.46 81.6503C112.626 81.5501 112.805 81.5 113 81.5ZM115.5 84.8144C115.5 85.2386 115.405 85.6393 115.217 86.0164C115.029 86.3758 114.772 86.6763 114.446 86.9179C114.121 87.1595 113.759 87.3098 113.359 87.3687V88.5H112.64V87.3687C112.24 87.3098 111.878 87.1595 111.553 86.9179C111.227 86.6763 110.97 86.3758 110.782 86.0164C110.594 85.6393 110.5 85.2386 110.5 84.8144H111.219C111.219 85.0619 111.261 85.2976 111.347 85.5215C111.438 85.7454 111.567 85.9457 111.732 86.1225C111.904 86.2933 112.098 86.4259 112.315 86.5202C112.531 86.6145 112.76 86.6616 113 86.6616C113.239 86.6616 113.468 86.6145 113.684 86.5202C113.901 86.4259 114.093 86.2933 114.258 86.1225C114.429 85.9457 114.558 85.7454 114.643 85.5215C114.735 85.2976 114.78 85.0619 114.78 84.8144H115.5Z'
fill='var(--center-channel-bg)'
/>
<rect
x='23.8995'
y='2.5001'
width='60.2'
height='110.6'
rx='10.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4.2'
/>
<path
d='M25.9995 10.9001C25.9995 7.4207 28.8201 4.6001 32.2995 4.6001H75.6995C79.1789 4.6001 81.9995 7.4207 81.9995 10.9001V14.4001H25.9995V10.9001Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='53.9995'
cy='57.8'
r='16.8'
fill='var(--online-indicator)'
/>
<rect
x='42.7995'
y='8.79999'
width='22.4'
height='1.4'
rx='0.7'
fill='var(--center-channel-color)'
/>
<path
d='M55.8662 58.5C55.8662 58.0346 55.7498 57.6102 55.5171 57.2269C55.2844 56.8299 54.9696 56.5151 54.5726 56.2824C54.1893 56.0497 53.7649 55.9333 53.2995 55.9333V54.2291C54.0798 54.2291 54.7916 54.4207 55.435 54.804C56.092 55.1873 56.6122 55.7075 56.9955 56.3645C57.3788 57.0079 57.5704 57.7197 57.5704 58.5H55.8662ZM59.2952 58.5C59.2952 57.4186 59.0215 56.4124 58.4739 55.4816C57.94 54.5781 57.2214 53.8595 56.3179 53.3256C55.3871 52.778 54.3809 52.5043 53.2995 52.5043V50.8C54.6958 50.8 55.9894 51.1491 57.1803 51.8472C58.3439 52.5316 59.2679 53.4488 59.9523 54.5987C60.6504 55.8033 60.9995 57.1037 60.9995 58.5H59.2952ZM60.1371 61.4979C60.3698 61.4979 60.5683 61.58 60.7326 61.7443C60.9105 61.9085 60.9995 62.107 60.9995 62.3397V65.3376C60.9995 65.5703 60.9105 65.7688 60.7326 65.9331C60.5683 66.111 60.3698 66.2 60.1371 66.2C58.1659 66.2 56.2768 65.8167 54.4699 65.0501C52.7314 64.3246 51.1914 63.2911 49.8499 61.9496C48.5084 60.6081 47.4749 59.0681 46.7494 57.3296C45.9828 55.5227 45.5995 53.6336 45.5995 51.6624C45.5995 51.4297 45.6816 51.2312 45.8459 51.0669C46.0239 50.889 46.2292 50.8 46.4619 50.8H49.4598C49.6925 50.8 49.891 50.889 50.0552 51.0669C50.2195 51.2312 50.3016 51.4297 50.3016 51.6624C50.3016 52.6754 50.4659 53.6883 50.7944 54.7013C50.8492 54.8519 50.856 55.0093 50.815 55.1736C50.7739 55.3242 50.6986 55.4611 50.5891 55.5843L48.7 57.4733C49.316 58.6779 50.1032 59.7662 51.0614 60.7381C52.0333 61.6963 53.1216 62.4835 54.3262 63.0995L56.2152 61.2104C56.3384 61.1009 56.4753 61.0256 56.6259 60.9845C56.7902 60.9435 56.9476 60.9503 57.0982 61.0051C58.1112 61.3336 59.1241 61.4979 60.1371 61.4979Z'
fill='var(--center-channel-bg)'
/>
<path
d='M99.8745 103L91.9995 103'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M89.3745 103L85.8745 103'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M83.2495 103L56.9995 103'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M102.5 103L113 103L113 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
);
export default CallsImage;

305
src/renderer/components/Images/collaborate.tsx Normal file
View File

@@ -0,0 +1,305 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const CollaborateImage = () => (
<svg
width='303'
height='176'
viewBox='0 0 202 117'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<rect
x='202'
y='13'
width='66'
height='193'
rx='2'
transform='rotate(90 202 13)'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
x='36'
y='2'
width='123'
height='80.6667'
rx='4'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4'
/>
<path
d='M38 5.5C38 4.67157 38.6716 4 39.5 4H155.5C156.328 4 157 4.67157 157 5.5V13H38V5.5Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<rect
x='69.8184'
y='8.5'
width='50.4281'
height='65.5541'
rx='1.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
/>
<path
d='M76.6321 14.5824H85.4085'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9009 49.2251H100.036'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9009 60.3896H104.424'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M76.6321 18.239H92.7221'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9007 65.7776H113.2'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M76.6321 22.6271H83.2144'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9009 55.0015H89.7968'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M84.6769 22.6271H91.2592'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M93.4536 55.0015H103.454'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M106.454 55.0015H111.454'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<rect
x='91.2593'
y='29.9409'
width='21.9409'
height='11.7018'
rx='1'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<g clipPath='url(#clip0_4216_119972)'>
<path
d='M81.7521 35.792L87.5055 36.8605C88.0891 33.6847 85.9851 30.6307 82.8085 30.0407C79.6304 29.4507 76.5808 31.5461 75.9987 34.7235C75.4151 37.8993 77.519 40.9534 80.6957 41.5433C81.656 41.7217 82.6046 41.6548 83.4778 41.3858L81.7521 35.792Z'
fill='var(--center-channel-bg)'
/>
<path
d='M83.4778 41.3858L87.5055 36.8605C88.0891 33.6847 85.9851 30.6307 82.8085 30.0407C79.6304 29.4507 76.5823 31.5461 75.9987 34.7235C75.4151 37.8993 77.519 40.9534 80.6957 41.5433C81.656 41.7217 82.6046 41.6548 83.4778 41.3858Z'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M83.4773 41.3856C85.4912 40.7659 87.0987 39.0762 87.505 36.8603L81.7516 35.7918L83.4773 41.3856Z'
fill='var(--center-channel-color)'
fillOpacity='0.64'
/>
<path
d='M83.6678 37.8343C84.7897 36.7699 84.8412 34.9922 83.7829 33.8638C82.7246 32.7354 80.9573 32.6836 79.8354 33.748C78.7136 34.8125 78.662 36.5902 79.7203 37.7186C80.7786 38.847 82.546 38.8988 83.6678 37.8343Z'
fill='var(--center-channel-bg)'
/>
</g>
<path
d='M50.1064 105.143L62.1126 117V56C62.1126 54.8954 61.2171 54 60.1126 54H1.9999C0.895332 54 -9.91821e-05 54.8954 -9.91821e-05 56V102.566C-9.91821e-05 103.67 0.895332 104.566 1.9999 104.566H48.701C49.2272 104.566 49.7321 104.773 50.1064 105.143Z'
fill='var(--indigo-400)'
/>
<circle
opacity='0.48'
cx='15.9713'
cy='70.8593'
r='7.98592'
fill='var(--neutral-0)'
/>
<path
opacity='0.48'
d='M29.2805 67.3098H43.4777'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M8.87207 89.6087H38.1538'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M8.87207 95.0869H28.3932'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M29.2805 72.6336H51.4636'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M8.87207 83.2818H23.9566'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M27.507 83.2818H43.4788'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<rect
x='148.5'
y='20.5'
width='43'
height='79'
rx='7.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='3'
/>
<path
d='M150 27.5C150 24.4624 152.462 22 155.5 22H184.5C187.538 22 190 24.4624 190 27.5V29H150V27.5Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='159.831'
cy='64.831'
r='5.83099'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M169.549 63H179.915'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M155 74H181'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M155 82H175'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M169.549 67H185.746'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M155 78H171'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M174 78L186 78'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<rect
x='162'
y='25'
width='16'
height='1'
rx='0.5'
fill='var(--center-channel-color)'
/>
<circle
cx='42.5'
cy='8.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<circle
cx='50.5'
cy='8.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<circle
cx='58.5'
cy='8.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M112 90L121 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M124 90L128 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M131 90L161 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M109 90L97 90L97 70'
stroke='var(--center-channel-color)'
strokeLinecap='round'
strokeLinejoin='round'
/>
<defs>
<clipPath id='clip0_4216_119972'>
<rect
width='11.7018'
height='11.7018'
fill='var(--center-channel-bg)'
transform='translate(75.9007 29.9409)'
/>
</clipPath>
</defs>
</svg>
);
export default CollaborateImage;

464
src/renderer/components/Images/server.tsx Normal file
View File

@@ -0,0 +1,464 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const ServerImage = () => (
<svg
width='260'
height='147'
viewBox='0 0 260 147'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<rect
x='0.998535'
y='58'
width='243'
height='52'
rx='3'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<path
d='M259.001 36.5002H160.17C160.073 36.5002 159.982 36.4483 159.934 36.364C159.885 36.2797 159.882 36.1759 159.927 36.0916C162.122 32.0314 166.12 29.2846 170.66 28.7009C170.628 28.2728 170.611 27.8707 170.611 27.475C170.611 18.1839 178.154 10.6278 187.427 10.6278C189.772 10.6278 192.042 11.1045 194.178 12.045C196.688 5.12772 203.261 0.5 210.628 0.5C218.521 0.5 225.404 5.76334 227.499 13.3454C230.846 11.2634 234.694 10.1673 238.654 10.1673C250.333 10.1673 259.834 19.6886 259.834 31.3893C259.834 33.04 259.643 34.6874 259.267 36.2862C259.238 36.4094 259.127 36.5002 258.998 36.5002H259.001Z'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
x='42.2072'
y='25.7087'
width='166.583'
height='109.249'
rx='5.41732'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='5.41732'
/>
<g clipPath='url(#clip0_4284_240815)'>
<rect
width='153'
height='95'
transform='translate(48.9985 33)'
fill='var(--center-channel-bg)'
/>
<rect
opacity='0.5'
x='48.9985'
y='33'
width='45.6761'
height='98.3792'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<path
d='M64.8101 40.0273L81.4994 40.0273'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M64.8101 42.6621L74.4723 42.6621'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M99.9449 40.4665H121.026'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M53.3901 51.4463H66.5659'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='57.3433'
cy='41.3443'
r='4.83112'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<ellipse
cx='55.476'
cy='58.6028'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.24'
/>
<path
d='M60.4174 58.4732H85.0122'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='115.756'
cy='55.8377'
r='5.27031'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M125.804 55.8243H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.804 60.2299H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.418 51.4463H138.594'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='115.756'
cy='76.9192'
r='5.27031'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M125.804 76.9057H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.804 81.3112H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.418 72.5272H138.594'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='115.756'
cy='98.0008'
r='5.27031'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M125.804 97.9866H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.804 102.393H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.418 93.6086H138.594'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='66.7812'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 66.3786H79.7419'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='74.9594'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 75.1622H87.6474'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='83.1377'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 83.0078H85.0122'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='91.316'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 90.9735H79.7419'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='99.4943'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 99.7576H87.6474'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
</g>
<path
d='M233.499 118L233.499 91H206.999'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
<circle
cx='233.499'
cy='120.5'
r='2.5'
transform='rotate(180 233.499 120.5)'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M73.164 74.5576H33.6597V90.0298H73.164V74.5576Z'
stroke='var(--center-channel-bg)'
strokeWidth='1.31879'
strokeLinecap='round'
/>
<path
opacity='0.5'
d='M58.6602 85.0711C60.195 85.0711 61.4391 83.8268 61.4391 82.2919C61.4391 80.757 60.195 79.5127 58.6602 79.5127C57.1255 79.5127 55.8813 80.757 55.8813 82.2919C55.8813 83.8268 57.1255 85.0711 58.6602 85.0711Z'
fill='var(--center-channel-bg)'
/>
<path
d='M66.5147 85.0711C68.0495 85.0711 69.2936 83.8268 69.2936 82.2919C69.2936 80.757 68.0495 79.5127 66.5147 79.5127C64.98 79.5127 63.7358 80.757 63.7358 82.2919C63.7358 83.8268 64.98 85.0711 66.5147 85.0711Z'
fill='var(--center-channel-bg)'
/>
<path
d='M50.8038 85.0711C52.3385 85.0711 53.5827 83.8268 53.5827 82.2919C53.5827 80.757 52.3385 79.5127 50.8038 79.5127C49.2691 79.5127 48.0249 80.757 48.0249 82.2919C48.0249 83.8268 49.2691 85.0711 50.8038 85.0711Z'
fill='var(--center-channel-bg)'
/>
<path
d='M16.4985 57L16.4985 84L42.9985 84'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
<circle
cx='16.4985'
cy='54.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<rect
x='26.9985'
y='72'
width='85'
height='23'
rx='3'
fill='var(--indigo-400)'
/>
<path
opacity='0.48'
d='M107.999 76H30.9985V91H107.999V76Z'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
d='M47.9985 87C49.6554 87 50.9985 85.6569 50.9985 84C50.9985 82.3431 49.6554 81 47.9985 81C46.3417 81 44.9985 82.3431 44.9985 84C44.9985 85.6569 46.3417 87 47.9985 87Z'
fill='var(--neutral-0)'
/>
<path
d='M56.9985 87C58.6554 87 59.9985 85.6569 59.9985 84C59.9985 82.3431 58.6554 81 56.9985 81C55.3417 81 53.9985 82.3431 53.9985 84C53.9985 85.6569 55.3417 87 56.9985 87Z'
fill='var(--neutral-0)'
/>
<path
opacity='0.5'
d='M38.9985 87C40.6554 87 41.9985 85.6569 41.9985 84C41.9985 82.3431 40.6554 81 38.9985 81C37.3417 81 35.9985 82.3431 35.9985 84C35.9985 85.6569 37.3417 87 38.9985 87Z'
fill='var(--neutral-0)'
/>
<rect
x='26.9985'
y='98'
width='85'
height='23'
rx='3'
fill='var(--indigo-400)'
/>
<path
opacity='0.48'
d='M107.999 102H30.9985V117H107.999V102Z'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
d='M47.9985 113C49.6554 113 50.9985 111.657 50.9985 110C50.9985 108.343 49.6554 107 47.9985 107C46.3417 107 44.9985 108.343 44.9985 110C44.9985 111.657 46.3417 113 47.9985 113Z'
fill='var(--neutral-0)'
/>
<path
d='M56.9985 113C58.6554 113 59.9985 111.657 59.9985 110C59.9985 108.343 58.6554 107 56.9985 107C55.3417 107 53.9985 108.343 53.9985 110C53.9985 111.657 55.3417 113 56.9985 113Z'
fill='var(--neutral-0)'
/>
<path
opacity='0.5'
d='M38.9985 113C40.6554 113 41.9985 111.657 41.9985 110C41.9985 108.343 40.6554 107 38.9985 107C37.3417 107 35.9985 108.343 35.9985 110C35.9985 111.657 37.3417 113 38.9985 113Z'
fill='var(--neutral-0)'
/>
<rect
x='26.9985'
y='124'
width='85'
height='23'
rx='3'
fill='var(--indigo-400)'
/>
<path
opacity='0.48'
d='M107.999 128H30.9985V143H107.999V128Z'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
d='M47.9985 139C49.6554 139 50.9985 137.657 50.9985 136C50.9985 134.343 49.6554 133 47.9985 133C46.3417 133 44.9985 134.343 44.9985 136C44.9985 137.657 46.3417 139 47.9985 139Z'
fill='var(--neutral-0)'
/>
<path
d='M56.9985 139C58.6554 139 59.9985 137.657 59.9985 136C59.9985 134.343 58.6554 133 56.9985 133C55.3417 133 53.9985 134.343 53.9985 136C53.9985 137.657 55.3417 139 56.9985 139Z'
fill='var(--neutral-0)'
/>
<path
opacity='0.5'
d='M38.9985 139C40.6554 139 41.9985 137.657 41.9985 136C41.9985 134.343 40.6554 133 38.9985 133C37.3417 133 35.9985 134.343 35.9985 136C35.9985 137.657 37.3417 139 38.9985 139Z'
fill='var(--neutral-0)'
/>
<rect
x='176.288'
y='58.499'
width='47.2105'
height='87'
rx='7.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='3'
/>
<path
d='M177.788 64.499C177.788 62.0137 179.802 59.999 182.288 59.999H217.498C219.983 59.999 221.998 62.0137 221.998 64.499V67.7359H177.788V64.499Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<circle
cx='188.653'
cy='107.339'
r='6.44477'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M199.394 104.475H210.851'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M182.924 121.894H213.187'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M182.924 126.315H205.31'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M199.394 108.771H217.296'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M182.924 117.364H201.729'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<rect
x='191.051'
y='63.3149'
width='17.6842'
height='1.10526'
rx='0.552632'
fill='var(--center-channel-color)'
/>
<defs>
<clipPath id='clip0_4284_240815'>
<rect
width='153'
height='95'
fill='white'
transform='translate(48.9985 33)'
/>
</clipPath>
</defs>
</svg>
);
export default ServerImage;

168
src/renderer/components/Images/threads-empty.tsx Normal file
View File

@@ -0,0 +1,168 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const ThreadsEmptyImage = () => (
<svg
width='189'
height='146'
viewBox='0 0 125 97'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0_4210_74752)'>
<rect
opacity='0.08'
x='0.00390625'
width='50'
height='50'
rx='2'
fill='var(--button-bg)'
/>
<rect
opacity='0.12'
x='30.0039'
y='50'
width='95'
height='28'
rx='2'
fill='var(--button-bg)'
/>
<circle
cx='95.5039'
cy='32.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='109.004'
cy='32.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='122.504'
cy='32.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M95.0482 87.1199L105.004 97V46C105.004 44.8954 104.108 44 103.004 44H55.0039C53.8993 44 53.0039 44.8954 53.0039 46V84.5395C53.0039 85.644 53.8993 86.5395 55.0039 86.5395H93.6394C94.1672 86.5395 94.6736 86.7481 95.0482 87.1199Z'
fill='var(--indigo-400)'
/>
<path
d='M67.0039 65H97.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M67.0039 72H86.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M67.0039 59H77.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M80.0039 59H93.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M27.6089 69.5638L14.0039 83V14C14.0039 12.8954 14.8993 12 16.0039 12H82.0039C83.1085 12 84.0039 12.8954 84.0039 14V66.9868C84.0039 68.0914 83.1085 68.9868 82.0039 68.9868H29.0142C28.4881 68.9868 27.9832 69.1941 27.6089 69.5638Z'
fill='var(--center-channel-bg)'
/>
<path
d='M27.2575 69.2081L14.5039 81.8035V14C14.5039 13.1716 15.1755 12.5 16.0039 12.5H82.0039C82.8323 12.5 83.5039 13.1716 83.5039 14V66.9868C83.5039 67.8153 82.8323 68.4868 82.0039 68.4868H29.0142C28.3566 68.4868 27.7254 68.746 27.2575 69.2081Z'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
/>
<circle
cx='32.0039'
cy='31'
r='9'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M47.0039 27H63.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M24.0039 51H74.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M24.0039 58H46.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M47.0039 33H72.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M24.0039 45H41.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M45.0039 45H63.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M9.0039 39.5L9.0039 58L19.5039 58'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M9.00391 36.5L9.00391 30.5'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M9.00391 27.5L9.00391 25.5'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
strokeLinejoin='round'
/>
</g>
<defs>
<clipPath id='clip0_4210_74752'>
<rect
width='125'
height='97'
fill='white'
transform='translate(0.00390625)'
/>
</clipPath>
</defs>
</svg>
);
export default ThreadsEmptyImage;

527
src/renderer/components/Images/tools.tsx Normal file
View File

File diff suppressed because one or more lines are too long

3
src/renderer/components/Input.tsx
View File

@@ -40,7 +40,6 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
useLegend?: boolean;
customMessage?: CustomMessageInputType;
inputSize?: SIZE;
darkMode?: boolean;
}
const Input = React.forwardRef((
@@ -65,7 +64,6 @@ const Input = React.forwardRef((
maxLength,
inputSize = SIZE.MEDIUM,
disabled,
darkMode,
onFocus,
onBlur,
onChange,
@@ -128,7 +126,6 @@ const Input = React.forwardRef((
containerClassName,
{
disabled,
'Input_container-inverted': darkMode,
},
)}
>

70
src/renderer/components/LoadingScreen/LoadingBackground.tsx
View File

@@ -3,77 +3,9 @@
import React from 'react';
import StippleMask from 'renderer/assets/StippleMask.jpg';
function LoadingBackground() {
return (
<div className='LoadingScreen__backgound'>
<svg
viewBox='0 0 1366 728'
xmlns='http://www.w3.org/2000/svg'
preserveAspectRatio='xMidYMid slice'
>
<g style={{transform: 'translate(676px, -200px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(45deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(125px, 0px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(-135deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(700px, 330px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(-135deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(-280px, 190px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(45deg)'}}>
<use href='#pill'/>
</g>
</g>
<defs>
<mask id='stippleMask'>
<image
width='900'
height='535'
href={StippleMask}
/>
</mask>
<g
id='pill'
className='Pill'
>
<rect
className='Pill__stipple'
x='0'
y='0'
width='900'
height='535'
mask='url(#stippleMask)'
/>
<path
className='Pill__shape'
d='M600 40H0V490H600C724.264 490 825 389.264 825 265C825 140.736 724.264 40 600 40Z'
fill='url(#pillGradient)'
/>
</g>
<linearGradient id='pillGradient'>
<stop
className='Pill__gradient'
offset='20%'
stopOpacity='1'
/>
<stop
className='Pill__gradientHighlight'
offset='95%'
stopOpacity='1'
/>
</linearGradient>
</defs>
</svg>
</div>
<div className='LoadingScreen__background'/>
);
}

4
src/renderer/components/Logo.tsx
View File

File diff suppressed because one or more lines are too long

5
src/renderer/components/SaveButton/SaveButton.tsx
View File

@@ -17,7 +17,6 @@ type Props = {
savingMessage?: React.ReactNode;
defaultMessage?: React.ReactNode;
extraClasses?: string;
darkMode?: boolean;
}
const SaveButton = ({
@@ -37,7 +36,6 @@ const SaveButton = ({
defaultMessage='Saving'
/>
),
darkMode,
onClick,
}: Props) => {
const handleOnClick = (e: React.MouseEvent) => {
@@ -53,9 +51,6 @@ const SaveButton = ({
id={id}
className={classNames(
'primary-button primary-large-button',
{
'primary-button-inverted': darkMode,
},
extraClasses && extraClasses,
)}
disabled={disabled}

29
src/renderer/components/WelcomeScreen/WelcomeScreen.tsx
View File

@@ -6,12 +6,12 @@ import React, {useState, useEffect, useMemo} from 'react';
import {useIntl, FormattedMessage} from 'react-intl';
import {MODAL_TRANSITION_TIMEOUT} from 'common/utils/constants';
import calls from 'renderer/assets/svg/calls.svg';
import chat2 from 'renderer/assets/svg/chat2.svg';
import collaborate from 'renderer/assets/svg/collaborate.svg';
import integrate from 'renderer/assets/svg/integrate.svg';
import Carousel from 'renderer/components/Carousel';
import Header from 'renderer/components/Header';
import CallsImage from 'renderer/components/Images/calls';
import CollaborateImage from 'renderer/components/Images/collaborate';
import ThreadsEmptyImage from 'renderer/components/Images/threads-empty';
import ToolsImage from 'renderer/components/Images/tools';
import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground';
import WelcomeScreenSlide from './WelcomeScreenSlide';
@@ -47,10 +47,7 @@ function WelcomeScreen({
defaultMessage: 'Mattermost is an open source collaboration platform for mission-critical work. Secure, flexible, and integrated with the tools you love.',
}),
image: (
<img
src={chat2}
draggable={false}
/>
<ThreadsEmptyImage/>
),
main: true,
},
@@ -67,10 +64,7 @@ function WelcomeScreen({
/>
),
image: (
<img
src={collaborate}
draggable={false}
/>
<CollaborateImage/>
),
},
{
@@ -81,10 +75,7 @@ function WelcomeScreen({
defaultMessage: 'When typing isn’t fast enough, seamlessly move from chat to audio calls and screenshare without switching tools.',
}),
image: (
<img
src={calls}
draggable={false}
/>
<CallsImage/>
),
},
{
@@ -95,10 +86,7 @@ function WelcomeScreen({
defaultMessage: 'Execute and automate workflows with flexible, custom integrations with popular technical tools like GitHub, GitLab, and ServiceNow.',
}),
image: (
<img
src={integrate}
draggable={false}
/>
<ToolsImage/>
),
},
], [formatMessage]);
@@ -145,7 +133,6 @@ function WelcomeScreen({
className={classNames(
'WelcomeScreen__button',
'primary-button primary-medium-button',
{'primary-button-inverted': darkMode},
)}
onClick={handleOnGetStartedClick}
>

141
src/renderer/css/_css_variables.scss
View File

@@ -1,28 +1,123 @@
:root {
--away-indicator-dark: #c79e3f;
--button-bg: #166de0;
--button-color: #fff;
--center-channel-bg: #fff;
--center-channel-color: #3d3c40;
--center-channel-text: #3f4350;
--error-text: #d24b4e;
--link-color: #2389d7;
--online-indicator: #06d6a0;
--sidebar-text-active-border: #579eff;
--denim-button-bg: #1c58d9;
--denim-sidebar-active-border: #5d89ea;
--denim-sidebar-header-bg: #192A4D;
--title-color-indigo-500: #1e325c;
/* colors used but not themed */
--indigo-400: #28427B;
--indigo-300: #32539A;
--sand: #CCC4AE;
--neutral-0: #FFFFFF;
--neutral-1200: #090A0B;
--yellow-400: #FFBC1F;
/* Elevation values used for box shadows.
Defined as CSS variables so that both sass and JS can use them.
*/
--elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
--elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
--elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12);
--elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
--elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12);
/* Denim - used for light mode */
--away-indicator-rgb: 255, 188, 31;
--button-bg-rgb: 28, 88, 217;
--button-color-rgb: 255, 255, 255;
--center-channel-bg-rgb: 255, 255, 255;
--center-channel-color-rgb: 61, 60, 64;
--center-channel-text-rgb: 63, 67, 80;
--link-color-inverted-rgb: 129, 163, 239;
--denim-button-bg-rgb: 28, 88, 217;
--denim-sidebar-header-bg-rgb: 25, 42, 77;
--secondary-blue-rgb: 34, 64, 109;
--onyx-center-channel-text-rgb: 221, 223, 228;
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
--center-channel-color-rgb: 63, 67, 80;
--dnd-indicator-rgb: 210, 75, 78;
--error-text-color-rgb: 210, 75, 78;
--link-color-rgb: #386fe5;
--mention-bg-rgb: 255, 255, 255;
--mention-color-rgb: 30, 50, 92;
--mention-highlight-bg-rgb: 255, 212, 112;
--mention-highlight-link-rgb: 27, 29, 34;
--mention-highlight-bg-mixed-rgb: 255, 233, 183;
--pinned-highlight-bg-mixed-rgb: 255, 244, 220;
--own-highlight-bg-rgb: 245, 204, 110;
--new-message-separator-rgb: 204, 143, 0;
--online-indicator-rgb: 61, 184, 135;
--sidebar-bg-rgb: 30, 50, 92;
--sidebar-header-bg-rgb: 25, 42, 77;
--sidebar-teambar-bg-rgb: 22, 37, 69;
--sidebar-header-text-color-rgb: 255, 255, 255;
--sidebar-text-rgb: 255, 255, 255;
--sidebar-text-active-border-rgb: 93, 137, 234;
--sidebar-text-active-color-rgb: 255, 255, 255;
--sidebar-text-hover-bg-rgb: 40, 66, 123;
--sidebar-unread-text-rgb: 255, 255, 255;
--sidebar-bg: #1e325c;
--sidebar-text: #ffffff;
--sidebar-unread-text: #ffffff;
--sidebar-text-hover-bg: #28427b;
--sidebar-text-active-border: #5d89ea;
--sidebar-text-active-color: #ffffff;
--sidebar-header-bg: #192a4d;
--sidebar-teambar-bg: #162545;
--sidebar-header-text-color: #ffffff;
--online-indicator: #3db887;
--away-indicator: #ffbc1f;
--dnd-indicator: #d24b4e;
--mention-bg: #ffffff;
--mention-color: #1e325c;
--center-channel-bg: #ffffff;
--center-channel-color: #3f4350;
--new-message-separator: #cc8f00;
--link-color: #386fe5;
--button-bg: #1c58d9;
--button-color: #ffffff;
--error-text: #d24b4e;
--mention-highlight-bg: #ffd470;
--mention-highlight-link: #1b1d22;
}
.LoadingScreen--darkMode {
/* Onyx - used for dark mode*/
--away-indicator-rgb: 245, 171, 0;
--button-bg-rgb: 74, 124, 232;
--button-color-rgb: 255, 255, 255;
--center-channel-bg-rgb: 25, 27, 31;
--center-channel-color-rgb: 227, 228, 232;
--dnd-indicator-rgb: 210, 75, 78;
--error-text-color-rgb: 218, 108, 110;
--link-color-rgb: #5d89ea;
--mention-bg-rgb: 75, 124, 231;
--mention-color-rgb: 255, 255, 255;
--mention-highlight-bg-rgb: 13, 110, 110;
--mention-highlight-link-rgb: 164, 244, 244;
--mention-highlight-bg-mixed-rgb: 19, 68, 70;
--pinned-highlight-bg-mixed-rgb: 22, 46, 49;
--own-highlight-bg-rgb: 23, 115, 116;
--new-message-separator-rgb: 26, 219, 219;
--online-indicator-rgb: 61, 184, 135;
--sidebar-bg-rgb: 32, 34, 40;
--sidebar-header-bg-rgb: 36, 39, 45;
--sidebar-teambar-bg-rgb: 41, 44, 51;
--sidebar-header-text-color-rgb: 255, 255, 255;
--sidebar-text-rgb: 255, 255, 255;
--sidebar-text-active-border-rgb: 74, 124, 232;
--sidebar-text-active-color-rgb: 255, 255, 255;
--sidebar-text-hover-bg-rgb: 37, 38, 42;
--sidebar-unread-text-rgb: 255, 255, 255;
--sidebar-bg: #202228;
--sidebar-text: #ffffff;
--sidebar-unread-text: #ffffff;
--sidebar-text-hover-bg: #25262a;
--sidebar-text-active-border: #4a7ce8;
--sidebar-text-active-color: #ffffff;
--sidebar-header-bg: #24272d;
--sidebar-teambar-bg: #292c33;
--sidebar-header-text-color: #ffffff;
--online-indicator: #3db887;
--away-indicator: #f5ab00;
--dnd-indicator: #d24b4e;
--mention-bg: #4b7ce7;
--mention-color: #ffffff;
--center-channel-bg: #191b1f;
--center-channel-color: #e3e4e8;
--new-message-separator: #1adbdb;
--link-color: #5d89ea;
--button-bg: #4a7ce8;
--button-color: #ffffff;
--error-text: #da6c6e;
--mention-highlight-bg: #0d6e6e;
--mention-highlight-link: #a4f4f4;
}

77
src/renderer/css/components/Button.scss
View File

@@ -39,31 +39,6 @@
}
}
.primary-button-inverted {
background: var(--button-color);
color: var(--denim-button-bg);
&:hover {
background: linear-gradient(0deg, rgba(var(--denim-button-bg-rgb), 0.08), rgba(var(--denim-button-bg-rgb), 0.08)), var(--button-color);
color: var(--denim-button-bg);
}
&:active {
background: linear-gradient(0deg, rgba(var(--denim-button-bg-rgb), 0.16), rgba(var(--denim-button-bg-rgb), 0.16)), var(--button-color);
color: var(--denim-button-bg);
}
&:focus {
border: 2px solid var(--denim-sidebar-active-border);
color: var(--denim-button-bg);
}
&:disabled {
background: rgba(var(--button-color-rgb), 0.08);
color: rgba(var(--button-color-rgb), 0.32);
}
}
.primary-large-button {
height: 48px;
padding: 0 24px;
@@ -109,21 +84,6 @@
}
}
.link-button-inverted {
color: rgb(var(--link-color-inverted-rgb));
&:hover,
&:active,
&:focus {
color: var(--denim-sidebar-active-border);
}
&:disabled {
color: rgba(var(--link-color-inverted-rgb), 0.32);
}
}
.link-small-button {
font-size: 12px;
font-weight: 600;
@@ -138,22 +98,22 @@
border: 0;
background: none;
border-radius: 4px;
color: rgba(var(--center-channel-text-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.56);
font-weight: 400;
&:hover {
background: rgba(var(--center-channel-text-rgb), 0.08);
color: rgba(var(--center-channel-text-rgb), 0.72);
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background: rgba(var(--denim-button-bg-rgb), 0.08);
color: var(--denim-button-bg);
background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
}
&:focus-visible {
box-sizing: border-box;
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--denim-button-bg);
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--button-bg);
outline: none;
}
@@ -170,31 +130,6 @@
}
}
.icon-button-inverted {
background: none;
color: rgba(var(--button-color-rgb), 0.64);
&:hover {
background: rgba(var(--button-color-rgb), 0.08);
color: var(--button-color);
}
&:active {
background: rgba(var(--button-color-rgb), 0.16);
color: var(--button-color);
}
&:focus-visible {
box-sizing: border-box;
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--denim-button-bg);
}
&:disabled {
background: none;
color: rgba(var(--button-color-rgb), 0.32);
}
}
.icon-button-small {
height: 28px;
padding: 6px;

2
src/renderer/css/components/Carousel.scss
View File

@@ -31,7 +31,7 @@
flex: 1;
align-items: center;
justify-content: center;
margin-top: 16px;
margin-top: 40px;
}
}

25
src/renderer/css/components/CarouselPaginationIndicator.scss
View File

@@ -25,7 +25,7 @@
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(var(--denim-button-bg-rgb), 0.32);
background: rgba(var(--button-bg-rgb), 0.32);
}
&.active,
@@ -35,10 +35,10 @@
}
&.active {
background: rgba(var(--denim-button-bg-rgb), 0.16);
background: rgba(var(--button-bg-rgb), 0.16);
.dot {
background: var(--denim-button-bg);
background: var(--button-bg);
}
}
@@ -48,23 +48,4 @@
outline: none;
}
}
.indicatorDot-inverted {
.dot {
background: rgba(var(--button-color-rgb), 0.32);
}
&.active {
background: rgba(var(--button-color-rgb), 0.16);
.dot {
background: var(--button-color);
}
}
&:focus-visible {
border: 2px solid var(--denim-sidebar-active-border);
color: var(--denim-button-bg);
}
}
}

63
src/renderer/css/components/ConfigureServer.scss
View File

@@ -32,12 +32,6 @@
}
}
.alternate-link-inverted {
.alternate-link__message {
color: var(--button-color);
}
}
.ConfigureServer {
flex-direction: column;
z-index: 20;
@@ -69,8 +63,10 @@
-webkit-font-smoothing: antialiased;
.ConfigureServer__message-title {
margin-top: 24px;
margin-bottom: 24px;
padding-right: 60px;
color: var(--title-color-indigo-500);
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 80px;
font-weight: 600;
@@ -79,24 +75,12 @@
}
.ConfigureServer__message-subtitle {
color: rgba(var(--center-channel-text-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.72);
font-size: 18px;
font-weight: 400;
line-height: 28px;
}
.ConfigureServer__message-img {
position: relative;
align-self: flex-end;
img {
position: absolute;
bottom: -230px;
left: -225px;
display: block;
}
}
&.inFromRight {
.ConfigureServer__message-title,
.ConfigureServer__message-subtitle {
@@ -152,7 +136,7 @@
}
.ConfigureServer__card-title {
color: var(--center-channel-text);
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 22px;
font-style: normal;
@@ -200,29 +184,6 @@
}
}
.ConfigureServer-inverted {
.ConfigureServer__body .ConfigureServer__content {
.ConfigureServer__message {
.ConfigureServer__message-title {
color: var(--button-color);
}
.ConfigureServer__message-subtitle {
color: rgba(var(--button-color-rgb), 0.72);
}
}
.ConfigureServer__card {
border: 1px solid rgba(var(--button-color-rgb), 0.08);
background-color: var(--denim-sidebar-header-bg);
.ConfigureServer__card-content .ConfigureServer__card-title {
color: var(--button-color);
}
}
}
}
@media screen and (min-width: 1680px) {
.ConfigureServer {
.ConfigureServer__body .ConfigureServer__content {
@@ -295,20 +256,6 @@
}
}
}
.ConfigureServer-inverted {
.ConfigureServer__body .ConfigureServer__content .ConfigureServer__card {
.ConfigureServer__card-content .ConfigureServer__card-form {
.ConfigureServer__card-form-input {
background-color: var(--denim-sidebar-header-bg);
}
.disabled .ConfigureServer__card-form-input {
background-color: rgba(var(--denim-sidebar-header-bg-rgb), 0.54);
}
}
}
}
}
@media screen and (max-width: 699px) {

14
src/renderer/css/components/Header.scss
View File

@@ -17,20 +17,6 @@
.Header__logo {
width: 170px;
path {
fill: var(--center-channel-text);
}
}
}
&.Header--darkMode {
.Header__main {
.Header__logo {
path {
fill: var(--button-color);
}
}
}
}
}

51
src/renderer/css/components/Input.scss
View File

@@ -36,7 +36,7 @@
outline: 0;
&::placeholder {
color: rgba(var(--center-channel-text-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.64);
}
&.Input__focus {
@@ -179,55 +179,6 @@
}
}
.Input_container-inverted {
.Input {
color: var(--button-color);
background-color: unset;
&::placeholder {
color: rgba(var(--button-color-rgb), 0.56);
}
}
.Input_wrapper {
color: rgba(var(--button-color-rgb), 0.56);
}
.Input___info {
color: rgba(var(--button-color-rgb), 0.56);
}
.Input_fieldset {
background-color: var(--denim-sidebar-header-bg);
border: 1px solid rgba(var(--onyx-center-channel-text-rgb), 0.16);
&:hover {
border-color: rgba(var(--onyx-center-channel-text-rgb), 0.48);
}
&:focus-within {
border-color: var(--onyx-center-channel-text-rgb);
box-shadow: inset 0 0 0 1px var(--onyx-center-channel-text-rgb);
color: var(--button-color);
.Input_legend {
color: var(--button-color);
}
}
}
.Input_legend {
background-color: var(--denim-sidebar-header-bg);
color: rgba(var(--button-color-rgb), 0.64);
}
&.disabled {
.Input_fieldset {
background: rgba(var(--button-color-rgb), 0.08);
}
}
}
.Input_container {
.Input_fieldset___error {
border-color: var(--error-text);

34
src/renderer/css/components/LoadingScreen.css
View File

@@ -3,11 +3,6 @@ body {
}
.LoadingScreen {
--background-color: #F4F4F6;
--background-color-highlight: #FFFFFF;
--stipple-color: #1E325C;
--stipple-opacity: 0.08;
display: flex;
justify-content: center;
align-items: center;
@@ -25,38 +20,19 @@ body {
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
}
.LoadingScreen--darkMode {
--background-color-highlight: #28427B;
--background-color: #1E325C;
--stipple-color: #14213E;
--stipple-opacity: 0.8;
.LoadingScreen--darkMode .LoadingScreen__background {
background-image: url('renderer/assets/svg/background-dark.svg');
}
.LoadingScreen__backgound,
.LoadingScreen__backgound > svg
.LoadingScreen__background
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.LoadingScreen__backgound {
background: var(--background-color);
}
.LoadingScreen .Pill__stipple {
fill: var(--stipple-color);
fill-opacity: var(--stipple-opacity);
}
.LoadingScreen .Pill__gradient {
stop-color: var(--background-color);
}
.LoadingScreen .Pill__gradientHighlight {
stop-color: var(--background-color-highlight);
background-size: cover;
background-image: url('renderer/assets/svg/background-light.svg');
}
.LoadingScreen--loaded {

9
src/renderer/css/components/WelcomeScreenSlide.scss
View File

@@ -12,9 +12,9 @@
}
.WelcomeScreenSlide__title {
color: var(--title-color-indigo-500);
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 80px;
font-size: 64px;
font-weight: 600;
letter-spacing: -1.6px;
line-height: 88px;
@@ -29,7 +29,7 @@
font-weight: 400;
line-height: 24px;
text-align: center;
max-width: 580px;
max-width: 628px;
margin: auto;
}
@@ -37,8 +37,7 @@
max-width: 582px;
.WelcomeScreenSlide__title {
font-size: 80px;
line-height: normal;
font-size: 93px;
}
}