From 2b39c1a5d7cd98dd7b77d6051019eaf5e25d835e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= <k1pstabug@gmail.com>
Date: Wed, 30 Sep 2020 13:31:15 +0200
Subject: [PATCH]     Replace blue color with $primary_color:

    - Change ClientPortal helper to return 'bg-primary-darken' instead of 'active-page'
    - Buttons & input fields don't have SASS color now
    - bg-blue-600/900 replaced with primary/primary-darken
    - Production build of assets
---
 resources/sass/app.scss                        |  4 ----
 resources/sass/components/buttons.scss         | 10 ++++------
 resources/sass/components/inputs.scss          |  2 +-
 .../portal/ninja2020/auth/login.blade.php      |  2 +-
 .../ninja2020/auth/passwords/request.blade.php |  2 +-
 .../ninja2020/auth/passwords/reset.blade.php   |  2 +-
 .../portal/ninja2020/auth/register.blade.php   |  2 +-
 .../general/sidebar/desktop.blade.php          |  8 ++++----
 .../general/sidebar/mobile.blade.php           |  8 ++++----
 .../livewire/credits-table.blade.php           | 12 ++++++------
 .../livewire/documents-table.blade.php         | 18 +++++++++---------
 .../livewire/invoices-table.blade.php          | 18 +++++++++---------
 .../livewire/payment-methods-table.blade.php   | 16 ++++++++--------
 .../livewire/payments-table.blade.php          | 12 ++++++------
 .../components/livewire/quotes-table.blade.php | 16 ++++++++--------
 .../recurring-invoices-table.blade.php         | 12 ++++++------
 .../components/primary-color.blade.php         | 18 ++++++++++++++++++
 .../authorize/add_credit_card.blade.php        |  2 +-
 .../authorize/credit_card_payment.blade.php    |  4 ++--
 .../gateways/checkout/credit_card.blade.php    |  2 +-
 .../gateways/stripe/ach/authorize.blade.php    |  2 +-
 .../gateways/stripe/ach/pay.blade.php          |  4 ++--
 .../gateways/stripe/ach/verify.blade.php       |  4 ++--
 .../gateways/stripe/add_credit_card.blade.php  |  2 +-
 .../gateways/stripe/alipay/pay.blade.php       |  2 +-
 .../gateways/stripe/credit_card.blade.php      |  4 ++--
 .../gateways/stripe/sofort/pay.blade.php       |  2 +-
 .../invoices/includes/signature.blade.php      |  2 +-
 .../invoices/includes/terms.blade.php          |  2 +-
 .../portal/ninja2020/invoices/index.blade.php  |  4 ++--
 .../ninja2020/invoices/payment.blade.php       |  4 ++--
 .../portal/ninja2020/invoices/show.blade.php   |  2 +-
 .../invoices/show/fullscreen.blade.php         |  2 +-
 .../portal/ninja2020/layout/app.blade.php      |  5 +++--
 .../portal/ninja2020/payments/show.blade.php   |  2 +-
 .../profile/settings/general.blade.php         |  2 +-
 .../settings/name-website-logo.blade.php       |  2 +-
 .../settings/personal-address.blade.php        |  2 +-
 .../settings/shipping-address.blade.php        |  2 +-
 .../portal/ninja2020/quotes/approve.blade.php  |  2 +-
 .../quotes/includes/signature.blade.php        |  2 +-
 .../portal/ninja2020/quotes/index.blade.php    |  4 ++--
 .../portal/ninja2020/quotes/show.blade.php     |  2 +-
 .../ninja2020/quotes/show/fullscreen.blade.php |  2 +-
 44 files changed, 123 insertions(+), 110 deletions(-)
 create mode 100644 resources/views/portal/ninja2020/components/primary-color.blade.php

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index fdd34fee02..093bcaa8c9 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -33,9 +33,5 @@
     // hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400 transition ease-in-out duration-150
 }
 
-.active-page {
-    @apply bg-blue-900 #{!important};
-}
-
 /* purgecss end ignore */
 @tailwind utilities;
diff --git a/resources/sass/components/buttons.scss b/resources/sass/components/buttons.scss
index fb02424164..8aeca8c757 100644
--- a/resources/sass/components/buttons.scss
+++ b/resources/sass/components/buttons.scss
@@ -1,5 +1,5 @@
 .button {
-    @apply rounded py-3 px-4 text-sm leading-4 transition duration-150 ease-in-out font-semibold;
+    @apply rounded py-3 px-4 text-sm leading-4 transition duration-150 ease-in-out;
 }
 
 button:disabled {
@@ -7,10 +7,10 @@ button:disabled {
 }
 
 .button-primary {
-    @apply bg-blue-500 text-white;
+    @apply text-white;
 
     &:hover {
-        @apply bg-blue-600;
+        @apply font-semibold;
     }
 }
 
@@ -35,10 +35,8 @@ button:disabled {
 }
 
 .button-link {
-    @apply text-blue-600;
-
     &:hover {
-        @apply text-blue-700 underline;
+        @apply font-semibold underline;
     }
 
     &:focus {
diff --git a/resources/sass/components/inputs.scss b/resources/sass/components/inputs.scss
index 1c96c48c0c..e169715b72 100644
--- a/resources/sass/components/inputs.scss
+++ b/resources/sass/components/inputs.scss
@@ -2,7 +2,7 @@
     @apply items-center border border-gray-300 rounded mt-2 py-2 px-4 text-sm;
 
     &:focus {
-        @apply outline-none border-blue-500;
+        @apply outline-none bg-gray-50;
     }
 }
 
diff --git a/resources/views/portal/ninja2020/auth/login.blade.php b/resources/views/portal/ninja2020/auth/login.blade.php
index 9b7ce3cedc..b19a36b080 100644
--- a/resources/views/portal/ninja2020/auth/login.blade.php
+++ b/resources/views/portal/ninja2020/auth/login.blade.php
@@ -47,7 +47,7 @@
                             @enderror
                         </div>
                         <div class="mt-5">
-                            <button id="loginBtn" class="button button-primary button-block">
+                            <button id="loginBtn" class="button button-primary button-block bg-blue-600">
                                 {{ trans('texts.login') }}
                             </button>
                         </div>
diff --git a/resources/views/portal/ninja2020/auth/passwords/request.blade.php b/resources/views/portal/ninja2020/auth/passwords/request.blade.php
index 9da2833852..580f228e5c 100644
--- a/resources/views/portal/ninja2020/auth/passwords/request.blade.php
+++ b/resources/views/portal/ninja2020/auth/passwords/request.blade.php
@@ -33,7 +33,7 @@
                             @enderror
                         </div>
                         <div class="mt-5">
-                            <button class="button button-primary button-block">{{ ctrans('texts.next_step') }}</button>
+                            <button class="button button-primary button-block bg-blue-600">{{ ctrans('texts.next_step') }}</button>
                         </div>
                     </form>
                 </div>
diff --git a/resources/views/portal/ninja2020/auth/passwords/reset.blade.php b/resources/views/portal/ninja2020/auth/passwords/reset.blade.php
index a8284ffd6c..7ce9b644f5 100644
--- a/resources/views/portal/ninja2020/auth/passwords/reset.blade.php
+++ b/resources/views/portal/ninja2020/auth/passwords/reset.blade.php
@@ -56,7 +56,7 @@
                             @enderror
                         </div>
                         <div class="mt-5">
-                            <button class="button button-primary button-block">{{ ctrans('texts.complete') }}</button>
+                            <button class="button button-primary button-block bg-blue-600">{{ ctrans('texts.complete') }}</button>
                         </div>
                     </form>
                 </div>
diff --git a/resources/views/portal/ninja2020/auth/register.blade.php b/resources/views/portal/ninja2020/auth/register.blade.php
index 5e0faed9f2..805fd54c0d 100644
--- a/resources/views/portal/ninja2020/auth/register.blade.php
+++ b/resources/views/portal/ninja2020/auth/register.blade.php
@@ -36,7 +36,7 @@
                         </span>
                     </span>
 
-                    <button class="button button-primary">{{ ctrans('texts.save') }}</button>
+                    <button class="button button-primary bg-blue-600">{{ ctrans('texts.save') }}</button>
                 </div>
             </form>
         </div>
diff --git a/resources/views/portal/ninja2020/components/general/sidebar/desktop.blade.php b/resources/views/portal/ninja2020/components/general/sidebar/desktop.blade.php
index d31889cc5e..b7d369702d 100644
--- a/resources/views/portal/ninja2020/components/general/sidebar/desktop.blade.php
+++ b/resources/views/portal/ninja2020/components/general/sidebar/desktop.blade.php
@@ -1,20 +1,20 @@
 <div class="hidden md:flex md:flex-shrink-0">
     <div class="flex flex-col w-64">
-        <div class="flex items-center h-16 flex-shrink-0 px-4 bg-blue-900 justify-center">
+        <div class="flex items-center h-16 flex-shrink-0 px-4 bg-primary-darken justify-center">
             <a href="{{ route('client.dashboard') }}">
                 <img class="h-8 w-auto" src="{!! $settings->company_logo ?: asset('images/invoiceninja-white-logo.png') !!}" alt="{{ config('app.name') }}" />
             </a>
         </div>
         <div class="h-0 flex-1 flex flex-col overflow-y-auto">
-            <nav class="flex-1 py-4 bg-blue-800">
+            <nav class="flex-1 py-4 bg-primary">
                 @foreach($sidebar as $row)
-                <a class="group flex items-center p-4 text-sm leading-5 font-medium text-white bg-blue-800 hover:bg-blue-900 focus:outline-none focus:bg-blue-900 transition ease-in-out duration-150 {{ isActive($row['url']) }}" href="{{ route($row['url']) }}">
+                <a class="group flex items-center p-4 text-sm leading-5 font-medium text-white bg-primary hover:font-semibold focus:outline-none focus:bg-primary-darken transition ease-in-out duration-150 {{ isActive($row['url']) }}" href="{{ route($row['url']) }}">
                     <img src="{{ asset('images/svg/' . $row['icon'] . '.svg') }}" class="w-5 h-5 fill-current text-white mr-3" alt="" />
                     {{ $row['title'] }}
                 </a>
                 @endforeach
             </nav>
-            <div class="flex-shrink-0 flex bg-blue-800 p-4 justify-center">
+            <div class="flex-shrink-0 flex bg-primary p-4 justify-center">
                 <div class="flex items-center">
                     <a href="https://www.facebook.com/invoiceninja/">
                         <svg class="text-white hover:text-gray-300 mr-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
diff --git a/resources/views/portal/ninja2020/components/general/sidebar/mobile.blade.php b/resources/views/portal/ninja2020/components/general/sidebar/mobile.blade.php
index 6f7f4032ca..d73bd50fbe 100644
--- a/resources/views/portal/ninja2020/components/general/sidebar/mobile.blade.php
+++ b/resources/views/portal/ninja2020/components/general/sidebar/mobile.blade.php
@@ -1,6 +1,6 @@
 <div class="md:hidden">
     <div @click="sidebarOpen = false" class="fixed inset-0 z-30 bg-gray-600 opacity-0 pointer-events-none transition-opacity ease-linear duration-300" :class="{'opacity-75 pointer-events-auto': sidebarOpen, 'opacity-0 pointer-events-none': !sidebarOpen}"></div>
-    <div class="fixed inset-y-0 left-0 flex flex-col z-40 max-w-xs w-full pt-5 pb-4 bg-blue-800 transform ease-in-out duration-300 -translate-x-full" :class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}">
+    <div class="fixed inset-y-0 left-0 flex flex-col z-40 max-w-xs w-full pt-5 pb-4 bg-primary transform ease-in-out duration-300 -translate-x-full" :class="{'translate-x-0': sidebarOpen, '-translate-x-full': !sidebarOpen}">
         <div class="absolute top-0 right-0 -mr-14 p-1">
             <button x-show="sidebarOpen" @click="sidebarOpen = false" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600">
                 <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
@@ -12,15 +12,15 @@
             <img class="h-6 w-auto" src="{!! $settings->company_logo ?: asset('images/invoiceninja-white-logo.png') !!}" alt="{{ config('app.name') }}" />
         </div>
         <div class="mt-5 flex-1 h-0 overflow-y-auto">
-            <nav class="flex-1 py-4 bg-blue-800">
+            <nav class="flex-1 py-4 bg-primary">
                 @foreach($sidebar as $row)
-                <a class="group flex items-center p-4 text-sm leading-5 font-medium text-white bg-blue-800 hover:bg-blue-900 focus:outline-none focus:bg-blue-900 transition ease-in-out duration-150 {{ isActive($row['url']) }}" href="{{ route($row['url']) }}">
+                <a class="group flex items-center p-4 text-sm leading-5 font-medium text-white bg-primary hover:font-semibold focus:outline-none focus:font-semibold transition ease-in-out duration-150 {{ isActive($row['url']) }}" href="{{ route($row['url']) }}">
                     <img src="{{ asset('images/svg/' . $row['icon'] . '.svg') }}" class="w-5 h-5 fill-current text-white mr-3" alt="" />
                     {{ $row['title'] }}
                 </a>
                 @endforeach
             </nav>
-            <div class="flex-shrink-0 flex bg-blue-800 p-4 justify-center">
+            <div class="flex-shrink-0 flex bg-primary p-4 justify-center">
                 <div class="flex items-center">
                     <a href="https://www.facebook.com/invoiceninja/">
                         <svg class="text-white hover:text-gray-300 mr-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
diff --git a/resources/views/portal/ninja2020/components/livewire/credits-table.blade.php b/resources/views/portal/ninja2020/components/livewire/credits-table.blade.php
index dc9bf5191a..aa4d99a6de 100644
--- a/resources/views/portal/ninja2020/components/livewire/credits-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/credits-table.blade.php
@@ -15,27 +15,27 @@
             <table class="min-w-full shadow rounded border border-gray-200 mt-4 credits-table">
                 <thead>
                     <tr>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('amount')" class="cursor-pointer">
                                 {{ ctrans('texts.amount') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('balance')" class="cursor-pointer">
                                 {{ ctrans('texts.balance') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('date')" class="cursor-pointer">
                                 {{ ctrans('texts.credit_date') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('public_notes')" class="cursor-pointer">
                                 {{ ctrans('texts.public_notes') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary"></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -54,7 +54,7 @@
                                 {{ empty($credit->public_notes) ? '/' : $credit->public_notes }}
                             </td>
                             <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                <a href="{{ route('client.credits.show', $credit->hashed_id) }}" class="button-link">
+                                <a href="{{ route('client.credits.show', $credit->hashed_id) }}" class="button-link text-primary">
                                     @lang('texts.view')
                                 </a>
                             </td>
diff --git a/resources/views/portal/ninja2020/components/livewire/documents-table.blade.php b/resources/views/portal/ninja2020/components/livewire/documents-table.blade.php
index c13f4f0b24..e1e53b4ca7 100644
--- a/resources/views/portal/ninja2020/components/livewire/documents-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/documents-table.blade.php
@@ -8,7 +8,7 @@
                 <option>15</option>
                 <option>20</option>
             </select>
-            <button x-on:click="document.getElementById('multiple-downloads').submit()" class="button button-primary py-2 ml-2">
+            <button x-on:click="document.getElementById('multiple-downloads').submit()" class="button button-primary bg-primary py-2 ml-2">
                 <span class="hidden md:block">
                     {{ ctrans('texts.download_selected') }}
                 </span>
@@ -31,31 +31,31 @@
             <table class="min-w-full shadow rounded border border-gray-200 mt-4 credits-table">
                 <thead>
                     <tr>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" />
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider" />
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('name')" class="cursor-pointer">
                                 {{ ctrans('texts.name') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('documentable_type')" class="cursor-pointer">
                                 {{ ctrans('texts.resource') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('type')" class="cursor-pointer">
                                 {{ ctrans('texts.type') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('size')" class="cursor-pointer">
                                 {{ ctrans('texts.size') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             {{ ctrans('texts.download') }}
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" />
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider" />
                     </tr>
                 </thead>
                 <tbody>
@@ -82,7 +82,7 @@
                                 </a>
                             </td>
                             <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                <a href="{{ route('client.documents.show', $document->hashed_id) }}" class="button-link">
+                                <a href="{{ route('client.documents.show', $document->hashed_id) }}" class="button-link text-primary">
                                     {{ ctrans('texts.view') }}
                                 </a>
                             </td>
diff --git a/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php b/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
index 25d1a945d6..14004a64a4 100644
--- a/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php
@@ -29,37 +29,37 @@
             <table class="min-w-full mt-4 border border-gray-200 rounded shadow invoices-table">
                 <thead>
                     <tr>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <label>
                                 <input type="checkbox" class="form-check form-check-parent">
                             </label>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('number')" class="cursor-pointer">
                                 {{ ctrans('texts.invoice_number') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('date')" class="cursor-pointer">
                                 {{ ctrans('texts.invoice_date') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('balance')" class="cursor-pointer">
                                 {{ ctrans('texts.balance') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('due_date')" class="cursor-pointer">
                                 {{ ctrans('texts.due_date') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('status_id')" class="cursor-pointer">
                                 {{ ctrans('texts.status') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                        <th class="px-white-3 border-b border-gray-200 bg-primary"></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -91,12 +91,12 @@
                                         @csrf
                                         <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                         <input type="hidden" name="action" value="payment">
-                                        <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary">
+                                        <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary">
                                             @lang('texts.pay_now')
                                         </button>
                                     </form>
                                 @endif
-                                <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}" class="button-link">
+                                <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}" class="button-link text-primary">
                                     @lang('texts.view')
                                 </a>
                             </td>
diff --git a/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php b/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php
index cc77da02bf..32809625b4 100644
--- a/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/payment-methods-table.blade.php
@@ -12,7 +12,7 @@
         <div class="relative" x-data="{ open: false }" x-on:click.away="open = false">
             <!-- Add payment method button -->
             @if($client->getCreditCardGateway() || $client->getBankTransferGateway())
-                <button x-on:click="open = !open" class="button button-primary">{{ ctrans('texts.add_payment_method') }}</button>
+                <button x-on:click="open = !open" class="button button-primary bg-primary">{{ ctrans('texts.add_payment_method') }}</button>
                 <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
                     <div class="py-1 rounded-md bg-white shadow-xs">
                         @if($client->getCreditCardGateway())
@@ -35,29 +35,29 @@
             <table class="min-w-full shadow rounded border border-gray-200 mt-4 payment-methods-table">
                 <thead>
                 <tr>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white  uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('created_at')" class="cursor-pointer">
                                 {{ ctrans('texts.created_at') }}
                             </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white  uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('type_id')" class="cursor-pointer">
                                 {{ ctrans('texts.payment_type_id') }}
                             </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white  uppercase tracking-wider">
                         {{ ctrans('texts.type') }}
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white  uppercase tracking-wider">
                         {{ ctrans('texts.expires') }}
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white  uppercase tracking-wider">
                         {{ ctrans('texts.card_number') }}
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white  uppercase tracking-wider">
                         {{ ctrans('texts.default') }}
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary"></th>
                 </tr>
                 </thead>
                 <tbody>
diff --git a/resources/views/portal/ninja2020/components/livewire/payments-table.blade.php b/resources/views/portal/ninja2020/components/livewire/payments-table.blade.php
index 4813665cbc..9554995a3b 100644
--- a/resources/views/portal/ninja2020/components/livewire/payments-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/payments-table.blade.php
@@ -14,32 +14,32 @@
         <table class="min-w-full shadow rounded border border-gray-200 payments-table">
             <thead>
                 <tr>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                         <span role="button" wire:click="sortBy('date')" class="cursor-pointer">
                             {{ ctrans('texts.payment_date') }}
                         </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                         <span role="button" wire:click="sortBy('type_id')" class="cursor-pointer">
                             {{ ctrans('texts.payment_type_id') }}
                         </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                         <span role="button" wire:click="sortBy('amount')" class="cursor-pointer">
                             {{ ctrans('texts.amount') }}
                         </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                         <span role="button" wire:click="sortBy('transaction_reference')" class="cursor-pointer">
                             {{ ctrans('texts.transaction_reference') }}
                         </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                         <span role="button" wire:click="sortBy('status_id')" class="cursor-pointer">
                             {{ ctrans('texts.status') }}
                         </span>
                     </th>
-                    <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                    <th class="px-6 py-3 border-b border-gray-200 bg-primary"></th>
                 </tr>
             </thead>
             <tbody>
diff --git a/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php b/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php
index 3ac7fa16be..05c73dd18c 100644
--- a/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/quotes-table.blade.php
@@ -33,37 +33,37 @@
             <table class="min-w-full mt-4 border border-gray-200 rounded shadow quotes-table">
                 <thead>
                     <tr>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <label>
                                 <input type="checkbox" class="form-check form-check-parent">
                             </label>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('number')" class="cursor-pointer">
                                 {{ ctrans('texts.quote_number') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('date')" class="cursor-pointer">
                                 {{ ctrans('texts.quote_date') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('balance')" class="cursor-pointer">
                                 {{ ctrans('texts.balance') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('date')" class="cursor-pointer">
                                 {{ ctrans('texts.valid_until') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50">
+                        <th class="px-6 py-3 text-xs font-medium leading-4 tracking-wider text-left text-white uppercase border-b border-gray-200 bg-primary">
                             <span role="button" wire:click="sortBy('status_id')" class="cursor-pointer">
                                 {{ ctrans('texts.quote_status') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary"></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -90,7 +90,7 @@
                                 {!! App\Models\Quote::badgeForStatus($quote->status_id) !!}
                             </td>
                             <td class="flex items-center justify-end px-6 py-4 text-sm font-medium leading-5 whitespace-no-wrap">
-                                <a href="{{ route('client.quote.show', $quote->hashed_id) }}" class="button-link">
+                                <a href="{{ route('client.quote.show', $quote->hashed_id) }}" class="button-link text-primary">
                                     @lang('texts.view')
                                 </a>
                             </td>
diff --git a/resources/views/portal/ninja2020/components/livewire/recurring-invoices-table.blade.php b/resources/views/portal/ninja2020/components/livewire/recurring-invoices-table.blade.php
index ccc81c0a66..1461f846fb 100644
--- a/resources/views/portal/ninja2020/components/livewire/recurring-invoices-table.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/recurring-invoices-table.blade.php
@@ -15,32 +15,32 @@
             <table class="min-w-full shadow rounded border border-gray-200 mt-4 recurring-invoices-table">
                 <thead>
                     <tr>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('frequency_id')" class="cursor-pointer">
                                 {{ ctrans('texts.frequency') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('date')" class="cursor-pointer">
                                 {{ ctrans('texts.start_date') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('next_send_date')" class="cursor-pointer">
                                 {{ ctrans('texts.next_send_date') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('remaining_cycles')" class="cursor-pointer">
                                 {{ ctrans('texts.cycles_remaining') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">
                             <span role="button" wire:click="sortBy('amount')" class="cursor-pointer">
                                 {{ ctrans('texts.amount') }}
                             </span>
                         </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                        <th class="px-6 py-3 border-b border-gray-200 bg-primary"></th>
                     </tr>
                 </thead>
                 <tbody>
diff --git a/resources/views/portal/ninja2020/components/primary-color.blade.php b/resources/views/portal/ninja2020/components/primary-color.blade.php
new file mode 100644
index 0000000000..4aaa3b76bd
--- /dev/null
+++ b/resources/views/portal/ninja2020/components/primary-color.blade.php
@@ -0,0 +1,18 @@
+<style>
+    :root {
+        --primary-color: {{ $settings->primary_color }};
+    }
+
+    .bg-primary {
+        background-color: var(--primary-color);
+    }
+
+    .bg-primary-darken {
+        background-color: vaR(--primary-color);
+        filter: brightness(90%);
+    }
+
+    .text-primary {
+        color: var(--primary-color);
+    }
+</style>
\ No newline at end of file
diff --git a/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
index 62203c1151..cd725c0f08 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/add_credit_card.blade.php
@@ -59,7 +59,7 @@
                         </div>
                         <div class="bg-gray-50 px-4 py-5 flex justify-end">
                             <div id="errors"></div>
-                            <button type="primary" class="button button-primary" id="card_button">
+                            <button type="primary" class="button button-primary bg-primary" id="card_button">
                                 <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php b/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php
index 1dbfcf0101..2996d9e420 100644
--- a/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php
+++ b/resources/views/portal/ninja2020/gateways/authorize/credit_card_payment.blade.php
@@ -87,7 +87,7 @@
                                 </dd>
                             </div>
                             <div class="bg-white px-4 py-5 flex justify-end">
-                                <button class="button button-primary" id="card_button">
+                                <button class="button button-primary bg-primary" id="card_button">
                                     <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -126,7 +126,7 @@
                                             {{ $token->meta->brand }} : {{ $token->meta->last4 }}
                                         </dt>
                                         <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                                            <button class="button button-primary pay_now_button" data-id="{{ $token->hashed_id }}">{{ ctrans('texts.pay_now') }}</button>
+                                            <button class="button button-primary bg-primary pay_now_button" data-id="{{ $token->hashed_id }}">{{ ctrans('texts.pay_now') }}</button>
                                         </dd>
                                     </div>
                                     @endforeach 
diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php
index 4c97ad520b..71f54319f9 100644
--- a/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card.blade.php
@@ -79,7 +79,7 @@
                             </dd>
                         </div>
                         <div class="bg-white px-4 py-5 flex justify-end">
-                            <button class="button button-primary" onclick="document.getElementById('server-response').submit()">
+                            <button class="button button-primary bg-primary" onclick="document.getElementById('server-response').submit()">
                                 {{ ctrans('texts.pay_now') }}
                             </button>
                         </div>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/ach/authorize.blade.php b/resources/views/portal/ninja2020/gateways/stripe/ach/authorize.blade.php
index b824954f6c..a73bcb11ec 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/ach/authorize.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/ach/authorize.blade.php
@@ -104,7 +104,7 @@
                                     </span>
                                 </div>
                                 <div class="bg-white px-4 py-5 flex justify-end">
-                                    <button type="submit" class="button button-primary" id="save-button">
+                                    <button type="submit" class="button button-primary bg-primary" id="save-button">
                                         <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php
index d4ffdf84a2..35e6c2f9a7 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/ach/pay.blade.php
@@ -49,7 +49,7 @@
                                 </dd>
                             </div>
                             <div class="bg-gray-50 px-4 py-5 flex justify-end">
-                                <button type="button" id="pay-now" class="button button-primary" onclick="document.getElementById('server-response').submit()">
+                                <button type="button" id="pay-now" class="button button-primary bg-primary" onclick="document.getElementById('server-response').submit()">
                                     {{ ctrans('texts.pay_now') }}
                                 </button>
                             </div>
@@ -57,7 +57,7 @@
                             <div class="bg-gray-50 px-4 py-5 sm:px-6 flex items-center">
                                 <dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
                                    <span>{{ ctrans('texts.bank_account_not_linked') }}</span>
-                                   <a class="button button-link" href="{{ route('client.payment_methods.index') }}">{{ ctrans('texts.add_payment_method') }}</a>
+                                   <a class="button button-link text-primary" href="{{ route('client.payment_methods.index') }}">{{ ctrans('texts.add_payment_method') }}</a>
                                 </dd>
                             </div>
                         @endif
diff --git a/resources/views/portal/ninja2020/gateways/stripe/ach/verify.blade.php b/resources/views/portal/ninja2020/gateways/stripe/ach/verify.blade.php
index 83ea9fc310..2c964d717a 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/ach/verify.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/ach/verify.blade.php
@@ -16,7 +16,7 @@
                         <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
                             {{ ctrans('texts.complete_your_bank_account_verification') }} ({{ ctrans('texts.ach') }}/{{ $token->meta->last4 }})
                         </p>
-                        <a href="#" class="button-link text-sm">{{ __('texts.learn_more') }}</a>
+                        <a href="#" class="button-link text-primary text-sm">{{ __('texts.learn_more') }}</a>
                     </div>
                     <div>
                         <form method="post">
@@ -41,7 +41,7 @@
                                 </dd>
                             </div>
                             <div class="bg-gray-50 px-4 py-5 flex justify-end">
-                                <button id="pay-now" class="button button-primary">
+                                <button id="pay-now" class="button button-primary bg-primary">
                                     {{ ctrans('texts.complete_verification') }}
                                 </button>
                             </div>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
index e99e1158ea..2b2961a439 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
@@ -75,7 +75,7 @@
                                     type="button"
                                     id="card-button"
                                     data-secret="{{ $intent->client_secret }}"
-                                    class="button button-primary">
+                                    class="button button-primary bg-primary">
                                     <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php
index 33b1bcf6b8..f7167bbd0f 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/alipay/pay.blade.php
@@ -40,7 +40,7 @@
                             </dd>
                         </div>
                         <div class="bg-gray-50 px-4 py-5 flex justify-end">
-                            <button class="button button-primary" id="pay-now-button">
+                            <button class="button button-primary bg-primary" id="pay-now-button">
                                 <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
index dcce02532b..c2cbe6d6e6 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
@@ -68,7 +68,7 @@
                                         data-secret="{{ $intent->client_secret }}"
                                         data-token="{{ $token->token }}"
                                         id="pay-now-with-token"
-                                        class="button button-primary inline-flex items-center">
+                                        class="button button-primary bg-primary inline-flex items-center">
                                         <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@@ -130,7 +130,7 @@
                                         type="button"
                                         id="pay-now"
                                         data-secret="{{ $intent->client_secret }}"
-                                        class="button button-primary">
+                                        class="button button-primary bg-primary">
                                         <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                             <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php b/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
index d06441e05c..a53402bf36 100644
--- a/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
+++ b/resources/views/portal/ninja2020/gateways/stripe/sofort/pay.blade.php
@@ -40,7 +40,7 @@
                             </dd>
                         </div>
                         <div class="bg-gray-50 px-4 py-5 flex justify-end" id="pay-now-button">
-                            <button class="button button-primary">
+                            <button class="button button-primary bg-primary">
                                 <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
diff --git a/resources/views/portal/ninja2020/invoices/includes/signature.blade.php b/resources/views/portal/ninja2020/invoices/includes/signature.blade.php
index a1a84a4166..742772e326 100644
--- a/resources/views/portal/ninja2020/invoices/includes/signature.blade.php
+++ b/resources/views/portal/ninja2020/invoices/includes/signature.blade.php
@@ -34,7 +34,7 @@
         </div>
         <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <div class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
-                <button type="button" class="button button-primary" id="signature-next-step"
+                <button type="button" class="button button-primary bg-primary" id="signature-next-step"
                         @click="document.getElementById('displaySignatureModal').style.display = 'none';">
                     {{ ctrans('texts.next_step') }}
                 </button>
diff --git a/resources/views/portal/ninja2020/invoices/includes/terms.blade.php b/resources/views/portal/ninja2020/invoices/includes/terms.blade.php
index 3a7f44539e..3140171c4c 100644
--- a/resources/views/portal/ninja2020/invoices/includes/terms.blade.php
+++ b/resources/views/portal/ninja2020/invoices/includes/terms.blade.php
@@ -34,7 +34,7 @@
         </div>
         <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <div class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
-                <button type="button" id="accept-terms-button" class="button button-primary">
+                <button type="button" id="accept-terms-button" class="button button-primary bg-primary">
                     {{ ctrans('texts.agree_to_terms', ['terms' => trans('texts.invoice_terms')]) }}
                 </button>
             </div>
diff --git a/resources/views/portal/ninja2020/invoices/index.blade.php b/resources/views/portal/ninja2020/invoices/index.blade.php
index 494aa345ca..c7f685ce26 100644
--- a/resources/views/portal/ninja2020/invoices/index.blade.php
+++ b/resources/views/portal/ninja2020/invoices/index.blade.php
@@ -15,8 +15,8 @@
     <div class="flex items-center">
         <form action="{{ route('client.invoices.bulk') }}" method="post" id="bulkActions">
             @csrf
-            <button type="submit" class="button button-primary" name="action" value="download">{{ ctrans('texts.download') }}</button>
-            <button type="submit" class="button button-primary" name="action" value="payment">{{ ctrans('texts.pay_now') }}</button>
+            <button type="submit" class="button button-primary bg-primary" name="action" value="download">{{ ctrans('texts.download') }}</button>
+            <button type="submit" class="button button-primary bg-primary" name="action" value="payment">{{ ctrans('texts.pay_now') }}</button>
         </form>
     </div>
     <div class="flex flex-col mt-4">
diff --git a/resources/views/portal/ninja2020/invoices/payment.blade.php b/resources/views/portal/ninja2020/invoices/payment.blade.php
index 25059c3a09..a72d67c72e 100644
--- a/resources/views/portal/ninja2020/invoices/payment.blade.php
+++ b/resources/views/portal/ninja2020/invoices/payment.blade.php
@@ -47,7 +47,7 @@
                         @else
                         <span class="inline-flex items-center text-sm">
                             <span>{{ ctrans('texts.to_pay_invoices') }} &nbsp;</span>
-                            <a class="button-link" href="{{ route('client.payment_methods.index') }}">{{ ctrans('texts.add_payment_method_first') }}.</a>
+                            <a class="button-link text-primary" href="{{ route('client.payment_methods.index') }}">{{ ctrans('texts.add_payment_method_first') }}.</a>
                         </span>
                         @endif
                     </div>
@@ -59,7 +59,7 @@
                     <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                         <h3 class="text-lg font-medium leading-6 text-gray-900">
                             {{ ctrans('texts.invoice') }}
-                            <a class="button-link" href="{{ route('client.invoice.show', $invoice->hashed_id) }}">
+                            <a class="button-link text-primary" href="{{ route('client.invoice.show', $invoice->hashed_id) }}">
                                 (#{{ $invoice->number }})
                             </a>
                         </h3>
diff --git a/resources/views/portal/ninja2020/invoices/show.blade.php b/resources/views/portal/ninja2020/invoices/show.blade.php
index 937ac2cf75..01d77a43b7 100644
--- a/resources/views/portal/ninja2020/invoices/show.blade.php
+++ b/resources/views/portal/ninja2020/invoices/show.blade.php
@@ -47,7 +47,7 @@
                             <div class="inline-flex rounded-md shadow-sm">
                                 <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                 <input type="hidden" name="action" value="payment">
-                                <button class="button button-primary">@lang('texts.pay_now')</button>
+                                <button class="button button-primary bg-primary">{{ ctrans('texts.pay_now') }}</button>
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php b/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
index ff6d9948ad..63c9cc2382 100644
--- a/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
+++ b/resources/views/portal/ninja2020/invoices/show/fullscreen.blade.php
@@ -23,7 +23,7 @@
                             <div class="inline-flex rounded-md shadow-sm">
                                 <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                 <input type="hidden" name="action" value="payment">
-                                <button class="button button-primary">@lang('texts.pay_now')</button>
+                                <button class="button button-primary bg-primary">{{ ctrans('texts.pay_now') }}</button>
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/portal/ninja2020/layout/app.blade.php b/resources/views/portal/ninja2020/layout/app.blade.php
index f2d365b93e..98500616a7 100644
--- a/resources/views/portal/ninja2020/layout/app.blade.php
+++ b/resources/views/portal/ninja2020/layout/app.blade.php
@@ -68,14 +68,15 @@
         {!! $client->getSetting('portal_custom_head') !!}
     </head>
 
+    @include('portal.ninja2020.components.primary-color')
+
     <body class="antialiased">
         @if(session()->has('message'))
-            <div class="bg-blue-800 text-sm py-1 text-white text-center disposable-alert">
+            <div class="bg-primary text-sm py-1 text-white text-center disposable-alert">
                 {{ session('message') }}
             </div>
         @endif
 
-        @include('portal.ninja2020.components.processing')
         @component('portal.ninja2020.components.general.sidebar.main')
             @yield('body')
         @endcomponent
diff --git a/resources/views/portal/ninja2020/payments/show.blade.php b/resources/views/portal/ninja2020/payments/show.blade.php
index 167138e022..c50dc47921 100644
--- a/resources/views/portal/ninja2020/payments/show.blade.php
+++ b/resources/views/portal/ninja2020/payments/show.blade.php
@@ -88,7 +88,7 @@
                         {{ ctrans('texts.invoice_number') }}
                     </dt>
                     <div class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
-                        <a class="button-link" href="{{ route('client.invoice.show', ['invoice' => $invoice->hashed_id])}}">
+                        <a class="button-link text-primary" href="{{ route('client.invoice.show', ['invoice' => $invoice->hashed_id])}}">
                             {{ $invoice->number }}
                         </a>
                     </div>
diff --git a/resources/views/portal/ninja2020/profile/settings/general.blade.php b/resources/views/portal/ninja2020/profile/settings/general.blade.php
index 9d7c3b5f2a..90ce1d6d23 100644
--- a/resources/views/portal/ninja2020/profile/settings/general.blade.php
+++ b/resources/views/portal/ninja2020/profile/settings/general.blade.php
@@ -78,7 +78,7 @@
                             </div>
                         </div>
                         <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                            <button class="button button-primary">{{ $saved }}</button>
+                            <button class="button button-primary bg-primary">{{ $saved }}</button>
                         </div>
                     </div>
                 </form>
diff --git a/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php b/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
index 177319bafe..604d244021 100644
--- a/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
+++ b/resources/views/portal/ninja2020/profile/settings/name-website-logo.blade.php
@@ -37,7 +37,7 @@
                         </div>
                     </div>
                     <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                        <button class="button button-primary">{{ $saved }}</button>
+                        <button class="button button-primary bg-primary">{{ $saved }}</button>
                     </div>
                 </div>
             </form>
diff --git a/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php b/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php
index e651266777..eb54f6ab9a 100644
--- a/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php
+++ b/resources/views/portal/ninja2020/profile/settings/personal-address.blade.php
@@ -76,7 +76,7 @@
                     </div>
                 </div>
                 <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                    <button class="button button-primary">{{ $saved }}</button>
+                    <button class="button button-primary bg-primary">{{ $saved }}</button>
                 </div>
         </div>
         </form>
diff --git a/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php b/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php
index 40fe140535..93adf5bdb3 100644
--- a/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php
+++ b/resources/views/portal/ninja2020/profile/settings/shipping-address.blade.php
@@ -77,7 +77,7 @@
                         </div>
                     </div>
                     <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-                        <button class="button button-primary">
+                        <button class="button button-primary bg-primary">
                             {{ $saved }}
                         </button>
                     </div>
diff --git a/resources/views/portal/ninja2020/quotes/approve.blade.php b/resources/views/portal/ninja2020/quotes/approve.blade.php
index 6701b4ec10..cce15f39fc 100644
--- a/resources/views/portal/ninja2020/quotes/approve.blade.php
+++ b/resources/views/portal/ninja2020/quotes/approve.blade.php
@@ -37,7 +37,7 @@
                         <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
                             <h3 class="text-lg leading-6 font-medium text-gray-900">
                                 {{ ctrans('texts.invoice') }}
-                                <a class="button-link" href="{{ route('client.quote.show', $quote->hashed_id) }}">
+                                <a class="button-link text-primary" href="{{ route('client.quote.show', $quote->hashed_id) }}">
                                     ({{ $quote->number }})
                                 </a>
                             </h3>
diff --git a/resources/views/portal/ninja2020/quotes/includes/signature.blade.php b/resources/views/portal/ninja2020/quotes/includes/signature.blade.php
index 3da52cec87..ae3e73d4e5 100644
--- a/resources/views/portal/ninja2020/quotes/includes/signature.blade.php
+++ b/resources/views/portal/ninja2020/quotes/includes/signature.blade.php
@@ -34,7 +34,7 @@
         </div>
         <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <div class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
-                <button type="button" class="button button-primary" id="signature-next-step"
+                <button type="button" class="button button-primary bg-primary" id="signature-next-step"
                         @click="document.getElementById('displaySignatureModal').style.display = 'none';">
                     {{ ctrans('texts.next_step') }}
                 </button>
diff --git a/resources/views/portal/ninja2020/quotes/index.blade.php b/resources/views/portal/ninja2020/quotes/index.blade.php
index 0258c6c5ef..5ce9880a52 100644
--- a/resources/views/portal/ninja2020/quotes/index.blade.php
+++ b/resources/views/portal/ninja2020/quotes/index.blade.php
@@ -15,9 +15,9 @@
     <div class="flex justify-between items-center">
         <form action="{{ route('client.quotes.bulk') }}" method="post" id="bulkActions">
             @csrf
-            <button type="submit" class="button button-primary" name="action"
+            <button type="submit" class="button button-primary bg-primary" name="action"
                     value="download">{{ ctrans('texts.download') }}</button>
-            <button type="submit" class="button button-primary" name="action"
+            <button type="submit" class="button button-primary bg-primary" name="action"
                     value="approve">{{ ctrans('texts.approve') }}</button>
         </form>
     </div>
diff --git a/resources/views/portal/ninja2020/quotes/show.blade.php b/resources/views/portal/ninja2020/quotes/show.blade.php
index c7ad111ba7..039a325f14 100644
--- a/resources/views/portal/ninja2020/quotes/show.blade.php
+++ b/resources/views/portal/ninja2020/quotes/show.blade.php
@@ -38,7 +38,7 @@
                         <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
                             <div class="inline-flex rounded-md shadow-sm">
                                 <input type="hidden" name="action" value="payment">
-                                <button class="button button-primary">@lang('texts.approve')</button>
+                                <button class="button button-primary bg-primary">{{ ctrans('texts.approve') }}</button>
                             </div>
                         </div>
                     </div>
diff --git a/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php b/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
index be74d59f60..98778a4a59 100644
--- a/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
+++ b/resources/views/portal/ninja2020/quotes/show/fullscreen.blade.php
@@ -23,7 +23,7 @@
                         <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
                             <div class="inline-flex rounded-md shadow-sm">
                                 <input type="hidden" name="action" value="payment">
-                                <button class="button button-primary">@lang('texts.approve')</button>
+                                <button class="button button-primary bg-primary">{{ ctrans('texts.approve') }}</button>
                             </div>
                         </div>
                     </div>