style ads for editor view

src/components/CarbonAds/index.tsx

@@ -1,17 +1,25 @@
 import React from "react";
 import styled from "styled-components";
 
-const StyledWrapper = styled.span`
+const StyledWrapper = styled.span<{ editor?: boolean }>`
   #carbonads {
     width: 100%;
     display: flex;
-    border-radius: 0;
   }
 
-  #carbonads > span {
-    max-width: 100%;
-    width: 100%;
+  ${({ theme, editor }) =>
+    editor &&
+    `
+    #carbonads {
+      border-radius: 0;
+      border-top: 1px solid ${theme.BACKGROUND_MODIFIER_ACCENT};
+    }
+
+    #carbonads > span {
+      max-width: 100%;
+      width: 100%;
   }
+  `};
 
   @media all and (display-mode: standalone) {
     #carbonads {
@@ -20,9 +28,11 @@ const StyledWrapper = styled.span`
   }
 `;
 
-export const CarbonAds = () => {
+export const CarbonAds: React.FC<{ editor?: boolean }> = ({
+  editor = false,
+}) => {
   return (
-    <StyledWrapper>
+    <StyledWrapper editor={editor}>
       <script
         defer
         type="text/javascript"

src/containers/JsonEditor/index.tsx

@@ -82,7 +82,7 @@ export const JsonEditor: React.FC = () => {
           loading={<Loading message="Loading Editor..." />}
           onChange={(value) => setValue(value as string)}
         />
-        <CarbonAds />
+        <CarbonAds editor />
       </StyledWrapper>
     </StyledEditorWrapper>
   );