Fixed padding between icon and text in UI

[Muniir1]

Description

Fixed padding between icon and text in UI

Generated using OpenSauced.

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #20

Mobile & Desktop Screenshots/Recordings

the problem

the result

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for sauced-intro ready!

Name	Link
🔨 Latest commit	e8054bd
🔍 Latest deploy log	https://app.netlify.com/sites/sauced-intro/deploys/652318562139c600091521f3
😎 Deploy Preview	https://deploy-preview-27--sauced-intro.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Muniir1]

fixed no padding between icon and the text
before

after

the problem was not only the introduction page also the other pages and i fixed all of them

here are different sizes
before

after

[Muniir1]

@bdougie please can you merge this?

[dev-phantom]

Please can you give this PR a descriptive title
And also can you tag the issue this PR fixed
You can use the (e.g Fixes #123) this helps to auto close the issue when this PR gets merged

[Muniir1]

@dev-phantom thanks for your replay i made those changes, have a look

[dev-phantom]

@dev-phantom thanks for your replay i made those changes, have a look

Ok nice
But it is "text" not "tex"

And I don't feel you need to add "tag" to the PR template as it already has "related tickets and documents"

[Muniir1]

@dev-phantom i am really sorry, how about now!?

[dev-phantom]

@dev-phantom i am really sorry, how about now!?

No need to apologize
The issue you fixed is #20 not #27
And you didn't change the "Tex" in the PR title

[Muniir1]

@dev-phantom what about now!

[bdougie]

Working with all the generated css will make it hard to do custom UI.

Per @Muniir1, the important is needed and we may consider building something custom if we would like customize the site further

[bdougie]

I'll also point out that we could potentially ship a fix upstream to the docsify project. Seems like a straight forward contribution @Muniir1

[Muniir1]

@bdougie "Thank you for the insights! I understand the concern about using !important excessively and its potential impact on the custom UI. Considering the drawbacks, I agree that it would be best to explore other options and potentially build a custom solution to achieve the desired UI customizations. Additionally, I'll look into the possibility of contributing a fix or improvement to the 'docsify' project to address the issue more elegantly. Your input has been very helpful in guiding my approach. Thanks again!"

[Muniir1]

@bdougie can you please check the changes that i just made and it works the same as the result before.
and i do not use !important please have a look thanks

[bdougie]

@bdougie can you please check the changes that i just made and it works the same as the result before. and i do not use !important please have a look thanks

The changes are great and work. I question the approach manually adding the ids. What happens when we add a new section? Or a new language?

Does it make sense to modify the class-name instead?

Also, does it make more sense to fix here in the theme? https://github.com/docsifyjs/docsify/blob/develop/src/themes/vue.styl

[NsdHSO]

@Muniir1 why in the section of the description is checked the test checkbox ???