From 2bda607845e2433d4a087487043934714878bc75 Mon Sep 17 00:00:00 2001
From: taisho <taisuou@gmail.com>
Date: Tue, 26 Dec 2023 11:24:43 +0900
Subject: [PATCH] add x icon to header and footer (#153)

* add x icon to header and footer

* :robot: auto update minified files :recycle:

Signed-off-by: vdaas-ci <ci@vdaas.org>

* :robot: auto update stage :arrow_up:

Signed-off-by: vdaas-ci <ci@vdaas.org>

* add sns icons to the footer and modified layouts

* :robot: auto update minified files :recycle:

Signed-off-by: vdaas-ci <ci@vdaas.org>

* :robot: auto update stage :arrow_up:

Signed-off-by: vdaas-ci <ci@vdaas.org>

---------

Signed-off-by: vdaas-ci <ci@vdaas.org>
Co-authored-by: vdaas-ci <ci@vdaas.org>
---
 preview                                       |  2 +-
 themes/vald/layouts/partials/footer.html      | 22 ++++++-
 themes/vald/static/css/footer.css             | 64 ++++++++++++-------
 themes/vald/static/css/footer.min.css         |  2 +-
 themes/vald/static/css/header.css             |  6 ++
 themes/vald/static/css/header.min.css         |  2 +-
 .../vald/static/images/logo_slack_black.svg   | 27 ++++++++
 .../vald/static/images/logo_slack_white.svg   | 30 +++++++++
 themes/vald/static/images/logo_x_black.svg    |  3 +
 themes/vald/static/images/logo_x_white.svg    |  3 +
 10 files changed, 133 insertions(+), 28 deletions(-)
 create mode 100644 themes/vald/static/images/logo_slack_black.svg
 create mode 100644 themes/vald/static/images/logo_slack_white.svg
 create mode 100644 themes/vald/static/images/logo_x_black.svg
 create mode 100644 themes/vald/static/images/logo_x_white.svg

diff --git a/preview b/preview
index 98248b837..c0781aae7 160000
--- a/preview
+++ b/preview
@@ -1 +1 @@
-Subproject commit 98248b837554b19157572813f43ddd4663098eb6
+Subproject commit c0781aae7ef1b697fec8090cd750797ff1796328
diff --git a/themes/vald/layouts/partials/footer.html b/themes/vald/layouts/partials/footer.html
index 2e9d2a4fa..df7d99e5f 100644
--- a/themes/vald/layouts/partials/footer.html
+++ b/themes/vald/layouts/partials/footer.html
@@ -2,7 +2,7 @@
 {{ $ver := "" }}
 {{ $docsBaseURL := "/docs" }}
 <footer class="footer">
-  <div class="footer__content cf">
+  <div class="footer__content">
     {{ if ne .Page.Permalink .Site.BaseURL }}
     {{ $setURL := urls.Parse .Page.Permalink }}
       {{ if (in $setURL.Path "docs/v") }}
@@ -10,7 +10,7 @@
         {{ $docsBaseURL = path.Join $docsBaseURL $ver }}
       {{ end }}
     {{ end }}
-    <ul class="footer__list">
+    <ul class="footer__index">
       <li class="footer__item">
         <a href="{{ $docsBaseURL }}/overview/about-vald" class="footer__link">About<br/></a>
       </li>
@@ -26,6 +26,24 @@
       <li class="footer__item">
         <a href="https://vdaas-vald.medium.com/" target="_blank" class="footer__link">Blog<br/></a>
       </li>
+    </ul>
+    <ul class="footer__sns">
+      <li class="footer__item">
+        <a class="footer__item footer__icon" href="https://twitter.com/vdaas_vald" target="_blank">
+          <picture>
+            <source srcset="{{ .Site.BaseURL }}/images/logo_x_white.svg" media="(prefers-color-scheme: dark)" class="icon__image" width="24" height="24">
+            <img src="{{ .Site.BaseURL }}/images/logo_x_black.svg" alt="x" class="icon__image">
+          </picture>
+        </a>
+      </li>
+      <li class="footer__item">
+        <a class="footer__item footer__icon" href="https://join.slack.com/t/vald-community/shared_invite/zt-db2ky9o4-R_9p2sVp8xRwztVa8gfnPA" target="_blank">
+          <picture>
+            <source srcset="{{ .Site.BaseURL }}/images/logo_slack_white.svg" media="(prefers-color-scheme: dark)" class="icon__image" width="24" height="24">
+            <img src="{{ .Site.BaseURL }}/images/logo_slack_black.svg" alt="slack" class="icon__image">
+          </picture>
+        </a>
+      </li>
       <li class="footer__item">
         <a class="footer__item footer__icon" href="https://github.com/vdaas/vald" target="_blank">
           <picture>
diff --git a/themes/vald/static/css/footer.css b/themes/vald/static/css/footer.css
index dee4aa0b9..ceb948ce3 100644
--- a/themes/vald/static/css/footer.css
+++ b/themes/vald/static/css/footer.css
@@ -3,32 +3,41 @@
   z-index: 999;
   border-top: 2px solid #f8f8f8;
   text-align: center;
-  padding-bottom: 72px;
+  padding-bottom: 64px;
 }
 
 .footer__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 32px 0 24px 0;
 }
 
-@media screen and (min-width: 768px) {
-  .footer__content {
-    max-width: 1108px;
-    padding: 0 24px;
-  }
+.footer__icon:last-child {
+  margin-left: 4px;
+}
+
+.footer__index{
+  display: flex;
+  padding-bottom: 12px;
+  flex-direction: column;
 }
 
-.footer__list {
-  padding: 24px 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 0.9);
-  transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 0.9);
+.footer__sns{
+  display: flex;
+  padding-bottom: 24px;
+  flex-direction: row;
+}
+
+.footer__sns .footer__item{
+  margin: 0 4px;
 }
 
 .footer__link {
   display: inline-block;
-  padding: 12px 0;
+  padding: 0 0 12px 0;
   font-weight: bold;
   color: #006076;
 }
@@ -58,22 +67,31 @@
 }
 
 @media screen and (min-width: 768px) {
+  .footer__content {
+    max-width: 1108px;
+    flex-direction: row;
+  }
+  .footer__index{
+    flex-direction: row;
+    padding-bottom: 0;
+  }
+  .footer__sns{
+    flex-direction: row;
+    padding-bottom: 0;
+  }
+  .footer__item {
+    margin-right: 24px;
+  }
   .footer__icon {
-    position: absolute;
-    margin-left: 12px;
-    margin-top: -18px;
+    margin-right: 12px;
   }
   .icon__image{
     width: 24px;
     height: 24px;
     margin-top: 0;
   }
-}
-
-@media screen and (min-width: 768px) {
-  .footer__item {
-    display: inline-block;
-    margin-right: 24px;
+  .footer__link {
+    padding: 0;
   }
 }
 
diff --git a/themes/vald/static/css/footer.min.css b/themes/vald/static/css/footer.min.css
index 9a63ad155..2f3caf6f6 100644
--- a/themes/vald/static/css/footer.min.css
+++ b/themes/vald/static/css/footer.min.css
@@ -1 +1 @@
-.footer{width:100%;z-index:999;border-top:2px solid #f8f8f8;text-align:center;padding-bottom:72px}.footer__content{margin:0 auto;padding:0 24px}@media screen and (min-width:768px){.footer__content{max-width:1108px;padding:0 24px}}.footer__list{padding:24px 0;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:cubic-bezier(.1,.6,.1,.9);transition-timing-function:cubic-bezier(.1,.6,.1,.9)}.footer__link{display:inline-block;padding:12px 0;font-weight:700;color:#006076}.footer__link--button{border:1px solid;border-radius:2px;padding:4px 8px}.footer__copylight{width:100%;font-size:1.2rem;color:#ccc}.footer__icon{margin-top:10px;width:24px;height:24px}.icon__image{width:24px;height:24px;margin-top:10px}@media screen and (min-width:768px){.footer__icon{position:absolute;margin-left:12px;margin-top:-18px}.icon__image{width:24px;height:24px;margin-top:0}}@media screen and (min-width:768px){.footer__item{display:inline-block;margin-right:24px}}@media (prefers-color-scheme:dark){.footer{background-color:#333;color:#00bab1;border-top:2px solid #393939}.footer__link{color:#00bab1}}
\ No newline at end of file
+.footer{width:100%;z-index:999;border-top:2px solid #f8f8f8;text-align:center;padding-bottom:64px}.footer__content{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;padding:32px 0 24px 0}.footer__icon:last-child{margin-left:4px}.footer__index{display:flex;padding-bottom:12px;flex-direction:column}.footer__sns{display:flex;padding-bottom:24px;flex-direction:row}.footer__sns .footer__item{margin:0 4px}.footer__link{display:inline-block;padding:0 0 12px 0;font-weight:700;color:#006076}.footer__link--button{border:1px solid;border-radius:2px;padding:4px 8px}.footer__copylight{width:100%;font-size:1.2rem;color:#ccc}.footer__icon{margin-top:10px;width:24px;height:24px}.icon__image{width:24px;height:24px;margin-top:10px}@media screen and (min-width:768px){.footer__content{max-width:1108px;flex-direction:row}.footer__index{flex-direction:row;padding-bottom:0}.footer__sns{flex-direction:row;padding-bottom:0}.footer__item{margin-right:24px}.footer__icon{margin-right:12px}.icon__image{width:24px;height:24px;margin-top:0}.footer__link{padding:0}}@media (prefers-color-scheme:dark){.footer{background-color:#333;color:#00bab1;border-top:2px solid #393939}.footer__link{color:#00bab1}}
\ No newline at end of file
diff --git a/themes/vald/static/css/header.css b/themes/vald/static/css/header.css
index 5ae362031..4444a06b8 100644
--- a/themes/vald/static/css/header.css
+++ b/themes/vald/static/css/header.css
@@ -100,6 +100,12 @@
   align-items: center;
 }
 
+.x__logo{
+  padding: 4px 7px 5px 8px;
+  display: flex;
+  align-items: center;
+}
+
 
 .git__logo::after{
   content: '';
diff --git a/themes/vald/static/css/header.min.css b/themes/vald/static/css/header.min.css
index 2e920640e..2a12cba07 100644
--- a/themes/vald/static/css/header.min.css
+++ b/themes/vald/static/css/header.min.css
@@ -1 +1 @@
-.header{position:fixed;width:100%;top:0;z-index:999;color:#006076;border-bottom:2px solid #f8f8f8}.header__content{background-color:rgba(255,255,255,.9)}.header__nav{position:relative;display:flex;height:64px;text-align:center;margin:0 auto}@media screen and (min-width:768px){.header__nav{max-width:1108px}}.header .header-nav__icon{display:inline-block;width:30px;height:23px;margin:21px 24px 21px 0;position:absolute;right:0}@media screen and (min-width:768px){.header .header-nav__icon{display:none}}.header .header-nav__link{position:relative;z-index:9;padding:0 0 0 16px}.header__list{position:absolute;top:64px;width:100%;left:100%;height:100vh;padding:0 24px;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:cubic-bezier(.1,.6,.1,.9);transition-timing-function:cubic-bezier(.1,.6,.1,.9)}@media screen and (min-width:768px){.header__list{height:64px;position:relative;display:flex;align-items:center;justify-content:right;left:0;-webkit-transition:none;transition:none;top:0}}.header__list--open{left:0;background-color:rgba(255,255,255,.95);-webkit-transition:0;transition:0}.header__item{position:relative;display:block;text-align:left;margin-top:24px}.header__git{display:inline-flex;border:1px solid #000;border-radius:4px;padding:4px 7px 5px 8px}.git__logo{padding-right:8px;display:flex;align-items:center}.git__logo::after{content:'';display:inline-block;width:1px;height:13px;margin-top:1px;margin-left:9px;background:#000}@media screen and (min-width:768px){.header__item{display:inline-block;margin-top:0}.header__git{margin-left:16px}}.git__staricon{display:flex;align-items:center}.git__star{display:inline-flex;align-items:center;color:#000}.git__starnum{display:inline-flex;height:16px}.git__star::before{content:'';display:inline-block;width:15px;height:15px;margin-right:2px;margin-top:1px;background:url(../images/logo_gitstar_black.svg);background-size:15px 15px}.header__link{position:relative;display:inline-block;font-size:1.6rem;font-weight:700;color:#006076}.header__link::after{background-color:#006076;bottom:0;content:'';display:block;height:2px;left:0;position:absolute;-webkit-transition:.5s all;transition:.5s all;width:0}.header__link:hover::after{width:100%}@media screen and (min-width:768px){.header__link{font-size:1.4rem;margin-right:16px}}.header__link--button{border:1px solid;border-radius:2px}@media screen and (min-width:768px){.header__link--button{width:inherit}}.header__caption{font-size:1rem;font-weight:400}.header__button{background:#3d3d3d;text-align:left}.header .header-button__link{display:inline-block;padding:12px 22px;width:100%;position:relative;background-color:#fff;color:#006076;font-weight:700}.header__inner{max-width:960px;margin:0 auto}.header__logo{display:inline-block}.header .header-nav__button{display:block;position:absolute;width:30px;height:3px;background-color:#006076}.header .header-nav__button::before{content:"";display:block;position:absolute;top:10px;left:0;width:30px;height:3px;background-color:#006076}.header .header-nav__button::after{content:"";display:block;position:absolute;top:19px;right:0;width:30px;height:3px;background-color:#006076}.header .header-nav__image{width:84px;height:64px;display:flex;align-items:center}.version__current::selection{background:rgba(0,0,0,0)}.version__link::selection{background:rgba(0,0,0,0)}.header__version{position:relative;margin-bottom:0;display:inline-block}details>summary.version__current{position:relative;color:#006076;padding:4px 8px 4px 9px;background-color:rgba(0,0,0,0);border:1px solid;border-radius:4px;font-weight:700;list-style:none}details>summary.version__current::after{content:'';width:1px;display:inline-block;padding-top:2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #006076;margin-left:5px}summary.version__current::-webkit-details-marker{display:none}.version__list{position:relative;font-weight:700;margin-top:8px;z-index:9999}.version__item{display:block;padding:12px 0 8px 0}@media screen and (min-width:768px){.version__list{position:absolute;right:0;margin-top:17px;background-color:rgba(255,255,255,.9)}.version__item{display:block;padding:12px 12px 8px 12px;border-bottom:1px solid #f8f8f8}}.version__link--latest::after{content:'latest';display:inline-inline-block;margin-left:8px;padding:2px 6px;border-radius:4px;background-color:#006076;color:#fff;font-size:1.2rem}a.version__link{display:inline-block;width:100%;color:#006076}@media (prefers-color-scheme:dark){.header{color:#00bab1;border-bottom:2px solid #393939}.header__content{background-color:rgba(51,51,51,.9)}.header__link{color:#00bab1}.header__list--open{background-color:rgba(51,51,51,.95)}.header__link::after{background-color:#00bab1}.header .header-nav__button{background-color:#00bab1}.header .header-nav__button::before{background-color:#00bab1}.header .header-nav__button::after{background-color:#00bab1}details>summary.version__current{color:#00bab1}details>summary.version__current::after{border-top:5px solid #00bab1}a.version__link{color:#00bab1}.git__star{display:flex;align-items:center;color:#fff}.git__star::before{content:'';display:inline-block;width:15px;height:15px;margin-right:2px;background:url(../images/logo_gitstar_white.svg);background-size:15px 15px}.header__git{border:1px solid #fff}.git__logo::after{background:#fff}@media screen and (min-width:768px){.version__item{background-color:#333;border-bottom:1px solid #393939}}.version__link--latest::after{background-color:#00bab1}}
\ No newline at end of file
+.header{position:fixed;width:100%;top:0;z-index:999;color:#006076;border-bottom:2px solid #f8f8f8}.header__content{background-color:rgba(255,255,255,.9)}.header__nav{position:relative;display:flex;height:64px;text-align:center;margin:0 auto}@media screen and (min-width:768px){.header__nav{max-width:1108px}}.header .header-nav__icon{display:inline-block;width:30px;height:23px;margin:21px 24px 21px 0;position:absolute;right:0}@media screen and (min-width:768px){.header .header-nav__icon{display:none}}.header .header-nav__link{position:relative;z-index:9;padding:0 0 0 16px}.header__list{position:absolute;top:64px;width:100%;left:100%;height:100vh;padding:0 24px;-webkit-transition:.4s;transition:.4s;-webkit-transition-timing-function:cubic-bezier(.1,.6,.1,.9);transition-timing-function:cubic-bezier(.1,.6,.1,.9)}@media screen and (min-width:768px){.header__list{height:64px;position:relative;display:flex;align-items:center;justify-content:right;left:0;-webkit-transition:none;transition:none;top:0}}.header__list--open{left:0;background-color:rgba(255,255,255,.95);-webkit-transition:0;transition:0}.header__item{position:relative;display:block;text-align:left;margin-top:24px}.header__git{display:inline-flex;border:1px solid #000;border-radius:4px;padding:4px 7px 5px 8px}.git__logo{padding-right:8px;display:flex;align-items:center}.x__logo{padding:4px 7px 5px 8px;display:flex;align-items:center}.git__logo::after{content:'';display:inline-block;width:1px;height:13px;margin-top:1px;margin-left:9px;background:#000}@media screen and (min-width:768px){.header__item{display:inline-block;margin-top:0}.header__git{margin-left:16px}}.git__staricon{display:flex;align-items:center}.git__star{display:inline-flex;align-items:center;color:#000}.git__starnum{display:inline-flex;height:16px}.git__star::before{content:'';display:inline-block;width:15px;height:15px;margin-right:2px;margin-top:1px;background:url(../images/logo_gitstar_black.svg);background-size:15px 15px}.header__link{position:relative;display:inline-block;font-size:1.6rem;font-weight:700;color:#006076}.header__link::after{background-color:#006076;bottom:0;content:'';display:block;height:2px;left:0;position:absolute;-webkit-transition:.5s all;transition:.5s all;width:0}.header__link:hover::after{width:100%}@media screen and (min-width:768px){.header__link{font-size:1.4rem;margin-right:16px}}.header__link--button{border:1px solid;border-radius:2px}@media screen and (min-width:768px){.header__link--button{width:inherit}}.header__caption{font-size:1rem;font-weight:400}.header__button{background:#3d3d3d;text-align:left}.header .header-button__link{display:inline-block;padding:12px 22px;width:100%;position:relative;background-color:#fff;color:#006076;font-weight:700}.header__inner{max-width:960px;margin:0 auto}.header__logo{display:inline-block}.header .header-nav__button{display:block;position:absolute;width:30px;height:3px;background-color:#006076}.header .header-nav__button::before{content:"";display:block;position:absolute;top:10px;left:0;width:30px;height:3px;background-color:#006076}.header .header-nav__button::after{content:"";display:block;position:absolute;top:19px;right:0;width:30px;height:3px;background-color:#006076}.header .header-nav__image{width:84px;height:64px;display:flex;align-items:center}.version__current::selection{background:rgba(0,0,0,0)}.version__link::selection{background:rgba(0,0,0,0)}.header__version{position:relative;margin-bottom:0;display:inline-block}details>summary.version__current{position:relative;color:#006076;padding:4px 8px 4px 9px;background-color:rgba(0,0,0,0);border:1px solid;border-radius:4px;font-weight:700;list-style:none}details>summary.version__current::after{content:'';width:1px;display:inline-block;padding-top:2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #006076;margin-left:5px}summary.version__current::-webkit-details-marker{display:none}.version__list{position:relative;font-weight:700;margin-top:8px;z-index:9999}.version__item{display:block;padding:12px 0 8px 0}@media screen and (min-width:768px){.version__list{position:absolute;right:0;margin-top:17px;background-color:rgba(255,255,255,.9)}.version__item{display:block;padding:12px 12px 8px 12px;border-bottom:1px solid #f8f8f8}}.version__link--latest::after{content:'latest';display:inline-inline-block;margin-left:8px;padding:2px 6px;border-radius:4px;background-color:#006076;color:#fff;font-size:1.2rem}a.version__link{display:inline-block;width:100%;color:#006076}@media (prefers-color-scheme:dark){.header{color:#00bab1;border-bottom:2px solid #393939}.header__content{background-color:rgba(51,51,51,.9)}.header__link{color:#00bab1}.header__list--open{background-color:rgba(51,51,51,.95)}.header__link::after{background-color:#00bab1}.header .header-nav__button{background-color:#00bab1}.header .header-nav__button::before{background-color:#00bab1}.header .header-nav__button::after{background-color:#00bab1}details>summary.version__current{color:#00bab1}details>summary.version__current::after{border-top:5px solid #00bab1}a.version__link{color:#00bab1}.git__star{display:flex;align-items:center;color:#fff}.git__star::before{content:'';display:inline-block;width:15px;height:15px;margin-right:2px;background:url(../images/logo_gitstar_white.svg);background-size:15px 15px}.header__git{border:1px solid #fff}.git__logo::after{background:#fff}@media screen and (min-width:768px){.version__item{background-color:#333;border-bottom:1px solid #393939}}.version__link--latest::after{background-color:#00bab1}}
\ No newline at end of file
diff --git a/themes/vald/static/images/logo_slack_black.svg b/themes/vald/static/images/logo_slack_black.svg
new file mode 100644
index 000000000..f64c3d174
--- /dev/null
+++ b/themes/vald/static/images/logo_slack_black.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 122.8 122.8" style="enable-background:new 0 0 122.8 122.8;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M25.8,77.6c0,7.1-5.8,12.9-12.9,12.9S0,84.7,0,77.6c0-7.1,5.8-12.9,12.9-12.9h12.9V77.6z"/>
+		<path d="M32.3,77.6c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
+			C32.3,109.9,32.3,77.6,32.3,77.6z"/>
+	</g>
+	<g>
+		<path d="M45.2,25.8c-7.1,0-12.9-5.8-12.9-12.9S38.1,0,45.2,0s12.9,5.8,12.9,12.9v12.9H45.2z"/>
+		<path d="M45.2,32.3c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H12.9C5.8,58.1,0,52.3,0,45.2s5.8-12.9,12.9-12.9
+			C12.9,32.3,45.2,32.3,45.2,32.3z"/>
+	</g>
+	<g>
+		<path d="M97,45.2c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H97V45.2z"/>
+		<path d="M90.5,45.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V12.9C64.7,5.8,70.5,0,77.6,0c7.1,0,12.9,5.8,12.9,12.9
+			V45.2z"/>
+	</g>
+	<g>
+		<path d="M77.6,97c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V97H77.6z"/>
+		<path d="M77.6,90.5c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9
+			H77.6z"/>
+	</g>
+</g>
+</svg>
diff --git a/themes/vald/static/images/logo_slack_white.svg b/themes/vald/static/images/logo_slack_white.svg
new file mode 100644
index 000000000..5b65617eb
--- /dev/null
+++ b/themes/vald/static/images/logo_slack_white.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 122.8 122.8" style="enable-background:new 0 0 122.8 122.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M25.8,77.6c0,7.1-5.8,12.9-12.9,12.9S0,84.7,0,77.6c0-7.1,5.8-12.9,12.9-12.9h12.9V77.6z"/>
+		<path class="st0" d="M32.3,77.6c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
+			C32.3,109.9,32.3,77.6,32.3,77.6z"/>
+	</g>
+	<g>
+		<path class="st0" d="M45.2,25.8c-7.1,0-12.9-5.8-12.9-12.9S38.1,0,45.2,0s12.9,5.8,12.9,12.9v12.9H45.2z"/>
+		<path class="st0" d="M45.2,32.3c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H12.9C5.8,58.1,0,52.3,0,45.2s5.8-12.9,12.9-12.9
+			C12.9,32.3,45.2,32.3,45.2,32.3z"/>
+	</g>
+	<g>
+		<path class="st0" d="M97,45.2c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H97V45.2z"/>
+		<path class="st0" d="M90.5,45.2c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V12.9C64.7,5.8,70.5,0,77.6,0
+			c7.1,0,12.9,5.8,12.9,12.9V45.2z"/>
+	</g>
+	<g>
+		<path class="st0" d="M77.6,97c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V97H77.6z"/>
+		<path class="st0" d="M77.6,90.5c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
+			c0,7.1-5.8,12.9-12.9,12.9H77.6z"/>
+	</g>
+</g>
+</svg>
diff --git a/themes/vald/static/images/logo_x_black.svg b/themes/vald/static/images/logo_x_black.svg
new file mode 100644
index 000000000..d0b8a5280
--- /dev/null
+++ b/themes/vald/static/images/logo_x_black.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3094 8.04613L18.3838 0H16.708L10.5627 6.98491L5.6582 0H0L7.41823 10.5634L0 19H1.6758L8.16113 11.6221L13.3418 19H19M2.28063 1.2365H4.85513L16.7067 17.8242H14.1316" fill="black"/>
+</svg>
diff --git a/themes/vald/static/images/logo_x_white.svg b/themes/vald/static/images/logo_x_white.svg
new file mode 100644
index 000000000..5bbd1ab99
--- /dev/null
+++ b/themes/vald/static/images/logo_x_white.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3094 8.54613L18.3838 0.5H16.708L10.5627 7.48491L5.6582 0.5H0L7.41823 11.0634L0 19.5H1.6758L8.16113 12.1221L13.3418 19.5H19M2.28063 1.7365H4.85513L16.7067 18.3242H14.1316" fill="white"/>
+</svg>