Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00
Code Issues Activity

refactor(console): update empty states (#3249)

Browse source
This commit is contained in:
Xiao Yijun 2023-03-01 16:54:20 +08:00 • committed by GitHub
parent 92ffc6cfdd
commit 04ddbadfac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 897 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
packages/console/src/assets/images/permissions-empty-dark.svg Normal file
View file

@ -0,0 +1,83 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="256" height="256" fill="#191C1D"/>
<rect width="256" height="256" fill="#C4C7C7" fill-opacity="0.02"/>
<rect width="256" height="256" fill="#CABEFF" fill-opacity="0.08"/>
<path d="M250 219H15L34.0873 189.098C37.4027 183.905 43.1388 180.761 49.3006 180.761H49.9508C53.0648 180.761 56.1102 181.676 58.7083 183.393C65.8357 188.103 75.4116 186.332 80.3835 179.385L103.174 147.541C107.011 142.18 113.198 139 119.79 139C124.744 139 129.529 140.799 133.255 144.064L139.764 149.766C147.788 156.796 159.5 157.655 168.464 151.872C172.325 149.381 176.823 148.057 181.418 148.057H182.364C194.146 148.057 204.579 155.668 208.176 166.887L213.511 183.523C215.29 189.072 220.45 192.836 226.277 192.836C230.91 192.836 235.215 195.228 237.662 199.163L250 219Z" fill="#59566E"/>
<g style="mix-blend-mode:multiply">
<path d="M37.1815 210.929C38.3876 209.865 39.5648 208.48 39.7533 206.818C39.8422 206.03 39.7685 205.077 39.1143 204.529C38.4995 204.011 37.6396 203.975 36.8849 204.141C35.2084 204.51 33.8486 205.723 32.1104 205.875C31.5651 205.923 31.0226 205.883 30.4974 205.765C27.8 202.195 26.216 198.001 25.5639 193.51C25.5569 193.47 25.5567 193.43 25.5509 193.392C25.9935 193.534 26.4397 193.662 26.8906 193.76C28.0591 194.015 29.2619 194.098 30.4545 194.04C31.6444 193.983 32.9089 193.788 34.0261 193.362C34.5017 193.182 34.9627 192.864 35.1587 192.376C35.3925 191.788 35.1024 191.236 34.7144 190.798C33.3004 189.208 31.187 188.678 29.1834 188.258C27.7991 187.965 26.2595 187.652 25.1157 186.795C25.1039 183.456 25.3275 180.108 25.4951 176.776C25.5097 176.504 25.5204 176.231 25.5338 175.956C25.9931 176.224 26.4446 176.505 26.8828 176.802C27.4085 177.211 27.9331 177.618 28.4588 178.027C28.5333 178.086 28.6132 178.125 28.6923 178.155C28.79 178.237 28.891 178.31 28.9888 178.392C29.3092 178.662 29.7838 178.605 30.0732 178.329C30.0922 178.311 30.1088 178.288 30.1238 178.268C30.5597 178.151 30.8929 177.727 30.671 177.203C30.0664 175.773 29.0209 174.646 27.956 173.543C27.1047 172.663 26.219 171.764 25.6432 170.678C25.5844 166.205 25.0399 161.748 23.2356 157.608C22.9242 156.895 23.6865 156.33 24.3307 156.54C29.5396 158.256 34.5603 160.446 39.4106 162.981C40.2088 164.09 40.3273 165.652 40.4068 166.965C40.4606 167.863 40.4621 168.763 40.4061 169.66C40.3566 170.479 40.3287 171.302 40.9043 171.963C41.3838 172.515 42.0817 172.765 42.7707 172.94C43.1504 173.035 43.5311 173.094 43.8909 172.899C44.2793 172.685 44.3936 172.271 44.5095 171.876C44.9281 170.459 45.6034 168.25 45.4932 166.385C48.679 168.287 51.7864 170.318 54.8173 172.452C55.3196 174.56 54.2608 176.971 53.4798 178.923C52.5669 181.2 51.5967 184.073 52.8065 186.43C53.3475 187.482 54.3403 188.295 55.5548 188.367C56.1182 188.402 56.9336 188.317 57.2093 187.742C57.4516 187.237 57.5288 186.673 57.8041 186.168C59.0724 183.85 61.5431 182.504 63.3917 180.71C63.7475 180.363 64.0252 180.013 64.1883 179.652C65.6444 181.035 66.9652 182.537 68.0357 184.219C69.4366 186.423 70.2606 188.867 70.5739 191.377C70.45 191.533 70.3157 191.679 70.1783 191.81C69.8828 192.095 69.5238 192.363 69.1829 192.563C68.8436 192.76 68.4843 192.925 68.1726 193.163C67.3625 193.787 67.0665 194.81 67.6381 195.705C68.1721 196.543 69.2581 196.822 70.1985 196.844C70.2986 196.845 70.3832 196.833 70.4705 196.819C70.2856 197.994 69.9998 199.158 69.6127 200.296C68.692 202.995 67.2175 205.446 65.3967 207.621C62.7217 209.199 59.3286 209.253 56.4849 207.586C56.4015 207.538 56.3123 207.516 56.2206 207.511C55.4021 205.324 54.4791 203.181 53.4707 201.088C51.5578 197.099 49.3939 193.257 47.155 189.472L40.3791 178.161C38.1071 174.401 35.7399 170.667 32.897 167.311C35.6341 170.755 37.8714 174.544 40.0213 178.369L46.4357 189.879C48.55 193.723 50.5805 197.612 52.345 201.603C53.4273 204.044 54.3899 206.533 55.2015 209.065C54.7703 211.129 53.5747 212.973 51.8516 214.223C51.4874 214.486 51.0997 214.71 50.6984 214.909C48.5776 215.549 46.3154 215.674 44.0726 215.451C41.3115 214.64 38.743 213.261 36.4229 211.542C36.6894 211.347 36.9426 211.143 37.1815 210.929Z" fill="url(#paint0_linear_6532_88970)"/>
</g>
<path d="M52 132C52 127.582 55.5817 124 60 124H188C192.418 124 196 127.582 196 132V217H52V132Z" fill="url(#paint1_linear_6532_88970)"/>
<path d="M56 131C56 128.791 57.7909 127 60 127H188C190.209 127 192 128.791 192 131V213H56V131Z" fill="url(#paint2_linear_6532_88970)"/>
<path d="M27 213H220V215C220 217.209 218.209 219 216 219H32C29.2386 219 27 216.761 27 214V213Z" fill="#7958FF"/>
<path d="M114 127H134V129C134 131.209 132.209 133 130 133H118C115.791 133 114 131.209 114 129V127Z" fill="#947DFF"/>
<rect x="69" y="143" width="110" height="56" rx="5" fill="#CABEFF"/>
<g style="mix-blend-mode:multiply" opacity="0.6">
<path d="M100.548 143H128.999V190C128.999 194.971 124.97 199 119.999 199H86.9993L100.548 143Z" fill="url(#paint3_linear_6532_88970)"/>
</g>
<rect x="207.098" y="115" width="8" height="8" rx="2" transform="rotate(30.813 207.098 115)" fill="#6E6083"/>
<path d="M108 86.6316C103.855 86.6316 101.891 83.0947 101.891 80C101.891 83.0947 100.145 86.6316 96 86.6316C100.145 86.6316 101.891 88.8126 101.891 94C101.891 88.8126 103.855 86.6316 108 86.6316Z" fill="#928F9A"/>
<path d="M30 108.632C25.8545 108.632 23.8909 105.095 23.8909 102C23.8909 105.095 22.1455 108.632 18 108.632C22.1455 108.632 23.8909 110.813 23.8909 116C23.8909 110.813 25.8545 108.632 30 108.632Z" fill="#928F9A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M218.956 53.1043C218.956 53.0467 219.003 53 219.06 53H220.938C220.995 53 221.042 53.0467 221.042 53.1043V56.4088L223.903 54.7567C223.953 54.7279 224.017 54.745 224.046 54.7949L224.985 56.4209C225.014 56.4708 224.996 56.5346 224.947 56.5634L222.085 58.2156L224.946 59.8678C224.996 59.8966 225.013 59.9604 224.985 60.0103L224.046 61.6362C224.017 61.6861 223.953 61.7032 223.903 61.6744L221.042 60.0224V63.3264C221.042 63.384 220.995 63.4307 220.938 63.4307H219.06C219.003 63.4307 218.956 63.384 218.956 63.3264V60.0221L216.094 61.6744C216.044 61.7032 215.98 61.6861 215.951 61.6362L215.013 60.0103C214.984 59.9604 215.001 59.8966 215.051 59.8678L217.913 58.2156L215.051 56.5634C215.001 56.5346 214.984 56.4708 215.013 56.4209L215.951 54.7949C215.98 54.745 216.044 54.7279 216.094 54.7567L218.956 56.4091V53.1043Z" fill="#5F5D67"/>
<rect opacity="0.7" x="100" y="154" width="68" height="6" rx="2" fill="#F07EFF"/>
<rect x="100" y="166" width="68" height="6" rx="2" fill="#9C7ECC"/>
<rect x="100" y="178" width="68" height="6" rx="2" fill="#9C7ECC"/>
<path d="M173.162 115.98L173.165 115.983L184.5 126.222V195C184.5 200.247 180.247 204.5 175 204.5H124C118.753 204.5 114.5 200.247 114.5 195V116C114.5 110.753 118.753 106.5 124 106.5H138.5H162.806L173.162 115.98Z" fill="#E6DEFF" stroke="#AF9EFF"/>
<g style="mix-blend-mode:multiply" opacity="0.6">
<path d="M169.774 124H184V196C184 200.971 179.971 205 175 205H156.5L169.774 124Z" fill="url(#paint4_linear_6532_88970)"/>
</g>
<rect x="124" y="150" width="49" height="6" rx="2" fill="#AF9EFF"/>
<rect opacity="0.7" x="124" y="139" width="7" height="6" rx="2" fill="#F07EFF"/>
<rect x="138" y="139" width="18" height="6" rx="2" fill="#AF9EFF"/>
<rect x="124" y="172" width="32" height="6" rx="2" fill="#AF9EFF"/>
<rect x="159" y="172" width="14" height="6" rx="2" fill="#AF9EFF"/>
<rect x="124" y="161" width="49" height="6" rx="2" fill="#AF9EFF"/>
<rect x="124" y="184" width="32" height="6" rx="2" fill="#AF9EFF"/>
<path d="M153 79C153 76.7909 154.791 75 157 75H182V92H157C154.791 92 153 90.2091 153 88V79Z" fill="#FFDAD4"/>
<path d="M245.5 88C245.5 90.2091 243.709 92 241.5 92H182V75H241.5C243.709 75 245.5 76.7909 245.5 79V88Z" fill="#FFD5FF"/>
<path d="M221 92.5H241C243.761 92.5 246 90.2614 246 87.5V82" stroke="#B1869F"/>
<path opacity="0.7" d="M101 95H34C31.7909 95 30 96.7909 30 99V106" stroke="#58577B"/>
<path d="M163.5 116V107.137L183.527 125.5H173C167.753 125.5 163.5 121.247 163.5 116Z" fill="#DBD3FF" stroke="#AF9EFF"/>
<path d="M160.5 74.5H193" stroke="#B1869F"/>
<rect x="131" y="101" width="14" height="6" fill="#2A2C32"/>
<rect x="157" y="82" width="18" height="3" rx="1.5" fill="#635452" fill-opacity="0.5"/>
<rect x="192" y="82" width="49" height="3" rx="1.5" fill="#635452" fill-opacity="0.5"/>
<path d="M182 76V92" stroke="#B18BA1" stroke-dasharray="4 4"/>
<circle cx="83.5" cy="159.5" r="7.5" fill="#9C7ECC"/>
<mask id="mask0_6532_88970" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="76" y="152" width="15" height="15">
<circle cx="83.5" cy="159.5" r="7.5" fill="#FF91DF"/>
</mask>
<g mask="url(#mask0_6532_88970)">
<path d="M83.4342 154.5C83.0578 154.5 82.7324 154.762 82.6524 155.13L82.5601 155.555C82.5066 155.801 82.3182 155.994 82.0852 156.09C81.852 156.187 81.5857 156.182 81.3734 156.046L81.0104 155.812C80.6938 155.609 80.2782 155.653 80.0121 155.919L79.9194 156.012C79.6533 156.278 79.6087 156.694 79.8122 157.01L80.0456 157.373C80.1821 157.586 80.187 157.852 80.0905 158.085C79.994 158.318 79.8011 158.507 79.5546 158.56L79.1301 158.652C78.7623 158.732 78.5 159.058 78.5 159.434V159.566C78.5 159.942 78.7623 160.268 79.1301 160.348L79.5547 160.44C79.8011 160.493 79.994 160.682 80.0905 160.915C80.187 161.148 80.1821 161.414 80.0456 161.627L79.8122 161.99C79.6087 162.306 79.6533 162.722 79.9194 162.988L80.0121 163.081C80.2782 163.347 80.6938 163.391 81.0104 163.188L81.3735 162.954C81.5857 162.818 81.852 162.813 82.0852 162.91C82.3182 163.006 82.5066 163.199 82.5601 163.445L82.6524 163.87C82.7324 164.238 83.0578 164.5 83.4342 164.5H83.5658C83.9422 164.5 84.2676 164.238 84.3476 163.87L84.4399 163.445C84.4934 163.199 84.6818 163.006 84.9148 162.91C85.148 162.813 85.4143 162.818 85.6266 162.954L85.9896 163.188C86.3062 163.391 86.7218 163.347 86.9879 163.081L87.0806 162.988C87.3467 162.722 87.3913 162.306 87.1878 161.99L86.9544 161.627C86.8179 161.414 86.813 161.148 86.9095 160.915C87.006 160.682 87.1989 160.493 87.4454 160.44L87.8699 160.348C88.2377 160.268 88.5 159.942 88.5 159.566V159.434C88.5 159.058 88.2377 158.732 87.8699 158.652L87.4453 158.56C87.1989 158.507 87.006 158.318 86.9095 158.085C86.813 157.852 86.8179 157.586 86.9544 157.373L87.1878 157.01C87.3913 156.694 87.3467 156.278 87.0806 156.012L86.9879 155.919C86.7218 155.653 86.3062 155.609 85.9896 155.812L85.6265 156.046C85.4143 156.182 85.148 156.187 84.9148 156.09C84.6818 155.994 84.4934 155.801 84.4399 155.555L84.3476 155.13C84.2676 154.762 83.9422 154.5 83.5658 154.5H83.4342ZM83.5 157.357C84.6835 157.357 85.6429 158.317 85.6429 159.5C85.6429 160.684 84.6835 161.643 83.5 161.643C82.3165 161.643 81.3571 160.684 81.3571 159.5C81.3571 158.317 82.3165 157.357 83.5 157.357Z" fill="#F5EEFF"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34 146C36.2091 146 38 144.209 38 142C38 139.791 36.2091 138 34 138C31.7909 138 30 139.791 30 142C30 144.209 31.7909 146 34 146ZM34 144C35.1046 144 36 143.105 36 142C36 140.895 35.1046 140 34 140C32.8954 140 32 140.895 32 142C32 143.105 32.8954 144 34 144Z" fill="#5F5D67"/>
<path d="M130.8 130.015C134.803 130.015 138.05 126.778 138.05 122.782C138.05 118.787 134.803 115.55 130.8 115.55C126.797 115.55 123.55 118.787 123.55 122.782C123.55 126.778 126.797 130.015 130.8 130.015Z" stroke="url(#paint5_linear_6532_88970)" stroke-width="0.9"/>
<ellipse cx="130.8" cy="122.783" rx="6.15238" ry="6.13648" fill="#86BF8F"/>
<rect width="1.75609" height="5.26826" rx="0.878044" transform="matrix(0.708021 -0.706191 0.708021 0.706191 126.59 122.356)" fill="white"/>
<rect width="7.02435" height="1.75609" rx="0.878044" transform="matrix(0.708021 -0.706191 0.708021 0.706191 129.077 124.837)" fill="white"/>
<defs>
<linearGradient id="paint0_linear_6532_88970" x1="57.3294" y1="213.747" x2="24.2547" y2="153.83" gradientUnits="userSpaceOnUse">
<stop stop-color="#B6ADD3"/>
<stop offset="1" stop-color="#5124DB" stop-opacity="0.16"/>
</linearGradient>
<linearGradient id="paint1_linear_6532_88970" x1="120.556" y1="126.099" x2="151.327" y2="228.121" gradientUnits="userSpaceOnUse">
<stop stop-color="#735DF9"/>
<stop offset="1" stop-color="#D781FF"/>
</linearGradient>
<linearGradient id="paint2_linear_6532_88970" x1="192" y1="213.001" x2="-17" y2="80.001" gradientUnits="userSpaceOnUse">
<stop stop-color="#BC97FD"/>
<stop offset="1" stop-color="#BC97FD" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_6532_88970" x1="130.59" y1="168.664" x2="90.951" y2="193.746" gradientUnits="userSpaceOnUse">
<stop stop-color="#ECB6FF"/>
<stop offset="1" stop-color="#BE9BFF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_6532_88970" x1="184.795" y1="161.121" x2="158.308" y2="166.914" gradientUnits="userSpaceOnUse">
<stop stop-color="#E1CEE8"/>
<stop offset="1" stop-color="#FFFBFF"/>
</linearGradient>
<linearGradient id="paint5_linear_6532_88970" x1="125.619" y1="117.938" x2="137.57" y2="129.596" gradientUnits="userSpaceOnUse">
<stop stop-color="#74B382"/>
<stop offset="1" stop-color="#83DA85" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

80
packages/console/src/assets/images/permissions-empty.svg Normal file
View file

@ -0,0 +1,80 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M250 220H15L34.0873 190.098C37.4027 184.905 43.1388 181.761 49.3006 181.761H49.9508C53.0648 181.761 56.1102 182.676 58.7083 184.393C65.8357 189.103 75.4116 187.332 80.3835 180.385L103.174 148.541C107.011 143.18 113.198 140 119.79 140C124.744 140 129.529 141.799 133.255 145.064L139.764 150.766C147.788 157.796 159.5 158.655 168.464 152.872C172.325 150.381 176.823 149.057 181.418 149.057H182.364C194.146 149.057 204.579 156.668 208.176 167.887L213.511 184.523C215.29 190.072 220.45 193.836 226.277 193.836C230.91 193.836 235.215 196.228 237.662 200.163L250 220Z" fill="#D2CCDD"/>
<g style="mix-blend-mode:multiply">
<path d="M37.1815 210.929C38.3876 209.865 39.5648 208.48 39.7533 206.818C39.8422 206.03 39.7685 205.077 39.1143 204.529C38.4995 204.011 37.6396 203.975 36.8849 204.141C35.2083 204.51 33.8486 205.723 32.1104 205.875C31.5651 205.923 31.0226 205.883 30.4974 205.765C27.8 202.195 26.216 198.001 25.5639 193.51C25.5569 193.47 25.5567 193.43 25.5509 193.392C25.9935 193.534 26.4397 193.662 26.8906 193.76C28.0591 194.015 29.2619 194.098 30.4545 194.04C31.6444 193.983 32.9089 193.788 34.0261 193.362C34.5017 193.182 34.9627 192.864 35.1587 192.376C35.3925 191.788 35.1024 191.236 34.7144 190.798C33.3004 189.208 31.187 188.678 29.1834 188.258C27.7991 187.965 26.2595 187.652 25.1157 186.795C25.1039 183.456 25.3275 180.108 25.4951 176.776C25.5097 176.504 25.5204 176.231 25.5338 175.956C25.9931 176.224 26.4446 176.505 26.8828 176.802C27.4085 177.211 27.9331 177.618 28.4588 178.027C28.5333 178.086 28.6132 178.125 28.6923 178.155C28.79 178.237 28.891 178.31 28.9888 178.392C29.3092 178.662 29.7838 178.605 30.0732 178.329C30.0922 178.311 30.1088 178.288 30.1238 178.268C30.5597 178.151 30.8929 177.727 30.671 177.203C30.0664 175.773 29.0209 174.646 27.9559 173.543C27.1047 172.663 26.219 171.764 25.6432 170.678C25.5844 166.205 25.0399 161.748 23.2356 157.608C22.9242 156.895 23.6865 156.33 24.3307 156.54C29.5396 158.256 34.5603 160.446 39.4106 162.981C40.2088 164.09 40.3273 165.652 40.4068 166.965C40.4606 167.863 40.4621 168.763 40.4061 169.66C40.3566 170.479 40.3287 171.302 40.9043 171.963C41.3838 172.515 42.0817 172.765 42.7707 172.94C43.1504 173.035 43.5311 173.094 43.8909 172.899C44.2793 172.685 44.3936 172.271 44.5095 171.876C44.9281 170.459 45.6034 168.25 45.4932 166.385C48.679 168.287 51.7864 170.318 54.8173 172.452C55.3196 174.56 54.2608 176.971 53.4798 178.923C52.5669 181.2 51.5967 184.073 52.8065 186.43C53.3475 187.482 54.3403 188.295 55.5548 188.367C56.1182 188.402 56.9336 188.317 57.2093 187.742C57.4516 187.237 57.5288 186.673 57.8041 186.168C59.0724 183.85 61.5431 182.504 63.3917 180.71C63.7475 180.363 64.0252 180.013 64.1883 179.652C65.6444 181.034 66.9652 182.537 68.0357 184.219C69.4366 186.423 70.2606 188.867 70.5739 191.377C70.45 191.533 70.3157 191.679 70.1783 191.81C69.8828 192.095 69.5238 192.363 69.1829 192.563C68.8436 192.76 68.4843 192.925 68.1726 193.163C67.3625 193.787 67.0665 194.81 67.6381 195.705C68.1721 196.543 69.2581 196.822 70.1985 196.844C70.2986 196.845 70.3832 196.833 70.4705 196.819C70.2856 197.994 69.9998 199.158 69.6127 200.296C68.692 202.995 67.2175 205.446 65.3967 207.621C62.7217 209.199 59.3286 209.253 56.4849 207.586C56.4015 207.538 56.3123 207.516 56.2206 207.511C55.4021 205.324 54.4791 203.181 53.4707 201.088C51.5578 197.099 49.3939 193.257 47.155 189.472L40.3791 178.161C38.1071 174.401 35.7399 170.667 32.897 167.311C35.6341 170.755 37.8714 174.544 40.0213 178.369L46.4357 189.879C48.55 193.723 50.5805 197.612 52.345 201.603C53.4273 204.044 54.3899 206.533 55.2015 209.065C54.7703 211.129 53.5747 212.973 51.8516 214.223C51.4874 214.486 51.0997 214.71 50.6984 214.909C48.5776 215.549 46.3154 215.674 44.0726 215.451C41.3115 214.64 38.743 213.261 36.4229 211.542C36.6894 211.347 36.9426 211.143 37.1815 210.929Z" fill="url(#paint0_linear_6485_85356)"/>
</g>
<path d="M52 132C52 127.582 55.5817 124 60 124H188C192.418 124 196 127.582 196 132V217H52V132Z" fill="url(#paint1_linear_6485_85356)"/>
<path d="M56 131C56 128.791 57.7909 127 60 127H188C190.209 127 192 128.791 192 131V213H56V131Z" fill="url(#paint2_linear_6485_85356)"/>
<path d="M27 213H220V215C220 217.209 218.209 219 216 219H32C29.2386 219 27 216.761 27 214V213Z" fill="#7958FF"/>
<path d="M114 127H134V129C134 131.209 132.209 133 130 133H118C115.791 133 114 131.209 114 129V127Z" fill="#947DFF"/>
<rect x="69" y="143" width="110" height="56" rx="5" fill="#F5EEFF"/>
<g style="mix-blend-mode:multiply" opacity="0.6">
<path d="M100.548 143H128.999V190C128.999 194.971 124.97 199 119.999 199H86.9993L100.548 143Z" fill="url(#paint3_linear_6485_85356)"/>
</g>
<rect x="207.098" y="115" width="8" height="8" rx="2" transform="rotate(30.813 207.098 115)" fill="#FFD5FF"/>
<path d="M108 86.6316C103.855 86.6316 101.891 83.0947 101.891 80C101.891 83.0947 100.145 86.6316 96 86.6316C100.145 86.6316 101.891 88.8126 101.891 94C101.891 88.8126 103.855 86.6316 108 86.6316Z" fill="#FFF06A"/>
<path d="M30 108.632C25.8545 108.632 23.8909 105.095 23.8909 102C23.8909 105.095 22.1455 108.632 18 108.632C22.1455 108.632 23.8909 110.813 23.8909 116C23.8909 110.813 25.8545 108.632 30 108.632Z" fill="#FFF06A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M218.956 53.1043C218.956 53.0467 219.003 53 219.06 53H220.938C220.995 53 221.042 53.0467 221.042 53.1043V56.4088L223.903 54.7567C223.953 54.7279 224.017 54.745 224.046 54.7949L224.985 56.4209C225.014 56.4708 224.996 56.5346 224.947 56.5634L222.085 58.2156L224.946 59.8678C224.996 59.8966 225.013 59.9604 224.985 60.0103L224.046 61.6362C224.017 61.6861 223.953 61.7032 223.903 61.6744L221.042 60.0224V63.3264C221.042 63.384 220.995 63.4307 220.938 63.4307H219.06C219.003 63.4307 218.956 63.384 218.956 63.3264V60.0221L216.094 61.6744C216.044 61.7032 215.98 61.6861 215.951 61.6362L215.013 60.0103C214.984 59.9604 215.001 59.8966 215.051 59.8678L217.913 58.2156L215.051 56.5634C215.001 56.5346 214.984 56.4708 215.013 56.4209L215.951 54.7949C215.98 54.745 216.044 54.7279 216.094 54.7567L218.956 56.4091V53.1043Z" fill="#FFFBFF"/>
<rect x="100" y="154" width="68" height="6" rx="2" fill="#FF91DF"/>
<rect x="100" y="166" width="68" height="6" rx="2" fill="#C29DFF"/>
<rect x="100" y="178" width="68" height="6" rx="2" fill="#C29DFF"/>
<path d="M173.162 115.98L173.165 115.983L184.5 126.222V195C184.5 200.247 180.247 204.5 175 204.5H124C118.753 204.5 114.5 200.247 114.5 195V116C114.5 110.753 118.753 106.5 124 106.5H138.5H162.806L173.162 115.98Z" fill="#FFFBFF" stroke="#D0BED6"/>
<g style="mix-blend-mode:multiply" opacity="0.6">
<path d="M169.774 124H184V196C184 200.971 179.971 205 175 205H156.5L169.774 124Z" fill="url(#paint4_linear_6485_85356)"/>
</g>
<rect x="124" y="149" width="49" height="6" rx="2" fill="#E1CEE8"/>
<rect x="124" y="139" width="7" height="6" rx="2" fill="#FFC3F1"/>
<rect x="138" y="139" width="18" height="6" rx="2" fill="#E1CEE8"/>
<rect x="124" y="172" width="32" height="6" rx="2" fill="#E1CEE8"/>
<rect x="159" y="172" width="14" height="6" rx="2" fill="#E1CEE8"/>
<rect x="124" y="161" width="49" height="6" rx="2" fill="#E1CEE8"/>
<rect x="124" y="184" width="32" height="6" rx="2" fill="#E1CEE8"/>
<path d="M130.8 130.015C134.803 130.015 138.05 126.778 138.05 122.782C138.05 118.787 134.803 115.55 130.8 115.55C126.797 115.55 123.55 118.787 123.55 122.782C123.55 126.778 126.797 130.015 130.8 130.015Z" stroke="url(#paint5_linear_6485_85356)" stroke-width="0.9"/>
<ellipse cx="130.8" cy="122.783" rx="6.15238" ry="6.13648" fill="#83DA85"/>
<rect width="1.75609" height="5.26826" rx="0.878044" transform="matrix(0.708021 -0.706191 0.708021 0.706191 126.59 122.356)" fill="white"/>
<rect width="7.02435" height="1.75609" rx="0.878044" transform="matrix(0.708021 -0.706191 0.708021 0.706191 129.077 124.837)" fill="white"/>
<path d="M153 79C153 76.7909 154.791 75 157 75H182V92H157C154.791 92 153 90.2091 153 88V79Z" fill="#FFDAD4"/>
<path opacity="0.7" d="M245.5 88C245.5 90.2091 243.709 92 241.5 92H182V75H241.5C243.709 75 245.5 76.7909 245.5 79V88Z" fill="#FFA9EA"/>
<path d="M221 92.5H241C243.761 92.5 246 90.2614 246 87.5V82" stroke="#C9AAC1"/>
<path opacity="0.7" d="M101 95H34C31.7909 95 30 96.7909 30 99V106" stroke="#C9AAC1"/>
<path d="M163.5 116V107.137L183.527 125.5H173C167.753 125.5 163.5 121.247 163.5 116Z" fill="white" stroke="#D0BED6"/>
<path d="M160.5 74.5H193" stroke="#C9AAC1"/>
<rect x="131" y="101" width="14" height="6" fill="white"/>
<rect x="157" y="82" width="18" height="3" rx="1.5" fill="#635452" fill-opacity="0.5"/>
<rect x="192" y="82" width="49" height="3" rx="1.5" fill="#635452" fill-opacity="0.5"/>
<path d="M182 76V92" stroke="#B18BA1" stroke-dasharray="4 4"/>
<circle cx="83.5" cy="159.5" r="7.5" fill="#C39EFF"/>
<mask id="mask0_6485_85356" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="76" y="152" width="15" height="15">
<circle cx="83.5" cy="159.5" r="7.5" fill="#FF91DF"/>
</mask>
<g mask="url(#mask0_6485_85356)">
<path d="M83.4342 154.5C83.0578 154.5 82.7324 154.762 82.6524 155.13L82.5601 155.555C82.5066 155.801 82.3182 155.994 82.0852 156.09V156.09C81.852 156.187 81.5857 156.182 81.3734 156.046L81.0104 155.812C80.6938 155.609 80.2782 155.653 80.0121 155.919L79.9194 156.012C79.6533 156.278 79.6087 156.694 79.8122 157.01L80.0456 157.373C80.1821 157.586 80.187 157.852 80.0905 158.085V158.085C79.994 158.318 79.8011 158.507 79.5546 158.56L79.1301 158.652C78.7623 158.732 78.5 159.058 78.5 159.434V159.566C78.5 159.942 78.7623 160.268 79.1301 160.348L79.5547 160.44C79.8011 160.493 79.994 160.682 80.0905 160.915V160.915C80.187 161.148 80.1821 161.414 80.0456 161.627L79.8122 161.99C79.6087 162.306 79.6533 162.722 79.9194 162.988L80.0121 163.081C80.2782 163.347 80.6938 163.391 81.0104 163.188L81.3735 162.954C81.5857 162.818 81.852 162.813 82.0852 162.91V162.91C82.3182 163.006 82.5066 163.199 82.5601 163.445L82.6524 163.87C82.7324 164.238 83.0578 164.5 83.4342 164.5H83.5658C83.9422 164.5 84.2676 164.238 84.3476 163.87L84.4399 163.445C84.4934 163.199 84.6818 163.006 84.9148 162.91V162.91C85.148 162.813 85.4143 162.818 85.6266 162.954L85.9896 163.188C86.3062 163.391 86.7218 163.347 86.9879 163.081L87.0806 162.988C87.3467 162.722 87.3913 162.306 87.1878 161.99L86.9544 161.627C86.8179 161.414 86.813 161.148 86.9095 160.915V160.915C87.006 160.682 87.1989 160.493 87.4454 160.44L87.8699 160.348C88.2377 160.268 88.5 159.942 88.5 159.566V159.434C88.5 159.058 88.2377 158.732 87.8699 158.652L87.4453 158.56C87.1989 158.507 87.006 158.318 86.9095 158.085V158.085C86.813 157.852 86.8179 157.586 86.9544 157.373L87.1878 157.01C87.3913 156.694 87.3467 156.278 87.0806 156.012L86.9879 155.919C86.7218 155.653 86.3062 155.609 85.9896 155.812L85.6265 156.046C85.4143 156.182 85.148 156.187 84.9148 156.09V156.09C84.6818 155.994 84.4934 155.801 84.4399 155.555L84.3476 155.13C84.2676 154.762 83.9422 154.5 83.5658 154.5H83.4342ZM83.5 157.357C84.6835 157.357 85.6429 158.317 85.6429 159.5C85.6429 160.684 84.6835 161.643 83.5 161.643C82.3165 161.643 81.3571 160.684 81.3571 159.5C81.3571 158.317 82.3165 157.357 83.5 157.357Z" fill="#F5EEFF"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34 146C36.2091 146 38 144.209 38 142C38 139.791 36.2091 138 34 138C31.7909 138 30 139.791 30 142C30 144.209 31.7909 146 34 146ZM34 144C35.1046 144 36 143.105 36 142C36 140.895 35.1046 140 34 140C32.8954 140 32 140.895 32 142C32 143.105 32.8954 144 34 144Z" fill="#FFDDB5"/>
<defs>
<linearGradient id="paint0_linear_6485_85356" x1="57.3294" y1="213.747" x2="24.2547" y2="153.83" gradientUnits="userSpaceOnUse">
<stop stop-color="#C7BDE6"/>
<stop offset="1" stop-color="#E4DBFF" stop-opacity="0.16"/>
</linearGradient>
<linearGradient id="paint1_linear_6485_85356" x1="120.556" y1="126.099" x2="151.327" y2="228.121" gradientUnits="userSpaceOnUse">
<stop stop-color="#492EF3"/>
<stop offset="1" stop-color="#CF69FF"/>
</linearGradient>
<linearGradient id="paint2_linear_6485_85356" x1="192" y1="213.001" x2="-17" y2="80.001" gradientUnits="userSpaceOnUse">
<stop stop-color="#BC97FD"/>
<stop offset="1" stop-color="#BC97FD" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint3_linear_6485_85356" x1="130.59" y1="168.664" x2="90.951" y2="193.746" gradientUnits="userSpaceOnUse">
<stop stop-color="#ECB6FF"/>
<stop offset="1" stop-color="#BE9BFF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_6485_85356" x1="184.795" y1="161.121" x2="158.308" y2="166.914" gradientUnits="userSpaceOnUse">
<stop stop-color="#E1CEE8"/>
<stop offset="1" stop-color="#FFFBFF"/>
</linearGradient>
<linearGradient id="paint5_linear_6485_85356" x1="125.619" y1="117.938" x2="137.57" y2="129.596" gradientUnits="userSpaceOnUse">
<stop stop-color="#83DA85"/>
<stop offset="1" stop-color="#83DA85" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

89
packages/console/src/assets/images/roles-empty-dark.svg Normal file
View file

@ -0,0 +1,89 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="256" height="256" fill="#191C1D"/>
<rect width="256" height="256" fill="#C4C7C7" fill-opacity="0.02"/>
<rect width="256" height="256" fill="#CABEFF" fill-opacity="0.08"/>
<path d="M22 219H234.4V47.6C234.4 35.6706 224.729 26 212.8 26H43.6C31.6707 26 22 35.6706 22 47.6V219Z" fill="url(#paint0_linear_6532_88910)"/>
<path d="M104.109 159.753H62.5013C44.962 159.753 29.9754 172.393 27.0171 189.681L22 218.999H234.4L233.931 217.68C230.869 209.069 222.719 203.317 213.579 203.317H179.601C174.594 203.317 169.946 200.715 167.327 196.447L165.27 193.095C160.033 184.559 150.737 179.357 140.723 179.357H136.317C131.798 179.357 127.657 176.836 125.581 172.822C121.429 164.794 113.146 159.753 104.109 159.753Z" fill="#CABEFF" fill-opacity="0.16"/>
<path d="M82.3 193.865H34.6C22.6707 193.865 13 184.195 13 172.265V104.995" stroke="#58577B" stroke-width="0.9" stroke-dasharray="3.6 3.6"/>
<path d="M188.05 66.3952H221.8C233.729 66.3952 243.4 76.0409 243.4 87.9394V108.586" stroke="#58577B" stroke-width="0.9" stroke-dasharray="3.6 3.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.861 64.6935C148.861 64.6416 148.903 64.5996 148.955 64.5996H150.645C150.697 64.5996 150.739 64.6416 150.739 64.6935V67.6595L153.314 66.1764C153.359 66.1506 153.417 66.166 153.443 66.2108L154.287 67.6701C154.313 67.715 154.298 67.7723 154.253 67.7982L151.677 69.2814L154.253 70.7644C154.298 70.7903 154.313 70.8476 154.287 70.8925L153.442 72.3518C153.416 72.3967 153.359 72.4121 153.314 72.3862L150.739 70.9032V73.8691C150.739 73.921 150.697 73.963 150.645 73.963H148.955C148.903 73.963 148.861 73.921 148.861 73.8691V70.9031L146.286 72.3862C146.241 72.4121 146.183 72.3967 146.157 72.3518L145.313 70.8925C145.287 70.8476 145.302 70.7903 145.347 70.7644L147.922 69.2814L145.347 67.7982C145.302 67.7723 145.286 67.715 145.312 67.6701L146.157 66.2108C146.183 66.166 146.241 66.1506 146.286 66.1764L148.861 67.6597V64.6935Z" fill="#5F5D67"/>
<path d="M129.822 59.9305L129.461 57.4171C129.262 56.0286 127.973 55.0645 126.581 55.2631V55.2631C125.189 55.4616 123.9 54.4975 123.701 53.1091V53.1091C123.502 51.7207 122.212 50.7565 120.82 50.9551L118.3 51.3145" stroke="#52514B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="87.7" y="96.0186" width="135" height="97.8465" rx="10.8" fill="url(#paint1_linear_6532_88910)"/>
<rect x="107.5" y="146.287" width="102.6" height="8.97674" rx="3.6" fill="#AF9FDB"/>
<rect x="107.5" y="160.651" width="102.6" height="8.97674" rx="3.6" fill="#F0EBFF"/>
<rect x="107.5" y="175.014" width="38.7" height="8.97674" rx="3.6" fill="white"/>
<rect x="33.3" y="160.253" width="116" height="58.2465" rx="10.3" fill="#CABEFF" stroke="#947DFF"/>
<rect x="44.5" y="192.07" width="44.1" height="7.1814" rx="1.8" fill="#AF9EFF"/>
<rect opacity="0.7" x="44.5" y="178.605" width="8.1" height="7.1814" rx="1.8" fill="#F07EFF"/>
<rect x="60.7" y="178.605" width="20.7" height="7.1814" rx="1.8" fill="#AF9EFF"/>
<g clip-path="url(#clip0_6532_88910)">
<rect x="104.8" y="172.321" width="32.4" height="32.3163" rx="10.8" fill="#776E9E"/>
<path d="M131.613 200.939C132.485 202.601 132.922 208.656 132.922 208.656H108.401C108.401 208.656 108.838 202.601 109.711 200.939C111.02 198.446 120.662 195.24 120.662 195.24C120.662 195.24 130.303 198.446 131.613 200.939Z" fill="#F07EFF"/>
<path d="M130.836 193.864L111.498 191.533C110.545 186.485 111.676 183.304 114.891 181.991C116.377 177.134 122.162 177.529 123.801 177.925C129.381 179.273 131.726 184.586 130.836 193.864Z" fill="#47464E"/>
<path d="M117.806 196.666V189.542C114.827 189.498 115.408 184.35 118.401 185.921C118.936 186.158 120.305 185.505 119.829 183.903C123.043 186.277 127.521 182.11 127.804 184.674C128.361 189.721 127.284 193.87 124.429 193.87C124.125 193.882 123.82 193.864 123.519 193.816V196.666C122.587 197.22 121.655 197.497 120.723 197.497C119.791 197.497 118.819 197.22 117.806 196.666Z" fill="#FFB95A"/>
<path d="M123.518 193.816V194.765C122.209 194.765 120.344 193.915 119.352 192.213C120.542 193.004 121.931 193.539 123.518 193.816Z" fill="#FA8B54"/>
<path d="M120.657 197.374C121.471 197.335 123.518 196.915 123.518 196.007V195.24C123.736 195.24 124.361 195.755 124.682 196.19C125.953 197.912 124.544 199.455 123.394 199.455C121.944 199.455 120.982 198.246 120.661 197.665C120.34 198.246 119.378 199.455 117.928 199.455C116.778 199.455 115.368 197.912 116.639 196.19C116.961 195.755 117.586 195.24 117.804 195.24V196.007C117.804 196.915 119.797 197.335 120.657 197.374Z" fill="url(#paint2_linear_6532_88910)"/>
</g>
<rect x="105.25" y="172.771" width="31.5" height="31.4163" rx="10.35" stroke="#947DFF" stroke-width="0.9"/>
<path d="M59.8 106.819C59.8 100.854 64.6354 96.0186 70.6 96.0186H211.9C217.865 96.0186 222.7 100.854 222.7 106.819V110.381H59.8V106.819Z" fill="#635C8F"/>
<path d="M219.1 115.32C227.797 115.32 234.85 108.287 234.85 99.6091C234.85 90.9314 227.797 83.8986 219.1 83.8986C210.403 83.8986 203.35 90.9314 203.35 99.6091C203.35 108.287 210.403 115.32 219.1 115.32Z" stroke="url(#paint3_linear_6532_88910)" stroke-width="0.9"/>
<ellipse cx="219.101" cy="99.6098" rx="13.8429" ry="13.8071" fill="#86BF8F"/>
<rect width="3.9512" height="11.8536" rx="1.9756" transform="matrix(0.708021 -0.706191 0.708021 0.706191 209.629 98.6514)" fill="white"/>
<rect width="15.8048" height="3.9512" rx="1.9756" transform="matrix(0.708021 -0.706191 0.708021 0.706191 215.224 104.232)" fill="white"/>
<path d="M109.3 138.659L120.187 127.8C123.599 124.397 128.852 123.666 133.064 126.009L142.521 131.269C146.596 133.536 151.666 132.931 155.094 129.769L161.376 123.973C164.914 120.709 170.184 120.18 174.3 122.676L200.65 138.659" stroke="white" stroke-opacity="0.7" stroke-width="0.9" stroke-linejoin="round"/>
<rect x="45.3999" y="62.8047" width="62.1" height="91.5628" rx="14.4" fill="#C39EFF"/>
<rect width="7.19512" height="7.18628" rx="1.8" transform="matrix(0.859426 0.511261 -0.513216 0.85826 203.888 72.6787)" fill="#6E6083"/>
<path d="M40.9001 66.0643C37.1692 66.0643 35.4019 62.8894 35.4019 60.1113C35.4019 62.8894 33.831 66.0643 30.1001 66.0643C33.831 66.0643 35.4019 68.0222 35.4019 72.6788C35.4019 68.0222 37.1692 66.0643 40.9001 66.0643Z" fill="#928F9A"/>
<path d="M56.1999 90.3016C52.469 90.3016 50.7017 87.1267 50.7017 84.3486C50.7017 87.1267 49.1308 90.3016 45.3999 90.3016C49.1308 90.3016 50.7017 92.2595 50.7017 96.9161C50.7017 92.2595 52.469 90.3016 56.1999 90.3016Z" fill="white" fill-opacity="0.8"/>
<ellipse cx="166.94" cy="121.192" rx="1.83942" ry="1.83466" fill="white"/>
<ellipse cx="126.44" cy="124.784" rx="1.83942" ry="1.83466" fill="white"/>
<rect x="52.5999" y="115.77" width="48.6" height="8.97674" rx="3.6" fill="#D8C7FF"/>
<rect x="52.5999" y="129.234" width="48.6" height="8.97674" rx="3.6" fill="#EFE9FF" stroke="#815AE3" stroke-width="0.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.9998 120.257C57.9998 119.761 58.4017 119.359 58.8974 119.359H78.7021C79.1979 119.359 79.5998 119.761 79.5998 120.257C79.5998 120.753 79.1979 121.155 78.7021 121.155H58.8974C58.4017 121.155 57.9998 120.753 57.9998 120.257ZM83.1998 120.257C83.1998 119.761 83.6017 119.359 84.0974 119.359H89.5021C89.9979 119.359 90.3998 119.761 90.3998 120.257C90.3998 120.753 89.9979 121.155 89.5021 121.155H84.0974C83.6017 121.155 83.1998 120.753 83.1998 120.257ZM93.0974 119.359C92.6017 119.359 92.1998 119.761 92.1998 120.257C92.1998 120.753 92.6017 121.155 93.0974 121.155H94.9021C95.3979 121.155 95.7998 120.753 95.7998 120.257C95.7998 119.761 95.3979 119.359 94.9021 119.359H93.0974Z" fill="#9877EA"/>
<ellipse cx="62.5" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="69.6999" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="76.8999" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="84.0998" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="91.2998" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<g clip-path="url(#clip1_6532_88910)">
<rect x="60.7" y="74.4756" width="32.4" height="32.3163" rx="10.8" fill="#D8C7FF"/>
<path d="M79.9294 97.2786V99.7192C79.9294 100.189 72.9694 100.031 72.9694 99.3534C72.9694 98.7156 72.9825 95.8253 72.9694 92.8518C71.4108 90.8367 71.4108 89.5773 72.6432 88.2757C73.8755 86.9741 82.6482 86.3232 82.6482 86.3232C82.6482 86.3232 83.3063 92.6372 83.4094 94.3499C83.4509 95.0387 83.8988 97.2786 82.1588 97.2786H79.9294Z" fill="url(#paint4_linear_6532_88910)"/>
<g style="mix-blend-mode:multiply">
<path d="M79.9279 97.0689C78.511 96.9147 77.1417 96.4686 75.9067 95.7588C75.9067 95.7588 76.7767 97.8197 79.9279 98.379V97.0689Z" fill="#FFD7B8"/>
</g>
<path d="M87.8684 104.578C88.4969 105.853 89.004 107.886 89.3896 110.677C89.4515 111.124 89.1011 111.52 88.6492 111.52H64.2502C63.7983 111.52 63.4479 111.124 63.5097 110.677C63.8955 107.885 64.4025 105.853 65.0309 104.578C65.7186 103.183 72.0997 100.499 72.0997 100.499C72.0997 100.499 72.2267 99.2717 72.5347 99.0958C72.8426 98.9198 79.9978 98.92 80.3647 99.0958C80.7315 99.2716 80.7997 100.498 80.7997 100.498C80.7997 100.498 87.182 103.186 87.8684 104.578Z" fill="#5F5D67"/>
<path d="M74.3861 89.5984C74.0403 89.3022 73.6201 89.1027 73.0261 89.4105C71.6179 90.1398 72.5525 92.9532 74.1283 92.8984C74.6721 92.8795 74.4228 93.9603 72.9702 94.6741C72.9702 93.5352 71.2302 90.715 71.0779 88.1473C69.327 87.497 69.762 84.8952 70.964 84.8952C70.7722 82.5099 74.6014 81.2779 76.0841 82.6466C77.592 80.844 81.3983 81.766 81.6281 83.3299C84.2454 81.9364 85.9658 85.942 83.5151 87.497C82.5067 88.137 80.1477 88.3805 76.7424 88.3805C75.1083 88.3805 76.048 92.1954 76.5589 93.4267C77.2114 94.9995 80.8545 95.2165 81.9964 95.0537C82.8882 94.9267 83.3558 94.5656 83.4102 94.3487C84.2258 96.5181 83.1927 97.8197 81.5614 97.8197C78.7883 97.8197 76.0152 97.0062 75.5802 94.9995C75.2339 93.4025 75.2529 90.8252 74.3861 89.5984Z" fill="#7958FF"/>
</g>
<rect x="61.15" y="74.9256" width="31.5" height="31.4163" rx="10.35" stroke="#9877EA" stroke-width="0.9"/>
<rect x="89" y="218" width="20" height="5" fill="#191C1D"/>
<rect x="89" y="218" width="20" height="5" fill="#C4C7C7" fill-opacity="0.02"/>
<rect x="89" y="218" width="20" height="5" fill="#CABEFF" fill-opacity="0.08"/>
<defs>
<linearGradient id="paint0_linear_6532_88910" x1="128.2" y1="219" x2="128.2" y2="26" gradientUnits="userSpaceOnUse">
<stop stop-color="#444353"/>
<stop offset="1" stop-color="#444353" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_6532_88910" x1="155.2" y1="96.0186" x2="136.658" y2="198.202" gradientUnits="userSpaceOnUse">
<stop stop-color="#9B84DA"/>
<stop offset="1" stop-color="#8470BD"/>
</linearGradient>
<linearGradient id="paint2_linear_6532_88910" x1="120.661" y1="199.455" x2="120.661" y2="195.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCF2EB"/>
<stop offset="1" stop-color="#FFF9F5"/>
</linearGradient>
<linearGradient id="paint3_linear_6532_88910" x1="219.1" y1="84.3486" x2="219.1" y2="114.87" gradientUnits="userSpaceOnUse">
<stop stop-color="#86BF8F"/>
<stop offset="1" stop-color="#86BF8F" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_6532_88910" x1="77.6236" y1="86.3232" x2="77.6236" y2="99.9889" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFD4B3"/>
<stop offset="1" stop-color="#FFDCC2"/>
</linearGradient>
<clipPath id="clip0_6532_88910">
<rect x="104.8" y="172.321" width="32.4" height="32.3163" rx="10.8" fill="white"/>
</clipPath>
<clipPath id="clip1_6532_88910">
<rect x="60.7" y="74.4756" width="32.4" height="32.3163" rx="10.8" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

84
packages/console/src/assets/images/roles-empty.svg Normal file
View file

@ -0,0 +1,84 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 219H234.4V47.6C234.4 35.6707 224.729 26 212.8 26H43.6C31.6707 26 22 35.6707 22 47.6V219Z" fill="url(#paint0_linear_6485_85287)"/>
<path d="M104.109 159.753H62.5013C44.962 159.753 29.9754 172.393 27.0171 189.681L22 218.999H234.4L233.931 217.68C230.869 209.069 222.719 203.317 213.579 203.317H179.601C174.594 203.317 169.946 200.715 167.327 196.447L165.27 193.095C160.033 184.559 150.737 179.357 140.723 179.357H136.317C131.798 179.357 127.657 176.836 125.581 172.822C121.429 164.794 113.146 159.753 104.109 159.753Z" fill="#D2CCDD"/>
<path d="M82.3 193.865H34.6C22.6707 193.865 13 184.195 13 172.265V104.995" stroke="#A782E8" stroke-width="0.9" stroke-dasharray="3.6 3.6"/>
<path d="M188.05 66.3952H221.8C233.729 66.3952 243.4 76.0409 243.4 87.9394V108.586" stroke="#A782E8" stroke-width="0.9" stroke-dasharray="3.6 3.6"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.861 64.6935C148.861 64.6416 148.903 64.5996 148.955 64.5996H150.645C150.697 64.5996 150.739 64.6416 150.739 64.6935V67.6594L153.314 66.1764C153.359 66.1506 153.416 66.166 153.442 66.2108L154.287 67.6701C154.313 67.715 154.298 67.7723 154.253 67.7982L151.677 69.2813L154.253 70.7644C154.298 70.7903 154.313 70.8476 154.287 70.8925L153.442 72.3518C153.416 72.3967 153.359 72.4121 153.314 72.3862L150.739 70.9032V73.8691C150.739 73.921 150.697 73.963 150.645 73.963H148.955C148.903 73.963 148.861 73.921 148.861 73.8691V70.903L146.286 72.3862C146.241 72.4121 146.183 72.3967 146.157 72.3518L145.313 70.8925C145.287 70.8476 145.302 70.7903 145.347 70.7644L147.922 69.2813L145.347 67.7982C145.302 67.7723 145.286 67.715 145.312 67.6701L146.157 66.2108C146.183 66.166 146.241 66.1506 146.286 66.1764L148.861 67.6597V64.6935Z" fill="#E5E1EC"/>
<path d="M129.822 59.9305L129.461 57.4171C129.262 56.0286 127.973 55.0645 126.581 55.2631V55.2631C125.189 55.4616 123.9 54.4975 123.701 53.1091V53.1091C123.502 51.7207 122.212 50.7565 120.82 50.9551L118.3 51.3145" stroke="#FFF06A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="87.7" y="96.0186" width="135" height="97.8465" rx="10.8" fill="url(#paint1_linear_6485_85287)"/>
<rect x="107.5" y="146.287" width="102.6" height="8.97674" rx="3.6" fill="#D8C7FF"/>
<rect x="107.5" y="160.651" width="102.6" height="8.97674" rx="3.6" fill="white"/>
<rect x="107.5" y="175.014" width="38.7" height="8.97674" rx="3.6" fill="white"/>
<rect x="33.3" y="160.253" width="116" height="58.2465" rx="10.3" fill="#F5EEFF" stroke="#D0BED6"/>
<rect x="44.5" y="192.07" width="44.1" height="7.1814" rx="1.8" fill="#E1CEE8"/>
<rect x="44.5" y="178.605" width="8.1" height="7.1814" rx="1.8" fill="#FFC3F1"/>
<rect x="60.7" y="178.605" width="20.7" height="7.1814" rx="1.8" fill="#E1CEE8"/>
<g clip-path="url(#clip0_6485_85287)">
<rect x="104.8" y="172.321" width="32.4" height="32.3163" rx="10.8" fill="#F5EEFF"/>
<path d="M131.613 200.939C132.485 202.601 132.922 208.656 132.922 208.656H108.401C108.401 208.656 108.838 202.601 109.711 200.939C111.02 198.446 120.662 195.24 120.662 195.24C120.662 195.24 130.303 198.446 131.613 200.939Z" fill="#F07EFF"/>
<path d="M130.836 193.864L111.498 191.533C110.545 186.485 111.676 183.304 114.891 181.991C116.377 177.134 122.162 177.529 123.801 177.925C129.381 179.273 131.726 184.586 130.836 193.864Z" fill="#47464E"/>
<path d="M117.806 196.666V189.542C114.827 189.498 115.408 184.35 118.401 185.921C118.936 186.158 120.305 185.505 119.829 183.903C123.043 186.277 127.521 182.11 127.804 184.674C128.361 189.721 127.284 193.87 124.429 193.87C124.125 193.882 123.82 193.864 123.519 193.816V196.666C122.587 197.22 121.655 197.497 120.723 197.497C119.791 197.497 118.819 197.22 117.806 196.666Z" fill="#FFB95A"/>
<path d="M123.518 193.816V194.765C122.209 194.765 120.344 193.915 119.352 192.213C120.542 193.004 121.931 193.539 123.518 193.816Z" fill="#FA8B54"/>
<path d="M120.657 197.374C121.471 197.335 123.518 196.915 123.518 196.007V195.24C123.736 195.24 124.361 195.755 124.682 196.19C125.953 197.912 124.544 199.455 123.394 199.455C121.944 199.455 120.982 198.246 120.661 197.665C120.34 198.246 119.378 199.455 117.928 199.455C116.778 199.455 115.368 197.912 116.639 196.19C116.961 195.755 117.586 195.24 117.804 195.24V196.007C117.804 196.915 119.797 197.335 120.657 197.374Z" fill="url(#paint2_linear_6485_85287)"/>
</g>
<rect x="105.25" y="172.771" width="31.5" height="31.4163" rx="10.35" stroke="#D0BED6" stroke-width="0.9"/>
<path d="M59.8 106.819C59.8 100.854 64.6354 96.0186 70.6 96.0186H211.9C217.865 96.0186 222.7 100.854 222.7 106.819V110.381H59.8V106.819Z" fill="#947DFF"/>
<path d="M219.1 115.32C227.797 115.32 234.85 108.287 234.85 99.6091C234.85 90.9314 227.797 83.8986 219.1 83.8986C210.403 83.8986 203.35 90.9314 203.35 99.6091C203.35 108.287 210.403 115.32 219.1 115.32Z" stroke="url(#paint3_linear_6485_85287)" stroke-width="0.9"/>
<ellipse cx="219.101" cy="99.6098" rx="13.8429" ry="13.8071" fill="#83DA85"/>
<rect width="3.9512" height="11.8536" rx="1.9756" transform="matrix(0.708021 -0.706191 0.708021 0.706191 209.629 98.6514)" fill="white"/>
<rect width="15.8048" height="3.9512" rx="1.9756" transform="matrix(0.708021 -0.706191 0.708021 0.706191 215.224 104.232)" fill="white"/>
<path d="M109.3 138.659L120.187 127.8C123.599 124.397 128.852 123.666 133.064 126.009L142.521 131.269C146.596 133.536 151.666 132.931 155.094 129.769L161.376 123.973C164.914 120.709 170.184 120.18 174.3 122.676L200.65 138.659" stroke="white" stroke-opacity="0.7" stroke-width="0.9" stroke-linejoin="round"/>
<rect x="45.3999" y="62.8047" width="62.1" height="91.5628" rx="14.4" fill="#C39EFF"/>
<rect width="7.19512" height="7.18628" rx="1.8" transform="matrix(0.859426 0.511261 -0.513216 0.85826 203.888 72.6787)" fill="#FFD5FF"/>
<path d="M40.9001 66.0643C37.1692 66.0643 35.4019 62.8894 35.4019 60.1113C35.4019 62.8894 33.831 66.0643 30.1001 66.0643C33.831 66.0643 35.4019 68.0222 35.4019 72.6788C35.4019 68.0222 37.1692 66.0643 40.9001 66.0643Z" fill="#FFF06A"/>
<path d="M56.1999 90.3016C52.469 90.3016 50.7017 87.1267 50.7017 84.3486C50.7017 87.1267 49.1308 90.3016 45.3999 90.3016C49.1308 90.3016 50.7017 92.2595 50.7017 96.9161C50.7017 92.2595 52.469 90.3016 56.1999 90.3016Z" fill="#FFF06A"/>
<ellipse cx="166.94" cy="121.192" rx="1.83942" ry="1.83466" fill="white"/>
<ellipse cx="126.44" cy="124.784" rx="1.83942" ry="1.83466" fill="white"/>
<rect x="52.5999" y="115.77" width="48.6" height="8.97674" rx="3.6" fill="#D8C7FF"/>
<rect x="52.5999" y="129.234" width="48.6" height="8.97674" rx="3.6" fill="#EFE9FF" stroke="#815AE3" stroke-width="0.9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M57.9998 120.257C57.9998 119.761 58.4017 119.359 58.8974 119.359H78.7021C79.1979 119.359 79.5998 119.761 79.5998 120.257C79.5998 120.753 79.1979 121.155 78.7021 121.155H58.8974C58.4017 121.155 57.9998 120.753 57.9998 120.257ZM83.1998 120.257C83.1998 119.761 83.6017 119.359 84.0974 119.359H89.5021C89.9979 119.359 90.3998 119.761 90.3998 120.257C90.3998 120.753 89.9979 121.155 89.5021 121.155H84.0974C83.6017 121.155 83.1998 120.753 83.1998 120.257ZM93.0974 119.359C92.6017 119.359 92.1998 119.761 92.1998 120.257C92.1998 120.753 92.6017 121.155 93.0974 121.155H94.9021C95.3979 121.155 95.7998 120.753 95.7998 120.257C95.7998 119.761 95.3979 119.359 94.9021 119.359H93.0974Z" fill="#9877EA"/>
<ellipse cx="62.5" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="69.6999" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="76.8999" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="84.0998" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<ellipse cx="91.2998" cy="133.722" rx="1.8" ry="1.79535" fill="#956AFF"/>
<g clip-path="url(#clip1_6485_85287)">
<rect x="60.7" y="74.4756" width="32.4" height="32.3163" rx="10.8" fill="#D8C7FF"/>
<path d="M79.9294 97.2786V99.7192C79.9294 100.189 72.9694 100.031 72.9694 99.3534C72.9694 98.7156 72.9825 95.8253 72.9694 92.8518C71.4108 90.8367 71.4108 89.5773 72.6432 88.2757C73.8755 86.9741 82.6482 86.3232 82.6482 86.3232C82.6482 86.3232 83.3063 92.6372 83.4094 94.3499C83.4509 95.0387 83.8988 97.2786 82.1588 97.2786H79.9294Z" fill="url(#paint4_linear_6485_85287)"/>
<g style="mix-blend-mode:multiply">
<path d="M79.9279 97.0689C78.511 96.9147 77.1417 96.4686 75.9067 95.7588C75.9067 95.7588 76.7767 97.8197 79.9279 98.379V97.0689Z" fill="#FFD7B8"/>
</g>
<path d="M87.8684 104.578C88.4969 105.853 89.004 107.886 89.3896 110.677C89.4515 111.124 89.1011 111.52 88.6492 111.52H64.2502C63.7983 111.52 63.4479 111.124 63.5097 110.677C63.8955 107.885 64.4025 105.853 65.0309 104.578C65.7186 103.183 72.0997 100.499 72.0997 100.499C72.0997 100.499 72.2267 99.2717 72.5347 99.0958C72.8426 98.9198 79.9978 98.92 80.3647 99.0958C80.7315 99.2716 80.7997 100.498 80.7997 100.498C80.7997 100.498 87.182 103.186 87.8684 104.578Z" fill="#5F5D67"/>
<path d="M74.3861 89.5984C74.0403 89.3022 73.6201 89.1027 73.0261 89.4105C71.6179 90.1398 72.5525 92.9532 74.1283 92.8984C74.6721 92.8795 74.4228 93.9603 72.9702 94.6741C72.9702 93.5352 71.2302 90.715 71.0779 88.1473C69.327 87.497 69.762 84.8952 70.964 84.8952C70.7722 82.5099 74.6014 81.2779 76.0841 82.6466C77.592 80.844 81.3983 81.766 81.6281 83.3299C84.2454 81.9364 85.9658 85.942 83.5151 87.497C82.5067 88.137 80.1477 88.3805 76.7424 88.3805C75.1083 88.3805 76.048 92.1954 76.5589 93.4267C77.2114 94.9995 80.8545 95.2165 81.9964 95.0537C82.8882 94.9267 83.3558 94.5656 83.4102 94.3487C84.2258 96.5181 83.1927 97.8197 81.5614 97.8197C78.7883 97.8197 76.0152 97.0062 75.5802 94.9995C75.2339 93.4025 75.2529 90.8252 74.3861 89.5984Z" fill="#7958FF"/>
</g>
<rect x="61.15" y="74.9256" width="31.5" height="31.4163" rx="10.35" stroke="#9877EA" stroke-width="0.9"/>
<rect x="89" y="218" width="20" height="5" fill="white"/>
<defs>
<linearGradient id="paint0_linear_6485_85287" x1="128.2" y1="219" x2="128.2" y2="26" gradientUnits="userSpaceOnUse">
<stop stop-color="#F5EEFF"/>
<stop offset="1" stop-color="#F5EEFF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_6485_85287" x1="155.2" y1="96.0186" x2="124.678" y2="200.782" gradientUnits="userSpaceOnUse">
<stop stop-color="#C39EFF"/>
<stop offset="1" stop-color="#906FEF"/>
</linearGradient>
<linearGradient id="paint2_linear_6485_85287" x1="120.661" y1="199.455" x2="120.661" y2="195.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCF2EB"/>
<stop offset="1" stop-color="#FFF9F5"/>
</linearGradient>
<linearGradient id="paint3_linear_6485_85287" x1="207.443" y1="88.7088" x2="234.332" y2="114.939" gradientUnits="userSpaceOnUse">
<stop stop-color="#83DA85"/>
<stop offset="1" stop-color="#83DA85" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint4_linear_6485_85287" x1="77.6236" y1="86.3232" x2="77.6236" y2="99.9889" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFD4B3"/>
<stop offset="1" stop-color="#FFDCC2"/>
</linearGradient>
<clipPath id="clip0_6485_85287">
<rect x="104.8" y="172.321" width="32.4" height="32.3163" rx="10.8" fill="white"/>
</clipPath>
<clipPath id="clip1_6485_85287">
<rect x="60.7" y="74.4756" width="32.4" height="32.3163" rx="10.8" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

70
packages/console/src/assets/images/users-empty-dark.svg Normal file
View file

@ -0,0 +1,70 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M251 237H5.5L25.2124 207.625C28.8297 202.234 34.8948 199 41.3866 199H42.0675C45.2902 199 48.4475 199.91 51.1761 201.625C58.7086 206.36 68.6126 204.534 73.9617 197.424L97.3797 166.299C101.548 160.759 108.078 157.5 115.011 157.5C120.173 157.5 125.172 159.31 129.137 162.614L135.769 168.141C144.274 175.229 156.353 176.102 165.789 170.311C169.85 167.819 174.522 166.5 179.287 166.5H180.184C192.623 166.5 203.676 174.438 207.649 186.226L212.721 201.271C214.68 207.085 220.132 211 226.267 211C231.092 211 235.591 213.434 238.232 217.472L251 237Z" fill="#383A48"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47 185C47 182.791 48.7909 181 51 181H55C57.2091 181 59 182.791 59 185V193H47V185ZM47 233C47 235.209 48.7909 237 51 237H55C57.2091 237 59 235.209 59 233V225H47V233ZM29 215C26.7909 215 25 213.209 25 211V207C25 204.791 26.7909 203 29 203H37V215H29ZM77 215C79.2091 215 81 213.209 81 211V207C81 204.791 79.2091 203 77 203H69V215H77Z" fill="#635C8F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.7875 196.271C30.2254 194.709 30.2254 192.177 31.7875 190.615L34.616 187.786C36.1781 186.224 38.7107 186.224 40.2728 187.786L45.9297 193.443L37.4444 201.928L31.7875 196.271ZM65.7283 230.212C67.2904 231.775 69.8231 231.775 71.3852 230.212L74.2136 227.384C75.7757 225.822 75.7757 223.289 74.2136 221.727L68.5568 216.07L60.0715 224.556L65.7283 230.212ZM40.2718 230.213C38.7097 231.775 36.177 231.775 34.6149 230.213L31.7865 227.384C30.2244 225.822 30.2244 223.29 31.7865 221.728L37.4434 216.071L45.9286 224.556L40.2718 230.213ZM74.2126 196.272C75.7747 194.71 75.7747 192.177 74.2126 190.615L71.3842 187.787C69.8221 186.224 67.2894 186.224 65.7273 187.787L60.0705 193.443L68.5557 201.929L74.2126 196.272Z" fill="#635C8F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M53 229C64.0457 229 73 220.046 73 209C73 197.954 64.0457 189 53 189C41.9543 189 33 197.954 33 209C33 220.046 41.9543 229 53 229ZM53 217C57.4183 217 61 213.418 61 209C61 204.582 57.4183 201 53 201C48.5817 201 45 204.582 45 209C45 213.418 48.5817 217 53 217Z" fill="#8777C7"/>
<path d="M111 115.5H223V158C223 166.837 215.837 174 207 174H127C118.163 174 111 166.837 111 158V115.5Z" fill="#615A7D"/>
<rect x="123" y="124" width="44" height="8" rx="2" fill="#776E9E"/>
<rect x="123" y="136" width="44" height="8" rx="2" fill="#776E9E"/>
<rect x="123" y="148" width="44" height="8" rx="2" fill="#776E9E"/>
<rect x="183" y="124" width="24" height="44" rx="6" fill="#776D9E"/>
<path d="M111.5 115C111.5 106.44 118.44 99.5 127 99.5H207C215.56 99.5 222.5 106.44 222.5 115V115.5V158C222.5 166.56 215.56 173.5 207 173.5H127C118.44 173.5 111.5 166.56 111.5 158V115.5V115Z" stroke="#7269A8" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="123" cy="107" r="2" fill="#C48BB0"/>
<circle cx="131" cy="107" r="2" fill="#C79B93"/>
<circle cx="139" cy="107" r="2" fill="#776E9E"/>
<path d="M182.111 63.0254L197.474 82.3389C197.778 82.7207 198.313 82.8276 198.74 82.5921L208.677 77.1122C209.363 76.7339 209.367 75.7495 208.684 75.3651L190.686 65.2308C190.471 65.11 190.622 64.7836 190.853 64.8689L214.041 73.4305C214.331 73.5374 214.653 73.5046 214.916 73.3414L221.237 69.4079C222.022 68.9198 221.781 67.7202 220.87 67.5718L183.054 61.4158C182.152 61.2689 181.542 62.3099 182.111 63.0254Z" fill="#9A8FBC"/>
<path d="M215 82.6315V76.7662C215 75.9889 214.152 75.5088 213.486 75.9087L208.855 78.687C208.226 79.0647 208.204 79.9693 208.815 80.3765L213.445 83.4635C214.11 83.9066 215 83.4302 215 82.6315Z" fill="#8073BC"/>
<rect x="55" y="136" width="102" height="102" rx="16" fill="url(#paint0_linear_5321_35748)"/>
<path d="M69 155C55.5 157.667 25.9 157.6 15.5 136" stroke="#58577B" stroke-dasharray="4 4"/>
<path d="M224.304 197.008C222.858 202.338 217.811 205.608 217.342 205.481C216.874 205.353 214.172 199.981 215.618 194.651C217.064 189.321 222.111 186.051 222.579 186.178C223.048 186.305 225.75 191.678 224.304 197.008Z" fill="#74B382"/>
<g style="mix-blend-mode:lighten">
<path fill-rule="evenodd" clip-rule="evenodd" d="M216.155 204.787C216.25 205.263 221.426 208.324 226.842 207.242C227.235 207.164 227.618 207.066 227.991 206.951C227.346 206.411 227.089 205.498 227.419 204.674C227.829 203.648 228.993 203.15 230.019 203.56C230.8 203.873 231.275 204.624 231.276 205.417C234.128 203.607 235.833 201.201 235.768 200.871C235.673 200.396 230.496 197.335 225.08 198.416C219.664 199.498 216.06 204.311 216.155 204.787Z" fill="#89CBAB"/>
</g>
<path d="M220.5 84.5C225.167 86.8333 234.2 93.9 233 103.5C231.5 115.5 218.518 105.982 224.5 100C229.5 95 243.024 107.157 231.624 123.149" stroke="#58577B" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="86.5" y="148.5" width="39" height="39" rx="11.5" stroke="#DFBEFF"/>
<circle cx="106" cy="161" r="6" fill="#FAABFF"/>
<path d="M115.894 179.003C116.014 180.101 115.105 181 114 181C112.176 181 109.271 181 106 181C102.729 181 99.824 181 97.9996 181C96.895 181 95.9858 180.101 96.1057 179.003C96.812 172.536 100.973 169 106 169C111.027 169 115.188 172.536 115.894 179.003Z" fill="#735EAD"/>
<rect x="76" y="196" width="60" height="10" rx="4" fill="#D8C7FF"/>
<rect x="76" y="211" width="60" height="10" rx="4" fill="#EFE9FF" stroke="#69539E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M84 201C84 200.448 84.4477 200 85 200H107C107.552 200 108 200.448 108 201C108 201.552 107.552 202 107 202H85C84.4477 202 84 201.552 84 201ZM112 201C112 200.448 112.448 200 113 200H119C119.552 200 120 200.448 120 201C120 201.552 119.552 202 119 202H113C112.448 202 112 201.552 112 201ZM123 200C122.448 200 122 200.448 122 201C122 201.552 122.448 202 123 202H125C125.552 202 126 201.552 126 201C126 200.448 125.552 200 125 200H123Z" fill="#9877EA"/>
<circle cx="86" cy="216" r="2" fill="#956AFF"/>
<circle cx="94" cy="216" r="2" fill="#956AFF"/>
<circle cx="102" cy="216" r="2" fill="#956AFF"/>
<circle cx="110" cy="216" r="2" fill="#956AFF"/>
<rect x="114" y="213" width="1" height="6" rx="0.5" fill="#FAABFF"/>
<g style="mix-blend-mode:multiply" opacity="0.6">
<path d="M91 215L157 178V238H91V215Z" fill="url(#paint1_linear_5321_35748)"/>
</g>
<rect x="141" y="178" width="60" height="60" rx="12" fill="url(#paint2_linear_5321_35748)"/>
<path d="M171 188H174C176.761 188 179 190.239 179 193C179 195.761 176.761 198 174 198H171V188Z" fill="#FFDAD4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M153 178C146.373 178 141 183.373 141 190V208H151V205C151 202.239 153.239 200 156 200C158.761 200 161 202.239 161 205V208H171V178H153Z" fill="#FFDAD4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M171 208H181V211C181 213.761 183.239 216 186 216C188.761 216 191 213.761 191 211V208H201V226C201 232.627 195.627 238 189 238H171V228H168C165.239 228 163 225.761 163 223C163 220.239 165.239 218 168 218H171V208Z" fill="#A989DF"/>
<path d="M228 238H232.5H236M216.5 238H162.41C162.039 238 161.829 237.573 162.056 237.279L175.71 219.557C180.767 212.994 190.285 211.992 196.598 217.358L198.054 218.596C202.159 222.085 208.087 222.409 212.548 219.387V219.387C217.196 216.238 223.406 216.735 227.494 220.583L245.034 237.091C245.381 237.418 245.15 238 244.674 238H240.5" stroke="#947DFF" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M242.104 168.38C244.95 170.077 248.633 169.146 250.33 166.3C252.028 163.454 251.097 159.771 248.251 158.073C245.405 156.376 241.722 157.307 240.024 160.153C238.327 162.999 239.258 166.682 242.104 168.38ZM243.641 165.803C245.064 166.652 246.905 166.186 247.754 164.763C248.603 163.34 248.137 161.499 246.714 160.65C245.291 159.801 243.45 160.267 242.601 161.69C241.752 163.113 242.218 164.954 243.641 165.803Z" fill="#6E6083"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.9571 119.104C45.9571 119.047 46.0038 119 46.0614 119H47.9389C47.9965 119 48.0432 119.047 48.0432 119.104V122.409L50.9048 120.756C50.9546 120.728 51.0184 120.745 51.0472 120.795L51.986 122.421C52.0148 122.471 51.9977 122.534 51.9478 122.563L49.0862 124.215L51.948 125.868C51.9979 125.896 52.015 125.96 51.9862 126.01L51.0474 127.636C51.0186 127.686 50.9548 127.703 50.9049 127.674L48.0432 126.022V129.326C48.0432 129.384 47.9965 129.431 47.9389 129.431H46.0614C46.0038 129.431 45.9571 129.384 45.9571 129.326V126.022L43.0952 127.674C43.0454 127.703 42.9816 127.686 42.9528 127.636L42.014 126.01C41.9852 125.96 42.0023 125.896 42.0522 125.868L44.9139 124.215L42.0523 122.563C42.0024 122.534 41.9853 122.471 42.0141 122.421L42.9529 120.795C42.9817 120.745 43.0455 120.728 43.0954 120.756L45.9571 122.409V119.104Z" fill="#78767F"/>
<path d="M68.3634 33.1435C69.7938 32.5741 71.3042 33.7668 71.082 35.2903L70.7488 37.5755C70.5266 39.099 68.7385 39.8107 67.5302 38.8565L65.7178 37.4253C64.5095 36.4712 64.7872 34.5668 66.2177 33.9975L68.3634 33.1435Z" fill="#83DA85"/>
<path d="M105.969 38.7044L108.751 38.1928C110.287 37.9103 111.304 36.4358 111.021 34.8995V34.8995C110.739 33.3632 111.755 31.8887 113.292 31.6062V31.6062C114.828 31.3237 115.844 29.8492 115.562 28.3129L115.05 25.5311" stroke="#4A474F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.8026 66.799L15.4022 63.999C15.1811 62.4527 13.7482 61.3784 12.2019 61.5995V61.5995C10.6555 61.8207 9.22264 60.7464 9.00149 59.2V59.2C8.78035 57.6536 7.3475 56.5793 5.80114 56.8005L3.0012 57.2009" stroke="#52514B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M73.9995 48.5C73.9995 54.5 73.9995 67 73.9995 69C73.9995 71.5 75.4995 72.5 73.9995 77.5C72.4995 82.5 75.9995 83.5 75.4995 85.5C74.9995 87.5 71.998 89.5 73.498 95.5" stroke="#636063" stroke-linecap="round"/>
<path d="M73.1962 49.5C73.5811 48.8333 74.5433 48.8333 74.9282 49.5L78.5622 55.7942C79.2565 56.9968 78.3886 58.5 77 58.5L75.5627 58.1407C75.1996 58.0499 74.816 58.092 74.4812 58.2594C74.1693 58.4153 73.8144 58.4629 73.4725 58.3945L72.3325 58.1665C71.7815 58.0563 71.2075 58.0418 70.6512 58.1213C69.5862 58.2734 68.788 57.1351 69.3259 56.2034L73.1962 49.5Z" fill="#B586B7"/>
<path d="M94 26.7692C94 38.2398 85.0457 52.9231 74 52.9231C62.9543 52.9231 54 38.2398 54 26.7692C54 15.2987 62.9543 6 74 6C85.0457 6 94 15.2987 94 26.7692Z" fill="#CFA4D1"/>
<path d="M80.5807 12.8061C81.0712 13.2628 81.6215 13.8381 82.1948 14.5168M87.4138 33.2832C88.9204 27.6296 87.1579 22.2395 84.8227 18.2454C84.5735 17.8191 84.3178 17.4088 84.0588 17.0157C83.9092 16.7887 83.7585 16.5674 83.6074 16.3521" stroke="#FEF2FF" stroke-linecap="round"/>
<path d="M37.4984 108.5C41.0023 103 42 101.5 39.4999 98.5C38.1801 96.9163 36.4999 95.5 37.9999 90.5C39.4999 85.5 36.5 86.5 37.9999 82C39 79.5 37.9999 74.9 37.9999 74.5" stroke="#626067" stroke-linecap="round"/>
<path d="M37.4286 70.9897C37.6825 70.5499 38.3175 70.5499 38.5714 70.9897L40.9692 75.1429C41.4274 75.9363 40.8547 76.9282 39.9385 76.9282L38.9901 76.6911C38.7505 76.6312 38.4974 76.659 38.2765 76.7695C38.0707 76.8723 37.8365 76.9037 37.6109 76.8586L36.8587 76.7081C36.4951 76.6354 36.1164 76.6259 35.7494 76.6783C35.0466 76.7787 34.5199 76.0276 34.8749 75.4128L37.4286 70.9897Z" fill="#68A973"/>
<path d="M52 55.5385C52 63.5678 45.732 73.8462 38 73.8462C30.268 73.8462 24 63.5678 24 55.5385C24 47.5091 30.268 41 38 41C45.732 41 52 47.5091 52 55.5385Z" fill="#86BF8F"/>
<path d="M43.3121 47C43.6186 47.3065 43.9645 47.7166 44.3125 48.2167M45.8121 59C46.8975 55.9609 46.5594 53.177 45.7567 51C45.6205 50.6304 45.4708 50.2784 45.3125 49.9455" stroke="#F7F4FF" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_5321_35748" x1="106" y1="136" x2="65" y2="238" gradientUnits="userSpaceOnUse">
<stop stop-color="#A089E1"/>
<stop offset="1" stop-color="#816DB9"/>
</linearGradient>
<linearGradient id="paint1_linear_5321_35748" x1="159.5" y1="192" x2="98.5" y2="232" gradientUnits="userSpaceOnUse">
<stop stop-color="#9C79E0"/>
<stop offset="1" stop-color="#BE9BFF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_5321_35748" x1="192" y1="181" x2="144.5" y2="238" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFBDE5"/>
<stop offset="1" stop-color="#FAA5FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

70
packages/console/src/assets/images/users-empty.svg Normal file
View file

@ -0,0 +1,70 @@
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M251 237H5.5L25.2124 207.625C28.8297 202.234 34.8948 199 41.3866 199H42.0675C45.2902 199 48.4475 199.91 51.1761 201.625C58.7086 206.36 68.6126 204.534 73.9617 197.424L97.3797 166.299C101.548 160.759 108.078 157.5 115.011 157.5C120.173 157.5 125.172 159.31 129.137 162.614L135.769 168.141C144.274 175.229 156.353 176.102 165.789 170.311C169.85 167.819 174.522 166.5 179.287 166.5H180.184C192.623 166.5 203.676 174.438 207.649 186.226L212.721 201.271C214.68 207.085 220.132 211 226.267 211C231.092 211 235.591 213.434 238.232 217.472L251 237Z" fill="#D2CCDD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47 185C47 182.79 48.7909 181 51 181H55C57.2091 181 59 182.79 59 185V193H47V185ZM47 233C47 235.209 48.7909 237 51 237H55C57.2091 237 59 235.209 59 233V225H47V233ZM29 215C26.7909 215 25 213.209 25 211V207C25 204.79 26.7909 203 29 203H37V215H29ZM77 215C79.2091 215 81 213.209 81 211V207C81 204.79 79.2091 203 77 203H69V215H77Z" fill="#ADAAB4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.7875 196.271C30.2254 194.709 30.2254 192.177 31.7875 190.615L34.616 187.786C36.1781 186.224 38.7107 186.224 40.2728 187.786L45.9297 193.443L37.4444 201.928L31.7875 196.271ZM65.7283 230.212C67.2904 231.775 69.8231 231.775 71.3852 230.212L74.2136 227.384C75.7757 225.822 75.7757 223.289 74.2136 221.727L68.5568 216.07L60.0715 224.556L65.7283 230.212ZM40.2718 230.213C38.7097 231.775 36.177 231.775 34.6149 230.213L31.7865 227.384C30.2244 225.822 30.2244 223.29 31.7865 221.728L37.4434 216.071L45.9286 224.556L40.2718 230.213ZM74.2126 196.272C75.7747 194.71 75.7747 192.177 74.2126 190.615L71.3842 187.787C69.8221 186.224 67.2894 186.224 65.7273 187.787L60.0705 193.443L68.5557 201.929L74.2126 196.272Z" fill="#ADAAB4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M53 229C64.0457 229 73 220.045 73 209C73 197.954 64.0457 189 53 189C41.9543 189 33 197.954 33 209C33 220.045 41.9543 229 53 229ZM53 217C57.4183 217 61 213.418 61 209C61 204.581 57.4183 201 53 201C48.5817 201 45 204.581 45 209C45 213.418 48.5817 217 53 217Z" fill="#5F5D67"/>
<path d="M111 115.5H223V158C223 166.837 215.837 174 207 174H127C118.163 174 111 166.837 111 158V115.5Z" fill="#F5EEFF"/>
<rect x="123" y="124" width="44" height="8" rx="2" fill="#E1CEE8"/>
<rect x="123" y="136" width="44" height="8" rx="2" fill="#E1CEE8"/>
<rect x="123" y="148" width="44" height="8" rx="2" fill="#E1CEE8"/>
<rect x="183" y="124" width="24" height="44" rx="6" fill="#E1CEE8"/>
<path d="M215.75 115C215.474 115 215.25 115.224 215.25 115.5C215.25 115.776 215.474 116 215.75 116H222.5V158C222.5 166.56 215.56 173.5 207 173.5H127C118.44 173.5 111.5 166.56 111.5 158V116H190H202.5H205.5C205.776 116 206 115.776 206 115.5C206 115.224 205.776 115 205.5 115H202.5H190H111.5C111.5 106.44 118.44 99.5 127 99.5H207C215.56 99.5 222.5 106.44 222.5 115H215.75Z" stroke="#C9C5D0" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="123" cy="107" r="2" fill="#D9D9D9"/>
<circle cx="131" cy="107" r="2" fill="#D9D9D9"/>
<circle cx="139" cy="107" r="2" fill="#D9D9D9"/>
<path d="M182.111 63.0254L197.474 82.3389C197.778 82.7207 198.313 82.8276 198.74 82.5921L208.677 77.1122C209.363 76.7339 209.367 75.7495 208.684 75.3651L190.686 65.2308C190.471 65.11 190.622 64.7836 190.853 64.8689L214.041 73.4305C214.331 73.5374 214.653 73.5046 214.916 73.3414L221.237 69.4079C222.022 68.9198 221.781 67.7202 220.87 67.5718L183.054 61.4158C182.152 61.2689 181.542 62.3099 182.111 63.0254Z" fill="#AD93FF"/>
<path d="M215 84.1988V76.7662C215 75.9889 214.152 75.5088 213.486 75.9087L208.638 78.8171C208.068 79.1592 207.984 79.952 208.47 80.4056L213.318 84.9298C213.957 85.5264 215 85.0732 215 84.1988Z" fill="#795FF2"/>
<rect x="55" y="136" width="102" height="102" rx="16" fill="url(#paint0_linear_5320_34929)"/>
<path d="M69 155C55.5 157.667 25.9 157.6 15.5 136" stroke="#A782E8" stroke-dasharray="4 4"/>
<path d="M224.304 197.008C222.858 202.338 217.811 205.608 217.342 205.481C216.874 205.353 214.172 199.981 215.618 194.651C217.064 189.321 222.111 186.051 222.579 186.178C223.048 186.305 225.75 191.678 224.304 197.008Z" fill="#83DA85"/>
<g style="mix-blend-mode:multiply">
<path fill-rule="evenodd" clip-rule="evenodd" d="M216.155 204.787C216.25 205.263 221.426 208.323 226.842 207.242C227.235 207.163 227.618 207.065 227.991 206.951C227.346 206.411 227.089 205.497 227.419 204.673C227.829 203.648 228.993 203.15 230.019 203.56C230.8 203.873 231.275 204.623 231.276 205.416C234.128 203.607 235.833 201.2 235.768 200.871C235.673 200.395 230.496 197.335 225.08 198.416C219.664 199.497 216.06 204.311 216.155 204.787Z" fill="#9FE79F"/>
</g>
<path d="M220.5 84.5C225.167 86.8333 234.2 93.9 233 103.5C231.5 115.5 218.518 105.982 224.5 100C229.5 95 243.024 107.157 231.624 123.149" stroke="#A782E8" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="86.5" y="148.5" width="39" height="39" rx="11.5" stroke="#DFBEFF"/>
<circle cx="106" cy="161" r="6" fill="#FFB95A"/>
<path d="M115.894 179.003C116.014 180.101 115.105 181 114 181C112.176 181 109.271 181 106 181C102.729 181 99.824 181 97.9996 181C96.895 181 95.9858 180.101 96.1057 179.003C96.812 172.536 100.973 169 106 169C111.027 169 115.188 172.536 115.894 179.003Z" fill="#6F45E6"/>
<rect x="76" y="196" width="60" height="10" rx="4" fill="#D8C7FF"/>
<rect x="76" y="211" width="60" height="10" rx="4" fill="#EFE9FF" stroke="#815AE3"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M84 201C84 200.448 84.4477 200 85 200H107C107.552 200 108 200.448 108 201C108 201.552 107.552 202 107 202H85C84.4477 202 84 201.552 84 201ZM112 201C112 200.448 112.448 200 113 200H119C119.552 200 120 200.448 120 201C120 201.552 119.552 202 119 202H113C112.448 202 112 201.552 112 201ZM123 200C122.448 200 122 200.448 122 201C122 201.552 122.448 202 123 202H125C125.552 202 126 201.552 126 201C126 200.448 125.552 200 125 200H123Z" fill="#9877EA"/>
<circle cx="86" cy="216" r="2" fill="#956AFF"/>
<circle cx="94" cy="216" r="2" fill="#956AFF"/>
<circle cx="102" cy="216" r="2" fill="#956AFF"/>
<circle cx="110" cy="216" r="2" fill="#956AFF"/>
<rect x="114" y="213" width="1" height="6" rx="0.5" fill="#FAABFF"/>
<g style="mix-blend-mode:multiply" opacity="0.6">
<path d="M91 215L157 178V238H91V215Z" fill="url(#paint1_linear_5320_34929)"/>
</g>
<rect x="141" y="178" width="60" height="60" rx="12" fill="url(#paint2_linear_5320_34929)"/>
<path d="M171 188H174C176.761 188 179 190.239 179 193V193C179 195.761 176.761 198 174 198H171V188Z" fill="#FFDAD4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M153 178C146.373 178 141 183.373 141 190V208H151V205C151 202.239 153.239 200 156 200C158.761 200 161 202.239 161 205V208H171V178H153Z" fill="#FFDAD4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M171 208H181V211C181 213.761 183.239 216 186 216C188.761 216 191 213.761 191 211V208H201V226C201 232.627 195.627 238 189 238H171V228H168C165.239 228 163 225.761 163 223C163 220.239 165.239 218 168 218H171V208Z" fill="#B990FE"/>
<path d="M228 238H232.5H236M216.5 238H162.41C162.039 238 161.829 237.573 162.056 237.279L175.71 219.557C180.767 212.994 190.285 211.992 196.598 217.358L198.054 218.596C202.159 222.085 208.087 222.409 212.548 219.387V219.387C217.196 216.238 223.406 216.735 227.494 220.583L245.034 237.091C245.381 237.418 245.15 238 244.674 238H240.5" stroke="#947DFF" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M242.104 168.38C244.95 170.077 248.633 169.146 250.33 166.3C252.028 163.454 251.097 159.771 248.251 158.073C245.405 156.376 241.722 157.307 240.024 160.153C238.327 162.999 239.258 166.682 242.104 168.38ZM243.641 165.803C245.064 166.652 246.905 166.186 247.754 164.763C248.603 163.34 248.137 161.499 246.714 160.65C245.291 159.801 243.449 160.267 242.601 161.69C241.752 163.113 242.218 164.954 243.641 165.803Z" fill="#F5EEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.9572 119.104C45.9572 119.047 46.0039 119 46.0615 119H47.939C47.9966 119 48.0433 119.047 48.0433 119.104V122.409L50.9049 120.756C50.9548 120.728 51.0186 120.745 51.0474 120.795L51.9862 122.421C52.015 122.471 51.9979 122.534 51.948 122.563L49.0862 124.215L51.9478 125.868C51.9977 125.896 52.0148 125.96 51.986 126.01L51.0472 127.636C51.0184 127.686 50.9546 127.703 50.9047 127.674L48.0433 126.022V129.326C48.0433 129.384 47.9966 129.431 47.939 129.431H46.0615C46.0039 129.431 45.9572 129.384 45.9572 129.326V126.022L43.0954 127.674C43.0455 127.703 42.9817 127.686 42.9529 127.636L42.0142 126.01C41.9854 125.96 42.0025 125.896 42.0523 125.868L44.9139 124.215L42.0521 122.563C42.0022 122.534 41.9851 122.471 42.0139 122.421L42.9527 120.795C42.9815 120.745 43.0453 120.728 43.0952 120.756L45.9572 122.409V119.104Z" fill="#E5E1EC"/>
<path d="M68.3634 33.1435C69.7938 32.5741 71.3042 33.7668 71.082 35.2903L70.7488 37.5755C70.5266 39.099 68.7385 39.8107 67.5302 38.8565L65.7178 37.4253C64.5095 36.4712 64.7872 34.5668 66.2177 33.9975L68.3634 33.1435Z" fill="#83DA85"/>
<path d="M105.969 38.7044L108.751 38.1928C110.287 37.9103 111.304 36.4358 111.021 34.8995V34.8995C110.739 33.3632 111.755 31.8887 113.291 31.6062V31.6062C114.828 31.3237 115.844 29.8492 115.562 28.3129L115.05 25.5311" stroke="#F5EEFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.8026 66.7985L15.4022 63.9986C15.1811 62.4522 13.7482 61.3779 12.2019 61.599V61.599C10.6555 61.8202 9.22264 60.7459 9.00149 59.1995V59.1995C8.78035 57.6531 7.3475 56.5788 5.80114 56.8L3.0012 57.2004" stroke="#FFF06A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M73.9995 48.5C73.9995 54.5 73.9995 67 73.9995 69C73.9995 71.5 75.4995 72.5 73.9995 77.5C72.4995 82.5 75.9995 83.5 75.4995 85.5C74.9995 87.5 71.998 89.5 73.498 95.5" stroke="#D1CADE" stroke-linecap="round"/>
<path d="M73.1962 49.5C73.5811 48.8333 74.5433 48.8333 74.9282 49.5L78.5622 55.7942C79.2565 56.9968 78.3886 58.5 77 58.5V58.5L75.5627 58.1407C75.1996 58.0499 74.816 58.092 74.4812 58.2594V58.2594C74.1693 58.4153 73.8144 58.4629 73.4725 58.3945L72.3325 58.1665C71.7815 58.0563 71.2075 58.0418 70.6512 58.1213V58.1213C69.5862 58.2734 68.788 57.1351 69.3259 56.2034L73.1962 49.5Z" fill="#DEA0E1"/>
<path d="M94 26.7692C94 38.2398 85.0457 52.9231 74 52.9231C62.9543 52.9231 54 38.2398 54 26.7692C54 15.2987 62.9543 6 74 6C85.0457 6 94 15.2987 94 26.7692Z" fill="#F4B4FF"/>
<path d="M80.5807 12.8057C81.0712 13.2623 81.6215 13.8377 82.1948 14.5163M87.4138 33.2827C88.9204 27.6291 87.1579 22.239 84.8227 18.2449C84.5735 17.8187 84.3178 17.4083 84.0588 17.0152C83.9092 16.7882 83.7585 16.5669 83.6074 16.3516" stroke="#FEF2FF" stroke-linecap="round"/>
<path d="M37.4984 108.5C41.0023 103 42 101.5 39.4999 98.5C38.1801 96.9163 36.4999 95.5 37.9999 90.5C39.4999 85.5 36.5 86.5 37.9999 82C39 79.5 37.9999 74.9 37.9999 74.5" stroke="#D1CADE" stroke-linecap="round"/>
<path d="M37.4286 70.9897C37.6825 70.5499 38.3175 70.5499 38.5714 70.9897L40.9692 75.1429C41.4274 75.9363 40.8547 76.9282 39.9385 76.9282V76.9282L38.9901 76.6911C38.7505 76.6312 38.4974 76.659 38.2765 76.7695V76.7695C38.0707 76.8723 37.8365 76.9037 37.6109 76.8586L36.8587 76.7081C36.4951 76.6354 36.1164 76.6259 35.7494 76.6783V76.6783C35.0466 76.7787 34.5199 76.0276 34.8749 75.4128L37.4286 70.9897Z" fill="#71C171"/>
<path d="M52 55.5385C52 63.5678 45.732 73.8462 38 73.8462C30.268 73.8462 24 63.5678 24 55.5385C24 47.5091 30.268 41 38 41C45.732 41 52 47.5091 52 55.5385Z" fill="#83DA85"/>
<path d="M43.3121 47C43.6186 47.3065 43.9645 47.7166 44.3125 48.2167M45.8121 59C46.8975 55.9609 46.5594 53.177 45.7567 51C45.6205 50.6304 45.4708 50.2784 45.3125 49.9455" stroke="#F7F4FF" stroke-linecap="round"/>
<defs>
<linearGradient id="paint0_linear_5320_34929" x1="106" y1="136" x2="65" y2="238" gradientUnits="userSpaceOnUse">
<stop stop-color="#C39EFF"/>
<stop offset="1" stop-color="#906FEF"/>
</linearGradient>
<linearGradient id="paint1_linear_5320_34929" x1="159.5" y1="192" x2="98.5" y2="232" gradientUnits="userSpaceOnUse">
<stop stop-color="#9C79E0"/>
<stop offset="1" stop-color="#BE9BFF" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint2_linear_5320_34929" x1="192" y1="181" x2="144.5" y2="238" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFBDE5"/>
<stop offset="1" stop-color="#FAA5FF"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

2
packages/console/src/components/AuditLogTable/index.tsx
View file

@ -12,6 +12,7 @@ import type { RequestError } from '@/hooks/use-api';
import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
import { buildUrl } from '@/utils/url';
import EmptyDataPlaceholder from '../EmptyDataPlaceholder';
import Table from '../Table';
import type { Column } from '../Table/types';
import ApplicationSelector from './components/ApplicationSelector';
@ -117,6 +118,7 @@ const AuditLogTable = ({ userId, className }: Props) => {
</div>
</div>
}
placeholder={<EmptyDataPlaceholder />}
pagination={{
page,
totalCount,

39
packages/console/src/components/DataEmpty/index.tsx
View file

@ -1,39 +0,0 @@
import { AppearanceMode } from '@logto/schemas';
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import EmptyDark from '@/assets/images/table-empty-dark.svg';
import Empty from '@/assets/images/table-empty.svg';
import { useTheme } from '@/hooks/use-theme';
import * as styles from './index.module.scss';
export type Props = {
title?: string;
description?: string;
image?: ReactNode;
children?: ReactNode;
imageClassName?: string;
};
const DataEmpty = ({ title, description, image, imageClassName, children }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const theme = useTheme();
return (
<div className={styles.empty}>
{image ??
(theme === AppearanceMode.LightMode ? (
<Empty className={imageClassName} />
) : (
<EmptyDark className={imageClassName} />
))}
<div className={styles.title}>{title ?? t('errors.empty')}</div>
{description && <div className={styles.description}>{description}</div>}
{children}
</div>
);
};
export default DataEmpty;

23
packages/console/src/components/DataEmpty/index.module.scss → packages/console/src/components/EmptyDataPlaceholder/index.module.scss
View file

@ -16,4 +16,27 @@
color: var(--color-neutral-50);
margin-bottom: _.unit(2);
}
&.large {
.image {
width: 256px;
height: 256px;
margin-bottom: _.unit(6);
}
}
&.medium {
.image {
width: 200px;
height: 200px;
margin-bottom: _.unit(6);
}
}
&.small {
.image {
width: 128px;
height: 128px;
}
}
}

29
packages/console/src/components/EmptyDataPlaceholder/index.tsx Normal file
View file

@ -0,0 +1,29 @@
import { AppearanceMode } from '@logto/schemas';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import EmptyDark from '@/assets/images/table-empty-dark.svg';
import Empty from '@/assets/images/table-empty.svg';
import { useTheme } from '@/hooks/use-theme';
import * as styles from './index.module.scss';
export type Props = {
title?: string;
size?: 'large' | 'medium' | 'small';
};
const EmptyDataPlaceholder = ({ title, size = 'medium' }: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const theme = useTheme();
const EmptyImage = theme === AppearanceMode.LightMode ? Empty : EmptyDark;
return (
<div className={classNames(styles.empty, styles[size])}>
<EmptyImage className={styles.image} />
<div className={styles.title}>{title ?? t('errors.empty')}</div>
</div>
);
};
export default EmptyDataPlaceholder;

41
packages/console/src/components/PermissionsTable/index.tsx
View file

@ -4,6 +4,8 @@ import { conditional } from '@silverhand/essentials';
import { useTranslation } from 'react-i18next';
import Delete from '@/assets/images/delete.svg';
import PermissionsEmptyDark from '@/assets/images/permissions-empty-dark.svg';
import PermissionsEmpty from '@/assets/images/permissions-empty.svg';
import Plus from '@/assets/images/plus.svg';
import Button from '@/components/Button';
import IconButton from '@/components/IconButton';
@ -13,8 +15,11 @@ import type { Column } from '@/components/Table/types';
import TextLink from '@/components/TextLink';
import { Tooltip } from '@/components/Tip';
import { ApiResourceDetailsTabs } from '@/consts/page-tabs';
import useDocumentationUrl from '@/hooks/use-documentation-url';
import EmptyDataPlaceholder from '../EmptyDataPlaceholder';
import type { Props as PaginationProps } from '../Pagination';
import TablePlaceholder from '../Table/TablePlaceholder';
import * as styles from './index.module.scss';
type SearchProps = {
@ -31,6 +36,7 @@ type Props = {
deleteButtonTitle?: AdminConsoleKey;
isReadOnly?: boolean;
isApiColumnVisible?: boolean;
isCreateGuideVisible?: boolean;
pagination?: PaginationProps;
search: SearchProps;
createHandler: () => void;
@ -46,6 +52,7 @@ const PermissionsTable = ({
deleteButtonTitle = 'general.delete',
isReadOnly = false,
isApiColumnVisible = false,
isCreateGuideVisible = false,
pagination,
search: { keyword, searchHandler, clearSearchHandler },
createHandler,
@ -53,6 +60,7 @@ const PermissionsTable = ({
retryHandler,
}: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { getDocumentationUrl } = useDocumentationUrl();
const nameColumn: Column<ScopeResponse> = {
title: t('permissions.name_column'),
@ -146,17 +154,30 @@ const PermissionsTable = ({
}
isLoading={isLoading}
pagination={pagination}
placeholder={{
content: isReadOnly ? undefined : (
<Button
title={createButtonTitle}
type="outline"
onClick={() => {
createHandler();
}}
placeholder={
!isReadOnly && isCreateGuideVisible ? (
<TablePlaceholder
image={<PermissionsEmpty />}
imageDark={<PermissionsEmptyDark />}
title="permissions.placeholder_title"
description="permissions.placeholder_description"
learnMoreLink={getDocumentationUrl('/docs/recipes/rbac/manage-permissions-and-roles')}
action={
<Button
title={createButtonTitle}
type="primary"
size="large"
icon={<Plus />}
onClick={() => {
createHandler();
}}
/>
}
/>
),
}}
) : (
<EmptyDataPlaceholder />
)
}
errorMessage={errorMessage}
onRetry={retryHandler}
/>

5
packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.module.scss
View file

@ -5,8 +5,3 @@
.icon {
color: var(--color-text-secondary);
}
.emptyImage {
width: 128px;
height: 128px;
}

7
packages/console/src/components/RoleScopesTransfer/components/SourceScopesBox/index.tsx
View file

@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
import useSWR from 'swr';
import Search from '@/assets/images/search.svg';
import DataEmpty from '@/components/DataEmpty';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import type { DetailedResourceResponse } from '@/components/RoleScopesTransfer/types';
import TextInput from '@/components/TextInput';
import type { RequestError } from '@/hooks/use-api';
@ -136,10 +136,7 @@ const SourceScopesBox = ({ roleId, selectedScopes, onChange }: Props) => {
className={classNames(transferLayout.boxContent, isEmpty && transferLayout.emptyBoxContent)}
>
{isEmpty ? (
<DataEmpty
imageClassName={styles.emptyImage}
title={t('role_details.permission.empty')}
/>
<EmptyDataPlaceholder size="small" title={t('role_details.permission.empty')} />
) : (
dataSource.map((resource) => (
<ResourceItem

5
packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.module.scss
View file

@ -5,8 +5,3 @@
.icon {
color: var(--color-text-secondary);
}
.emptyImage {
width: 128px;
height: 128px;
}

4
packages/console/src/components/RoleUsersTransfer/components/SourceUsersBox/index.tsx
View file

@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
import useSWR from 'swr';
import Search from '@/assets/images/search.svg';
import DataEmpty from '@/components/DataEmpty';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import Pagination from '@/components/Pagination';
import TextInput from '@/components/TextInput';
import { defaultPageSize } from '@/consts';
@ -71,7 +71,7 @@ const SourceUsersBox = ({ roleId, selectedUsers, onChange }: Props) => {
className={classNames(transferLayout.boxContent, isEmpty && transferLayout.emptyBoxContent)}
>
{isEmpty ? (
<DataEmpty imageClassName={styles.emptyImage} title={t('role_details.users.empty')} />
<EmptyDataPlaceholder size="small" title={t('role_details.users.empty')} />
) : (
dataSource.map((user) => {
const isSelected = isUserAdded(user);

3
packages/console/src/components/Table/TableEmpty.module.scss
View file

@ -1,3 +0,0 @@
.tableEmptyTableData {
border-bottom: unset;
}

18
packages/console/src/components/Table/TableEmpty.tsx
View file

@ -1,18 +0,0 @@
import DataEmpty from '@/components/DataEmpty';
import type { Props as DataEmptyProps } from '@/components/DataEmpty';
import * as styles from './TableEmpty.module.scss';
type Props = DataEmptyProps & {
columns: number;
};
const TableEmpty = ({ columns, ...emptyProps }: Props) => (
<tr>
<td colSpan={columns} className={styles.tableEmptyTableData}>
<DataEmpty {...emptyProps} />
</td>
</tr>
);
export default TableEmpty;

14
packages/console/src/components/Table/TableEmptyWrapper.module.scss Normal file
View file

@ -0,0 +1,14 @@
@use '@/scss/underscore' as _;
.tableEmptyWrapper {
border-bottom: unset;
.content {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: _.unit(25);
}
}

18
packages/console/src/components/Table/TableEmptyWrapper.tsx Normal file
View file

@ -0,0 +1,18 @@
import type { ReactNode } from 'react';
import * as styles from './TableEmptyWrapper.module.scss';
type Props = {
columns: number;
children: ReactNode;
};
const TableEmptyWrapper = ({ columns, children }: Props) => (
<tr>
<td colSpan={columns} className={styles.tableEmptyWrapper}>
<div className={styles.content}>{children}</div>
</td>
</tr>
);
export default TableEmptyWrapper;

30
packages/console/src/components/Table/TablePlaceholder.module.scss Normal file
View file

@ -0,0 +1,30 @@
@use '@/scss/underscore' as _;
.placeholder {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
.image {
> svg {
width: 200px;
height: 200px;
}
}
.title {
font: var(--font-label-2);
}
.description {
max-width: 310px;
font: var(--font-body-2);
color: var(--color-text-secondary);
margin-top: _.unit(1);
}
.action {
margin-top: _.unit(6);
}
}

51
packages/console/src/components/Table/TablePlaceholder.tsx Normal file
View file

@ -0,0 +1,51 @@
import type { AdminConsoleKey } from '@logto/phrases';
import { AppearanceMode } from '@logto/schemas';
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { useTheme } from '@/hooks/use-theme';
import TextLink from '../TextLink';
import * as styles from './TablePlaceholder.module.scss';
type Props = {
image: ReactNode;
imageDark: ReactNode;
title: AdminConsoleKey;
description: AdminConsoleKey;
learnMoreLink?: string;
action: ReactNode;
};
const TablePlaceholder = ({
image,
imageDark,
title,
description,
learnMoreLink,
action,
}: Props) => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const theme = useTheme();
return (
<div className={styles.placeholder}>
<div className={styles.image}>{theme === AppearanceMode.LightMode ? image : imageDark}</div>
<div className={styles.title}>{t(title)}</div>
<div className={styles.description}>
{t(description)}
{learnMoreLink && (
<>
{' '}
<TextLink href={learnMoreLink} target="_blank" rel="noopener">
{t('general.learn_more')}
</TextLink>
</>
)}
</div>
{action && <div className={styles.action}>{action}</div>}
</div>
);
};
export default TablePlaceholder;

12
packages/console/src/components/Table/index.module.scss
View file

@ -72,6 +72,18 @@
}
}
}
&.empty {
height: 100%;
table {
height: 100%;
tbody {
height: 100%;
}
}
}
}
tr.hoverEffect:hover {

34
packages/console/src/components/Table/index.tsx
View file

@ -8,19 +8,12 @@ import type { Props as PaginationProps } from '@/components/Pagination';
import Pagination from '@/components/Pagination';
import OverlayScrollbar from '../OverlayScrollbar';
import TableEmpty from './TableEmpty';
import TableEmptyWrapper from './TableEmptyWrapper';
import TableError from './TableError';
import TableLoading from './TableLoading';
import * as styles from './index.module.scss';
import type { Column, RowGroup } from './types';
export type TablePlaceholder = {
title?: string;
description?: string;
image?: ReactNode;
content?: ReactNode;
};
type Props<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@ -37,7 +30,7 @@ type Props<
bodyClassName?: string;
isLoading?: boolean;
pagination?: PaginationProps;
placeholder?: TablePlaceholder;
placeholder?: ReactNode;
errorMessage?: string;
hasBorder?: boolean;
onRetry?: () => void;
@ -69,6 +62,9 @@ const Table = <
}, 0);
const hasData = rowGroups.some(({ data }) => data?.length);
const hasError = !isLoading && !hasData && errorMessage;
const isEmpty = !isLoading && !hasData && !errorMessage;
const isLoaded = !isLoading && hasData;
return (
<div className={classNames(styles.container, className)}>
@ -95,27 +91,21 @@ const Table = <
</tr>
</thead>
</table>
<OverlayScrollbar className={classNames(styles.bodyTable, bodyClassName)}>
<OverlayScrollbar
className={classNames(styles.bodyTable, isEmpty && styles.empty, bodyClassName)}
>
<table>
<tbody>
{isLoading && (
<TableLoading columnSpans={columns.map(({ colSpan }) => colSpan ?? 1)} />
)}
{!isLoading && !hasData && errorMessage && (
{hasError && (
<TableError columns={columns.length} content={errorMessage} onRetry={onRetry} />
)}
{!isLoading && !hasData && !errorMessage && (
<TableEmpty
columns={columns.length}
title={placeholder?.title}
description={placeholder?.description}
image={placeholder?.image}
>
{placeholder?.content}
</TableEmpty>
{isEmpty && (
<TableEmptyWrapper columns={columns.length}>{placeholder}</TableEmptyWrapper>
)}
{!isLoading &&
hasData &&
{isLoaded &&
rowGroups.map(({ key, label, labelClassName, data }) => (
<Fragment key={key}>
{label && (

4
packages/console/src/components/UserRolesTransfer/components/SourceRolesBox/index.tsx
View file

@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
import useSWR from 'swr';
import Search from '@/assets/images/search.svg';
import DataEmpty from '@/components/DataEmpty';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import Pagination from '@/components/Pagination';
import TextInput from '@/components/TextInput';
import { defaultPageSize } from '@/consts';
@ -74,7 +74,7 @@ const SourceRolesBox = ({ userId, selectedRoles, onChange }: Props) => {
className={classNames(transferLayout.boxContent, isEmpty && transferLayout.emptyBoxContent)}
>
{isEmpty ? (
<DataEmpty imageClassName={styles.emptyImage} title={t('user_details.roles.empty')} />
<EmptyDataPlaceholder size="small" title={t('user_details.roles.empty')} />
) : (
dataSource.map((role) => {
const isSelected = isRoleSelected(role);

1
packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/index.tsx
View file

@ -69,6 +69,7 @@ const ApiResourcePermissions = () => {
return (
<>
<PermissionsTable
isCreateGuideVisible
scopes={scopes}
isLoading={isLoading}
isReadOnly={isLogtoManagementApiResource}

16
packages/console/src/pages/ApiResources/index.tsx
View file

@ -12,6 +12,7 @@ import Plus from '@/assets/images/plus.svg';
import Button from '@/components/Button';
import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import ItemPreview from '@/components/ItemPreview';
import Pagination from '@/components/Pagination';
import Table from '@/components/Table';
@ -128,20 +129,7 @@ const ApiResources = () => {
render: ({ indicator }) => <CopyToClipboard value={indicator} variant="text" />,
},
]}
placeholder={{
content: (
<Button
title="api_resources.create"
type="outline"
onClick={() => {
navigate({
pathname: createApiResourcePathname,
search,
});
}}
/>
),
}}
placeholder={<EmptyDataPlaceholder />}
rowClickHandler={({ id }) => {
navigate(buildDetailsPathname(id));
}}

10
packages/console/src/pages/Applications/index.tsx
View file

@ -10,6 +10,7 @@ import ApplicationIcon from '@/components/ApplicationIcon';
import Button from '@/components/Button';
import CardTitle from '@/components/CardTitle';
import CopyToClipboard from '@/components/CopyToClipboard';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import ItemPreview from '@/components/ItemPreview';
import Pagination from '@/components/Pagination';
import Table from '@/components/Table';
@ -120,8 +121,9 @@ const Applications = () => {
render: ({ id }) => <CopyToClipboard value={id} variant="text" />,
},
]}
placeholder={{
content: (
placeholder={
<>
<EmptyDataPlaceholder />
<Button
title="applications.create"
type="outline"
@ -132,8 +134,8 @@ const Applications = () => {
});
}}
/>
),
}}
</>
}
rowClickHandler={({ id }) => {
navigate(buildDetailsPathname(id));
}}

51
packages/console/src/pages/Connectors/index.tsx
View file

@ -1,4 +1,4 @@
import { AppearanceMode, ConnectorType } from '@logto/schemas';
import { ConnectorType } from '@logto/schemas';
import { conditional } from '@silverhand/essentials';
import classNames from 'classnames';
import { useMemo } from 'react';
@ -11,12 +11,12 @@ import SocialConnectorEmpty from '@/assets/images/social-connector-empty.svg';
import Button from '@/components/Button';
import CardTitle from '@/components/CardTitle';
import TabNav, { TabNavItem } from '@/components/TabNav';
import type { TablePlaceholder } from '@/components/Table';
import Table from '@/components/Table';
import TablePlaceholder from '@/components/Table/TablePlaceholder';
import { defaultEmailConnectorGroup, defaultSmsConnectorGroup } from '@/consts';
import { ConnectorsTabs } from '@/consts/page-tabs';
import useConnectorGroups from '@/hooks/use-connector-groups';
import { useTheme } from '@/hooks/use-theme';
import useDocumentationUrl from '@/hooks/use-documentation-url';
import * as resourcesStyles from '@/scss/resources.module.scss';
import ConnectorName from './components/ConnectorName';
@ -49,10 +49,9 @@ const Connectors = () => {
const navigate = useNavigate();
const isSocial = tab === ConnectorsTabs.Social;
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { getDocumentationUrl } = useDocumentationUrl();
const { data, error, mutate } = useConnectorGroups();
const isLoading = !data && !error;
const theme = useTheme();
const isLightMode = theme === AppearanceMode.LightMode;
const passwordlessConnectors = useMemo(() => {
const smsConnector =
@ -71,23 +70,6 @@ const Connectors = () => {
const connectors = isSocial ? socialConnectors : passwordlessConnectors;
const placeholder: TablePlaceholder | undefined = conditional(
isSocial && {
title: t('connectors.type.social'),
description: t('connectors.social_connector_eg'),
image: isLightMode ? <SocialConnectorEmpty /> : <SocialConnectorEmptyDark />,
content: (
<Button
title="connectors.create"
type="outline"
onClick={() => {
navigate(buildCreatePathname(ConnectorType.Social));
}}
/>
),
}
);
return (
<>
<div className={classNames(resourcesStyles.container, styles.container)}>
@ -150,7 +132,30 @@ const Connectors = () => {
}}
isLoading={isLoading}
errorMessage={error?.body?.message ?? error?.message}
placeholder={placeholder}
placeholder={
isSocial && (
<TablePlaceholder
image={<SocialConnectorEmpty />}
imageDark={<SocialConnectorEmptyDark />}
title="connectors.placeholder_title"
description="connectors.placeholder_description"
learnMoreLink={getDocumentationUrl(
'/docs/recipes/configure-connectors/connector-setup-tips#social-connector'
)}
action={
<Button
title="connectors.create"
type="primary"
size="large"
icon={<Plus />}
onClick={() => {
navigate(buildCreatePathname(ConnectorType.Social));
}}
/>
}
/>
)
}
onRetry={async () => mutate(undefined, true)}
/>
</div>

13
packages/console/src/pages/RoleDetails/RoleUsers/index.tsx
View file

@ -12,6 +12,7 @@ import ApplicationName from '@/components/ApplicationName';
import Button from '@/components/Button';
import ConfirmModal from '@/components/ConfirmModal';
import DateTime from '@/components/DateTime';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import IconButton from '@/components/IconButton';
import ItemPreview from '@/components/ItemPreview';
import Search from '@/components/Search';
@ -161,17 +162,7 @@ const RoleUsers = () => {
updateSearchParameters({ page });
},
}}
placeholder={{
content: (
<Button
title="role_details.users.assign_button"
type="outline"
onClick={() => {
setIsAssignModalOpen(true);
}}
/>
),
}}
placeholder={<EmptyDataPlaceholder />}
/>
{userToBeDeleted && (
<ConfirmModal

38
packages/console/src/pages/Roles/index.tsx
View file

@ -5,13 +5,17 @@ import { useLocation, useNavigate } from 'react-router-dom';
import useSWR from 'swr';
import Plus from '@/assets/images/plus.svg';
import RolesEmptyDark from '@/assets/images/roles-empty-dark.svg';
import RolesEmpty from '@/assets/images/roles-empty.svg';
import Button from '@/components/Button';
import CardTitle from '@/components/CardTitle';
import ItemPreview from '@/components/ItemPreview';
import Search from '@/components/Search';
import Table from '@/components/Table';
import TablePlaceholder from '@/components/Table/TablePlaceholder';
import { defaultPageSize } from '@/consts';
import type { RequestError } from '@/hooks/use-api';
import useDocumentationUrl from '@/hooks/use-documentation-url';
import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
import * as pageStyles from '@/scss/resources.module.scss';
import { buildUrl, formatSearchKeyword } from '@/utils/url';
@ -31,6 +35,7 @@ const Roles = () => {
const { pathname, search } = useLocation();
const navigate = useNavigate();
const isOnCreatePage = pathname === createRolePathname;
const { getDocumentationUrl } = useDocumentationUrl();
const [{ page, keyword }, updateSearchParameters] = useSearchParametersWatcher({
page: 1,
@ -116,17 +121,28 @@ const Roles = () => {
updateSearchParameters({ page });
},
}}
placeholder={{
content: (
<Button
title="roles.create"
type="outline"
onClick={() => {
navigate({ pathname: createRolePathname, search });
}}
/>
),
}}
placeholder={
<TablePlaceholder
image={<RolesEmpty />}
imageDark={<RolesEmptyDark />}
title="roles.placeholder_title"
description="roles.placeholder_description"
learnMoreLink={getDocumentationUrl(
'/docs/recipes/rbac/manage-permissions-and-roles#manage-roles'
)}
action={
<Button
title="roles.create"
type="primary"
size="large"
icon={<Plus />}
onClick={() => {
navigate({ pathname: createRolePathname, search });
}}
/>
}
/>
}
onRetry={async () => mutate(undefined, true)}
/>
{isOnCreatePage && (

13
packages/console/src/pages/UserDetails/UserRoles/index.tsx
View file

@ -10,6 +10,7 @@ import Delete from '@/assets/images/delete.svg';
import Plus from '@/assets/images/plus.svg';
import Button from '@/components/Button';
import ConfirmModal from '@/components/ConfirmModal';
import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
import IconButton from '@/components/IconButton';
import Search from '@/components/Search';
import Table from '@/components/Table';
@ -146,17 +147,7 @@ const UserRoles = () => {
updateSearchParameters({ page });
},
}}
placeholder={{
content: (
<Button
title="user_details.roles.assign_button"
type="outline"
onClick={() => {
setIsAssignRolesModalOpen(true);
}}
/>
),
}}
placeholder={<EmptyDataPlaceholder />}
errorMessage={error?.body?.message ?? error?.message}
onRetry={async () => mutate(undefined, true)}
/>

39
packages/console/src/pages/Users/index.tsx
View file

@ -5,6 +5,8 @@ import { useLocation, useNavigate } from 'react-router-dom';
import useSWR from 'swr';
import Plus from '@/assets/images/plus.svg';
import UsersEmptyDark from '@/assets/images/users-empty-dark.svg';
import UsersEmpty from '@/assets/images/users-empty.svg';
import ApplicationName from '@/components/ApplicationName';
import Button from '@/components/Button';
import CardTitle from '@/components/CardTitle';
@ -12,6 +14,7 @@ import DateTime from '@/components/DateTime';
import ItemPreview from '@/components/ItemPreview';
import Search from '@/components/Search';
import Table from '@/components/Table';
import TablePlaceholder from '@/components/Table/TablePlaceholder';
import UserAvatar from '@/components/UserAvatar';
import { defaultPageSize } from '@/consts';
import { UserDetailsTabs } from '@/consts/page-tabs';
@ -128,20 +131,28 @@ const Users = () => {
}}
/>
}
placeholder={{
content: (
<Button
title="users.create"
type="outline"
onClick={() => {
navigate({
pathname: createUserPathname,
search,
});
}}
/>
),
}}
placeholder={
<TablePlaceholder
image={<UsersEmpty />}
imageDark={<UsersEmptyDark />}
title="users.placeholder_title"
description="users.placeholder_description"
action={
<Button
title="users.create"
type="primary"
size="large"
icon={<Plus />}
onClick={() => {
navigate({
pathname: createUserPathname,
search,
});
}}
/>
}
/>
}
rowClickHandler={({ id }) => {
navigate(buildDetailsPathname(id));
}}

4
packages/phrases/src/locales/de/translation/admin-console/connectors.ts
View file

@ -16,7 +16,9 @@ const connectors = {
'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
go_to_sie: 'Go to sign in experience', // UNTRANSLATED
},
social_connector_eg: 'z.B. Google, Facebook, Github',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: 'Speichern und fertigstellen',
type: {
email: 'E-Mail Connector',

3
packages/phrases/src/locales/de/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/de/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: 'Create Role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/de/translation/admin-console/users.ts
View file

@ -12,6 +12,9 @@ const users = {
unnamed: 'Unbenannt',
search: 'Search by name, email, phone or username', // UNTRANSLATED
check_user_detail: 'Check user detail', // UNTRANSLATED
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;

4
packages/phrases/src/locales/en/translation/admin-console/connectors.ts
View file

@ -16,7 +16,9 @@ const connectors = {
'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ',
go_to_sie: 'Go to sign in experience',
},
social_connector_eg: 'E.g., Google, Facebook, Github',
placeholder_title: 'Social connector',
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.',
save_and_done: 'Save and Done',
type: {
email: 'Email connector',

9
packages/phrases/src/locales/en/translation/admin-console/permissions.ts
View file

@ -1,9 +1,12 @@
const permissions = {
search_placeholder: 'Search by API or permission name',
search_placeholder_without_api: 'Search by permission name',
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
name_column: 'Permission',
description_column: 'Description',
api_column: 'API',
placeholder_title: 'Permission',
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).',
};
export default permissions;

5
packages/phrases/src/locales/en/translation/admin-console/roles.ts
View file

@ -13,8 +13,11 @@ const roles = {
create_role_description:
'Create and manage roles for your applications. Roles contain collections of permissions and can be assigned to users.',
create_role_button: 'Create Role',
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!',
search: 'Search by role name, description or ID',
placeholder_title: 'Roles',
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.',
};
export default roles;

3
packages/phrases/src/locales/en/translation/admin-console/users.ts
View file

@ -12,6 +12,9 @@ const users = {
unnamed: 'Unnamed',
search: 'Search by name, email, phone or username',
check_user_detail: 'Check user detail',
placeholder_title: 'User management',
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.',
};
export default users;

4
packages/phrases/src/locales/fr/translation/admin-console/connectors.ts
View file

@ -17,7 +17,9 @@ const connectors = {
'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
go_to_sie: 'Go to sign in experience', // UNTRANSLATED
},
social_connector_eg: 'Exemple : Google, Facebook, Github',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: 'Sauvegarder et Finis',
type: {
email: 'Connecteur Email',

3
packages/phrases/src/locales/fr/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/fr/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: 'Create Role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/fr/translation/admin-console/users.ts
View file

@ -12,6 +12,9 @@ const users = {
unnamed: 'Sans nom',
search: 'Search by name, email, phone or username', // UNTRANSLATED
check_user_detail: 'Check user detail', // UNTRANSLATED
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;

4
packages/phrases/src/locales/ko/translation/admin-console/connectors.ts
View file

@ -17,7 +17,9 @@ const connectors = {
'사용 중이 아님은 로그인 환경에서 이 로그인 방법을 사용하지 않았음을 의미해요. <a>{{link}}</a> 이 로그인 방법을 추가해주세요.',
go_to_sie: '로그인 경험으로 가서',
},
social_connector_eg: '예) Google, Facebook, Github',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: '저장 및 완료',
type: {
email: '이메일 연동',

3
packages/phrases/src/locales/ko/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: '권한',
description_column: '설명',
api_column: 'API',
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/ko/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: '역할 생성',
role_created: '역할 {{name}}이 성공적으로 생성되었어요!',
search: '역할 이름, 설명, ID로 검색',
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/ko/translation/admin-console/users.ts
View file

@ -11,6 +11,9 @@ const users = {
unnamed: '이름없음',
search: '이름, 이메일, 전화번호, ID로 검색',
check_user_detail: '사용자 상세정보 확인',
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;

4
packages/phrases/src/locales/pt-br/translation/admin-console/connectors.ts
View file

@ -17,7 +17,9 @@ const connectors = {
'Fora de uso significa que sua experiência de login não usou esse método de login. <a>{{link}}</a> para adicionar este método de login. ',
go_to_sie: 'Vá para a experiência de login',
},
social_connector_eg: 'Ex: Google, Facebook, Github',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: 'Salvar e completar',
type: {
email: 'Conector de e-mail',

3
packages/phrases/src/locales/pt-br/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: 'Create Role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/pt-br/translation/admin-console/users.ts
View file

@ -12,6 +12,9 @@ const users = {
unnamed: 'Sem nome',
search: 'Search by name, email, phone or username', // UNTRANSLATED
check_user_detail: 'Check user detail', // UNTRANSLATED
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;

4
packages/phrases/src/locales/pt-pt/translation/admin-console/connectors.ts
View file

@ -16,7 +16,9 @@ const connectors = {
'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
go_to_sie: 'Go to sign in experience', // UNTRANSLATED
},
social_connector_eg: 'Ex., Google, Facebook, Github',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: 'Guardar',
type: {
email: 'Email',

3
packages/phrases/src/locales/pt-pt/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: 'Create Role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/pt-pt/translation/admin-console/users.ts
View file

@ -12,6 +12,9 @@ const users = {
unnamed: 'Sem nome',
search: 'Search by name, email, phone or username', // UNTRANSLATED
check_user_detail: 'Check user detail', // UNTRANSLATED
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;

4
packages/phrases/src/locales/tr-tr/translation/admin-console/connectors.ts
View file

@ -17,7 +17,9 @@ const connectors = {
'Not in use means your sign in experience hasn’t used this sign in method. <a>{{link}}</a> to add this sign in method. ', // UNTRANSLATED
go_to_sie: 'Go to sign in experience', // UNTRANSLATED
},
social_connector_eg: 'Örneğin, Google, Facebook, Github',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: 'Kaydet ve bitir',
type: {
email: 'Eposta connectorı',

3
packages/phrases/src/locales/tr-tr/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: 'Create Role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/tr-tr/translation/admin-console/users.ts
View file

@ -12,6 +12,9 @@ const users = {
unnamed: 'İsimsiz',
search: 'Search by name, email, phone or username', // UNTRANSLATED
check_user_detail: 'Check user detail', // UNTRANSLATED
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;

4
packages/phrases/src/locales/zh-cn/translation/admin-console/connectors.ts
View file

@ -15,7 +15,9 @@ const connectors = {
content: '未使用意味着你的登录体验并没有使用这个登录方式。<a>{{link}}</a>去添加。',
go_to_sie: '前往登录体验',
},
social_connector_eg: '如: 微信登录，支付宝登录',
placeholder_title: 'Social connector', // UNTRANSLATED
placeholder_description:
'Logto has provided many widely used social sign-in connectors meantime you can create your own with standard protocols.', // UNTRANSLATED
save_and_done: '保存并完成',
type: {
email: '邮件连接器',

3
packages/phrases/src/locales/zh-cn/translation/admin-console/permissions.ts
View file

@ -4,6 +4,9 @@ const permissions = {
name_column: 'Permission', // UNTRANSLATED
description_column: 'Description', // UNTRANSLATED
api_column: 'API', // UNTRANSLATED
placeholder_title: 'Permission', // UNTRANSLATED
placeholder_description:
'Permission refers to the authorization to access a resource (we call it API resource).', // UNTRANSLATED
};
export default permissions;

3
packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts
View file

@ -15,6 +15,9 @@ const roles = {
create_role_button: 'Create Role', // UNTRANSLATED
role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED
search: 'Search by role name, description or ID', // UNTRANSLATED
placeholder_title: 'Roles', // UNTRANSLATED
placeholder_description:
'Roles are a grouping of permissions that can be assigned to users. Be sure to add permission first before create roles.', // UNTRANSLATED
};
export default roles;

3
packages/phrases/src/locales/zh-cn/translation/admin-console/users.ts
View file

@ -11,6 +11,9 @@ const users = {
unnamed: '未命名',
search: 'Search by name, email, phone or username', // UNTRANSLATED
check_user_detail: '查看用户详情',
placeholder_title: 'User management', // UNTRANSLATED
placeholder_description:
'Each user has a profile containing all user information. It consists of basic data, social identities, and custom data.', // UNTRANSLATED
};
export default users;