fix(v2): improve Footer structure, add class names, use Infima transi…

…tion (#3882)
facebook · Dec 7, 2020 · e00e54a · e00e54a
1 parent 9fd8a3c
commit e00e54a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
@@ -90,7 +90,7 @@ function Footer(): JSX.Element | null {
           </div>
         )}
         {(logo || copyright) && (
-          <div className="text--center">
+          <div className="footer__bottom text--center">
             {logo && logo.src && (
               <div className="margin-bottom--sm">
                 {logo.href ? (
@@ -106,14 +106,16 @@ function Footer(): JSX.Element | null {
                 )}
               </div>
             )}
-
-            <div
-              // Developer provided the HTML, so assume it's safe.
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: copyright ?? '',
-              }}
-            />
+            {copyright ? (
+              <div
+                className="footer__copyright"
+                // Developer provided the HTML, so assume it's safe.
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML={{
+                  __html: copyright,
+                }}
+              />
+            ) : null}
           </div>
         )}
       </div>

diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Footer/styles.module.css
@@ -7,7 +7,7 @@
 
 .footerLogoLink {
   opacity: 0.5;
-  transition: opacity 0.15s ease-in-out;
+  transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
 }
 
 .footerLogoLink:hover {