Update theme (#248)

Author: yathomasi

packages/gatsby-theme-iterative/config/prismjs/dvc-commands.js

@@ -73,6 +73,10 @@ module.exports = [
   'stage list',
   'stage',
   'status',
+  'studio login',
+  'studio logout',
+  'studio token',
+  'studio',
   'unfreeze',
   'unprotect',
   'update',

packages/gatsby-theme-iterative/src/components/HamburgerMenu/index.tsx

@@ -17,6 +17,7 @@ import studioLogo from '../../images/studio_icon-color--square_vector.svg'
 import mlemLogo from '../../images/mlem-icon.svg'
 
 import * as styles from './styles.module.css'
+import LogoGradient from '../LogoGradient'
 
 const docsPage = getFirstPage()
 
@@ -75,13 +76,9 @@ export const HamburgerMenu: React.FC<
         >
           <LogoSVG />
         </Link>
-        <Link
-          className={styles.company}
-          href="https://iterative.ai/"
-          target="_blank"
-        >
-          by <span className={styles.companyName}>iterative.ai</span>
-        </Link>
+        <LogoGradient className="mr-auto" href="https://dvc.ai/">
+          by <span className="font-extrabold">dvc.ai</span>
+        </LogoGradient>
       </div>
       <ul className={styles.sections}>
         <li className={styles.section}>

packages/gatsby-theme-iterative/src/components/LayoutFooter/index.tsx

@@ -13,10 +13,10 @@ import { ReactComponent as TwitterSVG } from '../SocialIcon/twitter.svg'
 import { ReactComponent as DiscordSVG } from '../SocialIcon/discord.svg'
 import { ReactComponent as CmlSVG } from '../../images/cml_icon-color--square_vector.svg'
 import { ReactComponent as StudioSVG } from '../../images/studio_icon-color--square_vector.svg'
-import { ReactComponent as IterativeSVG } from '../../images/iterative_icon-color--square_vector.svg'
 import { ReactComponent as MlemSVG } from '../../images/mlem-icon.svg'
 
 import * as styles from './styles.module.css'
+import LogoGradient from '../LogoGradient'
 
 const docsPage = getFirstPage()
 
@@ -189,14 +189,9 @@ const LayoutFooter: React.FC = () => (
       <div className={styles.bottomRow}>
         <p className={styles.companyLabel}>
           By{' '}
-          <Link
-            className={styles.companyName}
-            href="https://iterative.ai/"
-            target="_blank"
-          >
-            <IterativeSVG className={styles.companyLogo} />
-            iterative.ai
-          </Link>
+          <LogoGradient className="font-extrabold mr-1" href="https://dvc.ai">
+            dvc.ai
+          </LogoGradient>
           <span className={styles.companyDescription}>
             <ShowOnly as="span" on="desktop">
               {' '}

packages/gatsby-theme-iterative/src/components/LayoutHeader/HeaderBranding/index.tsx

@@ -3,18 +3,15 @@ import React from 'react'
 import Link from '../../Link'
 import { ReactComponent as LogoSVG } from '../../../images/dvc_icon-color--square_vector.svg'
 import * as styles from './styles.module.css'
+import LogoGradient from '../../LogoGradient'
 
 export const HeaderBranding = () => (
   <>
     <Link href="/" className={styles.logoLink} title="DVC" aria-label="DVC">
       <LogoSVG className={styles.logo} />
     </Link>
-    <Link
-      className={styles.company}
-      href="https://iterative.ai/"
-      target="_blank"
-    >
-      by <span className={styles.companyName}>iterative.ai</span>
-    </Link>
+    <LogoGradient className="mr-auto text-sm" href="https://dvc.ai/">
+      by <span className="font-extrabold">dvc.ai</span>
+    </LogoGradient>
   </>
 )

packages/gatsby-theme-iterative/src/components/LogoGradient/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Link from '../Link'
+
+import * as styles from './styles.module.css'
+import cn from 'classnames'
+
+const LogoGradient = ({
+  href,
+  className,
+  children
+}: {
+  href: string
+  className?: string
+  children: React.ReactNode
+}) => {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        styles.logoGradient,
+        'font-medium no-underline whitespace-nowrap ml-1.5 py-2.5 focus:opacity-75 md:px-2.5 md:ml-0',
+        className
+      )}
+    >
+      {children}
+    </Link>
+  )
+}
+
+export default LogoGradient

packages/gatsby-theme-iterative/src/components/LogoGradient/styles.module.css

@@ -0,0 +1,11 @@
+.logoGradient {
+  background: linear-gradient(
+    270deg,
+    var(--color-purple) 0%,
+    var(--color-orange-bright) 100%
+  );
+  background-size: 100%;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -moz-text-fill-color: transparent;
+}