fixed transition only happening on hover in

8 files changed, 22 insertions, 13 deletions

diff --git a/package.json b/package.json
index b0de6e7..ca463d7 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@react-pdf/renderer": "^2.0.16",
+    "@testing-library/dom": ">=7.21.4",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 7642f75..31a15b1 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -57,6 +57,7 @@ input {
   margin-right: 0.5rem;
   font-size: $fontSize1 + 0.5;
   margin-bottom: -0.25rem;
+  transition: color $defTransition;
 }
 
 .icon:hover {
diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss
index 93d6c5e..bc3fbb3 100644
--- a/src/components/Menu/Menu.scss
+++ b/src/components/Menu/Menu.scss
@@ -14,6 +14,7 @@
   text-decoration: none;
   font-size: $fontSize2;
   color: $defFG;
+  transition: color $defTransition;
 }
 
 .HomePageMenu .menuItem:hover {
@@ -23,14 +24,3 @@
 .InvoiceInfoMenu {
   width: 60%;
 }
-
-.PDFViewer {
-  height: 95%;
-  width: 95%;
-
-  position: fixed;
-  top: 0; bottom: 0;
-  left: 0; right: 0;
-  margin: auto;
-  z-index: 3;
-}
diff --git a/src/components/Print/Print.scss b/src/components/Print/Print.scss
new file mode 100644
index 0000000..bae5f76
--- /dev/null
+++ b/src/components/Print/Print.scss
@@ -0,0 +1,13 @@
+@import "../../styles/theme";
+
+.PDFViewer {
+  height: 95%;
+  width: 95%;
+  border: 2px solid $border0;
+
+  position: fixed;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  margin: auto;
+  z-index: 3;
+}
diff --git a/src/components/Print/PrintableDoc.tsx b/src/components/Print/PrintableDoc.tsx
index bcabcbc..67c8580 100644
--- a/src/components/Print/PrintableDoc.tsx
+++ b/src/components/Print/PrintableDoc.tsx
@@ -7,6 +7,7 @@
 */
 
 import React, { /*useState,*/ } from "react";
+import "./Print.scss";
 import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
 
 const styles = StyleSheet.create({
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 09c90d5..74ed2f2 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -62,6 +62,7 @@ $link2: $foreground2;
 $defFG: $foreground1;
 $altFG: $foreground2;
 
+$border0: gray;
 $border1: pink;
 $border2: lightgreen;
 
@@ -72,3 +73,5 @@ $underline3: $warningColor;
 
 $defBigShadow: 0px 2px 4px $shadowColor;
 $floatingShadow: 6px 6px 6px $shadowColor;
+
+$defTransition: 0.3s;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index ef3d11d..3d077f6 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -17,9 +17,9 @@
 ::-webkit-scrollbar {
   width: 1vw;
 }
+
 * {
   scrollbar-width: 1vw;  /* Firefox */
-  transition: 0.3s;
 }
 
 body {
diff --git a/yarn.lock b/yarn.lock
index 7ee24d2..15e2454 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1845,7 +1845,7 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
-"@testing-library/dom@^8.0.0":
+"@testing-library/dom@>=7.21.4", "@testing-library/dom@^8.0.0":
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.1.0.tgz#f8358b1883844ea569ba76b7e94582168df5370d"
   integrity sha512-kmW9alndr19qd6DABzQ978zKQ+J65gU2Rzkl8hriIetPnwpesRaK4//jEQyYh8fEALmGhomD/LBQqt+o+DL95Q==