Improve admin UI

Signed-off-by: Sam Poyigi <[email protected]>

resources/css/widgets/mediamanager.css

@@ -1,15 +1,14 @@
 .media-modal {
- padding: 0 !important;
+ padding: 20px !important;
 }
 
 .media-modal .modal-dialog {
- max-width: 100%;
+ max-width: 99%;
  margin-top: 0;
  margin-bottom: 0;
 }
 
 .media-modal .modal-content {
- border-radius: unset;
  margin-bottom: 0;
  border: 0 none;
 }

resources/js/partials/flashmessage.js

@@ -86,9 +86,6 @@
  toast.addEventListener('mouseenter', Swal.stopTimer)
  toast.addEventListener('mouseleave', Swal.resumeTimer)
  },
- customClass: {
- popup: 'bg-light',
- },
  }
 
  FlashMessage.SWAL_DEFAULTS = {

resources/lang/en/system.php

@@ -426,8 +426,6 @@
  'label_default_geocoder' => 'Default Geocoder',
  'label_menus_page' => 'Menu Items Page',
  'label_reservation_page' => 'Reservation Page',
- 'label_allow_registration' => 'Allow customer registration',
- 'label_registration_email' => 'Send Registration Email',
  'label_mail_logo' => 'Logo',
  'label_sender_name' => 'Sender Name',
  'label_sender_email' => 'Sender Email',

resources/scss/app.scss

@@ -1,24 +1,28 @@
 // ======================================================================== //
-// Tastyigniter's Admin UI
+// TastyIgniter Admin UI
 // ======================================================================== //
 //
 // Helpers
-@import "helpers/+import-helpers";
+@import "../../node_modules/bootstrap/scss/functions";
 //
-// Bootstrap Helpers
-@import "vendor/bootstrap-helpers";
+// Variables, Mixins
+@import "helpers/variables";
+@import "helpers/mixins";
 //
-// Helpers: Utilities
-@import "helpers/utilities";
+// Vendors: Bootstrap Helpers
+@import "helpers/bootstrap-helpers";
 //
-// Vendors: Bootstrap, FontAwesome, SweetAlert
+// Helpers: Maps
+@import "helpers/maps";
+//
+// Vendors: FontAwesome, SweetAlert
 @import "vendor/+import_vendors";
 //
-// Bootstrap components
-@import "vendor/bootstrap-components";
+// Vendors: Bootstrap components
+@import "helpers/bootstrap-components";
 //
-// Bootstrap components
-@import "utilities/replace";
+// Bootstrap backward compatibility
+@import "helpers/bootstrap-replace";
 //
 // Components
 @import "components/+import-components";

resources/scss/components/_alert.scss

@@ -53,7 +53,6 @@ body:not(.swal2-toast-shown) {
 }
 
 .swal2-popup {
- background-color: $gray-200;
  border: 0;
 
  &.swal2-toast {

resources/scss/components/_forms.scss

@@ -135,29 +135,21 @@
 //
 .form-nav {
  &.nav-tabs {
- .nav-item {
- }
-
  .nav-link {
- border-width: 0 0 4px;
- border-color: transparent;
- color: $body-color;
+ border: 0 none;
+ font-weight: $font-weight-semibold;
  padding: $form-nav-link-padding-y $form-nav-link-padding-x;
- font-weight: 500;
- border-radius: 0;
  }
 
  .nav-link.active {
- border-width: 0 0 4px;
- border-style: solid;
- border-color: $gray-300;
  background-color: transparent;
+ color: $primary;
+ font-weight: $font-weight-bold;
  }
 
  .nav-link:hover,
  .nav-link:focus {
- background-color: $gray-200;
- border-color: transparent;
+ color: $primary;
  }
  }
 }

resources/scss/components/_logos.scss

@@ -1,5 +1,5 @@
 .logo-svg {
- height: 42px;
+ height: $logo-line-height;
  display: block;
- width: 42px;
+ width: $logo-line-height;
 }

resources/scss/components/_mainmenu.scss

@@ -1,17 +1,18 @@
 .navbar-top {
- background-color: $white;
+ background-color: $sidenav-bg;
  padding: 0;
- border-bottom: 1px solid $gray-400;
- box-shadow: 0 1px 1px rgba(0, 0, 0, .075);
 
  &.navbar-expand {
  .navbar {
  padding: 0 15px;
  }
 
  .navbar-nav {
+ > .nav-item {
+ line-height: $mainmenu-line-height;
+ }
+
  .nav-link {
- line-height: $page-top-line-height;
  color: $body-color;
  padding: $mainmenu-padding-x $mainmenu-padding-y;
  position: relative;
@@ -29,13 +30,15 @@
  position: relative;
  }
 
- li.nav-item > a img {
- max-width: 32px;
- max-height: 32px;
- }
+ .nav-link {
+ img {
+ max-width: $logo-line-height;
+ max-height: $logo-line-height;
+ }
 
- .nav-link > .fa {
- vertical-align: middle;
+ > .fa {
+ vertical-align: middle;
+ }
  }
 
  .nav-link > .badge {
@@ -252,17 +255,9 @@
 }
 
 .page-title {
- margin: 0px;
- padding-left: 15px;
- font-size: $mainmenu-font-size;
-
  .small,
  small {
- color: $gray-600;
- }
-
- span {
- vertical-align: text-top;
+ color: $text-muted;
  }
 }
 

resources/scss/components/_sidenav.scss

@@ -1,12 +1,12 @@
 .sidebar {
+ background-color: darken($sidenav-bg, 2.5%);
  position: fixed;
  top: $page-top;
  bottom: 0;
  width: $page-margin-left;
 }
 
 .nav-sidebar {
- background-color: $sidenav-bg;
  overflow-x: hidden;
  overflow-y: scroll;
  table-layout: fixed;
@@ -16,7 +16,6 @@
  bottom: 0;
  left: 0;
  right: 0;
- padding-top: 20px;
 
  &::-webkit-scrollbar {
  display: none;
@@ -36,29 +35,24 @@
 
  > li > a {
  display: block;
- color: rgba($white, .8);
  line-height: $sidenav-line-height;
  padding: $sidenav-padding-x $sidenav-padding-y;
- font-weight: $sidenav-font-weight;
+ font-weight: $font-weight-semibold;
  font-size: $sidenav-font-size;
- }
 
- > li > a:focus,
- > li > a:hover {
- color: $white;
+  .fa {
+  color: $sidenav-icon-color;
+ }
  }
 
  li.active > a,
  .nav li.active > a,
  .nav li > a.active {
  background-color: transparent;
- color: $white;
- font-weight: $sidenav-font-size-bold;
+ font-weight: $font-weight-bold;
  }
 
  .nav {
- background-color: lighten($sidenav-bg, 1%);
-
  &.show {
  display: block;
  }
@@ -67,9 +61,8 @@
  padding-left: 48px;
  line-height: $sidenav-line-height-sm;
  text-transform: none;
- font-weight: $font-weight-normal;
+ font-weight: $font-weight-semibold;
  font-size: $sidenav-submenu-font-size;
- color: rgba($white, .75);
  }
 
  li > a:hover,

resources/scss/helpers/_bootstrap-components.scss

@@ -0,0 +1,38 @@
+@import "../../../node_modules/bootstrap/scss/root";
+@import "../../../node_modules/bootstrap/scss/reboot";
+@import "../../../node_modules/bootstrap/scss/type";
+@import "../../../node_modules/bootstrap/scss/images";
+@import "../../../node_modules/bootstrap/scss/containers";
+@import "../../../node_modules/bootstrap/scss/grid";
+@import "../../../node_modules/bootstrap/scss/tables";
+@import "../../../node_modules/bootstrap/scss/forms";
+@import "../../../node_modules/bootstrap/scss/buttons";
+@import "../../../node_modules/bootstrap/scss/transitions";
+@import "../../../node_modules/bootstrap/scss/dropdown";
+@import "../../../node_modules/bootstrap/scss/button-group";
+@import "../../../node_modules/bootstrap/scss/nav";
+@import "../../../node_modules/bootstrap/scss/navbar";
+@import "../../../node_modules/bootstrap/scss/card";
+@import "../../../node_modules/bootstrap/scss/accordion";
+@import "../../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../../node_modules/bootstrap/scss/pagination";
+@import "../../../node_modules/bootstrap/scss/badge";
+@import "../../../node_modules/bootstrap/scss/alert";
+@import "../../../node_modules/bootstrap/scss/progress";
+@import "../../../node_modules/bootstrap/scss/list-group";
+@import "../../../node_modules/bootstrap/scss/close";
+@import "../../../node_modules/bootstrap/scss/toasts";
+@import "../../../node_modules/bootstrap/scss/modal";
+@import "../../../node_modules/bootstrap/scss/tooltip";
+@import "../../../node_modules/bootstrap/scss/popover";
+@import "../../../node_modules/bootstrap/scss/carousel";
+@import "../../../node_modules/bootstrap/scss/spinners";
+@import "../../../node_modules/bootstrap/scss/offcanvas";
+@import "../../../node_modules/bootstrap/scss/placeholders";
+
+// Helpers
+@import "../../../node_modules/bootstrap/scss/helpers";
+
+// Utilities
+@import "../../../node_modules/bootstrap/scss/utilities/api";
+// scss-docs-end import-stack

resources/scss/vendor/_bootstrap-helpers.scss → resources/scss/helpers/_bootstrap-helpers.scss

@@ -1,4 +1,3 @@
-@import "../../../node_modules/bootstrap/scss/functions";
 @import "../../../node_modules/bootstrap/scss/variables";
 @import "../../../node_modules/bootstrap/scss/maps";
 @import "../../../node_modules/bootstrap/scss/mixins";

resources/scss/helpers/_variables.scss

@@ -1,8 +1,8 @@
 $white: #FFFFFF !default;
 $gray-100: #FCFDFF !default;
 $gray-200: #E8E9EF !default;
-$gray-300: #D2D4DF !default;
-$gray-400: #C0C2CE !default;
+$gray-300: #d9dbe5 !default;
+$gray-400: darken(#d9dbe5, 5%) !default;
 $gray-500: #9194A6 !default;
 $gray-600: #6F7B9C !default;
 $gray-700: #48557B !default;
@@ -12,7 +12,7 @@ $black: #000329 !default;
 //
 // Colors
 //
-$primary: #2170C0 !default;
+$primary: darken(#3F80EA, 5%) !default;
 $secondary: $gray-700 !default;
 $success: #28A745 !default;
 $info: #5A67D8 !default;
@@ -44,7 +44,7 @@ $icon-font-path: '../fonts/';
 $fa-font-path: $icon-font-path+'FontAwesome';
 // Body
 //
-$body-bg: $gray-200 !default;
+$body-bg: $gray-300 !default;
 $body-color: $gray-800 !default;
 
 $link-hover-decoration: none !default;
@@ -83,8 +83,6 @@ $table-hover-bg: $gray-200 !default;
 // Buttons + Forms
 //
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-$input-btn-padding-y: .5rem !default;
-$input-btn-padding-x: .75rem !default;
 $input-spacer: 6px !default;
 $input-font-size: 0.9375rem !default;
 //
@@ -112,8 +110,8 @@ $input-height-border: 3px !default;
 $form-check-input-width: 1.25em;
 $form-fields-padding: 1.25rem .725rem !default;
 $form-fields-padding-x: 20px !default;
-$form-nav-link-padding-y: .52rem !default;
-$form-nav-link-padding-x: 1.2rem !default;
+$form-nav-link-padding-y: .75rem !default;
+$form-nav-link-padding-x: 1rem !default;
 $custom-control-indicator-border-color: $gray-200 !default;
 $custom-control-indicator-disabled-bg: $gray-300 !default;
 
@@ -174,28 +172,26 @@ $badge-color: inherit !default;
 //
 $page-padding-x: 20px !default;
 $page-padding-y: 30px !default;
-$page-top: 64px !default;
-$page-top-line-height: 48px !default;
+$page-top: 0 !default;
 $page-bottom: 0 !default;
 $page-margin-left: 230px !default;
 $logo-font-size: 3rem !default;
 $logo-line-height: 32px !default;
 //
 // Main menu
 //
-$mainmenu-font-size: 24px !default;
+$mainmenu-line-height: 42px !default;
 $mainmenu-dropdown-width: 300px !default;
 $mainmenu-menu-max-height: 60vh !default;
 $mainmenu-padding-x: 0.5rem !default;
 $mainmenu-padding-y: 1rem !default;
 //
 // Side nav
 //
-$sidenav-bg: $gray-900 !default;
+$sidenav-bg: $gray-300 !default;
+$sidenav-icon-color: $text-muted !default;
 $sidenav-font-size: 15px !default;
 $sidenav-submenu-font-size: $font-size-base !default;
-$sidenav-font-weight: 500 !default;
-$sidenav-font-size-bold: 600 !default;
 $sidenav-line-height: 50px !default;
 $sidenav-line-height-sm: 42px !default;
 $sidenav-padding-x: 0 !default;