Skip to content
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

[Site] [Dark Mode] Update import catalog modal according to theme #1203 #1247

Merged
merged 21 commits into from
Aug 16, 2023

Conversation

vaibhav-xp
Copy link
Contributor

Description
There is no option left except this. If we declare a sass variable, it conflicts with the dark and light theme colors. @sudhanshutech has tried before this is pr #1114 and it was closed.
This PR fixes #1203

Signed commits

  • Yes, I signed my commits.

@netlify
Copy link

netlify bot commented Jul 2, 2023

Deploy Preview for mesheryio-preview ready!

Name Link
🔨 Latest commit 808d772
🔍 Latest deploy log https://app.netlify.com/sites/mesheryio-preview/deploys/64dd17f35f080d00086b73d0
😎 Deploy Preview https://deploy-preview-1247--mesheryio-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@vishalvivekm
Copy link
Member

hmm build is failing..
@vaibhav-xt Let's discuss this on the Websites call. Please add this as an agenda item in the meeting minutes if you would. :)

@samyakshah3008
Copy link
Member

@vaibhav-xt Let's discuss this on Websites Meeting call on Monday. Please add this as an agenda item in the meeting mintes if you would. :)

@vaibhav-xp vaibhav-xp force-pushed the vaibhav-xt branch 2 times, most recently from d3d831f to 1260c50 Compare July 12, 2023 07:45
@vaibhav-xp
Copy link
Contributor Author

vaibhav-xp commented Jul 18, 2023

Hello @samyakshah3008, @Chadha93 & @vishalvivekm , please get a review and I think it's ready to merge.

Screenshot (16)

@@ -9,6 +9,9 @@
font-size: 18px;
font-weight: 400;
}
.tabcontent h3{
color: #000;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use theme ref

@@ -276,6 +279,11 @@ p {
text-align: center;
padding: 15px 0 15px 0;
}

.pattern-name-comingsoon{
color: #fff;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too

@Chadha93
Copy link
Member

@vaibhav-xt Review changes pending...

Copy link
Contributor

@thisiskaransgit thisiskaransgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @vaibhav-xt, thank you for your efforts here. The implemented change does not go well with the website.

  • The change of text color is desirable, what we need to change is the modal color according to the theme, the same way we implemented it in the catalog modal. This change will be easily done by referencing the color variable.
  background-color: var(--integrations-bg);

Also, change the tab heading color to Kepple green

  • For the coming soon card,
  1. Remove the declaration of h5 style from programs.scss and add it to the element style file
h4, h5, h6{
   color: var(--color-secondary-dark);
}
  1. Make the style consistent, by removing the background shade.
  2. Change the overlay-text to be dark mode compatible

The issue that you described was due to the presidency of styles, by following the above steps it will be fixed for this section.

Copy link
Member

@Chadha93 Chadha93 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vaibhav-xt Please also add links to meshery docs for UI and mesherctl in the modal section.

Signed-off-by: Vaibhav Maurya <[email protected]>
Copy link
Contributor

@thisiskaransgit thisiskaransgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @vaibhav-xt, Rest of the changes looks good, but the pattern-id is not visible

in _sass/catalog.scss
Remove color style

pattern-id-overlay{
color: white
}

Do this and we're done here

Signed-off-by: Vaibhav Maurya <[email protected]>
Copy link
Contributor

@thisiskaransgit thisiskaransgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to merge, thank you for your contribution 🎉

Copy link
Contributor

@thisiskaransgit thisiskaransgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_includes/help-modal.html Outdated Show resolved Hide resolved
_includes/help-modal.html Outdated Show resolved Hide resolved
Chadha93 and others added 2 commits August 10, 2023 20:46
Co-authored-by: Karan Thakur <[email protected]>
Signed-off-by: Gaurav Chadha <[email protected]>
Co-authored-by: Karan Thakur <[email protected]>
Signed-off-by: Gaurav Chadha <[email protected]>
_includes/help-modal.html Outdated Show resolved Hide resolved
_includes/help-modal.html Outdated Show resolved Hide resolved
@Chadha93 Chadha93 merged commit 90b95fa into meshery:master Aug 16, 2023
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Site] [Dark Mode] Update import catalog modal according to theme
5 participants