match input colors

Author: siddharthkp

packages/app/src/app/pages/common/Modals/ShareModal2/elements.ts

@@ -95,9 +95,9 @@ export const OptionDescription = styled.p(css({}));
 
 export const Input = styled.input<{ code?: boolean }>(({ code }) =>
   css({
-    backgroundColor: 'grays.700',
+    backgroundColor: 'grays.800',
     border: '1px solid',
-    borderColor: 'grays.800',
+    borderColor: 'grays.600',
     color: 'white',
     fontSize: 3,
     borderRadius: 'small',
@@ -110,15 +110,15 @@ export const Input = styled.input<{ code?: boolean }>(({ code }) =>
     fontFamily: code ? 'code' : 'body',
 
     ':hover': {
-      backgroundColor: 'grays.800',
+      backgroundColor: 'grays.700',
     },
     ':focus': {
       backgroundColor: 'grays.800',
       borderColor: 'grays.800',
       outline: 'none',
     },
     ':disabled:hover': {
-      backgroundColor: 'grays.700',
+      backgroundColor: 'grays.800',
     },
   })
 );
@@ -206,7 +206,8 @@ export const SwitchBase = styled.span(
     width: 28,
     height: 14,
     borderRadius: 'large',
-    background: '#040404',
+    backgroundColor: 'grays.800',
+    // TODO: add a focus state for switch
   })
 );
 

packages/app/src/app/pages/common/Modals/ShareModal2/index.tsx

@@ -332,7 +332,7 @@ function ShareModal() {
               value={getIframeCode({ settings, sandbox })}
               ref={urlContainer}
             />
-            <Button onClick={copyEmbedCode}>
+            <Button onClick={copyEmbedCode} style={{ marginBottom: 8 }}>
               {copied ? 'Copied!' : 'Copy Embed Code'}
             </Button>
             <Option multiline>