Use the same svg icons

Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
vmware-tanzu · Oct 28, 2022 · f0fa2c7 · f0fa2c7
1 parent 59b4533
commit f0fa2c7
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/site/content/community/_index.html b/site/content/community/_index.html
@@ -13,7 +13,7 @@ <h2>Do you want to help build Kubeapps?</h2>
   <div class="grid three">
     <div class="col">
       <div class="icon">
-        <img alt="GitHub logo" src="/img/github-image.svg" />
+        <img class="logo-big" alt="GitHub logo" src="/img/github.svg" />
       </div>
       <div class="content">
         <h3>
@@ -42,7 +42,7 @@ <h3>
     </div>
     <div class="col">
       <div class="icon">
-        <img alt="Slack logo" src="/img/slack.svg" />
+        <img class="logo-big" alt="Slack logo" src="/img/slack.svg" />
       </div>
       <div class="content">
         <h3>
@@ -70,7 +70,7 @@ <h3>
     </div>
     <div class="col">
       <div class="icon">
-        <img alt="Calendar icon" src="/img/calendar.svg" />
+        <img class="logo-big" alt="Calendar icon" src="/img/calendar.svg" />
       </div>
       <div class="content">
         <h3>

diff --git a/site/themes/template/assets/scss/_components.scss b/site/themes/template/assets/scss/_components.scss
@@ -975,5 +975,18 @@ a.section-link::after {
   .aa-DetachedSearchButton {
     border-color: $indigo;
   }
+}
+
+.logo {
+  height: 1.5em;
+  filter: grayscale(100%);
+  transition: filter 0.6s ease-in-out;
+
+  &:hover {
+    filter: grayscale(0%);
+  }
+}
 
+.logo-big {
+  height: 4em;
 }
diff --git a/site/themes/template/layouts/partials/base-footer.html b/site/themes/template/layouts/partials/base-footer.html
@@ -5,21 +5,21 @@
         <li>
           <a target="_blank" rel="noopener" href="{{ .Site.Params.twitter_url }}"
             title="Twitter. This link will open in a new tab">
-            <img src="/img/twitter.png" alt="Twitter logo" />
+            <img class="logo" src="/img/twitter.svg" alt="Twitter logo" />
             Twitter</a>
         </li>
         <li>
           <a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}"
             title="GitHub. This link will open in a new tab">
-            <img src="/img/github.svg" alt="GitHub logo" />
+            <img class="logo" src="/img/github.svg" alt="GitHub logo" />
             <span class="desktop">GitHub</span>
             <span class="mobile">GitHub</span>
           </a>
         </li>
         <li>
           <a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}"
             title="Slack. This link will open in a new tab">
-            <img src="/img/slack.png" alt="Slack logo">
+            <img class="logo" src="/img/slack.svg" alt="Slack logo">
             <span class="desktop">Slack</span>
             <span class="mobile">Slack</span>
           </a>

diff --git a/site/themes/template/layouts/partials/base-header.html b/site/themes/template/layouts/partials/base-header.html
@@ -10,8 +10,8 @@
       <li><a href="/community/" {{ if (eq .RelPermalink "/community/")  }} class="active" {{ end }}>Community</a></li>
       <li><a href="/resources/" {{ if (eq .RelPermalink "/resources/")  }} class="active" {{ end }}>Resources</a></li>
       <li><a href="/docs/{{ $latest }}" {{ if (eq .Page.Section "docs") }} class="active" {{ end }}>Documentation</a></li>
-      <li><a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}" title="Slack. This link will open in a new tab"><img alt="Slack logo" src="/img/slack.png" />Slack</a></li>
-      <li><a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}" title="GitHub. This link will open in a new tab"><img alt="GitHub logo" src="/img/github.svg" />GitHub</a></li>
+      <li><a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}" title="Slack. This link will open in a new tab"><img class="logo" alt="Slack logo" src="/img/slack.svg" />Slack</a></li>
+      <li><a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}" title="GitHub. This link will open in a new tab"><img class="logo" alt="GitHub logo" src="/img/github.svg" />GitHub</a></li>
     </ul>
     <button type="button" class="mobile" onclick="mobileNavToggle()">
       <img class="collapsed-icon" src="/img/hamburger.svg" alt="Mobile nav icon">
@@ -25,9 +25,9 @@
         <li><a href="/docs/{{ $latest }}" {{ if (eq .Page.Section "docs" ) }} class="active" {{ end }}>Documentation</a></li>
       </ul>
       <div class="social">
-        <a target="_blank" rel="noopener" href="{{ .Site.Params.twitter_url }}" title="Twitter. This link will open in a new tab"><img alt="Twitter logo" src="/img/twitter.png" />Twitter</a>
-        <a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}" title="GitHub. This link will open in a new tab"><img alt="GitHub logo" src="/img/github.svg" />GitHub</a>
-        <a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}" title="Slack. This link will open in a new tab"><img alt="Slack logo" src="/img/slack.png" />Slack</a>
+        <a target="_blank" rel="noopener" href="{{ .Site.Params.twitter_url }}" title="Twitter. This link will open in a new tab"><img class="logo" alt="Twitter logo" src="/img/twitter.svg" />Twitter</a>
+        <a target="_blank" rel="noopener" href="{{ .Site.Params.github_url }}" title="GitHub. This link will open in a new tab"><img class="logo" alt="GitHub logo" src="/img/github.svg" />GitHub</a>
+        <a target="_blank" rel="noopener" href="{{ .Site.Params.slack_url }}" title="Slack. This link will open in a new tab"><img class="logo" alt="Slack logo" src="/img/slack.svg" />Slack</a>
       </div>
     </div>
   </div>