Adnim patch (#1647)

* Fix adnim ads

* Adjust ad container width

* Change widget on mobile

* Fix 3 column grid

* Ad ad banner top bar

* Ad ad banner bottom bar on mobile

* Ad ad banner bottom bar radius on mobile

* Adjust ad banners on mobile

* Make some mobile adjustments

* Remove dbeug box

* Combine ad classes

ui/scss/component/_ads.scss

@@ -408,9 +408,168 @@ $BANNER_BORDER: 1px;
 
 .banner-ad {
   margin-top: var(--spacing-l);
-  background-color: var(--color-ads-background);
+  .banner-ad__driver {
-  border: $BANNER_BORDER solid var(--color-border);
+    float: unset;
-  border-radius: var(--border-radius);
+    max-width: 100%;
+    width: 100%;
+    height: 27px;
+    border: unset;
+    @media (max-width: $breakpoint-small) {
+      height: 25px;
+      .banner-ad__driver-label {
+        padding-top: 5px !important;
+      }
+      .button__label {
+        padding-top: 3px !important;
+      }
+    }
+    .banner-ad__driver-label {
+      background-color: var(--color-primary);
+      border-radius: 0 0 0 var(--border-radius);
+      margin-right: 2px;
+      padding-top: 4px;
+      font-weight: bold;
+    }
+    .banner-ad__driver-value {
+      width: 100%;
+      border: unset;
+      background-image: linear-gradient(to right, var(--color-primary), rgba(var(--color-primary-dynamic), 0));
+    }
+    .button__label {
+      color: var(--color-primary) !important;
+      background: var(--color-background);
+      border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
+      padding: 2px 4px 2px 4px;
+      margin-top: 2px;
+      &:hover {
+        color: var(--color-text) !important;
+      }
+    }
+    .banner-ad__driver-label,
+    .banner-ad__driver-value {
+      color: var(--color-primary-contrast) !important;
+    }
+  }
+
+  .ob-widget-footer {
+    background-image: linear-gradient(to right, rgba(var(--color-primary-dynamic), 0), var(--color-primary)) !important;
+    width: 100%;
+    height: 31px;
+    margin-top: var(--spacing-s);
+    border-radius: 0 var(--border-radius) 0 0 !important;
+
+    .ob_what {
+      margin: 2px;
+      background-color: var(--color-background) !important;
+      padding: 3px !important;
+      padding-bottom: 0px !important;
+      border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
+    }
+  }
+
+  .banner-ad__container {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    max-width: unset !important;
+    background-color: unset !important;
+    .ob-grid-header-text {
+      display: none;
+    }
+    .ob-widget-header {
+      margin: 0;
+      margin-top: var(--spacing-s);
+    }
+    .ob-widget-items-container {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      .ob-dynamic-rec-container {
+        .ob-rec-image-container {
+          box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 0.3);
+          border-radius: var(--border-radius);
+        }
+        .ob-rec-text {
+          font-size: var(--font-small) !important;
+          color: var(--color-text) !important;
+          font-weight: 600 !important;
+          margin-top: 0 !important;
+        }
+        .ob-rec-description {
+          color: rgba(var(--color-text-base), 0.6) !important;
+        }
+        .ob-rec-source {
+          color: rgba(var(--color-text-base), 0.6) !important;
+
+          &:after {
+            color: var(--color-primary);
+            font-weight: bold;
+          }
+          &:hover {
+            color: var(--color-text);
+          }
+        }
+        .ob-sub-units {
+          margin-top: var(--spacing-xs);
+        }
+        &:hover {
+          .ob-rec-image-container {
+            box-shadow: 0 0 0 1px rgba(var(--color-primary-dynamic), 1);
+          }
+          .ob-rec-text {
+            color: var(--color-primary) !important;
+          }
+        }
+      }
+
+      @media (max-width: $breakpoint-large) {
+        grid-template-columns: repeat(4, minmax(min-content, 1fr)) !important;
+        .ob-dynamic-rec-container {
+          &:nth-child(6n) {
+            display: none;
+          }
+          &:nth-child(4n) {
+            display: none;
+          }
+        }
+      }
+
+      @media (max-width: $breakpoint-medium) {
+        grid-template-columns: repeat(3, minmax(min-content, 1fr)) !important;
+        .ob-dynamic-rec-container {
+          &:nth-child(6n) {
+            display: none;
+          }
+          &:nth-child(4n) {
+            display: none;
+          }
+          &:nth-child(2n) {
+            display: none;
+          }
+        }
+      }
+
+      @media (max-width: $breakpoint-small) {
+        grid-template-columns: repeat(1, minmax(min-content, 1fr)) !important;
+        .ob-dynamic-rec-container {
+          &:nth-child(6n) {
+            display: none;
+          }
+          &:nth-child(5n) {
+            display: none;
+          }
+          &:nth-child(4n) {
+            display: none;
+          }
+          &:nth-child(3n) {
+            display: none;
+          }
+          &:nth-child(2n) {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
 
 .banner-ad__container {

ui/scss/component/_claim-list.scss

@@ -1038,7 +1038,7 @@
   }
 
   @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
-    $width: calc((100vw - var(--side-nav-width--micro) - var(--spacing-xl) * 3) / 3);
+    $width: calc((100% - var(--spacing-m) * 2) / 3);
     width: $width;
     @include handleClaimTileGifThumbnail($width);
 

web/component/adsBanner/view.jsx

@@ -4,6 +4,7 @@ import Button from 'component/button';
 import I18nMessage from 'component/i18nMessage';
 import * as PAGES from 'constants/pages';
 import useShouldShowAds from 'effects/use-should-show-ads';
+import { useIsMobile } from 'effects/use-screensize';
 
 const AD_SCRIPT_URL = 'https://widgets.outbrain.com/outbrain.js';
 
@@ -45,6 +46,7 @@ type Props = {
 export default function AdsBanner(props: Props) {
   const { isAdBlockerFound, userHasPremiumPlus, userCountry, currentTheme, doSetAdBlockerFound } = props;
   const shouldShowAds = useShouldShowAds(userHasPremiumPlus, userCountry, isAdBlockerFound, doSetAdBlockerFound);
+  const isMobile = useIsMobile();
 
   React.useEffect(() => {
     if (shouldShowAds) {
@@ -86,7 +88,7 @@ export default function AdsBanner(props: Props) {
       <div
         className="banner-ad__container OUTBRAIN"
         data-ob-contenturl="DROP_PERMALINK_HERE"
-        data-widget-id={AD_CONFIG.AR_18}
+        data-widget-id={!isMobile ? AD_CONFIG.AR_60 : AD_CONFIG.AR_18}
         data-ob-installation-key="ADNIMKAJDGAG4GAO6AGG6H5KP"
         data-dark-mode={currentTheme === 'dark' ? 'true' : 'false'}
       />