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 class="modal-footer">
<button class="btn btn-outline-secondary" data-bs-dismiss="modal">
<i class="fas fa-ban"></i>
<button class="btn btn-secondary" data-bs-dismiss="modal">
<?= lang('cancel') ?>
</button>
<button id="save-appointment" class="btn btn-primary">

View file

@ -11,7 +11,7 @@
<?= ucfirst(config('language')) ?>
</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>
<?= session('user_id') ? lang('backend_section') : lang('login') ?>
</a>

View file

@ -16,7 +16,7 @@
<p><?= $cookie_notice_content ?></p>
</div>
<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') ?>
</button>
</div>

View file

@ -18,7 +18,7 @@
<p><?= $privacy_policy_content ?></p>
</div>
<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') ?>
</button>
</div>

View file

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

View file

@ -17,7 +17,7 @@
<p><?= $terms_and_conditions_content ?></p>
</div>
<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') ?>
</button>
</div>

View file

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

View file

@ -48,9 +48,13 @@
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= lang('cancel') ?></button>
<button type="button" class="btn btn-primary"
id="working-plan-exceptions-save"><?= lang('save') ?></button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
<?= lang('cancel') ?>
</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>

View file

@ -12,7 +12,7 @@
<?= lang('personal_information') ?>
<?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>
<?= lang('save') ?>
</button>

View file

@ -38,13 +38,12 @@
</button>
</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">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
<button id="cancel-admin" class="btn btn-outline-secondary">
<i class="fas fa-ban me-2"></i>
<button id="cancel-admin" class="btn btn-secondary">
<?= lang('cancel') ?>
</button>
</div>

View file

@ -12,16 +12,16 @@
<?= lang('booking_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>
<?= lang('save') ?>
</button>
<?php endif ?>
</legend>
<div class="row mb-5">
<div class="row mb-5 fields-row">
<div class="col-lg-6">
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="first-name" class="form-label">
<?= lang('first_name') ?>
<span class="text-danger">*</span>
@ -47,7 +47,7 @@
</div>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="last-name" class="form-label">
<?= lang('last_name') ?>
<span class="text-danger">*</span>
@ -71,7 +71,7 @@
</div>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="email" class="form-label">
<?= lang('email') ?>
<span class="text-danger">*</span>
@ -95,7 +95,7 @@
</div>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="phone-number" class="form-label">
<?= lang('phone_number') ?>
<span class="text-danger">*</span>
@ -122,7 +122,7 @@
</div>
<div class="col-lg-6">
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="address" class="form-label">
<?= lang('address') ?>
<span class="text-danger">*</span>
@ -146,7 +146,7 @@
</div>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="city" class="form-label">
<?= lang('city') ?>
<span class="text-danger">*</span>
@ -170,7 +170,7 @@
</div>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="zip-code" class="form-label">
<?= lang('zip_code') ?>
<span class="text-danger">*</span>
@ -194,7 +194,7 @@
</div>
</div>
</div>
<div class="form-group mb-3">
<div class="form-group mb-5">
<label for="notes" class="form-label">
<?= lang('notes') ?>
<span class="text-danger">*</span>

View file

@ -12,7 +12,7 @@
<?= lang('business_logic') ?>
<?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>
<?= lang('save') ?>
</button>

View file

@ -10,7 +10,7 @@
<div class="container-fluid backend-page" id="calendar-page">
<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">
<select id="select-filter-item" class="form-control col"
data-tippy-content="<?= lang('select_filter_item_hint') ?>">
@ -18,7 +18,7 @@
</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)
&& config('google_sync_feature') == TRUE): ?>
<button id="google-sync" class="btn btn-primary"

View file

@ -38,13 +38,12 @@
</button>
</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">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
<button id="cancel-category" class="btn btn-outline-secondary">
<i class="fas fa-ban me-2"></i>
<button id="cancel-category" class="btn btn-secondary">
<?= lang('cancel') ?>
</button>
</div>

View file

@ -45,13 +45,12 @@
<?php endif ?>
</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">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
<button id="cancel-customer" class="btn btn-outline-secondary">
<i class="fas fa-ban me-2"></i>
<button id="cancel-customer" class="btn btn-secondary">
<?= lang('cancel') ?>
</button>
</div>
@ -178,7 +177,6 @@
<div class="col-12 col-md-6">
<h3><?= lang('appointments') ?></h3>
<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>

View file

@ -12,7 +12,7 @@
<?= lang('general_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>
<?= lang('save') ?>
</button>

View file

@ -12,7 +12,7 @@
<?= lang('legal_contents') ?>
<?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>
<?= lang('save') ?>
</button>

View file

@ -37,13 +37,12 @@
</button>
</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">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
<button id="cancel-provider" class="btn btn-outline-secondary">
<i class="fas fa-ban me-2"></i>
<button id="cancel-provider" class="btn btn-secondary">
<?= lang('cancel') ?>
</button>
</div>

View file

@ -38,13 +38,12 @@
</button>
</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">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
<button id="cancel-secretary" class="btn btn-outline-secondary">
<i class="fas fa-ban me-2"></i>
<button id="cancel-secretary" class="btn btn-secondary">
<?= lang('cancel') ?>
</button>
</div>

View file

@ -37,13 +37,12 @@
</button>
</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">
<i class="fas fa-check-square me-2"></i>
<?= lang('save') ?>
</button>
<button id="cancel-service" class="btn btn-outline-secondary">
<i class="fas fa-ban me-2"></i>
<button id="cancel-service" class="btn btn-secondary">
<?= lang('cancel') ?>
</button>
</div>

View file

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

View file

@ -30,29 +30,29 @@ $green: #4bbf73 !default;
$teal: #20c997 !default;
$cyan: #1f9bcf !default;
$primary: $gray-900 !default;
$primary: #439982 !default;
$secondary: $white !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $white !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$min-contrast-ratio: 2.3 !default;
// Options
$enable-rounded: false !default;
$enable-rounded: true !default;
// Body
$body-color: $gray-700 !default;
$body-color: $gray-800 !default;
// Fonts
// 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;
$h2-font-size: 1.75rem !default;
$h3-font-size: 1.5rem !default;
@ -68,23 +68,23 @@ $table-border-color: rgba(0, 0, 0, .05) !default;
// Buttons + Forms
$input-btn-border-width: 0 !default;
$input-btn-border-width: 1px !default;
// Buttons
$btn-line-height: 1.5rem !default;
$input-btn-padding-y: .75rem !default;
$input-btn-padding-x: 1.5rem !default;
$input-btn-padding-y-sm: .5rem !default;
$input-btn-padding-x-sm: 1rem !default;
$input-btn-padding-y-lg: 2rem !default;
$input-btn-padding-x-lg: 2rem !default;
$btn-line-height: 1.25rem !default;
$input-btn-padding-y: .6rem !default;
$input-btn-padding-x: 1rem !default;
$input-btn-padding-y-sm: .35rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-padding-y-lg: 1.85rem !default;
$input-btn-padding-x-lg: 1.5rem !default;
$btn-font-weight: 600 !default;
// Forms
$input-line-height: 1.5 !default;
$input-bg: $gray-200 !default;
$input-line-height: 1.25 !default;
$input-bg: $white !default;
$input-disabled-bg: $gray-300 !default;
$input-group-addon-bg: $gray-300 !default;

View file

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

View file

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