From 32a27d535b6e98e6c50088ad5058d3a3b411740b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Sep 2021 21:13:20 +0200
Subject: [PATCH] Add carbon ads

---
 components/custom-ad.tsx |  6 ++++--
 components/footer.tsx    |  2 +-
 styles/carbon.css        | 17 +++++++++++------
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/custom-ad.tsx b/components/custom-ad.tsx
index c883062d1..8cdfa4d20 100644
--- a/components/custom-ad.tsx
+++ b/components/custom-ad.tsx
@@ -1,6 +1,8 @@
+import { Box } from '@chakra-ui/react';
+
 export const CustomAd = () => {
   return (
-    <div id='carbonads'>
+    <Box className='custom-ad' d={['none !important', 'flex !important']}>
       <span>
         <span className='carbon-wrap'>
           <a
@@ -32,6 +34,6 @@ export const CustomAd = () => {
           Sponsored by
         </a>
       </span>
-    </div>
+    </Box>
   );
 };
diff --git a/components/footer.tsx b/components/footer.tsx
index 48d8d9808..3de3b4bc2 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -66,7 +66,7 @@ export function Footer() {
       </Container>
 
       <CustomAd />
-      {process.env.GA_SECRET && false && (
+      {process.env.GA_SECRET && (
         <script
           async
           type='text/javascript'
diff --git a/styles/carbon.css b/styles/carbon.css
index 7d886bc07..4e6d28636 100644
--- a/styles/carbon.css
+++ b/styles/carbon.css
@@ -1,4 +1,4 @@
-#carbonads {
+#carbonads, .custom-ad {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
   Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: fixed;
@@ -6,29 +6,34 @@
   right: 20px;
 }
 
-#carbonads {
+.custom-ad {
+  left: 20px !important;
+  right: auto !important;
+}
+
+#carbonads, .custom-ad {
   display: flex;
   max-width: 330px;
   background-color: hsl(0, 0%, 98%);
   box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
 }
 
-#carbonads a {
+#carbonads a, .custom-ad a {
   color: inherit;
   text-decoration: none;
 }
 
-#carbonads a:hover {
+#carbonads a:hover, .custom-ad a:hover {
   color: inherit;
 }
 
-#carbonads span {
+#carbonads span, .custom-ad span {
   position: relative;
   display: block;
   overflow: hidden;
 }
 
-#carbonads .carbon-wrap {
+#carbonads .carbon-wrap, .custom-ad .carbon-wrap  {
   display: flex;
 }