Fix material icons issue (#149)

Signed-off-by: mohin7 <csemohin@gmail.com>
appscode · May 29, 2024 · cbdf5f9 · cbdf5f9
1 parent 8e4bffd
commit cbdf5f9
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 36 deletions.
diff --git a/hugo_stats.json b/hugo_stats.json
@@ -443,6 +443,7 @@
       "single-video",
       "single-video-page",
       "single-webinar",
+      "size-6",
       "smooth",
       "socail-link-inline",
       "social-connect-area",
@@ -506,7 +507,8 @@
       "whats-new",
       "width-12",
       "width-16",
-      "width-20"
+      "width-20",
+      "width-24"
     ],
     "ids": [
       "1-1",

diff --git a/layouts/_default/webinar.html b/layouts/_default/webinar.html
@@ -300,7 +300,12 @@ <h4>Our Previous Webinars</h4>
                 <div class="card-body">
                 <div class="meta-tag is-flex is-justify-content-space-between">
                   <p><span
-                      class="material-icons-outlined">calendar_today</span>{{ .contentDetails.videoPublishedAt | time.Format ":date_medium" }}
+                      class="icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
+                      </svg>
+
+                    </span>{{ .contentDetails.videoPublishedAt | time.Format ":date_medium" }}
                   </p>
                 </div>
                   <h1 class="is-ellipsis-3 mb-8">{{ .snippet.title }}</h1>
@@ -320,7 +325,7 @@ <h1 class="is-ellipsis-3 mb-8">{{ .snippet.title }}</h1>
   </div>
 </section>
 <!-- previous webinar section end -->
-<hr>
+
 
 
 <!-- Slim Select JS  -->
@@ -457,13 +462,21 @@ <h1>${w.title}</h1>
   </div>
   <div class="date-and-location">
     <p class="date">
-      <lord-icon src="https://cdn.lordicon.com/drtetngs.json" trigger="loop" colors="primary:#00a651" style="width:24px;height:24px">
-      </lord-icon>
+      <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+      </span>
       <span>When: ${dfmt.format('D MMM YYYY - hh:mm:ss A')}</span>
     </p>
     <p class="date">
-      <lord-icon src="https://cdn.lordicon.com/zzcjjxew.json" trigger="loop" style="width:24px;height:24px">
-      </lord-icon>
+      <span class="icon">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
+      </svg>
+
+      </span>
       <span>Where : via Zoom </span>
     </p>
   </div>

diff --git a/layouts/partials/components/testimonial.html b/layouts/partials/components/testimonial.html
@@ -10,10 +10,18 @@ <h2 class="is-gradient" data-aos="fade-up" data-aos-duration="500">What They Are
         </div>
         <!-- arrows start  -->
         <div class="arrows" data-aos="fade-up" data-aos-duration="900">
-          <button class="button arrow is-rounded customPrevBtn"><span
-              class="material-icons-outlined">arrow_back</span></button>
-          <button class="button arrow is-rounded customNextBtn"><span
-              class="material-icons-outlined">arrow_forward</span></button>
+          <button class="button arrow is-rounded customPrevBtn">
+            <span class="icon">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"></path>
+              </svg>                
+            </span>
+          </button>
+          <button class="button arrow is-rounded customNextBtn"><span class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
+            </svg>
+          </span></button>
         </div>
         <!-- arrows end -->
       </div>

diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -60,8 +60,12 @@
 
                     <!-- ac-grid-container -->
                     <div class="mega-menu-inner container">
-                      <button class="button ac-button inline-button back-button"><span
-                          class="material-icons-outlined">arrow_back</span>Back</button>
+                      <button class="button ac-button inline-button back-button">
+                        <span
+                          class="icon p-0"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                          </svg>
+                          </span><span>Back</span></button>
                       <!-- product start  -->
                       <div class="product-menu">
                         {{ range $item := $.Site.Data.config.productMenu.c0 }}
@@ -256,8 +260,14 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
                   <div class="mega-menu-wrapper">
                     <!-- ac-grid-container -->
                     <div class="mega-menu-inner container">
-                      <button class="button ac-button inline-button back-button"><span
-                          class="material-icons-outlined">arrow_back</span>Back to Resources</button>
+                      <button class="button is-small ac-button inline-button back-button"><span
+                          class="icon p-0">
+                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                          </svg>
+                          </span>
+                          <span>Back to Resources</span>
+                        </button>
                       <!-- list menu items start  -->
                       <div class="resources-list">
                         <!-- single resources list  -->
@@ -509,8 +519,15 @@ <h2>RESOURCES</h2>
 
               <!-- ac-grid-container -->
               <div class="mega-menu-inner container">
-                <button class="button ac-button inline-button back-button"><span
-                    class="material-icons-outlined">arrow_back</span>Back</button>
+                <button class="button ac-button inline-button back-button">
+                  <span
+                    class="icon p-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                    </svg>
+                    </span>
+                    <span>Back</span>
+                </button>
                 <!-- product start  -->
                 <div class="product-menu database-list">
                   {{ range .Children }}

diff --git a/layouts/products/single.html b/layouts/products/single.html
@@ -20,8 +20,15 @@
   <div class="navbar-right">
 
     <ul>
-      <button class="button ac-button inline-button back-button"><span
-          class="material-icons-outlined">arrow_back</span>Back</button>
+      <button class="button ac-button inline-button back-button">
+        <span
+          class="icon p-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+          </svg>
+          </span>
+          <span>Back</span>
+      </button>
       {{ $sectionMenuId := .Params.section_menu_id }}
       {{ if isset .Params "menu_name" }}
       {{ range (index .Site.Menus .Params.menu_name) }}
@@ -33,8 +40,15 @@
         <!-- mega-menu wrapper start  -->
         <div class="mega-menu-wrapper">
           <div class="mega-menu-inner ac-grid-container">
-            <button class="button ac-button inline-button back-button"><span
-                class="material-icons-outlined">arrow_back</span>Back</button>
+            <button class="button ac-button inline-button back-button">
+              <span
+              class="icon p-0">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+              </svg>
+              </span>
+              <span>Back</span>
+            </button>
 
             <!-- product start  -->
             <div class="product-menu database-list">
@@ -138,8 +152,15 @@ <h2 class="is-size-6">{{ .Name }}</h2>
 <div class="documentation-area">
   <!-- documentation area start -->
   <div class="left-sidebar-wrapper">
-    <button class="button ac-button inline-button back-button pl-15 is-hidden-desktop"><span
-        class="material-icons-outlined">arrow_back</span>Back</button>
+    <button class="button ac-button inline-button back-button pl-15 is-hidden-desktop">
+      <span
+      class="icon p-0">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+      </svg>
+      </span>
+      <span>Back</span>
+    </button>
     <div class="ac-product-left-sidebar">
 
       {{ if isset .Params "menu_name" }}
@@ -262,8 +283,15 @@ <h2 class="is-size-6">{{ .Name }}</h2>
 
       <!-- table of contents area start -->
       <div class="tbl-of-contents">
-        <button class="button ac-button inline-button back-button pl-15 is-hidden-desktop"><span
-            class="material-icons-outlined">arrow_back</span>Back</button>
+        <button class="button ac-button inline-button back-button pl-15 is-hidden-desktop">
+          <span
+          class="icon p-0">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+          </svg>
+          </span>
+          <span>Back</span>
+        </button>
         <h4>What's on this Page</h4>
         {{.TableOfContents}}
       </div>
@@ -282,8 +310,15 @@ <h4>What's on this Page</h4>
 <!-- overlay end -->
 
 <div class="sidebar-search-area">
-  <button class="button ac-button inline-button back-button"><span
-      class="material-icons-outlined">arrow_back</span>Back</button>
+  <button class="button ac-button inline-button back-button">
+    <span
+    class="icon p-0">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+    </svg>
+    </span>
+    <span>Back</span>
+  </button>
   <div class="search-area-top">
     <h5>Search</h5>
 

diff --git a/static/assets/sass/base/_videos-gallery.scss b/static/assets/sass/base/_videos-gallery.scss
@@ -248,9 +248,9 @@
         align-items: center;
         color: #505050;
 
-        .material-icons-outlined {
-          font-size: 14px;
-          margin-right: 0.8rem;
+        .icon{
+          width: 18px;
+          margin-right: 8px;
         }
       }
     }

diff --git a/static/assets/sass/base/_webinar.scss b/static/assets/sass/base/_webinar.scss
@@ -573,11 +573,13 @@
     margin-bottom: 20px;
 
     .date {
+      display: flex;
+      align-items: center;
+      gap: 8px;
       span {
         font-size: 18px;
         color: $ac-color-text;
         font-weight: 500;
-        margin-left: 15px;
       }
     }
   }

diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
diff --git a/static/assets/sass/main.css.map b/static/assets/sass/main.css.map