Migrate to render props

1 files changed, 32 insertions, 3 deletions

diff --git a/frontend/components/styles/Form.js b/frontend/components/styles/Form.js
index 09085ad..4fd8029 100644
--- a/frontend/components/styles/Form.js
+++ b/frontend/components/styles/Form.js
@@ -1,11 +1,22 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const loading = keyframes`
+  from {
+    background-position: 0 0;
+    /* rotate: 0; */
+  }
+
+  to {
+    background-position: 100% 100%;
+    /* rotate: 360deg; */
+  }
+`;
 
 const Form = styled.form`
   box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
   background: rgba(0, 0, 0, 0.02);
   border: 5px solid white;
-  margin: 100px;
-  padding: 100px;
+  padding: 20px;
   font-size: 2.5rem;
   font-weight: 600;
   label {
@@ -36,6 +47,24 @@ const Form = styled.form`
     font-weight: 600;
     padding: 1rem 2rem;
   }
+  fieldset {
+    border: 0;
+    padding: 0;
+
+    &[disabled] {
+      opacity: 0.5;
+    }
+    &::before {
+      height: 10px;
+      content: '';
+      display: block;
+      background-image: linear-gradient(to right, #ff3019 0%, #e2b04a 50%, #ff3019 100%);
+    }
+    &[aria-busy='true']::before {
+      background-size: 50% auto;
+      animation: ${loading} 0.5s linear infinite;
+    }
+  }
 `;
 
 Form.displayName = 'Form';