code renderer virtualization, better visuals

2 files changed, 14 insertions, 2 deletions

diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js
index 7c9e413..e000cfb 100644
--- a/frontend/src/components/Form/Input.js
+++ b/frontend/src/components/Form/Input.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import {Border, DropShadow, InputLike, Rounded, Transition} from "./mixins";
+import {Border, DropShadow, InputLike, Rounded} from "./mixins";
 
 export const Input = styled.input`
   ${Border}
diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js
index 64b7cc0..600a861 100644
--- a/frontend/src/components/Form/mixins.js
+++ b/frontend/src/components/Form/mixins.js
@@ -8,7 +8,12 @@ export const Hover = css`
   opacity: 0.5;
   transition: all 0.5s cubic-bezier(.25,.8,.25,1);
   
-  &:focus, &:hover, &:focus span {
+  & ~ pre {
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+    opacity: 0.5;
+  }
+  
+  &:focus, &:hover, &:focus span, &:focus ~ pre {
     opacity: 1;
   }
 `
@@ -31,6 +36,13 @@ export const InputLike = css`
   margin: 1.7em 0;
 `
 
+export const CodeLike = css`
+  font-family: JetBrains Mono !important;
+  font-size: 14px !important;
+  line-height: 1.2em !important;
+  white-space: pre-wrap;
+`
+
 export const ButtonLike = css`
   font-family: 'JetBrains Mono', serif;
   font-weight: 700;