From 0b817c1dcfe11dfe4f10fb9ffd2794b504f0eb3f Mon Sep 17 00:00:00 2001
From: Ciprian Popescu <wolffe@users.noreply.github.com>
Date: Mon, 21 Oct 2024 21:43:47 +0100
Subject: [PATCH] Add admin stylesheet

---
 includes/builder/assets/fxb-admin-ui.css | 57 ++++++++++++++++++++++++
 includes/fonts.php                       |  2 +
 includes/settings/settings.php           |  3 +-
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 includes/builder/assets/fxb-admin-ui.css

diff --git a/includes/builder/assets/fxb-admin-ui.css b/includes/builder/assets/fxb-admin-ui.css
new file mode 100644
index 0000000..96adcc1
--- /dev/null
+++ b/includes/builder/assets/fxb-admin-ui.css
@@ -0,0 +1,57 @@
+.identityblock {
+    font-size: 40px;
+    font-weight: 300;
+    line-height: 1;
+    color: #000000;
+}
+.identityblock small {
+    display: block;
+    font-size: 24px;
+}
+.codeblock {
+    font-family: "Cascadia Code Web", "SFMono-Regular", Consolas,
+        "Liberation Mono", Menlo, Courier, monospace;
+    color: #0366d6;
+    background: none;
+    font-size: 16px;
+    font-weight: 400;
+}
+.titleblock {
+    font-size: 24px;
+    font-weight: 300;
+}
+
+.nav-tab-wrapper.nav-tab-wrapper-fxb,
+.wrap h2.nav-tab-wrapper.nav-tab-wrapper-fxb,
+.wrap h3.nav-tab-wrapper.nav-tab-wrapper-fxb,
+h1.nav-tab-wrapper.nav-tab-wrapper-fxb {
+    border-bottom: 0 none;
+}
+
+/* https://flatuicolors.com/palette/se */
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab {
+    border: 0 none;
+    border-radius: 0;
+    margin: 2px;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.71428571;
+    font-weight: 500;
+    background: #d2dae2;
+    color: #485460;
+}
+h3.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab {
+    font-size: 13px;
+}
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab-active,
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab-active:focus,
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab-active:focus:active,
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab-active:hover {
+    border-left: 3px solid #1e272e;
+    background: #ffffff;
+    color: #1e272e;
+}
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab:focus,
+.nav-tab-wrapper.nav-tab-wrapper-fxb .nav-tab:hover {
+    color: #1e272e;
+}
diff --git a/includes/fonts.php b/includes/fonts.php
index 8690bf3..39e8d22 100644
--- a/includes/fonts.php
+++ b/includes/fonts.php
@@ -44,6 +44,8 @@ function fxb_bunny_fonts() {
 }
 
 function fxb_enqueue() {
+    wp_enqueue_style( 'fxb-admin-ui', plugins_url( 'includes/builder/assets/fxb-admin-ui.css', FX_BUILDER_FILE ), [], FX_BUILDER_VERSION );
+
     if ( count( (array) get_option( 'fxb_google_fonts' ) ) > 0 ) {
         wp_enqueue_style( 'fxb-google-fonts', fxb_google_fonts(), [], FX_BUILDER_VERSION );
     }
diff --git a/includes/settings/settings.php b/includes/settings/settings.php
index 44c45dd..66c05e5 100644
--- a/includes/settings/settings.php
+++ b/includes/settings/settings.php
@@ -15,7 +15,7 @@ function fxb_build_admin_page() {
     <div class="wrap">
         <h1>FX Builder</h1>
 
-        <h2 class="nav-tab-wrapper nav-tab-wrapper-wppd">
+        <h2 class="nav-tab-wrapper nav-tab-wrapper-fxb">
             <a href="<?php echo esc_attr( $section ); ?>dashboard" class="nav-tab <?php echo $tab === 'dashboard' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Dashboard', 'fx-builder' ); ?></a>
             <a href="<?php echo esc_attr( $section ); ?>settings" class="nav-tab <?php echo $tab === 'settings' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Settings', 'fx-builder' ); ?></a>
             <a href="<?php echo esc_attr( $section ); ?>help" class="nav-tab <?php echo $tab === 'help' ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Help', 'fx-builder' ); ?></a>
@@ -23,6 +23,7 @@ function fxb_build_admin_page() {
 
         <?php if ( $tab === 'dashboard' ) { ?>
             <h3 class="identityblock">FX Builder <code class="codeblock"><?php echo esc_attr( FX_BUILDER_VERSION ); ?></code></h3>
+            <h2 class="titleblock">Reduce your technology overhead, improve site performance, and empower your digital teams with FX Builder.</h2>
             <?php
         } elseif ( $tab === 'settings' ) {
             ?>