Better styling with Infima

facebook · Aug 19, 2021 · e2e1d4b · e2e1d4b
1 parent b7f9a64
commit e2e1d4b
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 12 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx b/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/index.tsx
@@ -16,7 +16,7 @@ function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
   return (
     <article>
       <h2>{letterEntry.letter}</h2>
-      <ul className={styles.tags}>
+      <ul className="padding--none">
         {letterEntry.tags.map((tag) => (
           <li key={tag.permalink} className={styles.tag}>
             <Tag {...tag} />

diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TagsListByLetter/styles.module.css
@@ -5,14 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-:root {
-  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
-}
-
-.tags {
-  padding: 0;
-}
-
 .tag {
   display: inline-block;
   margin: 0.5rem 0.5rem 0 1rem;

diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/TagsListInline/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import Tag from '@theme/Tag';
 import type {Props} from '@theme/TagsListInline';
@@ -22,7 +23,7 @@ export default function TagsListInline({tags}: Props) {
           Tags:
         </Translate>
       </b>
-      <ul className={styles.tags}>
+      <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
         {tags.map(({label, permalink: tagPermalink}) => (
           <li key={tagPermalink} className={styles.tag}>
             <Tag name={label} permalink={tagPermalink} />

diff --git a/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css b/packages/docusaurus-theme-classic/src/theme/TagsListInline/styles.module.css
@@ -8,8 +8,6 @@
 .tags {
   list-style: none;
   display: inline-flex;
-  padding: 0;
-  margin: 0 0 0 0.5rem;
 }
 
 .tag {