UI #8513: Activity feed filter UI improvements (#8883)

* Added colored svgs to show on feed and thread type filter selection

* updated spacing between activity feed cards

* Improved the filters styling on my-data page

* Fixed alignment for activity filters container on 'Activity Feeds & Tasks' tab

* Changed z-index for filter container to allow popovers to show on top

* Added no data placeholder in ActivityFeedList component for no data found for selected filters

* Fixed dropdown icon alignment for ActivityFeedList

* Worked on comments
Removed use of !important from css
Removed tailwind css changes

* fixed failing cypress tests

Co-authored-by: Nahuel Verdugo Revigliono <nahuel@getcollate.io>
This commit is contained in:
Aniket Katkar 2022-11-19 12:32:17 +05:30 committed by GitHub
parent 397a322135
commit 8ef6b8cf74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 433 additions and 120 deletions

View File

@ -0,0 +1,59 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5366 11.1736C17.4432 6.57866 13.3117 4.13649 11.1481 5.63285C10.9099 5.80225 10.7028 6.01247 10.5364 6.25398C10.5364 6.27163 5.52763 16.5062 5.52763 16.5062L2.73137 18.419C2.3021 18.7132 1.93445 19.0899 1.64942 19.5276C1.36439 19.9653 1.16757 20.4555 1.07019 20.97C0.972814 21.4845 0.976793 22.0134 1.0819 22.5264C1.18701 23.0394 1.39119 23.5264 1.68277 23.9597L1.8086 24.1468C2.39799 25.0136 3.30209 25.6109 4.32481 25.8091C5.34754 26.0073 6.40642 25.7904 7.27179 25.2055L11.7633 31.8862C12.4239 32.7085 13.6927 33.5272 15.2586 32.5638C15.536 32.3822 15.7727 32.1439 15.9533 31.8643C16.1339 31.5846 16.2544 31.2699 16.3072 30.9404C16.3705 30.6126 16.3688 30.2754 16.3022 29.9483C16.2356 29.6212 16.1054 29.3106 15.9192 29.0346L11.9625 23.141C11.9625 23.141 21.316 22.3892 21.351 22.3751C21.643 22.3134 21.9199 22.1934 22.1654 22.0222C23.2769 21.2599 23.6754 19.6612 23.2909 17.519C22.9448 15.5462 21.9626 13.3123 20.5366 11.1736ZM2.82574 23.4515L2.69991 23.2645C2.49873 22.9654 2.35794 22.6293 2.2856 22.2752C2.21325 21.9212 2.21077 21.5562 2.2783 21.2012C2.34583 20.8462 2.48205 20.5081 2.67914 20.2063C2.87624 19.9045 3.13036 19.6449 3.42694 19.4424L5.84221 17.7837L9.02994 22.5234L6.61467 24.1821C6.31843 24.3854 5.9854 24.5279 5.63461 24.6012C5.28382 24.6746 4.92214 24.6774 4.57026 24.6096C4.21838 24.5418 3.8832 24.4046 3.58386 24.2058C3.28452 24.0071 3.02691 23.7508 2.82574 23.4515ZM14.9126 29.7299C15.1036 30.0169 15.1741 30.3687 15.1086 30.7081C15.043 31.0475 14.8469 31.3468 14.563 31.5403C14.2782 31.7334 13.9293 31.8047 13.5926 31.7385C13.2558 31.6724 12.9588 31.4742 12.7664 31.1874L8.28893 24.5279L10.089 23.2927L10.5644 23.2539L14.9126 29.7299ZM10.1869 22.0434L6.71254 16.8767L10.0261 10.0549C10.3477 11.9712 11.2879 14.2475 12.7909 16.4815C14.2939 18.7154 16.0416 20.4376 17.6844 21.447L10.1869 22.0434ZM20.4981 21.2211C18.8273 21.1117 16.108 19.2095 13.8046 15.7827C11.5011 12.3559 10.7531 9.11259 11.267 7.49977C11.3597 7.19703 11.5449 6.93165 11.796 6.74151C12.0471 6.55137 12.3513 6.4462 12.6651 6.44102C14.3219 6.44102 17.1426 8.35382 19.5124 11.8794C20.8476 13.8628 21.8193 15.938 22.085 17.7519C22.6058 21.2211 20.4981 21.2211 20.4981 21.2211Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.5"/>
<path d="M16.1674 11.3102C15.7393 11.2253 15.2987 11.2274 14.8713 11.3165C14.444 11.4056 14.0386 11.5798 13.6788 11.8289C13.6124 11.8753 13.5558 11.9344 13.5121 12.0028C13.4684 12.0713 13.4384 12.1477 13.424 12.2278C13.4095 12.308 13.4109 12.3902 13.4279 12.4698C13.4449 12.5494 13.4773 12.6248 13.5232 12.6918C13.5691 12.7588 13.6276 12.816 13.6954 12.8601C13.7632 12.9042 13.8389 12.9345 13.9183 12.949C13.9977 12.9636 14.0791 12.9623 14.1579 12.9451C14.2368 12.9279 14.3115 12.8952 14.3778 12.8489C14.6057 12.6927 14.8619 12.5833 15.1316 12.5271C15.4013 12.4709 15.6794 12.4688 15.95 12.5211C16.2205 12.5734 16.4782 12.6789 16.7083 12.8317C16.9384 12.9846 17.1365 13.1817 17.2912 13.4118C17.4459 13.6419 17.5541 13.9005 17.6098 14.1728C17.6655 14.4452 17.6676 14.726 17.6158 14.9991C17.564 15.2723 17.4595 15.5324 17.3081 15.7648C17.1568 15.9971 16.9616 16.1971 16.7337 16.3533C16.6262 16.4282 16.5453 16.5359 16.5028 16.6606C16.4604 16.7853 16.4585 16.9204 16.4976 17.0462C16.5366 17.172 16.6146 17.2819 16.7199 17.3598C16.8253 17.4377 16.9526 17.4795 17.0832 17.4791C17.2078 17.4814 17.33 17.4444 17.4327 17.3732C17.9764 17.0014 18.3985 16.475 18.6456 15.8607C18.8927 15.2464 18.9537 14.5719 18.8208 13.9226C18.6879 13.2733 18.3672 12.6785 17.8992 12.2134C17.4312 11.7483 16.837 11.434 16.1919 11.3102H16.1674Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.5"/>
<path d="M23.2731 6.883H23.3325C23.4838 6.88293 23.6297 6.82626 23.742 6.72393C23.8544 6.6216 23.9252 6.48087 23.9407 6.32892L24.4126 1.69868C24.4233 1.6168 24.4177 1.53358 24.396 1.45395C24.3743 1.37431 24.3371 1.29987 24.2864 1.23503C24.2357 1.1702 24.1727 1.11628 24.101 1.07647C24.0294 1.03667 23.9505 1.01178 23.8691 1.00328C23.7878 0.99478 23.7055 1.00284 23.6273 1.027C23.5491 1.05115 23.4765 1.09089 23.4137 1.14389C23.351 1.19688 23.2994 1.26203 23.262 1.33551C23.2247 1.40898 23.2023 1.48927 23.1962 1.57163L22.7278 6.2054C22.7112 6.36825 22.7593 6.5311 22.8616 6.65815C22.9638 6.78521 23.1118 6.86608 23.2731 6.883Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.5"/>
<path d="M31.1797 5.93012C31.0899 5.79342 30.9502 5.69815 30.791 5.66509C30.6319 5.63203 30.4663 5.66387 30.3303 5.75366L26.0696 8.57698C25.9589 8.65075 25.875 8.7588 25.8305 8.88489C25.7859 9.01097 25.7832 9.14826 25.8226 9.27606C25.862 9.40387 25.9415 9.51528 26.0491 9.59351C26.1567 9.67175 26.2865 9.71258 26.4191 9.70984C26.5427 9.71272 26.6644 9.67831 26.7686 9.61103L31.0294 6.7877C31.1616 6.6938 31.2516 6.5509 31.2797 6.39021C31.3079 6.22952 31.2719 6.06411 31.1797 5.93012Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.5"/>
<path d="M32.482 13.4702L27.5256 12.5703C27.3657 12.5413 27.201 12.5776 27.0676 12.6712C26.9342 12.7649 26.8431 12.9082 26.8143 13.0697C26.7856 13.2311 26.8216 13.3975 26.9143 13.5322C27.0071 13.6669 27.149 13.7588 27.3089 13.7879L32.2618 14.6878H32.3702C32.526 14.6924 32.6777 14.6367 32.7943 14.5322C32.9109 14.4276 32.9835 14.2821 32.9973 14.1253C33.0111 13.9684 32.9651 13.8122 32.8687 13.6885C32.7723 13.5648 32.6327 13.4829 32.4785 13.4596L32.482 13.4702Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.5"/>
<defs>
<linearGradient id="paint0_linear_10028_17778" x1="1.71818" y1="5.62783" x2="25.805" y2="30.9535" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint1_linear_10028_17778" x1="1.71818" y1="5.62783" x2="25.805" y2="30.9535" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint2_linear_10028_17778" x1="13.5894" y1="11.3454" x2="18.9445" y2="17.478" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint3_linear_10028_17778" x1="13.5894" y1="11.3454" x2="18.9445" y2="17.478" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint4_linear_10028_17778" x1="22.7788" y1="1.09192" x2="26.1346" y2="2.35069" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint5_linear_10028_17778" x1="22.7788" y1="1.09192" x2="26.1346" y2="2.35069" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint6_linear_10028_17778" x1="25.9708" y1="5.71574" x2="28.99" y2="11.0435" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint7_linear_10028_17778" x1="25.9708" y1="5.71574" x2="28.99" y2="11.0435" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint8_linear_10028_17778" x1="27.003" y1="12.5938" x2="27.9124" y2="16.0447" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
<linearGradient id="paint9_linear_10028_17778" x1="27.003" y1="12.5938" x2="27.9124" y2="16.0447" gradientUnits="userSpaceOnUse">
<stop stop-color="#7147E8"/>
<stop offset="0.395833" stop-color="#5D57ED"/>
<stop offset="1" stop-color="#1890FF"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

@ -0,0 +1,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="5.02327" height="5.02327" rx="1" stroke="#7147e8" stroke-width="0.8"/>
<rect x="7.97668" y="1" width="5.02327" height="5.02327" rx="1" stroke="#7147e8" stroke-width="0.8"/>
<rect x="1" y="7.97656" width="5.02327" height="5.02327" rx="1" stroke="#7147e8" stroke-width="0.8"/>
<rect x="7.97668" y="7.97656" width="5.02327" height="5.02327" rx="1" stroke="#7147e8" stroke-width="0.8"/>
</svg>

After

Width:  |  Height:  |  Size: 511 B

View File

@ -0,0 +1,4 @@
<svg width="18" height="14" viewBox="0 0 18 14" fill="#7147e8" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.09861 0H16.0963C17.146 0 18 0.843002 18 1.87919V6.88484C18 7.81883 17.3062 8.59586 16.4005 8.74005V10.8168C16.4005 11.0263 16.2748 11.216 16.0803 11.2999C16.0116 11.3295 15.9388 11.344 15.8666 11.344C15.7346 11.344 15.6044 11.2956 15.5037 11.2036L12.8351 8.76403H11.119V8.76422H10.051V8.76407H7.09861C6.04888 8.76407 5.19486 7.92103 5.19486 6.88487V5.18849H5.19435V4.13426H5.19486V1.87919C5.19486 0.842967 6.04891 0 7.09861 0ZM16.0963 7.70976C16.557 7.70976 16.9319 7.33969 16.9319 6.88487V1.87919C16.9319 1.42434 16.557 1.05431 16.0963 1.05431H7.09861C6.63782 1.05431 6.26295 1.42438 6.26295 1.87919V6.8848C6.26295 7.33965 6.63785 7.70969 7.09861 7.70969H13.0444C13.179 7.70969 13.3085 7.75984 13.4073 7.8501L15.3324 9.61012V8.2369C15.3324 7.94577 15.5715 7.70976 15.8665 7.70976H16.0963Z" fill="#7147e8"/>
<path d="M4.14845 4.13426H1.90375C0.853981 4.13419 0 4.97719 0 6.01338V9.91148C0 10.7648 0.579023 11.487 1.36969 11.7154V13.4729C1.36969 13.6788 1.49115 13.8659 1.68071 13.9518C1.75201 13.9842 1.82809 14 1.90361 14C2.02887 14 2.15276 13.9565 2.25148 13.8729L4.70946 11.7907H9.2153C10.265 11.7907 11.119 10.9477 11.119 9.91148V9.79664H10.051V9.91148C10.051 10.3663 9.67609 10.7364 9.21533 10.7364H4.51178C4.38416 10.7364 4.26083 10.7814 4.16398 10.8635L2.43777 12.3258V11.2635C2.43777 10.9724 2.19867 10.7364 1.90375 10.7364C1.44295 10.7364 1.06808 10.3663 1.06808 9.91148V6.01338C1.06808 5.55857 1.44295 5.18849 1.90375 5.18849H4.14845V4.13426Z" fill="#7147e8"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="#7147e8" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5802 11.6H3.76236C3.01629 11.6 2.26788 11.0267 2.05978 10.2958L1.05504 6.76665C0.825064 5.95889 1.33901 5.26039 2.16376 5.26039H2.34262V3.44789C2.34262 2.64821 2.97831 2 3.7626 2H6.6047C6.92856 2 7.28461 2.20992 7.44489 2.49595L7.80412 3.13705C7.83757 3.19675 7.95804 3.26793 8.025 3.26793H11.5778C12.3627 3.26793 13 3.91705 13 4.71613V10.1518C13 10.8886 12.4607 11.4969 11.7627 11.5882C11.7104 11.5951 11.6566 11.5991 11.6013 11.5999C11.5943 11.5999 11.5873 11.6 11.5802 11.6ZM12.2895 8.69062V4.71613C12.2895 4.31737 11.9705 3.99246 11.5778 3.99246H8.025C7.70323 3.99246 7.34727 3.7821 7.18723 3.49651L6.828 2.85541C6.79443 2.79553 6.67402 2.72453 6.60468 2.72453H3.76258C3.37069 2.72453 3.0531 3.04837 3.0531 3.44789V5.26037H9.98162C10.7277 5.26037 11.4761 5.83366 11.6842 6.56462L12.2895 8.69062ZM1.73737 6.56464C1.63932 6.22024 1.81246 5.98491 2.16376 5.98491H9.98164C10.4116 5.98491 10.8819 6.3452 11.0019 6.76665L12.0066 10.2958C12.1047 10.6402 11.9315 10.8755 11.5802 10.8755H3.76236C3.33242 10.8755 2.86207 10.5152 2.7421 10.0937L1.73737 6.56464Z" fill="#7147e8"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="#7147e8" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9837 6.50454C12.5881 1.45736 6.32858 -0.853681 2.76866 2.74953C-1.92749 7.63607 3.5424 15.2534 9.67295 12.3643C9.74674 12.3264 9.80263 12.2609 9.82851 12.182C9.85439 12.1031 9.84818 12.0172 9.81122 11.9429C9.77427 11.8686 9.70954 11.8118 9.63106 11.7849C9.55257 11.758 9.46664 11.763 9.39186 11.799C3.90561 14.383 -0.986853 7.56816 3.21501 3.19579C6.40102 -0.0258955 12 2.03707 12.3547 6.55424C12.4379 7.57771 12.2264 8.6036 11.745 9.51054C11.6702 9.64323 11.5656 9.75681 11.4396 9.8424C11.3136 9.92799 11.1695 9.98328 11.0186 10.0039C10.8677 10.0246 10.7141 10.0101 10.5698 9.96151C10.4254 9.91293 10.2942 9.83163 10.1865 9.72394C10.0787 9.61668 9.99335 9.48913 9.9352 9.34865C9.87706 9.20817 9.84732 9.05756 9.84771 8.90551V4.46505C9.8465 4.38213 9.81272 4.30301 9.75368 4.24481C9.69463 4.1866 9.61507 4.15397 9.53217 4.15397C9.44928 4.15397 9.36971 4.1866 9.31067 4.24482C9.25163 4.30303 9.21786 4.38214 9.21665 4.46506V5.20861C7.56743 3.14413 4.17057 4.31335 4.16815 6.99041C4.17137 9.66763 7.56683 10.8368 9.21666 8.77206C9.12705 9.81623 10.0644 10.8156 11.1323 10.629C12.6865 10.4459 13.0913 7.7805 12.9837 6.50454ZM7.00792 9.20001C6.42234 9.19934 5.86093 8.96632 5.44686 8.55207C5.03279 8.13783 4.79987 7.57619 4.7992 6.99036C4.92057 4.05896 9.09578 4.05982 9.21665 6.99038C9.21599 7.57621 8.98307 8.13786 8.56899 8.5521C8.15492 8.96634 7.59351 9.19935 7.00792 9.20001Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="#7147e8" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2721 12.9898C10.106 12.9899 9.94245 12.9493 9.79566 12.8717L7.06873 11.4384C7.04759 11.4271 7.024 11.4212 7.00004 11.4212C6.97608 11.4212 6.95248 11.4271 6.93135 11.4384L4.20485 12.8717C4.03589 12.9606 3.84542 13.0004 3.65499 12.9867C3.46456 12.973 3.28177 12.9062 3.12731 12.794C2.97284 12.6818 2.85287 12.5286 2.78096 12.3517C2.70905 12.1749 2.68808 11.9814 2.72041 11.7932L3.24104 8.75741C3.24504 8.73362 3.24314 8.70922 3.23552 8.68633C3.22789 8.66345 3.21476 8.64279 3.19729 8.62616L0.993164 6.47497C0.856315 6.34165 0.759543 6.17266 0.713813 5.98715C0.668083 5.80164 0.675224 5.60704 0.734425 5.42538C0.793626 5.24372 0.902521 5.08228 1.04877 4.95934C1.19502 4.8364 1.37279 4.75688 1.56191 4.72979L4.60823 4.28747C4.63193 4.28402 4.65444 4.27485 4.6738 4.26075C4.69316 4.24665 4.7088 4.22804 4.71935 4.20654L6.08129 1.44372C6.16565 1.27245 6.29627 1.12822 6.45838 1.02736C6.62048 0.926503 6.80759 0.873047 6.99851 0.873047C7.18943 0.873047 7.37653 0.926503 7.53864 1.02736C7.70074 1.12822 7.83137 1.27245 7.91573 1.44372L9.27854 4.20566C9.28918 4.2271 9.30484 4.24565 9.32419 4.25974C9.34354 4.27383 9.366 4.28304 9.38966 4.2866L12.4386 4.72935C12.6276 4.75659 12.8053 4.8362 12.9514 4.95916C13.0976 5.08212 13.2064 5.24352 13.2656 5.42511C13.3247 5.6067 13.3319 5.80123 13.2863 5.98669C13.2407 6.17215 13.144 6.34114 13.0074 6.47454L10.801 8.62441C10.7836 8.64108 10.7705 8.66175 10.7629 8.68462C10.7553 8.70749 10.7534 8.73187 10.7573 8.75566L11.2779 11.7915C11.303 11.9382 11.2957 12.0885 11.2568 12.2321C11.2178 12.3758 11.148 12.5092 11.0522 12.623C10.9564 12.7369 10.837 12.8286 10.7022 12.8916C10.5674 12.9546 10.4205 12.9876 10.2717 12.988L10.2721 12.9898ZM7.00004 10.5459C7.16597 10.5459 7.32938 10.5864 7.47604 10.664L10.2025 12.0968C10.2267 12.1106 10.2543 12.117 10.2821 12.115C10.3098 12.1131 10.3363 12.1029 10.3583 12.0859C10.3812 12.0702 10.399 12.0481 10.4095 12.0224C10.42 11.9966 10.4227 11.9684 10.4174 11.9411L9.89629 8.90485C9.86845 8.74144 9.88066 8.57372 9.93187 8.41606C9.98307 8.25841 10.0717 8.11553 10.1903 7.99966L12.3966 5.84935C12.4163 5.83006 12.4302 5.80565 12.4368 5.77887C12.4433 5.7521 12.4423 5.72402 12.4337 5.69781C12.4252 5.6716 12.4095 5.64831 12.3884 5.63056C12.3673 5.6128 12.3416 5.6013 12.3144 5.59735L9.26585 5.15416C9.10173 5.1304 8.94585 5.06703 8.8117 4.96954C8.67754 4.87205 8.56914 4.74336 8.49585 4.5946L7.13129 1.83222C7.11907 1.8075 7.10018 1.78669 7.07676 1.77214C7.05333 1.75759 7.0263 1.74988 6.99873 1.74988C6.97115 1.74988 6.94412 1.75759 6.9207 1.77214C6.89727 1.78669 6.87838 1.8075 6.86616 1.83222L5.50423 4.59372C5.4309 4.74254 5.32243 4.87126 5.18819 4.96876C5.05395 5.06625 4.89799 5.12959 4.73379 5.15329L1.68573 5.59735C1.65839 5.60122 1.63268 5.61268 1.61154 5.63044C1.5904 5.6482 1.57467 5.67154 1.56614 5.69781C1.55762 5.72407 1.55664 5.7522 1.56332 5.77899C1.56999 5.80578 1.58406 5.83016 1.60391 5.84935L3.80979 7.99966C3.92833 8.11553 4.01701 8.25841 4.06821 8.41606C4.11942 8.57372 4.13162 8.74144 4.10379 8.90485L3.58273 11.9411C3.578 11.9684 3.58103 11.9964 3.59146 12.0221C3.60189 12.0477 3.61932 12.0699 3.64174 12.0861C3.66417 12.1024 3.69071 12.112 3.71833 12.1139C3.74595 12.1158 3.77354 12.1099 3.79798 12.0968L6.52404 10.6636C6.6708 10.5863 6.83417 10.5459 7.00004 10.5459V10.5459Z" fill="#7147e8"/>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -0,0 +1,7 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="#7147e8" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2778 2.16615H9.95472V1.57424C9.95472 1.38273 9.74582 1.29569 9.55432 1.29569H8.52718C8.28346 0.599316 7.67412 0.251127 6.97774 0.251127C6.28903 0.225235 5.66259 0.647534 5.4283 1.29569H4.41856C4.22705 1.29569 4.03554 1.38273 4.03554 1.57424V2.16615H2.7124C1.92832 2.17451 1.28685 2.79305 1.25 3.5763V12.4269C1.25 13.1929 1.94638 13.75 2.7124 13.75H11.2778C12.0439 13.75 12.7402 13.1929 12.7402 12.4269V3.57633C12.7034 2.79305 12.0619 2.17451 11.2778 2.16615ZM4.73189 1.99207H5.68942C5.85656 1.97168 5.99082 1.84452 6.02021 1.67871C6.12331 1.22972 6.51722 0.907418 6.97774 0.895289C7.43399 0.909118 7.82197 1.23241 7.91784 1.67871C7.94906 1.85025 8.09218 1.97904 8.26603 1.99207H9.25838V3.38483H4.73189V1.99207ZM12.0439 12.4269C12.0439 12.8099 11.6608 13.0537 11.2778 13.0537H2.7124C2.32939 13.0537 1.94638 12.8099 1.94638 12.4269V3.57633C1.9819 3.17766 2.31219 2.86986 2.7124 2.86256H4.03551V3.75045C4.05391 3.94552 4.22285 4.09144 4.41852 4.08124H9.55428C9.75355 4.09214 9.9278 3.94822 9.95469 3.75045V2.86253H11.2778C11.678 2.86986 12.0083 3.17763 12.0438 3.5763L12.0439 12.4269Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.2"/>
<path d="M5.66269 9.52575C5.55651 9.41384 5.38025 9.40752 5.26636 9.51161L4.36048 10.375L3.97832 9.97868C3.87214 9.86676 3.69588 9.86048 3.58199 9.96454C3.47235 10.0794 3.47235 10.2601 3.58199 10.375L4.1623 10.9695C4.21253 11.0257 4.28508 11.0568 4.36045 11.0544C4.43512 11.0534 4.50634 11.0228 4.5586 10.9695L5.66263 9.92208C5.77208 9.82168 5.7794 9.65154 5.67897 9.54212C5.67382 9.5364 5.66838 9.53096 5.66269 9.52575Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.2"/>
<path d="M10.2427 10H7.36768C7.2296 10 7.11768 10.1679 7.11768 10.375C7.11768 10.5821 7.2296 10.7499 7.36768 10.7499H10.2427C10.3808 10.7499 10.4927 10.5821 10.4927 10.375C10.4927 10.1679 10.3808 10 10.2427 10Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.2"/>
<path d="M5.66293 6.52575C5.55676 6.41384 5.3805 6.40752 5.2666 6.51161L4.36072 7.37501L3.97856 6.97868C3.87239 6.86676 3.69613 6.86045 3.58223 6.96454C3.47259 7.07941 3.47259 7.26014 3.58223 7.37501L4.16254 7.96949C4.21277 8.02574 4.28532 8.05684 4.3607 8.05443C4.43536 8.05337 4.50659 8.02284 4.55885 7.96949L5.66288 6.92209C5.77233 6.82168 5.77964 6.65154 5.67921 6.54212C5.67407 6.5364 5.66862 6.53096 5.66293 6.52575Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.2"/>
<path d="M10.2427 7H7.36768C7.2296 7 7.11768 7.16788 7.11768 7.37497C7.11768 7.58207 7.2296 7.74995 7.36768 7.74995H10.2427C10.3808 7.74995 10.4927 7.58207 10.4927 7.37497C10.4927 7.16788 10.3808 7 10.2427 7Z" fill="#7147e8" stroke="#7147e8" stroke-width="0.2"/>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -27,6 +27,7 @@ export interface ActivityFeedListProp extends HTMLAttributes<HTMLDivElement> {
hideFeedFilter?: boolean;
hideThreadFilter?: boolean;
refreshFeedCount?: number;
stickyFilter?: boolean;
onRefreshFeeds?: () => void;
postFeedHandler?: (value: string, id: string) => void;
deletePostHandler?: (

View File

@ -0,0 +1,43 @@
/*
* Copyright 2022 Collate
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import url('../../../styles/variables.less');
@filters-container-bg: #f8f9fa;
.feed-list-container {
.ant-btn-link {
padding: 0px;
}
.dropdown-icon {
fill: @primary-color;
}
.filters-container {
position: sticky;
top: 0;
padding: 0px;
z-index: 10;
border-bottom: 1px solid @border-color;
}
// Wrapper to hide the shadows of feed cards while scrolling
.filters-wrapper {
position: sticky;
top: 0;
margin-left: -8px;
margin-right: -8px;
z-index: 10;
background-color: @filters-container-bg;
}
}

View File

@ -11,33 +11,32 @@
* limitations under the License.
*/
import { Button, Col, Row, Typography } from 'antd';
import classNames from 'classnames';
import { isUndefined } from 'lodash';
import React, {
FC,
Fragment,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { confirmStateInitialValue } from '../../../constants/feed.constants';
import { FeedFilter } from '../../../enums/mydata.enum';
import { Thread, ThreadType } from '../../../generated/entity/feed/thread';
import { withLoader } from '../../../hoc/withLoader';
import { getFeedListWithRelativeDays } from '../../../utils/FeedUtils';
import { dropdownIcon as DropDownIcon } from '../../../utils/svgconstant';
import SVGIcons, { Icons } from '../../../utils/SvgUtils';
import { Button } from '../../buttons/Button/Button';
import ErrorPlaceHolder from '../../common/error-with-placeholder/ErrorPlaceHolder';
import DropDownList from '../../dropdown/DropDownList';
import { ConfirmState } from '../ActivityFeedCard/ActivityFeedCard.interface';
import ActivityFeedPanel from '../ActivityFeedPanel/ActivityFeedPanel';
import DeleteConfirmationModal from '../DeleteConfirmationModal/DeleteConfirmationModal';
import NoFeedPlaceholder from '../NoFeedPlaceholder/NoFeedPlaceholder';
import { ActivityFeedListProp } from './ActivityFeedList.interface';
import { filterList, threadFilterList } from './ActivityFeedList.util';
import './ActivityFeedList.less';
import {
filterList,
getFeedFilterDropdownIcon,
getThreadFilterDropdownIcon,
threadFilterList,
} from './ActivityFeedList.util';
import FeedListBody from './FeedListBody';
import FeedListSeparator from './FeedListSeparator';
const ActivityFeedList: FC<ActivityFeedListProp> = ({
className,
@ -53,7 +52,9 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
onFeedFiltersUpdate,
hideFeedFilter,
hideThreadFilter,
stickyFilter,
}) => {
const { t } = useTranslation();
const { updatedFeedList, relativeDays } =
getFeedListWithRelativeDays(feedList);
const [selectedThread, setSelectedThread] = useState<Thread>();
@ -148,67 +149,68 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
const getFilterDropDown = () => {
return hideFeedFilter && hideThreadFilter ? null : (
<div className="tw-flex tw-justify-between tw-py-2 tw-px-1.5">
<Row
className={classNames(
'filters-container',
stickyFilter ? 'm-x-xs' : ''
)}
justify="space-between">
{/* Feed filter */}
{!hideFeedFilter && (
<div className="tw-relative tw-mr-5">
<Button
className="hover:tw-no-underline focus:tw-no-underline"
data-testid="feeds"
size="custom"
tag="button"
variant="link"
onClick={() => setFieldListVisible((visible) => !visible)}>
<span className="tw-font-medium tw-text-primary">
{feedFilterList.find((f) => f.value === feedFilter)?.name}
</span>
<DropDownIcon style={{ color: '#7147E8' }} />
</Button>
{fieldListVisible && (
<DropDownList
dropDownList={feedFilterList}
value={feedFilter}
onSelect={handleDropDown}
/>
)}
</div>
)}
<Col>
{!hideFeedFilter && (
<>
<Button
className="flex items-center"
data-testid="feeds"
icon={getFeedFilterDropdownIcon(feedFilter)}
type="link"
onClick={() => setFieldListVisible((visible) => !visible)}>
<Typography.Text className="font-normal text-primary m-x-xss">
{feedFilterList.find((f) => f.value === feedFilter)?.name}
</Typography.Text>
<DropDownIcon className="dropdown-icon" />
</Button>
{fieldListVisible && (
<DropDownList
dropDownList={feedFilterList}
value={feedFilter}
onSelect={handleDropDown}
/>
)}
</>
)}
</Col>
{/* Thread filter */}
{!hideThreadFilter && (
<div className="tw-relative">
<Button
className="hover:tw-no-underline focus:tw-no-underline"
data-testid="thread-filter"
size="custom"
tag="button"
variant="link"
onClick={() => setShowThreadTypeList((visible) => !visible)}>
<SVGIcons
alt="filter"
className="tw-text-primary"
icon={Icons.FILTER_PRIMARY}
width="14px"
/>
<span className="tw-font-medium tw-text-primary tw-ml-1">
{
threadFilterList.find(
(f) => f.value === (threadType ?? 'ALL')
)?.name
}
</span>
<DropDownIcon style={{ color: '#7147E8' }} />
</Button>
{showThreadTypeList && (
<DropDownList
horzPosRight
dropDownList={threadFilterList}
value={threadType}
onSelect={handleThreadTypeDropDownChange}
/>
)}
</div>
)}
</div>
<Col>
{!hideThreadFilter && (
<>
<Button
className="flex items-center"
data-testid="thread-filter"
icon={getThreadFilterDropdownIcon(threadType ?? 'ALL')}
type="link"
onClick={() => setShowThreadTypeList((visible) => !visible)}>
<Typography.Text className="font-normal text-primary m-x-xss">
{
threadFilterList.find(
(f) => f.value === (threadType ?? 'ALL')
)?.name
}
</Typography.Text>
<DropDownIcon className="dropdown-icon" />
</Button>
{showThreadTypeList && (
<DropDownList
horzPosRight
dropDownList={threadFilterList}
value={threadType}
onSelect={handleThreadTypeDropDownChange}
/>
)}
</>
)}
</Col>
</Row>
);
};
@ -230,10 +232,12 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
}, []);
return (
<div className={classNames(className)} id="feedData">
{feedList.length === 0 && feedFilter === FeedFilter.ALL && !threadType
? null
: getFilterDropDown()}
<div className={classNames(className, 'feed-list-container')} id="feedData">
<div className={stickyFilter ? 'filters-wrapper' : ''}>
{feedList.length === 0 && feedFilter === FeedFilter.ALL && !threadType
? null
: getFilterDropDown()}
</div>
{refreshFeedCount ? (
<div className="tw-py-px tw-pt-3 tw-pb-3">
<button className="tw-refreshButton " onClick={onRefreshFeeds}>
@ -243,7 +247,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
</div>
) : null}
{feedList.length > 0 ? (
<Fragment>
<>
{relativeDays.map((d, i) => {
return (
<div data-testid={`feed${i}`} key={i}>
@ -266,7 +270,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
);
})}
{withSidePanel && selectedThread && isPanelOpen ? (
<Fragment>
<>
<ActivityFeedPanel
deletePostHandler={deletePostHandler}
open={!isUndefined(selectedThread) && isPanelOpen}
@ -275,23 +279,19 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
updateThreadHandler={updateThreadHandler}
onCancel={onCancel}
/>
</Fragment>
</>
) : null}
</Fragment>
</>
) : (
<Fragment>
<>
{entityName && feedFilter === FeedFilter.ALL && !threadType ? (
<NoFeedPlaceholder entityName={entityName} />
) : !refreshFeedCount ? (
<Fragment>
<FeedListSeparator
className="tw-relative tw-mt-1 tw-mb-3.5 tw-pb-5"
relativeDay=""
/>
<>No conversations found. Try changing the filter.</>
</Fragment>
<ErrorPlaceHolder>
{t('message.no-data-available-for-selected-filter')}
</ErrorPlaceHolder>
) : null}
</Fragment>
</>
)}
{confirmationState.state && (
<DeleteConfirmationModal

View File

@ -1,6 +1,98 @@
import React from 'react';
import { FeedFilter } from '../../../enums/mydata.enum';
import { ThreadType } from '../../../generated/entity/feed/thread';
import SVGIcons, { Icons } from '../../../utils/SvgUtils';
export const getFeedFilterDropdownIcon = (feedfilter: FeedFilter) => {
switch (feedfilter) {
case FeedFilter.OWNER:
return (
<SVGIcons
alt="My Data"
className="m-r-xss"
icon={Icons.FOLDER_PRIMARY}
width="16px"
/>
);
case FeedFilter.MENTIONS:
return (
<SVGIcons
alt="Mentions"
className="m-r-xss"
icon={Icons.MENTIONS_PRIMARY}
width="16px"
/>
);
case FeedFilter.FOLLOWS:
return (
<SVGIcons
alt="Following"
className="m-r-xss"
icon={Icons.STAR_PRIMARY}
width="16px"
/>
);
case FeedFilter.ALL:
default:
return (
<SVGIcons
alt="All Activity"
className="m-r-xss"
icon={Icons.ALL_APPLICATION_PRIMARY}
width="16px"
/>
);
}
};
export const getThreadFilterDropdownIcon = (threadType: ThreadType | 'ALL') => {
switch (threadType) {
case ThreadType.Announcement:
return (
<SVGIcons
alt="Announcement"
className="m-r-xss"
icon={Icons.ANNOUNCEMENT_PRIMARY}
width="16px"
/>
);
case ThreadType.Conversation:
return (
<SVGIcons
alt="Conversation"
className="m-r-xss"
icon={Icons.COMMENT_PRIMARY}
width="16px"
/>
);
case ThreadType.Task:
return (
<SVGIcons
alt="Task"
className="m-r-xss"
icon={Icons.TASK_PRIMARY}
width="16px"
/>
);
case 'ALL':
default:
return (
<SVGIcons
alt="All Threads"
className="m-r-xss"
icon={Icons.ALL_APPLICATION_PRIMARY}
width="16px"
/>
);
}
};
export const filterList = [
{
name: 'All Activity',
@ -8,7 +100,7 @@ export const filterList = [
icon: (
<SVGIcons
alt="All Activity"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.ALL_APPLICATION}
width="16px"
/>
@ -20,7 +112,7 @@ export const filterList = [
icon: (
<SVGIcons
alt="My Data"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.FOLDER}
width="16px"
/>
@ -32,7 +124,7 @@ export const filterList = [
icon: (
<SVGIcons
alt="Mentions"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.MENTIONS}
width="16px"
/>
@ -44,7 +136,7 @@ export const filterList = [
icon: (
<SVGIcons
alt="Following"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.STAR}
width="16px"
/>
@ -59,7 +151,7 @@ export const threadFilterList = [
icon: (
<SVGIcons
alt="All Threads"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.ALL_APPLICATION}
width="16px"
/>
@ -69,7 +161,7 @@ export const threadFilterList = [
name: 'Task',
value: 'Task',
icon: (
<SVGIcons alt="Task" className="tw-mr-2" icon={Icons.TASK} width="16px" />
<SVGIcons alt="Task" className="m-r-xs" icon={Icons.TASK} width="16px" />
),
},
{
@ -78,7 +170,7 @@ export const threadFilterList = [
icon: (
<SVGIcons
alt="Conversation"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.COMMENT_GREY}
width="16px"
/>
@ -90,7 +182,7 @@ export const threadFilterList = [
icon: (
<SVGIcons
alt="Announcement"
className="tw-mr-2"
className="m-r-xs"
icon={Icons.ANNOUNCEMENT_BLACK}
width="16px"
/>

View File

@ -0,0 +1,33 @@
/*
* Copyright 2022 Collate
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@task-card-border: #c6b5f6;
@announcement-card-border: #b02aac99;
@announcement-background-color: #fcf6fc;
@feed-card-border-color: #dde3ea;
@feed-card-shadow-color: #0000000f;
.ant-card-feed {
border: 1px solid @feed-card-border-color;
border-radius: 4px;
box-shadow: 1px 1px 8px @feed-card-shadow-color;
}
.task-feed-card {
border: 1px solid @task-card-border;
}
.announcement-feed-card {
border: 1px solid @announcement-card-border;
background-color: @announcement-background-color;
}

View File

@ -12,14 +12,10 @@
*/
import { Card } from 'antd';
import classNames from 'classnames';
import { isEqual } from 'lodash';
import React, { FC, Fragment } from 'react';
import { useHistory } from 'react-router-dom';
import {
ANNOUNCEMENT_BG,
ANNOUNCEMENT_BORDER,
TASK_BORDER,
} from '../../../constants/feed.constants';
import {
Post,
ThreadTaskStatus,
@ -27,13 +23,13 @@ import {
} from '../../../generated/entity/feed/thread';
import { getTaskDetailPath } from '../../../utils/TasksUtils';
import AssigneeList from '../../common/AssigneeList/AssigneeList';
import { leftPanelAntCardStyle } from '../../containers/PageLayout';
import ActivityFeedCard from '../ActivityFeedCard/ActivityFeedCard';
import FeedCardFooter from '../ActivityFeedCard/FeedCardFooter/FeedCardFooter';
import ActivityFeedEditor from '../ActivityFeedEditor/ActivityFeedEditor';
import AnnouncementBadge from '../Shared/AnnouncementBadge';
import TaskBadge from '../Shared/TaskBadge';
import { FeedListBodyProp } from './ActivityFeedList.interface';
import './FeedListBody.less';
const FeedListBody: FC<FeedListBodyProp> = ({
updatedFeedList,
@ -131,19 +127,16 @@ const FeedListBody: FC<FeedListBodyProp> = ({
return (
<Card
className="ant-card-feed tw-relative"
key={`${index} - card`}
style={{
...leftPanelAntCardStyle,
marginTop: '20px',
paddingTop: isTask || isAnnouncement ? '8px' : '',
border: isTask
? `1px solid ${TASK_BORDER}`
className={classNames(
'ant-card-feed relative m-t-md',
isTask || isAnnouncement ? 'p-t-xs' : '',
isTask
? 'task-feed-card'
: isAnnouncement
? `1px solid ${ANNOUNCEMENT_BORDER}`
: leftPanelAntCardStyle.border,
background: isAnnouncement ? `${ANNOUNCEMENT_BG}` : '',
}}
? 'announcement-feed-card'
: ''
)}
key={`${index} - card`}
onClick={() =>
feed.task && handleCardClick(feed.task.id, isTask)
}>

View File

@ -228,6 +228,7 @@ const MyData: React.FC<MyDataProps> = ({
{feedData?.length > 0 || !filtersApplied || newFeedsLength ? (
<>
<ActivityFeedList
stickyFilter
withSidePanel
deletePostHandler={deletePostHandler}
feedList={feedData}

View File

@ -362,7 +362,8 @@
"field-region-name-description": "Region name. Required when using AWS Credentials.",
"no-permission-for-action": "You do not have the necessary permissions to perform this action.",
"no-permission-to-view": "You do not have the necessary permissions to view this data.",
"no-schema-data-available": " No schema data available"
"no-schema-data-available": " No schema data available",
"no-data-available-for-selected-filter": "No data found. Try changing the filters."
},
"server": {
"no-followed-entities": "You have not followed anything yet.",

View File

@ -288,6 +288,14 @@
}
}
// Font Weight
.font-normal {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.transform-180 {
transform: rotate(180deg);
}
@ -299,9 +307,6 @@
.bg-white {
background: @white;
}
.font-semibold {
font-weight: 600;
}
.z-10 {
z-index: 10;
}

View File

@ -42,6 +42,10 @@
margin-right: @margin-xs;
margin-left: @margin-xs;
}
.m-x-xss {
margin-right: @margin-xss;
margin-left: @margin-xss;
}
.m-x-sm {
margin-right: @margin-sm;
margin-left: @margin-sm;
@ -100,6 +104,9 @@
.m-l-xs {
margin-left: @margin-xs;
}
.m-l-xss {
margin-left: @margin-xss;
}
.m-l-sm {
margin-left: @margin-sm;
}
@ -139,6 +146,9 @@
.m-b-xs {
margin-bottom: @margin-xs;
}
.m-b-xss {
margin-bottom: @margin-xss;
}
.m-b-sm {
margin-bottom: @margin-sm;
}

View File

@ -26,6 +26,7 @@ import IconAdmin from '../assets/svg/admin.svg';
import IconAlertBell from '../assets/svg/alert-bell.svg';
import IconAllActivity from '../assets/svg/all-activity.svg';
import IconAnnouncementsBlack from '../assets/svg/announcements-black.svg';
import IconAnnouncementsPrimary from '../assets/svg/announcements-primary.svg';
import IconAnnouncementsPurple from '../assets/svg/announcements-purple.svg';
import IconAnnouncements from '../assets/svg/announcements.svg';
import IconAPI from '../assets/svg/api.svg';
@ -72,8 +73,10 @@ import IconFitView from '../assets/svg/fitview.svg';
import IconForeignKey from '../assets/svg/foriegnKey.svg';
import IconFullScreen from '../assets/svg/full-screen.svg';
import IconGithubStar from '../assets/svg/github-star.svg';
import IconAllApplicationPrimary from '../assets/svg/ic-all-application-primary.svg';
import IconAllApplication from '../assets/svg/ic-all-application.svg';
import IconCheckCircle from '../assets/svg/ic-check-circle.svg';
import IconCommentPrimary from '../assets/svg/ic-comment-grey-primary.svg';
import IconCommentGrey from '../assets/svg/ic-comment-grey.svg';
import IconDeleteColored, {
ReactComponent as IcDeleteColored,
@ -87,6 +90,7 @@ import IconExclamationCircle from '../assets/svg/ic-exclamation-circle.svg';
import IconExplore from '../assets/svg/ic-explore.svg';
import IconFeed from '../assets/svg/ic-feed.svg';
import IconFilter from '../assets/svg/ic-filter.svg';
import IconFolderPrimary from '../assets/svg/ic-folder-primary.svg';
import IconFolder from '../assets/svg/ic-folder.svg';
import IconGrowthArrow from '../assets/svg/ic-growth-arrow.svg';
import IconHome from '../assets/svg/ic-home.svg';
@ -95,6 +99,7 @@ import IconIssues from '../assets/svg/ic-issues.svg';
import IconLineage from '../assets/svg/ic-lineage.svg';
import IconLossArrow from '../assets/svg/ic-loss-arrow.svg';
import IconManage from '../assets/svg/ic-manage.svg';
import IconMentionsPrimary from '../assets/svg/ic-mentions-primary.svg';
import IconMentions from '../assets/svg/ic-mentions.svg';
import IconMenu from '../assets/svg/ic-menu.svg';
import IconMyData from '../assets/svg/ic-mydata.svg';
@ -108,9 +113,11 @@ import IconSettingGray from '../assets/svg/ic-settings-gray.svg';
import IconSettingPrimery from '../assets/svg/ic-settings-primery.svg';
import IconSettings from '../assets/svg/ic-settings.svg';
import IconSQLBuilder from '../assets/svg/ic-sql-builder.svg';
import IconStarPrimary from '../assets/svg/ic-star-primary.svg';
import IconStar from '../assets/svg/ic-star.svg';
import IconStore from '../assets/svg/ic-store.svg';
import IconSync from '../assets/svg/ic-sync.svg';
import IconTaskPrimary from '../assets/svg/ic-task-primary.svg';
import IconTask from '../assets/svg/ic-task.svg';
import IconTeams from '../assets/svg/ic-teams.svg';
import IconThumbsUp from '../assets/svg/ic-thumbs-up.svg';
@ -324,6 +331,7 @@ export const Icons = {
ANNOUNCEMENT: 'icon-announcement',
ANNOUNCEMENT_BLACK: 'icon-announcement-black',
ANNOUNCEMENT_PURPLE: 'icon-announcement-purple',
ANNOUNCEMENT_PRIMARY: 'icon-announcement-primary',
CHEVRON_DOWN: 'icon-chevron-down',
ICON_UP: 'icon-up',
ICON_DOWN: 'icon-down',
@ -348,11 +356,17 @@ export const Icons = {
FEED_DELETE: 'feed-delete',
ALERT_BELL: 'alert-bell',
TASK: 'ic-task',
TASK_PRIMARY: 'ic-task-primary',
ALL_APPLICATION: 'all-application',
ALL_APPLICATION_PRIMARY: 'all-application-primary',
FOLDER: 'ic-folder',
FOLDER_PRIMARY: 'ic-folder-primary',
STAR: 'ic-star',
STAR_PRIMARY: 'ic-star-primary',
MENTIONS: 'ic-mentions',
MENTIONS_PRIMARY: 'ic-mentions-primary',
COMMENT_GREY: 'ic-comment-grey',
COMMENT_PRIMARY: 'ic-comment-grey-primary',
TASK_ICON: 'task-icon',
TASK_CLOSED: 'task-closed',
TASK_OPEN: 'task-open',
@ -886,6 +900,10 @@ const SVGIcons: FunctionComponent<Props> = ({
case Icons.ANNOUNCEMENT_BLACK:
IconComponent = IconAnnouncementsBlack;
break;
case Icons.ANNOUNCEMENT_PRIMARY:
IconComponent = IconAnnouncementsPrimary;
break;
case Icons.REQUEST:
IconComponent = IconRequest;
@ -993,26 +1011,50 @@ const SVGIcons: FunctionComponent<Props> = ({
case Icons.TASK:
IconComponent = IconTask;
break;
case Icons.TASK_PRIMARY:
IconComponent = IconTaskPrimary;
break;
case Icons.ALL_APPLICATION:
IconComponent = IconAllApplication;
break;
case Icons.ALL_APPLICATION_PRIMARY:
IconComponent = IconAllApplicationPrimary;
break;
case Icons.FOLDER:
IconComponent = IconFolder;
break;
case Icons.FOLDER_PRIMARY:
IconComponent = IconFolderPrimary;
break;
case Icons.STAR:
IconComponent = IconStar;
break;
case Icons.STAR_PRIMARY:
IconComponent = IconStarPrimary;
break;
case Icons.MENTIONS:
IconComponent = IconMentions;
break;
case Icons.MENTIONS_PRIMARY:
IconComponent = IconMentionsPrimary;
break;
case Icons.COMMENT_GREY:
IconComponent = IconCommentGrey;
break;
case Icons.COMMENT_PRIMARY:
IconComponent = IconCommentPrimary;
break;
case Icons.TASK_CLOSED:
IconComponent = IconTaskClose;

View File

@ -12,14 +12,21 @@
*/
/* eslint-disable max-len */
import classNames from 'classnames';
import React, { CSSProperties } from 'react';
import { TEXT_BODY_COLOR } from '../constants/constants';
export const dropdownIcon = ({ style }: { style?: CSSProperties }) => {
export const dropdownIcon = ({
className,
style,
}: {
className?: string;
style?: CSSProperties;
}) => {
return (
<svg
aria-hidden="true"
className="tw-inline-block tw-h-4 tw-w-4 tw-ml-0.5"
className={classNames('d-inline-block h-4 w-4', className)}
fill={style?.color}
style={style}
viewBox="0 0 16 16"