{item.reference.receipt_number}{' '}
{item.reference.formatted_receipt_date}
diff --git a/packages/webapp/src/containers/TransactionsLocking/components.tsx b/packages/webapp/src/containers/TransactionsLocking/components.tsx
index 63ceeb26c..f7ae32a54 100644
--- a/packages/webapp/src/containers/TransactionsLocking/components.tsx
+++ b/packages/webapp/src/containers/TransactionsLocking/components.tsx
@@ -372,7 +372,7 @@ const TransLockingIcon = styled.div`
border-radius: 8px;
color: #93a1ba;
- .bp3-icon {
+ .bp4-icon {
position: relative;
top: 1px;
}
@@ -381,7 +381,7 @@ const TransLockingIcon = styled.div`
export const TransLockingActions = styled.div`
display: flex;
- .bp3-divider {
+ .bp4-divider {
margin: 2px;
}
`;
diff --git a/packages/webapp/src/containers/UniversalSearch/components.tsx b/packages/webapp/src/containers/UniversalSearch/components.tsx
index c080be0d3..66ac23631 100644
--- a/packages/webapp/src/containers/UniversalSearch/components.tsx
+++ b/packages/webapp/src/containers/UniversalSearch/components.tsx
@@ -18,7 +18,7 @@ function UniversalSearchItemDetail(item, { handleClick, modifiers, query }) {
{highlightText(item.text, query)}
{item.subText && (
-
+
{highlightText(item.subText, query)}
)}
diff --git a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
index 0ecb61a79..d42b1be93 100644
--- a/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
+++ b/packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormFooterLeft.tsx
@@ -22,12 +22,12 @@ export function WarehouseTransferFormFooterLeft() {
}
const TermsConditsFormGroup = styled(FFormGroup)`
- &.bp3-form-group {
- .bp3-label {
+ &.bp4-form-group {
+ .bp4-label {
font-size: 12px;
margin-bottom: 12px;
}
- .bp3-form-content {
+ .bp4-form-content {
margin-left: 10px;
}
}
diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss
index 039cc6080..f18606673 100644
--- a/packages/webapp/src/style/App.scss
+++ b/packages/webapp/src/style/App.scss
@@ -1,14 +1,10 @@
@import './normalize.scss';
+@import './_base.scss';
-@import './Base.scss';
-
-// Blueprint framework.
@import '@blueprintjs/core/src/blueprint.scss';
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
@import '@blueprintjs/popover2/src/blueprint-popover2.scss';
-@import 'basscss';
-
// Objects
@import 'objects/form';
@import 'objects/switch';
@@ -51,56 +47,56 @@ body.hide-scrollbar .Pane2 {
overflow: hidden;
}
-.bp3-fill {
+.bp4-fill {
- .bp3-popover-wrapper,
- .bp3-popover-target {
+ .bp4-popover-wrapper,
+ .bp4-popover-target {
display: block;
width: 100%;
}
- .bp3-button {
+ .bp4-button {
width: 100%;
justify-content: start;
}
}
-.bp3-datepicker-caption .bp3-html-select::after {
+.bp4-datepicker-caption .bp4-html-select::after {
margin-right: 6px;
}
-.bp3-select-popover .bp3-menu,
-.bp3-multi-select-popover .bp3-menu {
+.bp4-select-popover .bp4-menu,
+.bp4-multi-select-popover .bp4-menu {
max-height: 300px;
overflow: auto;
}
-.bp3-form-group .bp3-label {
+.bp4-form-group .bp4-label {
.hint {
- .bp3-popover-wrapper {
+ .bp4-popover-wrapper {
display: inline;
}
}
- &:not(.bp3-inline) .hint .bp3-popover-target {
+ &:not(.bp4-inline) .hint .bp4-popover-target {
display: inline;
margin-left: 0;
}
}
-.bp3-popover.bp3-tooltip {
+.bp4-popover.bp4-tooltip {
max-width: 300px;
}
-.bp3-timezone-picker {
- .bp3-button {
+.bp4-timezone-picker {
+ .bp4-button {
[icon='caret-down'] {
display: none;
}
}
}
-.bp3-progress-bar.bp3-intent-primary .bp3-progress-meter {
+.bp4-progress-bar.bp4-intent-primary .bp4-progress-meter {
background-color: #0066ff;
}
@@ -183,7 +179,7 @@ body.hide-scrollbar .Pane2 {
.ReactVirtualized__List {}
-.bp3-drawer {
+.bp4-drawer {
box-shadow: 0 0 0;
background-color: #fbfbfb;
@@ -194,7 +190,7 @@ body.hide-scrollbar .Pane2 {
// RTL Icons.
html[dir='rtl'] {
- .bp3-icon-caret-right {
+ .bp4-icon-caret-right {
transform: scaleX(-1);
}
}
@@ -205,12 +201,12 @@ html[lang^='ar'] {
}
}
-.bp3-popover2 {
+.bp4-popover2 {
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22, 26, 0.1),
0 8px 24px rgba(16, 22, 26, 0.1);
}
-.bp3-tooltip2 .bp3-popover2-arrow:before {
+.bp4-tooltip2 .bp4-popover2-arrow:before {
box-shadow: 0 0 0;
}
@@ -230,38 +226,38 @@ html[lang^='ar'] {
z-index: 9999999;
margin: 6px;
- .bp3-button {
+ .bp4-button {
border-color: rgba(0, 0, 0, 0.25);
color: rgb(25, 32, 37);
min-height: 30px;
padding-left: 14px;
padding-right: 14px;
- &+.bp3-button {
+ &+.bp4-button {
margin-left: 8px;
}
}
}
- .bp3-dialog {
+ .bp4-dialog {
&-body {
&:not(.loading) {
margin: 0;
}
- >.bp3-spinner {
+ >.bp4-spinner {
margin: 20px 0;
}
}
}
}
-.bp3-drawer {
+.bp4-drawer {
border-left: 1px solid #00115e;
}
.drawer-portal {
- .bp3-overlay-backdrop {
+ .bp4-overlay-backdrop {
background: rgba(0, 10, 30, 0.05);
}
}
diff --git a/packages/webapp/src/style/Base.scss b/packages/webapp/src/style/Base.scss
deleted file mode 100644
index e8fa8c7d3..000000000
--- a/packages/webapp/src/style/Base.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-
-@import 'variables';
-@import 'functions';
\ No newline at end of file
diff --git a/packages/webapp/src/style/_base.scss b/packages/webapp/src/style/_base.scss
new file mode 100644
index 000000000..6fc81a8fb
--- /dev/null
+++ b/packages/webapp/src/style/_base.scss
@@ -0,0 +1,3 @@
+
+@import '_variables';
+@import '_functions';
\ No newline at end of file
diff --git a/packages/webapp/src/style/_functions.scss b/packages/webapp/src/style/_functions.scss
new file mode 100644
index 000000000..fb20330ee
--- /dev/null
+++ b/packages/webapp/src/style/_functions.scss
@@ -0,0 +1,54 @@
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (("<", "%3c"),
+ (">", "%3e"),
+ ("#", "%23"),
+ ("(", "%28"),
+ (")", "%29"),
+) !default;
+
+$svg-icon-map: ('16px/small-minus.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z' fill='%23fff'/",
+ '16px/small-tick.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5z' fill='%23fff'/",
+ '16px/chevron-right.svg': "path fill-rule='evenodd' clip-rule='evenodd' d='M10.71 7.29l-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z' fill='%235C7080'/",
+ '16px/more.svg': "g fill='%235C7080'%3E%3Ccircle cx='2' cy='8.03' r='2'/%3E%3Ccircle cx='14' cy='8.03' r='2'/%3E%3Ccircle cx='8' cy='8.03' r='2'/%3E%3C/g",
+) !default;
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+ $index: str-index($string, $search);
+
+ @if $index {
+ @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+ }
+
+ @return $string;
+}
+
+@function escape-svg($string) {
+ @if str-index($string, "data:image/svg+xml") {
+
+ @each $char,
+ $encoded in $escaped-characters {
+
+ @if str-index($string, "url(")==1 {
+ $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+ }
+
+ @else {
+ $string: str-replace($string, $char, $encoded);
+ }
+ }
+ }
+
+ @return $string;
+}
+
+@function svg-icon($inline-svg, $fill-color) {
+ @return url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3C"+ map-get($svg-icon-map, $inline-svg) + "%3E%3C/svg%3E")
+}
\ No newline at end of file
diff --git a/packages/webapp/src/style/normalize.scss b/packages/webapp/src/style/_normalize.scss
similarity index 100%
rename from packages/webapp/src/style/normalize.scss
rename to packages/webapp/src/style/_normalize.scss
diff --git a/packages/webapp/src/style/variables.scss b/packages/webapp/src/style/_variables.scss
similarity index 95%
rename from packages/webapp/src/style/variables.scss
rename to packages/webapp/src/style/_variables.scss
index 21fe0ded6..777633b51 100644
--- a/packages/webapp/src/style/variables.scss
+++ b/packages/webapp/src/style/_variables.scss
@@ -1,6 +1,7 @@
-@import '@blueprintjs/core/src/common/_variables.scss';
+@import "@blueprintjs/colors/lib/scss/colors";
+@import '@blueprintjs/core/src/common/variables';
-$ns: bp3;
+$ns: bp4;
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
@@ -48,4 +49,4 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,