used colored label component in /contributing-code page

Author: ooyeraju

content/contributing-code/contents.lr

@@ -17,19 +17,19 @@ We make extensive use of issue labels to designate the priority, status and begi
 
 - **Issues available for community contribution:**
   - The following tags mark issues that are open for community contribution:
-    - `help wanted`: Open to participation from the community but not necessarily beginner-friendly
-    - `good first issue`: Open to participation from the community and friendly towards new contributors
+    - <span class="gh-label friendliness">help wanted</span> : Open to participation from the community but not necessarily beginner-friendly
+    - <span class="gh-label friendliness">good first issue</span> : Open to participation from the community and friendly towards new contributors
   - You do not need our permission to work on one of these issues.
-  - You may work on an issue labeled `good first issue` even if it's not your first issue.
+  - You may work on an issue labeled <span class="gh-label friendliness">good first issue</span> even if it's not your first issue.
 * **Issues not available for community contribution:**
   - The following tags mark issues that are _not_ open for community contribution:
-    - `🔒 staff only`: Requires infrastructure access or institutional knowledge that would be impractical to provide to the community
+    - <span class="gh-label friendliness">🔒 staff only</span> : Requires infrastructure access or institutional knowledge that would be impractical to provide to the community
   - Do not work on these.
 - **Issues not ready for work:**
   - The following tags mark issues that are _not_ open for community contribution:
-    - `🚧 blocked`: Blocked by other work that needs to be done first
-    - `🧹 ticket work required`: Needs additional work before it is ready to be taken up
-    - `🚦 awaiting triage`: Has not been triaged by a maintainer
+    - <span class="gh-label status-neutral">🚧 status: blocked</span>: Blocked by other work that needs to be done first
+    - <span class="gh-label status-dark">🧹 status: ticket work required </span>: Needs additional work before it is ready to be taken up
+    - <span class="gh-label status-darker">🚦 status: awaiting triage</span>: Has not been triaged by a maintainer
   - Do not work on these.
 - **Issues without any of the above labels:**
   - These issues _may_ (or may not) be open for contribution.