Add a title to the homepage link (npm#253)

anurbol · web-flow · commit 706f70c6b3dd · 2022-10-20T10:00:18.000+04:00
* Add a title to the homepage link
diff --git a/theme/src/components/header.js b/theme/src/components/header.js
@@ -31,8 +31,8 @@ function Header({location, isSearchEnabled = true}) {
   const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
   const siteMetadata = useSiteMetadata()
 
-  const logoStyle = { 'color': '#cb0000' };
-  const titleStyle = { 'color': '#dddddd', 'fontWeight': '600' };
+  const logoStyle = { 'color': '#cb0000', 'marginRight': '16px' };
+  const titleStyle = { 'color': '#dddddd', 'fontWeight': '600', 'display': 'flex', 'alignItems': 'center' };
 
   return (
     <Sticky>
@@ -45,10 +45,8 @@ function Header({location, isSearchEnabled = true}) {
         bg="#333333"
       >
         <Flex alignItems="center">
-          <Link as={GatsbyLink} to="/" style={logoStyle} mr={3}>
-            <NpmLogo size="32" />
-          </Link>
           <Link as={GatsbyLink} to="/" style={titleStyle} mr={4}>
+            <NpmLogo size="32" style={logoStyle} />
             {siteMetadata.title}
           </Link>
 
diff --git a/theme/src/components/npm-logo.js b/theme/src/components/npm-logo.js
@@ -6,7 +6,7 @@ export default class NpmLogo extends React.Component {
     const fgcolor = this.props.fg || "#ffffff";
 
     return (
-      <svg height={this.props.size} width={this.props.size} viewBox="0 0 700 700" fill="currentColor">
+      <svg height={this.props.size} width={this.props.size} viewBox="0 0 700 700" fill="currentColor" style={this.props.style} aria-hidden="true">
         <polygon fill={bgcolor} points="0,700 700,700 700,0 0,0" />
         <polygon fill={fgcolor} points="150,550 350,550 350,250 450,250 450,550 550,550 550,150 150,150 "/>
       </svg>
