-
Notifications
You must be signed in to change notification settings - Fork 876
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat integration page #1584
base: main
Are you sure you want to change the base?
Feat integration page #1584
Conversation
We can remove this
|
Hey @Salman2301! I like the idea, but I find the icons too big and I think it could look better if they were about half their size, wdyt? And the transparent Github icon looks odd, maybe we should replace the transparent octocat with a white one? |
@Grraahaam agree with you on Github icon Open to suggestion |
That's better, but when infisical will have a light/dark mode the icons' colour will have to adapt.. I think it'll be easier to normalize integration icons with : https://github.com/simple-icons/simple-icons as it provides almost all the platforms infisical supports. IMO this will provide an unified design across icons, and will be easier to implement new ones, no need to search for the perfect one online, just import it from the library or through their CDN and you're set! And if the icon doesn't exist, no problem it's open source, we can add it ourselves to the library ✌️ Examples (through the CDN, with dark mode support): URL pattern
ResultsYou can give a look at their frontend if you want: https://simpleicons.org/ What do you think? |
@akhilmhdh or @maidul98 I want to work on integration logs after this PR... if it's get merged. I would like if anyone take a look. |
@Grraahaam Will take a look but it's probably out of scope for this PR. If you can let the team add it somewhere in the project milestone backlog for the light mode. I think that will be the best course of action for now. |
Maybe you're right, since it might impact more than just the integration page. 👍🏽 @akhilmhdh @vmatsiiako @dangtony98 What do you think about the above suggestion ? |
@Salman2301 can you kindly remove the images on left side. It doen't go with the ui at all. Kinda looks bad or mismatching |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more change would be top bar. The select is kinda weird or rather doesn't go with the ui
I would recommend keep the filter and sort as icon buttons to top right. Then when clicked they could select the various options as needed.
You can keep the filter like Radix Menu Edit > Menu
@akhilmhdh Do you want the filter and sort to be one icon?
Or two icons one for filter one for sort? |
I use the same ui as the audit log page... |
Hi, I'm the maintainer of the Simple Icons project. Please note that the dark mode feature https://cdn.simpleiocns.org/github/black/white won't work in Safari. See this: https://stackoverflow.com/questions/58493483/issue-with-embedded-svg-images-in-dark-mode The <picture>
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.simpleicons.org/github/white">
<source media="(prefers-color-scheme: light)" srcset="https://cdn.simpleicons.org/github/black">
<img alt="GitHub" src="https://cdn.simpleicons.org/github/black">
</picture> In the meantime, other CDN services exist, such as jsDelivr and unpkg. Here are their differences: cdn.simpleicons.orgIt supports brand colors and SVG inline color schemes for dark mode. This service is hosted on Vercel. It does not support history versions. It always provides the latest version of Simple Icons. Which means an icon is subject to removal. See removal of brands. jsDelivr & unpkgIt's more professional for CDN, and it has a faster response speed. It supports history versions. But it does not have a fill color. The color is up to your HTML context. Note: jsDelivr has Which solution would be better?It depends on what you need about the image/icon. If you only need black and whiteThe jsDelivr would be the best solution. You can use CSS If you want the brand colorjsDelivrYou could bundle the simple-icons.json file only. It has the full icon list with its slug and brand color value. And use CSS mask to apply the brand color to your jsDelivr resource. Here is an example: https://github.com/LitoMore/simple-icons-figma/blob/a5c2fae7ddcb68985c54d7ac7a0f3a9c75cca34f/source/components/icon.tsx#L62-L68. cdn.simpleicons.orgThis is convenient but has a slower response than jsDelivr. And it has some limitations: Consuming the Vercel resource of LitoMore/simple-icons-cdn rapidly may quickly reach the rate limit. We're using the Vercel free plan, so this solution is not friendly to some services with a large request volume. Feel free to ping me if you have any questions. |
Thanks @LitoMore for the usage clarification and suggestions! Great tool by the way 🚀 |
Description 📣
This PR add environment, integration and sorting dropdown for the integration page.
Type ✨
Tests 🛠️
output_video.mp4