From d5105b5c9f74a4f52e4952b845a37692bb824fd4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 19 Oct 2018 13:45:12 -0700
Subject: feat: user better syntax for defining ui components

---
 packages/instant/src/components/ui/input.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'packages/instant/src/components/ui/input.tsx')

diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index f8c6b6ef6..9db7d1c4c 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -12,11 +12,7 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
-    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
-);
-
-export const Input = styled(PlainInput)`
+export const Input = styled<InputProps, 'input'>('input')`
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;
-- 
cgit v1.2.3


From 379f7c788385cfc15fea8d0bb0a2a39f0c709b8d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 24 Oct 2018 13:44:00 -0700
Subject: chore: use alternate syntax for styled

---
 packages/instant/src/components/ui/input.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/instant/src/components/ui/input.tsx')

diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index 9db7d1c4c..a884ff7cb 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -12,7 +12,10 @@ export interface InputProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Input = styled<InputProps, 'input'>('input')`
+export const Input =
+    styled.input <
+    InputProps >
+    `
     font-size: ${props => props.fontSize};
     width: ${props => props.width};
     padding: 0.1em 0em;
-- 
cgit v1.2.3


From 10da1e24e13b728c2837e5360a48fcb2913855a5 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 6 Nov 2018 15:59:16 -0800
Subject: feat: make instant resistant to external styles

---
 packages/instant/src/components/ui/input.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

(limited to 'packages/instant/src/components/ui/input.tsx')

diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
index a884ff7cb..2fb408db4 100644
--- a/packages/instant/src/components/ui/input.tsx
+++ b/packages/instant/src/components/ui/input.tsx
@@ -16,17 +16,20 @@ export const Input =
     styled.input <
     InputProps >
     `
-    font-size: ${props => props.fontSize};
-    width: ${props => props.width};
-    padding: 0.1em 0em;
-    font-family: 'Inter UI';
-    color: ${props => props.theme[props.fontColor || 'white']};
-    background: transparent;
-    outline: none;
-    border: none;
-    &::placeholder {
+    && {
+        all: initial;
+        font-size: ${props => props.fontSize};
+        width: ${props => props.width};
+        padding: 0.1em 0em;
+        font-family: 'Inter UI';
         color: ${props => props.theme[props.fontColor || 'white']};
-        opacity: 0.5;
+        background: transparent;
+        outline: none;
+        border: none;
+        &::placeholder {
+            color: ${props => props.theme[props.fontColor || 'white']};
+            opacity: 0.5;
+        }
     }
 `;
 
-- 
cgit v1.2.3