From ec2bf34fdf38d10e4265379e97a152256d4ba0e0 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.ca>
Date: Thu, 31 Aug 2017 10:15:25 -0300
Subject: [PATCH] More custom colors.

---
 app/admin.php                                 | 113 +++++++++++++-----
 app/helpers.php                               |   8 --
 app/setup.php                                 |  63 ++++++++--
 resources/assets/styles/common/_global.scss   |  29 +++--
 .../assets/styles/common/_variables.scss      |   2 +-
 .../assets/styles/components/_buttons.scss    |  60 ++--------
 .../assets/styles/components/_forms.scss      |   2 +-
 resources/assets/styles/layouts/_footer.scss  |   9 +-
 resources/assets/styles/layouts/_header.scss  |  18 +--
 resources/assets/styles/layouts/_pages.scss   |  29 ++---
 .../views/partials/contact-form.blade.php     |   2 +-
 resources/views/partials/footer.blade.php     |   2 +-
 .../views/partials/front-page-block.blade.php |   4 +-
 .../partials/front-page-catalog.blade.php     |   8 +-
 14 files changed, 203 insertions(+), 146 deletions(-)

diff --git a/app/admin.php b/app/admin.php
index e82c8e2..810d747 100644
--- a/app/admin.php
+++ b/app/admin.php
@@ -16,36 +16,95 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
     ]);
 
     // Add settings
-    $wp_customize->add_setting('pb_network_primary_color', [
-        'type' => 'option',
-        'default' => 'b01109',
-        'sanitize_callback' => 'Aldine\remove_hash',
-    ]);
-    $wp_customize->add_control(new \WP_Customize_Color_Control(
-        $wp_customize,
-        'pb_network_primary_color',
+    foreach ([
         [
+            'slug' => 'primary',
+            'hex' => '#b01109',
             'label' => __('Primary Color', 'aldine'),
-            'section'  => 'colors',
-            'description' => __('Used for links and primary elements.', 'aldine'),
-            'settings' => 'pb_network_primary_color',
-        ]
-    ));
-    $wp_customize->add_setting('pb_network_secondary_color', [
-        'type' => 'option',
-        'default' => '015d75',
-        'sanitize_callback' => 'Aldine\remove_hash',
-    ]);
-    $wp_customize->add_control(new \WP_Customize_Color_Control(
-        $wp_customize,
-        'pb_network_secondary_color',
+            'description' => __('Used for primary elements.', 'aldine'),
+        ],
+        [
+            'slug' => 'accent',
+            'hex' => '#015d75',
+            'label' => __('Accent Color', 'aldine'),
+            'description' => __('Used for accents.', 'aldine'),
+        ],
+        [
+            'slug' => 'link',
+            'hex' => '#b01109',
+            'label' => __('Link Color', 'aldine'),
+            'description' => __('Used for links.', 'aldine'),
+        ],
+        [
+            'slug' => 'header_link',
+            'hex' => '#b01109',
+            'label' => __('Header Link Color', 'aldine'),
+            'description' => __('Used for links in the header.', 'aldine'),
+        ],
+        [
+            'slug' => 'block_border',
+            'hex' => '#b01109',
+            'label' => __('Block Border Color', 'aldine'),
+            'description' => __('Used for home button block border.', 'aldine'),
+        ],
+        [
+            'slug' => 'fg',
+            'hex' => '#ffffff',
+            'label' => __('Foreground Color', 'aldine'),
+            'description' => __('Used for the foreground text of colored blocks.', 'aldine'),
+        ],
+        [
+            'slug' => 'bg',
+            'hex' => '#015d75',
+            'label' => __('Background Color', 'aldine'),
+            'description' => __('Used for the background of colored blocks.', 'aldine'),
+        ],
+        [
+            'slug' => 'btn_text',
+            'hex' => '#ffffff',
+            'label' => __('Button Text Color', 'aldine'),
+            'description' => __('Used for the foreground text of buttons.', 'aldine'),
+        ],
+        [
+            'slug' => 'btn_active_text',
+            'hex' => '#b01109',
+            'label' => __('Button Active Text Color', 'aldine'),
+            'description' => __('Used for the foreground text of active buttons.', 'aldine'),
+        ],
+        [
+            'slug' => 'btn_bg',
+            'hex' => '#b01109',
+            'label' => __('Button Background Color', 'aldine'),
+            'description' => __('Used for the background of buttons.', 'aldine'),
+        ],
+        [
+            'slug' => 'btn_inverse_text',
+            'hex' => '#b01109',
+            'label' => __('Inverse Button Text Color', 'aldine'),
+            'description' => __('Used for the foreground text of buttons.', 'aldine'),
+        ],
         [
-            'label' => __('Secondary Color', 'aldine'),
-            'section'  => 'colors',
-            'description' => __('Used for secondary elements.', 'aldine'),
-            'settings' => 'pb_network_secondary_color',
-        ]
-    ));
+            'slug' => 'btn_inverse_active_text',
+            'hex' => '#ffffff',
+            'label' => __('Inverse Button Active Text Color', 'aldine'),
+            'description' => __('Used for the background of buttons.', 'aldine'),
+        ],
+    ] as $color) {
+        $wp_customize->add_setting("pb_network_color_{$color['slug']}", [
+            'type' => 'option',
+            'default' => $color['hex'],
+        ]);
+        $wp_customize->add_control(new \WP_Customize_Color_Control(
+            $wp_customize,
+            "pb_network_color_{$color['slug']}",
+            [
+                'label' => $color['label'],
+                'section'  => 'colors',
+                'description' => $color['description'],
+                'settings' => "pb_network_color_{$color['slug']}",
+            ]
+        ));
+    }
     $wp_customize->add_section('pb_network_social', [
         'title' => __('Social Media', 'aldine'),
         'priority' => 30,
diff --git a/app/helpers.php b/app/helpers.php
index e5c4014..442f2f3 100644
--- a/app/helpers.php
+++ b/app/helpers.php
@@ -137,14 +137,6 @@ function locate_template($templates)
     return \locate_template(filter_templates($templates));
 }
 
-/**
- * Remove hash from hex color string
- */
-function remove_hash($color)
-{
-    return ltrim($color, '#');
-}
-
 /**
  *
  * Catch a contact form submission.
diff --git a/app/setup.php b/app/setup.php
index a7466c1..b597343 100644
--- a/app/setup.php
+++ b/app/setup.php
@@ -167,22 +167,59 @@ add_action('after_setup_theme', function () {
 });
 
 add_action('wp_head', function () {
-    $primary = get_option('pb_network_primary_color');
-    $secondary = get_option('pb_network_secondary_color');
-    $header_text_color = get_header_textcolor();
-    if ($primary || $secondary || $header_text_color) { ?>
+    $primary = get_option('pb_network_color_primary');
+    $accent = get_option('pb_network_color_accent');
+    $link = get_option('pb_network_color_link');
+    $header_link = get_option('pb_network_color_header_link');
+    $fg = get_option('pb_network_color_fg');
+    $bg = get_option('pb_network_color_bg');
+    $btn_text = get_option('pb_network_color_btn_text');
+    $btn_active_text = get_option('pb_network_color_btn_active_text');
+    $btn_bg = get_option('pb_network_color_btn_bg');
+    $btn_inverse_text = get_option('pb_network_color_btn_inverse_text');
+    $btn_inverse_active_text = get_option('pb_network_color_btn_inverse_active_text');
+    $block_border = get_option('pb_network_color_block_border');
+    $header_text = get_header_textcolor();
+    if ($primary || $accent || $header_text) { ?>
 <style type="text/css">:root {
-<?php if ($primary) {
-    $primary = '#' . $primary; ?>
---brand-primary: <?= $primary ?>;
+<?php if ($primary) { ?>
+--primary: <?= $primary ?>;
 <?php }
-if ($secondary) {
-    $secondary = '#' . $secondary; ?>
---brand-secondary: <?= $secondary ?>;
+if ($accent) { ?>
+--accent: <?= $accent ?>;
 <?php }
-if ($header_text_color) {
-    $header_text_color = '#' . $header_text_color; ?>
---brand-header-text: <?= $header_text_color; ?>;
+if ($link) { ?>
+--link: <?= $link ?>;
+<?php }
+if ($header_text) { ?>
+--header-text: <?= $header_text ?>;
+<?php }
+if ($fg) { ?>
+--fg: <?= $fg ?>;
+<?php }
+if ($bg) { ?>
+--bg: <?= $bg ?>;
+<?php }
+if ($btn_text) { ?>
+--btn-text: <?= $btn_text ?>;
+<?php }
+if ($btn_active_text) { ?>
+--btn-active-text: <?= $btn_active_text ?>;
+<?php }
+if ($btn_bg) { ?>
+--btn-bg: <?= $btn_bg ?>;
+<?php }
+if ($btn_inverse_text) { ?>
+--btn-inverse-text: <?= $btn_inverse_text ?>;
+<?php }
+if ($btn_inverse_active_text) { ?>
+--btn-inverse-active-text: <?= $btn_inverse_active_text ?>;
+<?php }
+if ($header_link) { ?>
+--header-link: <?= $header_link ?>;
+<?php }
+if ($block_border) { ?>
+--block-border: <?= $block_border ?>;
 <?php } ?>
 }</style>
     <?php }
diff --git a/resources/assets/styles/common/_global.scss b/resources/assets/styles/common/_global.scss
index f43a451..bdd3a15 100644
--- a/resources/assets/styles/common/_global.scss
+++ b/resources/assets/styles/common/_global.scss
@@ -6,6 +6,7 @@ body {
   margin: 0;
   font-family: $font-family-serif;
   font-size: rem(18);
+  background: #fff;
 }
 
 h1,
@@ -41,12 +42,22 @@ h2 {
 }
 
 :root {
-  --brand-primary: $brand-primary;
-  --brand-secondary: $brand-secondary;
+  --primary: $brand-primary;
+  --accent: $brand-accent;
+  --link: $brand-primary;
+  --header-text: $black;
+  --header-link: $brand-primary;
+  --fg: $white;
+  --bg: $brand-accent;
+  --block-border: $brand-primary;
+  --btn-text: $white;
+  --btn-bg: $brand-primary;
+  --btn-text-alt: $white;
+  --btn-bg-alt: $brand-accent;
 }
 
 a {
-  color: var(--brand-primary, $brand-primary);
+  color: var(--link, $brand-primary);
   text-decoration: none;
 }
 
@@ -62,14 +73,14 @@ a {
   border-color: var(--brand-primary, $brand-primary);
 }
 
-.secondary {
-  color: var(--brand-secondary, $brand-secondary);
+.accent {
+  color: var(--brand-secondary, $brand-accent);
 }
 
-.bg-secondary {
-  background-color: var(--brand-secondary, $brand-secondary);
+.bg-accent {
+  background-color: var(--brand-secondary, $brand-accent);
 }
 
-.b--secondary {
-  border-color: var(--brand-secondary, $brand-secondary);
+.b--accent {
+  border-color: var(--brand-secondary, $brand-accent);
 }
diff --git a/resources/assets/styles/common/_variables.scss b/resources/assets/styles/common/_variables.scss
index e1094b4..f6eb84b 100644
--- a/resources/assets/styles/common/_variables.scss
+++ b/resources/assets/styles/common/_variables.scss
@@ -1,6 +1,6 @@
 /** Colors */
 $brand-primary:         #b01109;
-$brand-secondary:       #015d75;
+$brand-accent:       #015d75;
 $dark-grey:             #444;
 $black:                 #000;
 $white:                 #fff;
diff --git a/resources/assets/styles/components/_buttons.scss b/resources/assets/styles/components/_buttons.scss
index a252da1..2d3a699 100644
--- a/resources/assets/styles/components/_buttons.scss
+++ b/resources/assets/styles/components/_buttons.scss
@@ -4,13 +4,13 @@
   height: rem(65);
   margin-top: 2em;
   padding: rem(20);
-  border: 2px solid $black;
+  border: 2px solid var(--btn-bg, $brand-primary);
   border-radius: 3px;
-  background: $black;
+  background: var(--btn-bg, $brand-primary);
   font-family: $font-family-sans-serif;
   font-size: 1rem;
   font-weight: 600;
-  color: $white;
+  color: var(--btn-text, $white);
   line-height: normal;
   letter-spacing: rem(2);
   text-align: center;
@@ -22,7 +22,7 @@
   &:hover,
   &:focus {
     background: $white;
-    color: $black;
+    color: var(--btn-active-text, $brand-primary);
   }
 
   &.button-small {
@@ -35,58 +35,14 @@
     width: 19.0625rem;
   }
 
-  &.button-outline {
+  &.button-inverse {
     background: $white;
-    color: $black;
+    color: var(--btn-inverse-text, $brand-primary);
 
     &:hover,
     &:focus {
-      background: $black;
-      color: $white;
-    }
-  }
-
-  &.button-primary {
-    border-color: var(--brand-primary, $brand-primary);
-    background: var(--brand-primary, $brand-primary);
-
-    &:hover,
-    &:focus {
-      background: $white;
-      color: var(--brand-primary, $brand-primary);
-    }
-
-    &.button-outline {
-      background: $white;
-      color: var(--brand-primary, $brand-primary);
-
-      &:hover,
-      &:focus {
-        color: $white;
-        background: var(--brand-primary, $brand-primary);
-      }
-    }
-  }
-
-  &.button-secondary {
-    border-color: var(--brand-secondary, $brand-secondary);
-    background: var(--brand-secondary, $brand-secondary);
-
-    &:hover,
-    &:focus {
-      background: $white;
-      color: var(--brand-secondary, $brand-secondary);
-    }
-
-    &.button-outline {
-      background: $white;
-      color: var(--brand-secondary, $brand-secondary);
-
-      &:hover,
-      &:focus {
-        color: $white;
-        background: var(--brand-secondary, $brand-secondary);
-      }
+      color: var(--btn-inverse-active-text, $white);
+      background: var(--btn-bg, $brand-primary);
     }
   }
 }
diff --git a/resources/assets/styles/components/_forms.scss b/resources/assets/styles/components/_forms.scss
index 786d595..6fd5100 100644
--- a/resources/assets/styles/components/_forms.scss
+++ b/resources/assets/styles/components/_forms.scss
@@ -69,7 +69,7 @@
 
     &:focus {
       outline: none;
-      border-bottom: solid 2px var(--brand-primary, $brand-primary);
+      border-bottom: solid 2px var(--accent, $brand-accent);
     }
   }
 }
diff --git a/resources/assets/styles/layouts/_footer.scss b/resources/assets/styles/layouts/_footer.scss
index 411e0a7..1acfcc8 100644
--- a/resources/assets/styles/layouts/_footer.scss
+++ b/resources/assets/styles/layouts/_footer.scss
@@ -4,7 +4,8 @@
     padding: 60px 42.5px 40px;
     font-family: $font-family-sans-serif;
     font-size: rem(16);
-    color: $white;
+    color: var(--fg, $white);
+    background: var(--bg, $brand-accent);
 
     ul {
       margin: 0;
@@ -16,13 +17,13 @@
     }
 
     a {
-      color: $white;
+      color: var(--fg, $white);
       text-decoration: none;
       border-bottom: solid 1px transparent;
 
       &:hover,
       &:focus {
-        border-bottom: solid 1px $white;
+        border-bottom: solid 1px var(--fg, $white);
       }
     }
 
@@ -35,7 +36,7 @@
     }
 
     .network-footer-block {
-      border-top: solid 1px $white;
+      border-top: solid 1px var(--fg, $white);
     }
 
     .network-footer-block-1 {
diff --git a/resources/assets/styles/layouts/_header.scss b/resources/assets/styles/layouts/_header.scss
index 6797906..5c6782c 100644
--- a/resources/assets/styles/layouts/_header.scss
+++ b/resources/assets/styles/layouts/_header.scss
@@ -16,14 +16,14 @@
       top: 7px;
       width: 25px;
       height: 3px;
-      background: var(--brand-primary, $brand-primary);
+      background: var(--link, $brand-primary);
 
       &::before,
       &::after {
         width: 25px;
         height: 3px;
         content: '';
-        background: var(--brand-primary, $brand-primary);
+        background: var(--link, $brand-primary);
       }
 
       &::before {
@@ -41,11 +41,11 @@
 
     &.is-active .icon {
       // TODO
-      background: $white;
+      background: var(--fg, $white);
 
       &::before,
       &::after {
-        background: $white;
+        background: var(--fg, $white);
       }
     }
   }
@@ -73,7 +73,7 @@
       font-family: $font-family-sans-serif;
       font-size: rem(24);
       line-height: (80/24);
-      color: $white;
+      color: var(--fg, $white);
       letter-spacing: 0;
     }
 
@@ -85,12 +85,12 @@
       margin: 0;
       padding: 0 52px;
       z-index: 1;
-      background: var(--brand-primary, $brand-primary);
+      background: var(--bg, $brand-primary);
 
       a {
         display: block;
         width: 100%;
-        border-bottom: solid 1px $white;
+        border-bottom: solid 1px var(--fg, $white);
 
         &:last-child {
           border-bottom: 0;
@@ -134,12 +134,12 @@
       a {
         display: inline-block;
         font-size: rem(18);
-        color: $black;
+        color: var(--header-text, $black);
         line-height: normal;
 
         &:hover,
         &:focus {
-          color: var(--brand-primary, $brand-primary);
+          color: var(--header-link, $brand-primary);
         }
 
         &:nth-child(1) {
diff --git a/resources/assets/styles/layouts/_pages.scss b/resources/assets/styles/layouts/_pages.scss
index d451ab1..39aeb83 100644
--- a/resources/assets/styles/layouts/_pages.scss
+++ b/resources/assets/styles/layouts/_pages.scss
@@ -22,32 +22,33 @@
     .widget_text:nth-child(2) {
       margin-right: 0.5rem;
       margin-left: 0.5rem;
-      border: solid 2px var(--brand-primary, $brand-primary);
+      border: solid 2px var(--primary, $brand-primary);
       box-shadow: unset;
     }
   }
 
   .blocks.blocks-4 {
     .widget_text:nth-child(2) {
-      color: $white;
-      background: var(--brand-secondary, $brand-secondary);
+      color: var(--fg, $white);
+      background: var(--bg, $brand-accent);
 
       h3 {
-        color: $white;
+        color: var(--fg, $white);
 
         &::before {
-          background-color: $white;
+          background: var(--fg, $white);
         }
       }
 
       .button {
-        border-color: $white;
+        color: var(--fg, $white);
+        border-color: var(--fg, $white);
         background: transparent;
 
         &:hover,
         &:focus {
-          color: var(--brand-secondary, $brand-secondary);
-          background: $white;
+          color: var(--bg, $brand-accent);
+          background: var(--fg, $white);
         }
       }
     }
@@ -56,7 +57,7 @@
       margin-top: 2rem;
       margin-right: 0.5rem;
       margin-left: 0.5rem;
-      border: solid 2px var(--brand-primary, $brand-primary);
+      border: solid 2px var(--block-border, $brand-primary);
       box-shadow: unset;
     }
   }
@@ -93,7 +94,7 @@
     h3 {
       font-size: rem(30);
       font-weight: 600;
-      color: var(--brand-primary, $brand-primary);
+      color: var(--primary, $brand-primary);
       letter-spacing: 2px;
       line-height: (36/30);
       margin: 0;
@@ -104,7 +105,7 @@
         margin: 0 auto 1em;
         width: 46px;
         height: 5px;
-        background-color: var(--brand-secondary, $brand-secondary);
+        background: var(--accent, $brand-accent);
       }
     }
   }
@@ -137,8 +138,8 @@
       height: 24.125rem;
       margin: 0 0 2rem;
       padding: 1.5rem 1.85rem 2.1875rem;
-      border-style: solid;
-      border-width: 2px;
+      border: solid 2px var(--bg, $brand-accent);
+      background: var(--bg, $brand-accent);
 
       a {
         font-family: $font-family-sans-serif;
@@ -170,7 +171,7 @@
 
       svg {
         path {
-          fill: var(--brand-secondary, $brand-secondary);
+          fill: var(--primary, $brand-primary);
         }
       }
     }
diff --git a/resources/views/partials/contact-form.blade.php b/resources/views/partials/contact-form.blade.php
index 01137fd..fc2fc75 100644
--- a/resources/views/partials/contact-form.blade.php
+++ b/resources/views/partials/contact-form.blade.php
@@ -17,6 +17,6 @@
     <p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif">
       <label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label>
       <textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
-    <p class="tc"><input class="button-reset button button-small button-secondary button-outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
+    <p class="tc"><input class="button-reset button button-small button-inverse input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
   </form>
 </section>
diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
index ef15ffa..c4d04f4 100644
--- a/resources/views/partials/footer.blade.php
+++ b/resources/views/partials/footer.blade.php
@@ -3,7 +3,7 @@
     @if(get_option('pb_network_contact_form'))
       @include('partials.contact-form')
     @endif
-    <section class="network-footer bg-secondary">
+    <section class="network-footer">
       <div class="network-footer-block {{ App::networkFooter(1) }}">
         @if(App::networkFooter(1) !== 'empty')
             @php(dynamic_sidebar('network-footer-block-1'))
diff --git a/resources/views/partials/front-page-block.blade.php b/resources/views/partials/front-page-block.blade.php
index 51e2a3f..b747026 100644
--- a/resources/views/partials/front-page-block.blade.php
+++ b/resources/views/partials/front-page-block.blade.php
@@ -1,7 +1,7 @@
 <div class="block flex flex-column items-center justify-center p-0 w-100">
   <div class="inside tc">
-    <h3 class="tc ttu primary">{{ $title }}</h3>
+    <h3 class="tc ttu">{{ $title }}</h3>
     {{ $slot }}
-    <a class="button button-primary" href="{{ $button_url }}">{{ $button_title }}</a>
+    <a class="button" href="{{ $button_url }}">{{ $button_title }}</a>
   </div>
 </div>
diff --git a/resources/views/partials/front-page-catalog.blade.php b/resources/views/partials/front-page-catalog.blade.php
index c728beb..94f36d9 100644
--- a/resources/views/partials/front-page-catalog.blade.php
+++ b/resources/views/partials/front-page-catalog.blade.php
@@ -3,7 +3,7 @@
   <div class="track flex flex-row flex-wrap justify-center items-center">
     <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2">
       @foreach(FrontPage::latestBooks( $current_page, 3 ) as $book)
-        <div class="book flex flex-column justify-end w-100 bg-secondary b--secondary">
+        <div class="book flex flex-column justify-end w-100">
           @if(isset($book['metadata']['keywords']))
           <p class="subject tc ma0">
             <a href="#">{{ $book['metadata']['keywords'] }}</a>
@@ -18,10 +18,10 @@
         </div>
       @endforeach
     </div>
-    @if($previous_page)<a class="secondary previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
-    @if($next_page)<a class="secondary next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
+    @if($previous_page)<a class="previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
+    @if($next_page)<a class="next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
   </div>
   <div class="catalog-link tc">
-    <a class="button button-primary button-outline button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
+    <a class="button button-inverse button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>
   </div>
 </div>