restyle kapa

hazelcast · May 24, 2024 · 8fe9e48 · 8fe9e48
1 parent 781c6c1
commit 8fe9e48
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 38 deletions.
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
diff --git a/preview-src/java.adoc b/preview-src/java.adoc
@@ -52,7 +52,7 @@ required only for members.
 Imagine a trading application where all the trading data are stored and
 managed in a Hazelcast cluster with tens of members.
 
-== Getting Started with Java Client
+== Getting Started with Java Client or Maybe some other client
 
 WARNING: You do not need to set a license key for your Java clients for which you want to
 use Hazelcast IMDG Enterprise features. Hazelcast IMDG Enterprise license keys are

diff --git a/src/css/feedback.css b/src/css/feedback.css
@@ -26,7 +26,6 @@
   background-color: var(--info-light);
   border-radius: 10px;
   cursor: pointer;
-  margin-top: 10px;
 }
 
 .feedback-button:hover {
@@ -37,13 +36,17 @@ a.feedback-button:hover {
   text-decoration: none;
 }
 
+.feedback-prompt .feedback-button,
+.feedback-prompt .helpful-feedback {
+  margin-top: 10px;
+}
+
 .helpful-feedback {
   display: flex;
   gap: 8px;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
-  margin-top: 10px;
 }
 
 .helpful-feedback-buttons {
@@ -100,27 +103,26 @@ a.feedback-button:hover {
   font-size: calc(14 / var(--rem-base) * 1rem);
 }
 
-.survey {
-  background: transparent url(../img/survey.svg) center left / contain no-repeat;
+.feedback-button-text {
   padding-left: 1.75rem;
 }
 
 .git {
   background: transparent url(../img/github.svg) center left / contain no-repeat;
-  padding-left: 1.75rem;
 }
 
 .git-pull {
   background: transparent url(../img/edit.svg) center left / contain no-repeat;
-  padding-left: 1.75rem;
 }
 
 .command {
   background: transparent url(../img/command.svg) center left / contain no-repeat;
-  padding-left: 1.75rem;
+}
+
+.training {
+  background: transparent url(../img/training.png) center left / contain no-repeat;
 }
 
 .mail {
   background: transparent url(../img/mail.svg) center left / contain no-repeat;
-  padding-left: 1.75rem;
 }
diff --git a/src/css/home.css b/src/css/home.css
@@ -210,8 +210,16 @@
   text-align: left;
 }
 
+.feedback-footer-container {
+  padding: 0 var(--cards-gap) var(--cards-gap);
+}
+
+.article .feedback-footer-container {
+  padding-top: var(--cards-gap);
+  background-color: var(--neutral-white);
+}
+
 .feedback-footer {
-  margin: 0 var(--cards-gap) var(--cards-gap);
   display: flex;
   padding: 15px 20px;
   justify-content: flex-start;
@@ -220,7 +228,7 @@
   gap: 10px;
 }
 
-@media (min-width: 1120px) {
+@media (min-width: 1300px) {
   .feedback-footer {
     gap: 30px;
   }
@@ -230,10 +238,6 @@
   margin-bottom: 0;
 }
 
-.article .feedback-footer {
-  margin: 0 var(--cards-gap) var(--cards-gap);
-}
-
 .home .feedback-button,
 .home .helpful-feedback {
   margin-top: 0;

diff --git a/src/img/survey.svg b/src/img/survey.svg
diff --git a/src/img/training.png b/src/img/training.png
diff --git a/src/partials/feedback-footer.hbs b/src/partials/feedback-footer.hbs
@@ -1,24 +1,31 @@
-<div class="feedback-footer">
-  <div class="card-header">
-    <img class="card-img" src="{{{uiRootPath}}}/img/lifebuoy.svg" alt="lifebuoy" />
-    <h4 class="card-title">Help and support</h4>
-  </div>
-  {{> was-this-helpful-feedback }}
-  {{#with (get-page-info)}}
-    <a class="additional-feedback feedback-button" href="{{this.src.origin.webUrl}}/issues/new?title=Docs: Feedback for {{{this.title}}}&body=Hi, I have some feedback about [this page]({{{this.src.editUrl}}})%0D%0A" target="_blank">
-          <span class="git">
+<div class="feedback-footer-container">
+  <div class="feedback-footer">
+    <div class="card-header">
+      <img class="card-img" src="{{{uiRootPath}}}/img/lifebuoy.svg" alt="lifebuoy" />
+      <h4 class="card-title">Help and support</h4>
+    </div>
+    {{> was-this-helpful-feedback }}
+    {{#with (get-page-info)}}
+      <a class="additional-feedback feedback-button" href="{{this.src.origin.webUrl}}/issues/new?title=Docs: Feedback for {{{this.title}}}&body=Hi, I have some feedback about [this page]({{{this.src.editUrl}}})%0D%0A" target="_blank">
+          <span class="feedback-button-text git">
             Report an issue
           </span>
-    </a>
-  {{/with}}
-  <a class="additional-feedback feedback-button" href="https://slack.hazelcast.com/" target="_blank">
-        <span class="command">
+      </a>
+    {{/with}}
+    <a class="additional-feedback feedback-button" href="https://slack.hazelcast.com/" target="_blank">
+        <span class="feedback-button-text command">
           Ask Community
         </span>
-  </a>
-  <a class="additional-feedback feedback-button" href="https://support.hazelcast.com/s/" target="_blank">
-        <span class="mail">
+    </a>
+    <a class="additional-feedback feedback-button" href="https://training.hazelcast.com/" target="_blank">
+        <span class="feedback-button-text training">
+          Online Training
+        </span>
+    </a>
+    <a class="additional-feedback feedback-button" href="https://support.hazelcast.com/s/" target="_blank">
+        <span class="feedback-button-text mail">
           Contact Support
         </span>
-  </a>
+    </a>
+  </div>
 </div>
diff --git a/src/partials/feedback.hbs b/src/partials/feedback.hbs
@@ -1,19 +1,19 @@
 <div class="feedback-prompt">
   {{#if (and page.fileUri (not env.CI))}}
     <a href="{{page.fileUri}}" target="_blank" class="edit-this-page feedback-button">
-      <span class="git-pull">
+      <span class="feedback-button-text git-pull">
         Edit this page
       </span>
     </a>
   {{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
     <a class="edit-this-page feedback-button" href="{{page.editUrl}}" target="_blank">
-      <span class="git-pull">
+      <span class="feedback-button-text git-pull">
         Edit this page
       </span>
     </a>
     {{#with (get-page-info)}}
       <a class="additional-feedback feedback-button" href="{{this.src.origin.webUrl}}/issues/new?title=Docs: Feedback for {{{this.title}}}&body=Hi, I have some feedback about [this page]({{{this.src.editUrl}}})%0D%0A" target="_blank">
-        <span class="git">
+        <span class="feedback-button-text git">
           Report an issue
         </span>
       </a>

diff --git a/src/partials/head-scripts.hbs b/src/partials/head-scripts.hbs
@@ -27,7 +27,7 @@
     data-website-id="{{this}}"
     data-project-name="Hazelcast"
     data-modal-title="Ask AI"
-    data-modal-header-bg-color="#000"
+    data-modal-header-bg-color="#071627"
     data-modal-title-color="#fff"
     data-modal-disclaimer-text-color="#10A4B3"
     data-modal-image-width="34"
@@ -41,8 +41,9 @@
     data-project-logo="_/img/kapa/stars.png"
     data-button-image-width="34"
     data-button-image-height="42"
+    data-button-border="1px solid #AFE922"
     data-button-border-radius="10px"
-    data-button-bg-color="#000"
+    data-button-bg-color="#071627"
     data-button-text-font-family="PP Telegraf"
     data-button-text-font-size="16px"
     data-button-text-font-weight="400"