From 8c727d4414ce31e7d925dd112d8d023fd01988f0 Mon Sep 17 00:00:00 2001
From: ro <iam@roiskinda.cool>
Date: Wed, 20 Mar 2024 15:13:50 -0600
Subject: [PATCH] accessibility audit, icons part 1

using a font for icons isn't great for site accessibility, so all font
icons will be removed and replaced with svgs.

nav and sub nav, page options and recent meta have been replaced
---
 public/assets/css/dash/frame.css              | 16 +++++++---
 public/assets/css/dash/index.css              | 14 ++++-----
 public/assets/css/dash/page-editor.css        | 29 -------------------
 resources/views/includes/nav.blade.php        | 12 ++++++--
 resources/views/includes/options.blade.php    |  4 +--
 .../views/includes/recent-meta.blade.php      | 12 ++++++--
 .../views/includes/submenu-settings.blade.php | 12 ++++++--
 .../views/includes/submenu-start.blade.php    |  8 +++--
 8 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css
index 8dca897..51bfa96 100644
--- a/public/assets/css/dash/frame.css
+++ b/public/assets/css/dash/frame.css
@@ -50,13 +50,14 @@ code {
 }
 
 svg[role="icon"] {
+  transition: all 0.3s linear;
   fill: var(--white);
   width: 25px;
   height: 25px;
   padding-top: 5px;
 }
 
-/* HEADER 
+/* HEADER
 	Navigation
 	Notificiations
 */
@@ -123,9 +124,16 @@ header > nav > div.nav-right div.submenu button {
   font-size: 0.8em;
 }
 
-header > nav > div.nav-right div.submenu button[data-render="true"] {
-  background: var(--tertiary);
-  color: var(--primary);
+button[data-render="true"] {
+  background: var(--primary);
+}
+
+button[data-render="true"] svg {
+  fill: var(--highlight);
+}
+
+button[data-render="false"] svg {
+  fill: var(--white);
 }
 
 /* RESPONSIVE */
diff --git a/public/assets/css/dash/index.css b/public/assets/css/dash/index.css
index 61cdad1..81d4c13 100644
--- a/public/assets/css/dash/index.css
+++ b/public/assets/css/dash/index.css
@@ -68,22 +68,22 @@ section[class="index-recent-pages"] button i {
   font-size: 1.8em;
 }
 
-section[class="index-recent-pages"] button[data-active="true"] {
+button[data-active="true"] {
   background: var(--primary);
 }
 
-section[class="index-recent-pages"] button[data-active="true"] i {
-  color: var(--tertiary);
-}
-
-section[class="index-recent-pages"] button[data-active="false"] {
+button[data-active="false"] {
   background: var(--secondary);
 }
 
-section[class="index-recent-pages"] button[data-active="false"] i {
+button[data-active="false"] svg {
   fill: var(--primary);
 }
 
+button[data-active="true"] svg {
+  fill: var(--highlight);
+}
+
 section[class="index-recent-pages"] aside {
   font-size: 1.1em;
   color: var(--white);
diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css
index 4bc1c09..db05dfa 100644
--- a/public/assets/css/dash/page-editor.css
+++ b/public/assets/css/dash/page-editor.css
@@ -230,35 +230,6 @@ main
   border-radius: 0 3px 3px 0;
 }
 
-main section[role="page-meta"] div[role="page-meta-wrapper"] button[data-active="false"] {
-  background: var(--primary);
-}
-
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  button[data-active="false"]
-  svg {
-  fill: var(--secondary);
-}
-
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-options"]
-  button[data-active="true"] {
-  background: var(--tertiary);
-}
-
-main
-  section[role="page-meta"]
-  div[role="page-meta-wrapper"]
-  div[role="page-options"]
-  button[data-active="true"]
-  svg {
-  fill: var(--primary);
-}
-
 main
   section[role="page-meta"]
   div[role="page-meta-wrapper"]
diff --git a/resources/views/includes/nav.blade.php b/resources/views/includes/nav.blade.php
index fd6fa91..f0eeca5 100644
--- a/resources/views/includes/nav.blade.php
+++ b/resources/views/includes/nav.blade.php
@@ -6,17 +6,23 @@
     @endif
     <a id="settings" href="/dashboard/settings" title="settings">
         <button>
-            <i class="ti ti-home-cog"></i>
+            <svg id="nav-settings-icon" role="icon">
+                <use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/>
+            </svg>
         </button>
     </a>
     <a id="navigation" href="/dashboard/navigation" title="edit navigation">
         <button>
-            <i class="ti ti-arrow-autofit-height"></i>
+            <svg id="nav-menu-icon" role="icon">
+                <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
+            </svg>
         </button>
     </a>
     <a id="navigation" href="/dashboard/logout" title="log out">
         <button>
-            <i class="ti ti-logout"></i>
+            <svg id="nav-logout-icon" role="icon">
+                <use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
+            </svg>
         </button>
     </a>
 </div>
diff --git a/resources/views/includes/options.blade.php b/resources/views/includes/options.blade.php
index 6ae7f64..fed9654 100644
--- a/resources/views/includes/options.blade.php
+++ b/resources/views/includes/options.blade.php
@@ -33,8 +33,8 @@ if(isset($page['uuid']))
 
 <br>
     <button id="option-menu-pin" class="option-inactive post-option-btn" data-active="{{ $menu }}" title='Pin to Menu'>
-        <svg id="option-page-icon" role="icon">
-            <use id="option-page-icon" xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
+        <svg id="option-menu-pin" role="icon">
+            <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
         </svg>
     </button><button id="option-feature" class="option-inactive post-option-btn" data-active="{{ $featured }}" title='Feature'>
         <svg id="option-feature-icon" role="icon">
diff --git a/resources/views/includes/recent-meta.blade.php b/resources/views/includes/recent-meta.blade.php
index 3b9b58f..6f8caf6 100644
--- a/resources/views/includes/recent-meta.blade.php
+++ b/resources/views/includes/recent-meta.blade.php
@@ -33,14 +33,20 @@ if($page['featured'] == 'true')
     </strong>
     <hr/>
     <button data-active="{{ $menu }}">
-        <i class="ti ti-navigation"></i>
+        <svg id="option-menu-pin" role="icon">
+            <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin"/>
+        </svg>
     </button>
     <button data-active="{{ $published }}">
-        <i class="ti ti-world"></i>
+        <svg id="option-published-icon" role="icon">
+            <use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
+        </svg>
     </button>
 
     <button data-active="{{ $featured }}">
-        <i class="ti ti-star"></i>
+        <svg id="option-feature-icon" role="icon">
+            <use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
+        </svg>
     </button>
 
 </aside>
diff --git a/resources/views/includes/submenu-settings.blade.php b/resources/views/includes/submenu-settings.blade.php
index 59925e2..69555ed 100644
--- a/resources/views/includes/submenu-settings.blade.php
+++ b/resources/views/includes/submenu-settings.blade.php
@@ -1,11 +1,17 @@
 <div class="submenu">
     <button id="save-toggle" title="save settings">
-        <i class="ti ti-device-floppy"></i>
+        <svg id="save-toggle" role="icon">
+            <use id="save-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
+        </svg>
     </button>
     <button id="publish-pages" title="publish site">
-        <i class="ti ti-world-upload"></i>
+        <svg id="publish-pages" role="icon">
+            <use id="publish-pages" xlink:href="/assets/images/global/sprite.svg#entypo-publish"/>
+        </svg>
     </button>
     <button id="render-toggle" title="render on save toggle" data-render="{{ $renderOnSave }}">
-        <i class="ti ti-circle-dashed"></i>
+        <svg id="render-toggle" role="icon">
+            <use id="render-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-ccw"/>
+        </svg>
     </button>
 </div>
diff --git a/resources/views/includes/submenu-start.blade.php b/resources/views/includes/submenu-start.blade.php
index aa73905..47959e1 100644
--- a/resources/views/includes/submenu-start.blade.php
+++ b/resources/views/includes/submenu-start.blade.php
@@ -1,12 +1,16 @@
 <div class="submenu">
     <a href='/dashboard/pages' title="view pages">
         <button>
-            <i class="ti ti-book-2"></i>
+            <svg id="option-menu-pin" role="icon">
+                <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-book"/>
+            </svg>
         </button>
     </a>
     <a href='/dashboard/page/add/new' title="add new page">
         <button>
-            <i class="ti ti-square-plus"></i>
+            <svg id="option-menu-pin" role="icon">
+                <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus"/>
+            </svg>
         </button>
     </a>
 </div>