Import new bootwatch theme and adjust the styling of the app elements for better display

This commit is contained in:
Alex Tselegidis 2022-01-24 12:55:45 +01:00
parent b046b7af18
commit e07f47b30b
24 changed files with 92 additions and 100 deletions

View file

@ -298,8 +298,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-outline-secondary" data-bs-dismiss="modal"> <button class="btn btn-secondary" data-bs-dismiss="modal">
<i class="fas fa-ban"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
<button id="save-appointment" class="btn btn-primary"> <button id="save-appointment" class="btn btn-primary">

View file

@ -11,7 +11,7 @@
<?= ucfirst(config('language')) ?> <?= ucfirst(config('language')) ?>
</span> </span>
<a class="backend-link badge bg-primary text-decoration-none" href="<?= session('user_id') ? site_url('calendar') : site_url('login'); ?>"> <a class="backend-link badge bg-primary text-decoration-none px-2" href="<?= session('user_id') ? site_url('calendar') : site_url('login'); ?>">
<i class="fas fa-sign-in-alt me-2"></i> <i class="fas fa-sign-in-alt me-2"></i>
<?= session('user_id') ? lang('backend_section') : lang('login') ?> <?= session('user_id') ? lang('backend_section') : lang('login') ?>
</a> </a>

View file

@ -16,7 +16,7 @@
<p><?= $cookie_notice_content ?></p> <p><?= $cookie_notice_content ?></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<?= lang('close') ?> <?= lang('close') ?>
</button> </button>
</div> </div>

View file

@ -18,7 +18,7 @@
<p><?= $privacy_policy_content ?></p> <p><?= $privacy_policy_content ?></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<?= lang('close') ?> <?= lang('close') ?>
</button> </button>
</div> </div>

View file

@ -14,8 +14,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-outline-secondary" data-bs-dismiss="modal"> <button class="btn btn-secondary" data-bs-dismiss="modal">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
<button id="select-calendar" class="btn btn-primary"> <button id="select-calendar" class="btn btn-primary">

View file

@ -17,7 +17,7 @@
<p><?= $terms_and_conditions_content ?></p> <p><?= $terms_and_conditions_content ?></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<?= lang('close') ?> <?= lang('close') ?>
</button> </button>
</div> </div>

View file

@ -73,8 +73,7 @@
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-outline-secondary" data-bs-dismiss="modal"> <button class="btn btn-secondary" data-bs-dismiss="modal">
<i class="fas fa-ban"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
<button id="save-unavailability" class="btn btn-primary"> <button id="save-unavailability" class="btn btn-primary">

View file

@ -48,9 +48,13 @@
</table> </table>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= lang('cancel') ?></button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<button type="button" class="btn btn-primary" <?= lang('cancel') ?>
id="working-plan-exceptions-save"><?= lang('save') ?></button> </button>
<button type="button" class="btn btn-primary" id="working-plan-exceptions-save">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
</div> </div>
</div> </div>
</div> </div>

View file

@ -12,7 +12,7 @@
<?= lang('personal_information') ?> <?= lang('personal_information') ?>
<?php if (can('edit', PRIV_USER_SETTINGS)): ?> <?php if (can('edit', PRIV_USER_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary btn-sm"> <button type="button" id="save-settings" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>

View file

@ -38,13 +38,12 @@
</button> </button>
</div> </div>
<div class="save-cancel-group btn-group" style="display:none;"> <div class="save-cancel-group" style="display:none;">
<button id="save-admin" class="btn btn-primary"> <button id="save-admin" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<button id="cancel-admin" class="btn btn-outline-secondary"> <button id="cancel-admin" class="btn btn-secondary">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</div> </div>

View file

@ -12,16 +12,16 @@
<?= lang('booking_settings') ?> <?= lang('booking_settings') ?>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary btn-sm"> <button type="button" id="save-settings" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<?php endif ?> <?php endif ?>
</legend> </legend>
<div class="row mb-5"> <div class="row mb-5 fields-row">
<div class="col-lg-6"> <div class="col-lg-6">
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="first-name" class="form-label"> <label for="first-name" class="form-label">
<?= lang('first_name') ?> <?= lang('first_name') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="last-name" class="form-label"> <label for="last-name" class="form-label">
<?= lang('last_name') ?> <?= lang('last_name') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -71,7 +71,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="email" class="form-label"> <label for="email" class="form-label">
<?= lang('email') ?> <?= lang('email') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -95,7 +95,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="phone-number" class="form-label"> <label for="phone-number" class="form-label">
<?= lang('phone_number') ?> <?= lang('phone_number') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -122,7 +122,7 @@
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="address" class="form-label"> <label for="address" class="form-label">
<?= lang('address') ?> <?= lang('address') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -146,7 +146,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="city" class="form-label"> <label for="city" class="form-label">
<?= lang('city') ?> <?= lang('city') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="zip-code" class="form-label"> <label for="zip-code" class="form-label">
<?= lang('zip_code') ?> <?= lang('zip_code') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>
@ -194,7 +194,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="form-group mb-3"> <div class="form-group mb-5">
<label for="notes" class="form-label"> <label for="notes" class="form-label">
<?= lang('notes') ?> <?= lang('notes') ?>
<span class="text-danger">*</span> <span class="text-danger">*</span>

View file

@ -12,7 +12,7 @@
<?= lang('business_logic') ?> <?= lang('business_logic') ?>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary btn-sm"> <button type="button" id="save-settings" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>

View file

@ -10,7 +10,7 @@
<div class="container-fluid backend-page" id="calendar-page"> <div class="container-fluid backend-page" id="calendar-page">
<div class="row" id="calendar-toolbar"> <div class="row" id="calendar-toolbar">
<div id="calendar-filter" class="col-12 col-sm-5"> <div id="calendar-filter" class="col-md-4">
<div class="calendar-filter-items"> <div class="calendar-filter-items">
<select id="select-filter-item" class="form-control col" <select id="select-filter-item" class="form-control col"
data-tippy-content="<?= lang('select_filter_item_hint') ?>"> data-tippy-content="<?= lang('select_filter_item_hint') ?>">
@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div id="calendar-actions" class="col-12 col-sm-7"> <div id="calendar-actions" class="col-md-8">
<?php if ((session('role_slug') == DB_SLUG_ADMIN || session('role_slug') == DB_SLUG_PROVIDER) <?php if ((session('role_slug') == DB_SLUG_ADMIN || session('role_slug') == DB_SLUG_PROVIDER)
&& config('google_sync_feature') == TRUE): ?> && config('google_sync_feature') == TRUE): ?>
<button id="google-sync" class="btn btn-primary" <button id="google-sync" class="btn btn-primary"

View file

@ -38,13 +38,12 @@
</button> </button>
</div> </div>
<div class="save-cancel-group btn-group" style="display:none;"> <div class="save-cancel-group" style="display:none;">
<button id="save-category" class="btn btn-primary"> <button id="save-category" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<button id="cancel-category" class="btn btn-outline-secondary"> <button id="cancel-category" class="btn btn-secondary">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</div> </div>

View file

@ -45,13 +45,12 @@
<?php endif ?> <?php endif ?>
</div> </div>
<div id="save-cancel-group" class="btn-group" style="display:none;"> <div id="save-cancel-group" style="display:none;">
<button id="save-customer" class="btn btn-primary"> <button id="save-customer" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<button id="cancel-customer" class="btn btn-outline-secondary"> <button id="cancel-customer" class="btn btn-secondary">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</div> </div>
@ -178,7 +177,6 @@
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<h3><?= lang('appointments') ?></h3> <h3><?= lang('appointments') ?></h3>
<div id="customer-appointments" class="card bg-light border-light"></div> <div id="customer-appointments" class="card bg-light border-light"></div>
<div id="appointment-details" class="card bg-light border-light d-none"></div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -12,7 +12,7 @@
<?= lang('general_settings') ?> <?= lang('general_settings') ?>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary btn-sm"> <button type="button" id="save-settings" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>

View file

@ -12,7 +12,7 @@
<?= lang('legal_contents') ?> <?= lang('legal_contents') ?>
<?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?> <?php if (can('edit', PRIV_SYSTEM_SETTINGS)): ?>
<button type="button" id="save-settings" class="btn btn-primary btn-sm"> <button type="button" id="save-settings" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>

View file

@ -37,13 +37,12 @@
</button> </button>
</div> </div>
<div class="save-cancel-group btn-group" style="display:none;"> <div class="save-cancel-group" style="display:none;">
<button id="save-provider" class="btn btn-primary"> <button id="save-provider" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<button id="cancel-provider" class="btn btn-outline-secondary"> <button id="cancel-provider" class="btn btn-secondary">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</div> </div>

View file

@ -38,13 +38,12 @@
</button> </button>
</div> </div>
<div class="save-cancel-group btn-group" style="display:none;"> <div class="save-cancel-group" style="display:none;">
<button id="save-secretary" class="btn btn-primary"> <button id="save-secretary" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<button id="cancel-secretary" class="btn btn-outline-secondary"> <button id="cancel-secretary" class="btn btn-secondary">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</div> </div>

View file

@ -37,13 +37,12 @@
</button> </button>
</div> </div>
<div class="save-cancel-group btn-group" style="display:none;"> <div class="save-cancel-group" style="display:none;">
<button id="save-service" class="btn btn-primary"> <button id="save-service" class="btn btn-primary">
<i class="fas fa-check-square me-2"></i> <i class="fas fa-check-square me-2"></i>
<?= lang('save') ?> <?= lang('save') ?>
</button> </button>
<button id="cancel-service" class="btn btn-outline-secondary"> <button id="cancel-service" class="btn btn-secondary">
<i class="fas fa-ban me-2"></i>
<?= lang('cancel') ?> <?= lang('cancel') ?>
</button> </button>
</div> </div>

View file

@ -1,13 +1,13 @@
// Lux 5.1.3 // Bootswatch (Lux)
// Bootswatch
// Variables // Variables
$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default; // Hint: Use the following $var to load a custom font.
@if $web-font-path { // $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
@import url($web-font-path); // @if $web-font-path {
} // @import url($web-font-path);
// }
// Navbar // Navbar
@ -28,12 +28,8 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;6
} }
} }
.bg-primary {
background-color: theme-color("primary") !important;
}
.bg-light { .bg-light {
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid $gray-400 !important;
&.navbar-fixed-top { &.navbar-fixed-top {
border-width: 0 0 1px; border-width: 0 0 1px;
@ -65,6 +61,7 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;6
} }
.btn-outline-secondary { .btn-outline-secondary {
background: none;
border-color: $gray-600; border-color: $gray-600;
color: $gray-600; color: $gray-600;
@ -80,11 +77,14 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;6
box-shadow: 0 0 0 .2rem rgba($gray-400, .5); box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
} }
&[disabled], &.disabled {
color: $gray-400;
border-color: $gray-400;
}
} }
[class*="btn-outline-"] { [class*="btn-outline-"] {
border-width: 2px; border-width: 1px;
} }
.border-secondary { .border-secondary {
@ -94,8 +94,8 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;6
// Typography // Typography
body { body {
font-weight: 200; //font-weight: 200;
letter-spacing: 1px; letter-spacing: 0.05rem;
} }
h1, h1,
@ -119,25 +119,15 @@ th {
text-transform: uppercase; text-transform: uppercase;
} }
.table {
th,
td {
padding: 1.5rem;
}
&-sm {
th,
td {
padding: .75rem;
}
}
}
// Navs // Navs
.dropdown-menu { .dropdown-menu {
font-size: $font-size-sm; font-size: $font-size-sm;
text-transform: none; text-transform: uppercase;
.dropdown-item {
padding: 1rem 1.5rem;
}
} }
// Indicators // Indicators
@ -180,3 +170,9 @@ th {
color: inherit; color: inherit;
} }
} }
// Forms
.form-label {
font-weight: bold;
}

View file

@ -30,29 +30,29 @@ $green: #4bbf73 !default;
$teal: #20c997 !default; $teal: #20c997 !default;
$cyan: #1f9bcf !default; $cyan: #1f9bcf !default;
$primary: $gray-900 !default; $primary: #439982 !default;
$secondary: $white !default; $secondary: $white !default;
$success: $green !default; $success: $green !default;
$info: $cyan !default; $info: $cyan !default;
$warning: $yellow !default; $warning: $yellow !default;
$danger: $red !default; $danger: $red !default;
$light: $white !default; $light: $gray-100 !default;
$dark: $gray-800 !default; $dark: $gray-800 !default;
$min-contrast-ratio: 2.3 !default; $min-contrast-ratio: 2.3 !default;
// Options // Options
$enable-rounded: false !default; $enable-rounded: true !default;
// Body // Body
$body-color: $gray-700 !default; $body-color: $gray-800 !default;
// Fonts // Fonts
// stylelint-disable-next-line value-keyword-case // stylelint-disable-next-line value-keyword-case
$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; //$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$h1-font-size: 2rem !default; $h1-font-size: 2rem !default;
$h2-font-size: 1.75rem !default; $h2-font-size: 1.75rem !default;
$h3-font-size: 1.5rem !default; $h3-font-size: 1.5rem !default;
@ -68,23 +68,23 @@ $table-border-color: rgba(0, 0, 0, .05) !default;
// Buttons + Forms // Buttons + Forms
$input-btn-border-width: 0 !default; $input-btn-border-width: 1px !default;
// Buttons // Buttons
$btn-line-height: 1.5rem !default; $btn-line-height: 1.25rem !default;
$input-btn-padding-y: .75rem !default; $input-btn-padding-y: .6rem !default;
$input-btn-padding-x: 1.5rem !default; $input-btn-padding-x: 1rem !default;
$input-btn-padding-y-sm: .5rem !default; $input-btn-padding-y-sm: .35rem !default;
$input-btn-padding-x-sm: 1rem !default; $input-btn-padding-x-sm: .5rem !default;
$input-btn-padding-y-lg: 2rem !default; $input-btn-padding-y-lg: 1.85rem !default;
$input-btn-padding-x-lg: 2rem !default; $input-btn-padding-x-lg: 1.5rem !default;
$btn-font-weight: 600 !default; $btn-font-weight: 600 !default;
// Forms // Forms
$input-line-height: 1.5 !default; $input-line-height: 1.25 !default;
$input-bg: $gray-200 !default; $input-bg: $white !default;
$input-disabled-bg: $gray-300 !default; $input-disabled-bg: $gray-300 !default;
$input-group-addon-bg: $gray-300 !default; $input-group-addon-bg: $gray-300 !default;

View file

@ -9,10 +9,6 @@
* @since v1.5.0 * @since v1.5.0
* ---------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------- */
$primary: #439982;
$min-contrast-ratio: 2;
@import "variables"; @import "variables";
@import '../../node_modules/bootstrap/scss/bootstrap'; @import '../../node_modules/bootstrap/scss/bootstrap';

View file

@ -33,7 +33,8 @@ root {
} }
#header #header-logo small { #header #header-logo small {
font-size: 11.3px; font-size: 10.5px;
color: #004c39;
} }
#header #header-logo img { #header #header-logo img {
@ -449,7 +450,8 @@ body legend {
#filter-existing-customers { #filter-existing-customers {
display: inline-block; display: inline-block;
height: 14px; margin-top: 12px;
margin-bottom: 12px;
min-height: 24px; min-height: 24px;
font-size: 12px; font-size: 12px;
} }
@ -877,3 +879,7 @@ body .form-horizontal .controls {
#settings-page #update-ea { #settings-page #update-ea {
margin-left: 12px; margin-left: 12px;
} }
#booking-settings-page .fields-row .form-control {
border: 1px dashed #999 !important;
}