Add admin stylesheet

wolffe · Oct 21, 2024 · 0b817c1 · 0b817c1
1 parent 3ec8f61
commit 0b817c1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/includes/builder/assets/fxb-admin-ui.css 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
@@ -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
@@ -15,14 +15,15 @@ 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>
         </h2>
 
         <?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' ) {
             ?>