From 6832562fa4e36f2f43bbbca774ba124cb6d6cebf Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 5 May 2020 12:30:11 +0300
Subject: [PATCH] Add new saga themes

---
 public/themes/saga-orange/theme.css | 100 ++++++++++++++--------------
 src/AppTopBar.vue                   |   5 +-
 2 files changed, 52 insertions(+), 53 deletions(-)

diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 939fc395b..5b94a3470 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -82,7 +82,7 @@
   padding: 0.25em 0.5em;
   margin-right: 0.5em;
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
   border-radius: 3px;
 }
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
@@ -113,7 +113,7 @@
   background: #e9ecef;
 }
 .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-autocomplete-panel.p-error > .p-inputtext {
@@ -197,7 +197,7 @@
   transition: background-color 0.2s, box-shadow 0.2s;
 }
 .p-datepicker table td > span.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-datepicker table td > span:focus {
@@ -210,7 +210,7 @@
   color: #495057;
 }
 .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-datepicker .p-datepicker-buttonbar {
@@ -257,7 +257,7 @@
   border-radius: 3px;
 }
 .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
@@ -323,12 +323,12 @@
 .p-checkbox .p-checkbox-box.p-highlight {
   border-color: #F39C12;
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
   border-color: #B9770E;
   background: #B9770E;
-  color: #495057;
+  color: #ffffff;
 }
 .p-checkbox.p-error > .p-checkbox-box {
   border-color: #d98880;
@@ -350,7 +350,7 @@
   padding: 0.25em 0.5em;
   margin-right: 0.5em;
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
   border-radius: 3px;
 }
 .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -463,7 +463,7 @@
   border-radius: 0;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
@@ -693,7 +693,7 @@
   border-radius: 0;
 }
 .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-listbox .p-listbox-list .p-listbox-item:focus {
@@ -791,7 +791,7 @@
   border-radius: 0;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
@@ -851,12 +851,12 @@
 .p-radiobutton .p-radiobutton-box.p-highlight {
   border-color: #F39C12;
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
   border-color: #B9770E;
   background: #B9770E;
-  color: #495057;
+  color: #ffffff;
 }
 .p-radiobutton.p-error > .p-radiobutton-box {
   border-color: #d98880;
@@ -908,20 +908,20 @@
 .p-selectbutton .p-button.p-highlight {
   background: #F39C12;
   border-color: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-selectbutton .p-button.p-highlight .p-button-icon-left,
 .p-selectbutton .p-button.p-highlight .p-button-icon-right {
-  color: #495057;
+  color: #ffffff;
 }
 .p-selectbutton .p-button.p-highlight:hover {
   background: #D68910;
   border-color: #D68910;
-  color: #495057;
+  color: #ffffff;
 }
 .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
 .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-  color: #495057;
+  color: #ffffff;
 }
 .p-selectbutton.p-error > .p-button {
   border-color: #d98880;
@@ -1032,20 +1032,20 @@
 .p-togglebutton.p-button.p-highlight {
   background: #F39C12;
   border-color: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-togglebutton.p-button.p-highlight .p-button-icon-left,
 .p-togglebutton.p-button.p-highlight .p-button-icon-right {
-  color: #495057;
+  color: #ffffff;
 }
 .p-togglebutton.p-button.p-highlight:hover {
   background: #D68910;
   border-color: #D68910;
-  color: #495057;
+  color: #ffffff;
 }
 .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
 .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
-  color: #495057;
+  color: #ffffff;
 }
 .p-togglebutton.p-button.p-error > .p-button {
   border-color: #d98880;
@@ -1053,7 +1053,7 @@
 }
 
 .p-button {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
   border: 1px solid #F39C12;
   padding: 0.5em 1em;
@@ -1063,7 +1063,7 @@
 }
 .p-button:enabled:hover {
   background: #D68910;
-  color: #495057;
+  color: #ffffff;
   border-color: #D68910;
 }
 .p-button:focus {
@@ -1073,7 +1073,7 @@
 }
 .p-button:enabled:active {
   background: #B9770E;
-  color: #495057;
+  color: #ffffff;
   border-color: #B9770E;
 }
 .p-button .p-button-icon-left {
@@ -1298,7 +1298,7 @@
   min-width: 18px;
   line-height: 18px;
   color: #F39C12;
-  background: #495057;
+  background: #ffffff;
   margin-left: 0.5em;
 }
 .p-datatable .p-sortable-column:not(.p-highlight):hover {
@@ -1336,13 +1336,13 @@
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #495057;
+  color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #495057;
+  color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
   box-shadow: inset 0 2px 0 0 #F39C12;
@@ -1355,13 +1355,13 @@
 }
 .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #495057;
+  color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #495057;
+  color: #ffffff;
 }
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #e9ecef;
@@ -1432,14 +1432,14 @@
 .fc .fc-view-container .fc-event {
   background: #D68910;
   border: 1px solid #D68910;
-  color: #495057;
+  color: #ffffff;
 }
 .fc .fc-view-container .fc-divider {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
 }
 .fc .fc-toolbar .fc-button {
-  color: #495057;
+  color: #ffffff;
   background: #F39C12;
   border: 1px solid #F39C12;
   font-size: 14px;
@@ -1450,7 +1450,7 @@
 }
 .fc .fc-toolbar .fc-button:enabled:hover {
   background: #D68910;
-  color: #495057;
+  color: #ffffff;
   border-color: #D68910;
 }
 .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
@@ -1488,7 +1488,7 @@
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
   background: #F39C12;
   border-color: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button.p-focus, .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button.p-focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button.p-focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
   outline: 0 none;
@@ -1551,7 +1551,7 @@
 }
 .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 
 @media screen and (max-width: 960px) {
@@ -1576,7 +1576,7 @@
 }
 .p-organizationchart .p-organizationchart-node-content.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
   color: #7f5006;
@@ -1662,7 +1662,7 @@
 }
 .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
   background: #e9ecef;
@@ -1712,7 +1712,7 @@
 }
 .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 
 @media screen and (max-width: 960px) {
@@ -1780,11 +1780,11 @@
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #495057;
+  color: #ffffff;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
   background: #e9ecef;
@@ -1865,7 +1865,7 @@
   min-width: 18px;
   line-height: 18px;
   color: #F39C12;
-  background: #495057;
+  background: #ffffff;
   margin-left: 0.5em;
 }
 .p-treetable .p-sortable-column:not(.p-highlight):hover {
@@ -1904,13 +1904,13 @@
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #495057;
+  color: #ffffff;
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
-  color: #495057;
+  color: #ffffff;
 }
 .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
   background: #e9ecef;
@@ -2232,7 +2232,7 @@
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
   width: 2em;
   height: 2em;
   position: absolute;
@@ -2243,7 +2243,7 @@
 }
 .p-overlaypanel .p-overlaypanel-close:hover {
   background: #B9770E;
-  color: #495057;
+  color: #ffffff;
 }
 .p-overlaypanel:after {
   border: solid transparent;
@@ -2337,12 +2337,12 @@
 
 .p-fileupload-choose:not(.p-disabled):hover {
   background: #D68910;
-  color: #495057;
+  color: #ffffff;
   border-color: #D68910;
 }
 .p-fileupload-choose:not(.p-disabled):active {
   background: #B9770E;
-  color: #495057;
+  color: #ffffff;
   border-color: #B9770E;
 }
 
@@ -2785,7 +2785,7 @@
 }
 .p-steps .p-steps-item.p-highlight .p-steps-number {
   background: #F39C12;
-  color: #495057;
+  color: #ffffff;
 }
 .p-steps .p-steps-item.p-highlight .p-steps-title {
   font-weight: 600;
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 8b31cbb62..acb8e5fb6 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -18,10 +18,9 @@
                         <li><router-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></router-link></li>
                         <li class="topbar-submenu-header">FREE COMPONENT THEMES</li>
                         <li><a @click="changeTheme($event, 'saga-blue', false)"><img src="./assets/images/layouts/themeswitcher-saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
-                        <li><a @click="changeTheme($event, 'saga-teal', false)"><img src="./assets/images/layouts/themeswitcher-saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li>
-                        <li><a @click="changeTheme($event, 'saga-iris', false)"><img src="./assets/images/layouts/themeswitcher-saga-iris.png" alt="Saga Iris" /><span>Saga Iris</span></a></li>
+                        <li><a @click="changeTheme($event, 'saga-green', false)"><img src="./assets/images/layouts/themeswitcher-saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
                         <li><a @click="changeTheme($event, 'saga-purple', false)"><img src="./assets/images/layouts/themeswitcher-saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
-                        <li><a @click="changeTheme($event, 'saga-grey', false)"><img src="./assets/images/layouts/themeswitcher-saga-grey.png" alt="Saga Grey" /><span>Saga Grey</span></a></li>
+                        <li><a @click="changeTheme($event, 'saga-orange', false)"><img src="./assets/images/layouts/themeswitcher-saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-colored', false)"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>