fix: missing close on banner, table icons, mobile menu icon, responsi…

…ve footer
scylladb · Sep 20, 2024 · 6a2a3ef · 6a2a3ef
1 parent 358366a
commit 6a2a3ef
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 21 deletions.
diff --git a/sphinx_scylladb_theme/promo-banner.html b/sphinx_scylladb_theme/promo-banner.html
@@ -9,7 +9,7 @@
         <a class="promo-banner__button button button--reverse" href="{{theme_banner_button_url}}"
            target="_blank" rel="noopener noreferrer">{{theme_banner_button_text}}</a>
         <button class="promo-banner__close">
-            <i class="icon-close"></i>
+            <i class="icon-cancel"></i>
         </button>
     </div>
 </section>
diff --git a/sphinx_scylladb_theme/side-nav-toggle.html b/sphinx_scylladb_theme/side-nav-toggle.html
@@ -1,6 +1,6 @@
 <div class="side-nav-toggle">
     <i class="dark-theme-toggler icon-theme"></i>
     <div class="side-nav-toggle__button" data-toggle="side-nav">
-        <i class="fas fa-bars"></i>
+        <i class="icon-menu"></i>
     </div>
 </div>
diff --git a/src/css/base/_variables.scss b/src/css/base/_variables.scss
@@ -63,26 +63,27 @@ $border-radius-md: $spacer-xxs;
     --gray-950: #{$gray-950};
     --black: #{$black};
 
-    --primary: #42C4E6;
+    --primary: #{$primary};
     --secondary: #{$secondary};
     --success: #{$success};
     --info: #{$info};
     --warning: #{$warning};
     --danger: #{$danger};
 
-    --link-color: #3C4FE0;
-    --link-color-hover: #3C4FE0;
+    --link-color: #{$link-color};
+    --link-color-hover: #{$link-color};
     --text-color: #{$black};
     --code-color: #{$black};
     --text-emphasis: #{$black};
     --text-muted: #{$text-muted};
-    --border-color: #F1F1F1;
-    --header-border: #4458A3;
-    --bg-color: #FEFEFE;
-    --well-bg: #F7F8F9;
-    --navigation-bg: #F6F8FF;
+    --border-color: #{$border-color};
+    --header-border: #{$header-border};
+
+    --bg-color: #{$bg-color};
+    --well-bg: #{$well-bg};
+    --navigation-bg: #{$navigation-bg};
     --card-bg: var(--white);
-    --admonition: #6F7071;
+    --admonition: #{$admonition};
 
     --shadow-lg: 0px 4px 25px rgba(0, 0, 0, 0.15);
     --border-width: #{$border-width};

diff --git a/src/css/components/_content.scss b/src/css/components/_content.scss
@@ -1,6 +1,6 @@
 .layout {
   display: flex;
-  background-color: var(--color--background-base);
+  background-color: var(--bg-color);
 }
 
 .pre-content {
@@ -28,7 +28,7 @@
 
     li::before {
       content: "\2022";
-      color: var(--color-typography-bullet);
+      color: var(--text-muted);
       font-family: $font-icons-family;
       float: left;
       font-size: 20px;
@@ -54,8 +54,12 @@
     margin-bottom: $gap;
   }
 
-  .inline-icon.fa-check {
-    color: var(--color-typography-icon-checkmark);
+  .inline-icon {
+    font-size: 22px;
+
+    &.icon-check {
+      color: var(--primary);
+    }
   }
 }
 

diff --git a/src/css/components/_footer.scss b/src/css/components/_footer.scss
@@ -21,10 +21,11 @@
   justify-content: space-between;
   padding-bottom: 8px;
   text-align: center;
+  padding-bottom: $spacer-sm;
 }
 
 .footer-logo {  
-  margin-bottom: $gap;
+  margin-bottom: 0;
   background-image: url("../img/logo-scylla-horizontal-color.svg");
   background-position: center;
   background-repeat: no-repeat;
@@ -38,6 +39,7 @@
 
 .footer-links {
   text-align: left;
+  margin-bottom: 0 !important;
 
   &__link {
     color: var(--text-color);

diff --git a/src/css/components/_promo-banner.scss b/src/css/components/_promo-banner.scss
@@ -40,10 +40,11 @@
     right: 16px;
     top: 16px;
 
-    .scylla-icon {
+    i {
       height: 34px;
       width: 34px;
-      filter: brightness(100%);
+      font-size: 34px;
+      color: var(--white);
     }
 
     &:hover {

diff --git a/src/css/components/_side-nav-toggle.scss b/src/css/components/_side-nav-toggle.scss
@@ -3,6 +3,7 @@
   display: flex;
   margin-right: 20px;
   gap: 10px;
+  font-size: 22px;
   position: relative;
   z-index: 300;
 }

diff --git a/src/css/components/_tables.scss b/src/css/components/_tables.scss
@@ -56,7 +56,7 @@ table {
 
   &:not(.highlighttable) {
     tbody tr:first-child {
-      border-top: 1px solid var(--secondary);
+      border-top: 1px solid var(--header-border);
     }
   }
 

diff --git a/tests/extensions/test_hero_box.py b/tests/extensions/test_hero_box.py
@@ -122,7 +122,7 @@
         [],
         {
             "title": "Check Now",
-            "button_icon": "fa-check",
+            "button_icon": "icon-check",
             "button_text": "Submit",
             "button_url": "#",
             "button_style": "bold",
@@ -132,7 +132,7 @@
         </div>
         <a href="#">
             <button class="hero__button button hero__button--bold">
-                <i class="icon icon--left fa-check" aria-hidden="true"></i>
+                <i class="icon icon--left icon-check" aria-hidden="true"></i>
                 Submit
             </button>
         </a>