From 4b8e91a5215cd464dbd6f2482b0929f0963d1037 Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Thu, 29 Jun 2023 16:47:39 +0200 Subject: [PATCH 01/21] dattable styles udpate --- src/components/DataTable/table.scss | 195 +++++++++++++++------------- 1 file changed, 108 insertions(+), 87 deletions(-) diff --git a/src/components/DataTable/table.scss b/src/components/DataTable/table.scss index 0c4237e8a..c2a7b1b4c 100644 --- a/src/components/DataTable/table.scss +++ b/src/components/DataTable/table.scss @@ -3,116 +3,137 @@ // STYLES FOR Table.js table th, .table th { - border: none; - height: 48px; - vertical-align: middle; - color: $text-secondary-color; + border: none; + height: 48px; + vertical-align: middle; + color: $text-secondary-color; } .data-table-card-body { - padding-top: 0.5rem !important; - & .table { - margin-bottom: 0; - } - & .table td, th { - border-top: 1px solid $border-color; - } + padding-top: 0.5rem !important; + & .table { + margin-bottom: 0; + } + & .table td, th { + border-top: 1px solid $border-color; + } } //DataTable's card footer items position .data-table-card .card-footer .row { - align-items: center; + align-items: center; } .data-table-tr th:first-child { - padding-left: 1rem; + padding-left: 1rem; } thead .data-table-tr th { - border-top: none; + border-top: none; +} + +.table thead th { + vertical-align: bottom; } .data-table-tbody { + background-color: $bg-color-dark; + & td, th { + font-weight: 400; + vertical-align: middle; + } + + & a { + color: $primary; + text-decoration: none; + } - background-color: $bg-color-dark; - & td, th { - font-weight: 400; - vertical-align: middle; - } - - & a { - color: $primary; - } - - & .data-table-tr { - height: 48px; - & .data-table-arrow-btn { - padding-left: .75rem; - [class^="cil-"], [class*=" cil-"] { - color: $primary; - cursor: pointer; - } - } - } - - & .data-table-tr-cursor { - cursor: pointer; - } + & .data-table-tr { + height: 48px; + & .data-table-arrow-btn { + padding-left: .75rem; + [class^="cil-"], [class*=" cil-"] { + color: $primary; + cursor: pointer; + } + } + } + + & .data-table-tr-cursor { + cursor: pointer; + } } table ~ .react-json-view { - border: 1px solid blue; - background-color: $bg-color-dark; + border: 1px solid blue; + background-color: $bg-color-dark; } // STYLES FOR index.js .data-table { - &-input-group-text { - padding: 0; - background-color: $bg-color; - box-shadow: none; - border-radius: 2px; - } - &-search { - font-size: 14px; - & .form-control { - border-left: none; - box-shadow: none; - } - } - &-button:last-child { - border-radius: 0 8px 0 0; - } - &-limit { - display: flex; - align-items: center; - // margin: auto 1.5rem; - border-right: 1px solid $border-color; - &-dropdown { - display: flex; - justify-content: center; - color: $text-color !important; - font-weight: 400; - margin: auto; - & button { - display: flex; - justify-content: center; - background-color: $bg-color; - color: $text-color; - font-weight: 400; - } - } - } - &-count { - justify-self: flex-start; - } - - &-card-footer-left { - display: inherit; - align-items: center; - & > div:first-child { - margin: auto 1.5rem; - } - } + &-input-group-text { + padding: 0; + background-color: $bg-color; + box-shadow: none; + border-radius: 2px; + } + &-search { + font-size: 14px; + & .form-control { + border-left: none; + box-shadow: none; + } + } + &-button:last-child { + border-radius: 0 8px 0 0; + } + &-limit { + display: flex; + align-items: center; + // margin: auto 1.5rem; + border-right: 1px solid $border-color; + &-dropdown { + display: flex; + justify-content: center; + color: $text-color !important; + font-weight: 400; + margin: auto; + & button { + display: flex; + justify-content: center; + background-color: $bg-color; + color: $text-color; + font-weight: 400; + } + } + } + &-count { + justify-self: flex-start; + } + + &-card-footer-left { + display: inherit; + align-items: center; + & > div:first-child { + margin: auto 1.5rem; + } + } +} + +.sr-only { + clip: rect(0,0,0,0); + border: 0; + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.table>:not(caption)>*>* { + background-color: unset; + // background-color: $bg-color-dark; } From a80cce76dfe2aa034a50cc08501830a9bd541463 Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Thu, 29 Jun 2023 16:48:11 +0200 Subject: [PATCH 02/21] components styling updat --- src/styles/components/input.scss | 6 +++++- src/styles/components/pagination.scss | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/styles/components/input.scss b/src/styles/components/input.scss index 6bf19f0d0..5e7b76f09 100644 --- a/src/styles/components/input.scss +++ b/src/styles/components/input.scss @@ -24,7 +24,7 @@ $disabled-input-background-color: var(--disabled-input-background-color); //box-shadow: 0px 2px 3px -1px $light; box-shadow: 0 2px 3px -1px $beige-gray; border: 1px solid $border-color; - border-radius: 2px; + border-radius: 4px; background-color: $input-bg; color: $input-text; transition: none; @@ -69,6 +69,10 @@ $disabled-input-background-color: var(--disabled-input-background-color); border: 1px solid $border-color; box-shadow: 0 2px 3px -1px $light; color: $input-text; + border-right: unset; + border-radius: 4px 0px 0px 4px; + min-height: unset; + padding: 6.5px 8px; } &-addon { display: flex; diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss index 3086bb6a7..8c8b023ee 100644 --- a/src/styles/components/pagination.scss +++ b/src/styles/components/pagination.scss @@ -29,6 +29,7 @@ border: none; border-left: 1px solid var(--border-color); margin-left: 0; + transition: unset; &:hover { color: $link-hover-txt-color; } From c7c237bb3ad03c2b5eaecda4fcdd3cb1cd9c7e24 Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Thu, 29 Jun 2023 16:48:48 +0200 Subject: [PATCH 03/21] paddning and margin general styles udpate --- src/styles/index.scss | 67 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 2b84475f2..0c7935518 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -111,6 +111,13 @@ code { margin-right: 10%; } +a { + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + // Progress Bar .fade { transition: opacity 0.15s linear; @@ -181,6 +188,66 @@ code { } } +.p-2 { + padding: 0.5rem!important; +} +.pr-2, .px-2 { + padding-right: 0.5rem!important; +} +.pl-2, .px-2 { + padding-left: 0.5rem!important; +} +.pb-2, .py-2 { + padding-bottom: 0.5rem!important; +} +.pt-2, .py-2 { + padding-bottom: 0.5rem!important; +} +.pl-auto { + padding-left: auto!important; +} + +.m-1 { + margin: 0.25rem!important; +} +.mr-1, .mx-1 { + margin-right: 0.25rem!important; +} +.ml-1, .mx-1 { + margin-left: 0.25rem!important; +} +.mb-1, .my-1 { + margin-bottom: 0.25rem!important; +} +.mt-1, .my-1 { + margin-bottom: 0.25rem!important; +} +.ml-auto { + margin-left: auto!important; +} +.m-2 { + margin: 0.5rem!important; +} +.mr-2, .mx-2 { + margin-right: 0.5rem!important; +} +.ml-2, .mx-2 { + margin-left: 0.5rem!important; +} +.mb-2, .my-2 { + margin-bottom: 0.5rem!important; +} +.mt-2, .my-2 { + margin-bottom: 0.5rem!important; +} +.ml-auto { + margin-left: auto!important; +} + +.mb-3 { + margin-bottom: 1rem; +} + @media screen and (max-width: 768px) { .header-sidebar-wrapper { overflow-x: hidden; From 6cfc54e10f33169df09da15774b79a8e3767d75a Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Mon, 17 Jul 2023 14:36:51 +0200 Subject: [PATCH 04/21] general padding/margin styles --- src/styles/index.scss | 88 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 78 insertions(+), 10 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 0c7935518..69a6e4987 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -188,6 +188,9 @@ a { } } +.pl-auto { + padding-left: auto!important; +} .p-2 { padding: 0.5rem!important; } @@ -201,12 +204,53 @@ a { padding-bottom: 0.5rem!important; } .pt-2, .py-2 { - padding-bottom: 0.5rem!important; + padding-top: 0.5rem!important; } -.pl-auto { - padding-left: auto!important; + +.p-3 { + padding: 1rem!important; +} +.pr-3, .px-3 { + padding-right: 1rem!important; +} +.pl-3, .px-3 { + padding-left: 1rem!important; +} +.pb-3, .py-3 { + padding-bottom: 1rem!important; +} +.pt-3, .py-3 { + padding-top: 1rem!important; +} + +.p-4 { + padding: 1.5rem!important; +} +.pr-4, .px-4 { + padding-right: 1.5rem!important; +} +.pl-4, .px-4 { + padding-left: 1.5rem!important; +} +.pb-4, .py-4 { + padding-bottom: 1.5rem!important; +} +.pt-4, .py-4 { + padding-top: 1.5rem!important; } +.ml-0 { + margin-left: 0!important; +} +.mr-0 { + margin-right: 0!important; +} +.ml-auto { + margin-left: auto!important; +} +.mr-auto { + margin-right: auto!important; +} .m-1 { margin: 0.25rem!important; } @@ -220,10 +264,7 @@ a { margin-bottom: 0.25rem!important; } .mt-1, .my-1 { - margin-bottom: 0.25rem!important; -} -.ml-auto { - margin-left: auto!important; + margin-top: 0.25rem!important; } .m-2 { margin: 0.5rem!important; @@ -238,10 +279,37 @@ a { margin-bottom: 0.5rem!important; } .mt-2, .my-2 { - margin-bottom: 0.5rem!important; + margin-top: 0.5rem!important; } -.ml-auto { - margin-left: auto!important; +.m-3 { + margin: 1rem!important; +} +.mr-3, .mx-3 { + margin-right: 1rem!important; +} +.ml-3, .mx-3 { + margin-left: 1rem!important; +} +.mb-3, .my-3 { + margin-bottom: 1rem!important; +} +.mt-3, .my-3 { + margin-top: 1rem!important; +} +.m-4 { + margin: 1.5rem!important; +} +.mr-4, .mx-4 { + margin-right: 1.5rem!important; +} +.ml-4, .mx-4 { + margin-left: 1.5rem!important; +} +.mb-4, .my-4 { + margin-bottom: 1.5rem!important; +} +.mt-4, .my-4 { + margin-top: 1.5rem!important; } .mb-3 { From c1659e7f2c6619e396cc6dea0b78d51d838b4d20 Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Tue, 18 Jul 2023 11:28:29 +0200 Subject: [PATCH 05/21] general padding styles udpate --- src/styles/index.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index 69a6e4987..12505ef63 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -191,6 +191,21 @@ a { .pl-auto { padding-left: auto!important; } +.p-1 { + padding: 0.25rem!important; +} +.pr-1, .px-1 { + padding-right: 0.25rem!important; +} +.pl-1, .px-1 { + padding-left: 0.25rem!important; +} +.pb-1, .py-1 { + padding-bottom: 0.25rem!important; +} +.pt-1, .py-1 { + padding-top: 0.25rem!important; +} .p-2 { padding: 0.5rem!important; } From babbdf374b8ffd97bc302be5db0c168d5110b1b6 Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Tue, 25 Jul 2023 15:20:57 +0200 Subject: [PATCH 06/21] alerts bootstrap 5 refactorization --- src/containers/Alerts/alerts.scss | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/containers/Alerts/alerts.scss b/src/containers/Alerts/alerts.scss index c108f2537..17378657a 100644 --- a/src/containers/Alerts/alerts.scss +++ b/src/containers/Alerts/alerts.scss @@ -11,6 +11,35 @@ } } +.alert { + margin-bottom: 1rem; + padding: 0.75rem 1.25rem; + position: relative; +} + +.close { + float: right; + font-size: 1.5rem; + font-weight: 700; + line-height: 1; + opacity: .5; + text-shadow: 0 1px 0 #fff; +} + +.alert-dismissible .close { + color: inherit !important; + padding: 0.75rem 1.25rem; + position: absolute; + right: 0; + top: 0; + z-index: 2; +} + +button.close { + background-color: transparent; + border: 0; +} + .session-expiration-alert { display: flex; justify-content: space-between; From 5038efff7e4cb5e7e2ee4100a0379c2d95b78dee Mon Sep 17 00:00:00 2001 From: petrKavulok Date: Tue, 25 Jul 2023 17:35:01 +0200 Subject: [PATCH 07/21] bootstra v5 - components refactorization --- src/components/Credentials.js | 4 ++-- src/components/DataTable/ActionButton.js | 10 +++++----- src/components/DataTable/Buttons.js | 24 ++++++++++++------------ src/components/DataTable/Search.js | 4 ++-- src/components/DataTable/Sort.js | 6 +++--- src/components/DataTable/Table.js | 22 +++++++++++----------- src/components/DataTable/index.js | 24 ++++++++++++------------ src/components/DateTime/index.js | 4 ++-- src/components/Pagination.js | 8 ++++---- 9 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/components/Credentials.js b/src/components/Credentials.js index b87e4505f..1e24962fb 100644 --- a/src/components/Credentials.js +++ b/src/components/Credentials.js @@ -60,7 +60,7 @@ export function Credentials({ ...props }) { credentials.map((credentialObj) => { return (
- + {credentialObj.username} @@ -71,7 +71,7 @@ export function Credentials({ ...props }) { credentials_ids.map((credentials_id) => { return (
- + {credentials_id} diff --git a/src/components/DataTable/ActionButton.js b/src/components/DataTable/ActionButton.js index 6d76f37d1..e6d899559 100644 --- a/src/components/DataTable/ActionButton.js +++ b/src/components/DataTable/ActionButton.js @@ -4,15 +4,15 @@ import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap const ActionButton = ({ actionButton, row, header }) => { const [isOpen, setOpen] = useState(false); - + return ( setOpen(prev => !prev)} size="sm" > - { {actionButton.title && ( {actionButton.title} @@ -39,7 +39,7 @@ const ActionButton = ({ actionButton, row, header }) => { ))} - + ) } diff --git a/src/components/DataTable/Buttons.js b/src/components/DataTable/Buttons.js index d4d40e4be..975b3d898 100644 --- a/src/components/DataTable/Buttons.js +++ b/src/components/DataTable/Buttons.js @@ -8,11 +8,11 @@ import { export const CreateButton = ({ createButton }) => { return ( -
+
} {windowDimensions.width > 768 && } -
-