mig8447 / code-sampler Goto Github PK

Bug found in Searchbar component

• Dropdown tags filter appears to be taking more width that is suppose to for responsive and cellphone sizes when is open.
• Cambiar icono de filtro al aplicar algún filtro del dropdown

Filters Dropdown

• Spaces on bottom and the sides are not the same
• Remove the min-width

Code Sample

• Change font in the code tabs (text truncate) | (white-space: nowrap;)

SearchBar

• Add a margin-right of 0.5rem

Settings Modal

• Close button must be green

Tags

• Change format of the pills
  
  

Index Page

• Center the cards on the index page
• Add col-auto in the buttons of the cards
• Remove padding on the filter button
• Change the fill color on the bookmark icon
• Order the Code Sampler logo
• Remove count: in the badges title
• Remove the margin on margin in the top tags cards
• Space between the cards ant title on the top tags cards is not the same on the bottom
• Change the hardness on the lines in the top tags cards
• Recent content title should have the same space in top and bottom

Settings Modal

• Change the contrast with the background and the pills
• Pills must be buttons only
• Add borders to the filter box
• Capitalize the titles on the labels
• Hide scrollbar if is not necessary
• Adjust the position of the search icon
• Correct the margin between titles and components (check first margin)
• Set a default in the color mode icon
• Remove the tags of light mode and dark mode, just leave a Theme label
• Remove the x to close the modal

Filters Dropdown

• Change the contrast with the background and the pills
• Round the borders (rounded-lg)

Code Sample Page

• Space in the code snippet is not the same on top and bottom
• Space between icons must be the same
• Add min-height to the code snippet
• Change font-size in the titles of the code snippet
• Add margin at the end of the content (2 or 3rem)
• Check the round of the borders in the code snippet
• Bookmark icon must be 1rem size
• Align the title with the paragraph
• Align the bookmark icon with the end of the line
• Add a return with .. in the Code Sampler title

Calcular el contraste de un color de back con fore (www.contrastchecker.com)

Icons should be 1rem size

Pending

• Add margin to title
• Fix title and book mark icon on small and medium devices.

Footer

• Buttons of "Star" and "Fork" of GitHub (clipboardjs.com)

• GitHub Tags (build status)

GitHub buttons:
https://buttons.github.io/
GitHub Tags
https://shields.io/

Results Table

• Space in top and sides must be the same
• Results title must be outside the card
• Change the results format like the cards in the index page
• Remove the Found: badge, and put the label "Found x results for keyword"
• Keep the keyword in the searchbar