Chore: improve bot firewall copy, fix link styling (#117)

* chore: fix copy and llnk styling * chore: fix not padding * chore: fix Spinner color
fingerprintjs · Jan 26, 2024 · e2559ba · e2559ba
1 parent 281971c
commit e2559ba
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 6 deletions.
diff --git a/src/client/bot-firewall/botFirewallComponents.module.scss b/src/client/bot-firewall/botFirewallComponents.module.scss
@@ -26,8 +26,13 @@
   font-weight: 600;
   line-height: 130%;
 
-  @include media('>tabletWide') {
-    white-space: nowrap;
+  a {
+    text-decoration: underline;
+    text-decoration-color: v('gray-box-stroke');
+
+    &:hover {
+      text-decoration-color: v('orange-gradient');
+    }
   }
 
   @include media('<=phoneLandscape') {
@@ -47,6 +52,11 @@
   border-radius: 8px;
   margin-left: auto;
 
+  a {
+    color: v('orange-gradient');
+    text-decoration: underline;
+  }
+
   @include media('<=tabletWide') {
     margin-left: 0;
   }

diff --git a/src/client/components/common/Spinner/Spinner.module.scss b/src/client/components/common/Spinner/Spinner.module.scss
@@ -1,3 +1,5 @@
 .spinner {
-  color: v('orange-gradient');
+  & {
+    color: v('orange-gradient');
+  }
 }
diff --git a/src/client/components/common/UseCaseWrapper/UseCaseWrapper.module.scss b/src/client/components/common/UseCaseWrapper/UseCaseWrapper.module.scss
@@ -15,6 +15,11 @@ h1.title {
 .description {
   max-width: rem(640px);
   margin-bottom: rem(24px);
+
+  a {
+    color: v('orange-gradient');
+    text-decoration: underline;
+  }
 }
 
 .externalLinks {
@@ -157,12 +162,18 @@ h1.title {
     line-height: 145%;
     letter-spacing: 0.36px;
     color: v('orange-gradient');
+    padding-top: 2px;
   }
 
   :last-child {
     color: v('dark-gray');
     font-size: rem(14px);
     letter-spacing: 0.42px;
+
+    a {
+      color: v('orange-gradient');
+      text-decoration: underline;
+    }
   }
 }
 

diff --git a/src/client/components/common/UseCaseWrapper/UseCaseWrapper.tsx b/src/client/components/common/UseCaseWrapper/UseCaseWrapper.tsx
@@ -96,10 +96,10 @@ export const UseCaseWrapper: FunctionComponent<UseCaseWrapperProps> = ({
                   </li>
                 )}
               </ol>
-              {instructionsNote && (
+              {(instructionsNote || useCase.instructionsNote) && (
                 <div className={styles.note}>
                   <div>NOTE</div>
-                  <div>{instructionsNote}</div>
+                  <div>{instructionsNote ?? useCase.instructionsNote}</div>
                 </div>
               )}
             </div>

diff --git a/src/client/components/common/content.tsx b/src/client/components/common/content.tsx
@@ -23,6 +23,7 @@ export type UseCase = {
   articleUrl?: string;
   doNotMentionResetButton?: boolean;
   instructions: readonly (ReactNode | ((props: RestartHintProps) => ReactNode))[];
+  instructionsNote?: ReactNode;
   iconSvg?: any | undefined;
   moreResources?: readonly {
     type: 'Use case tutorial' | 'Case study' | 'Industry' | 'Article' | 'Use case';
@@ -361,6 +362,12 @@ export const USE_CASES = {
         in the URL.
       </>,
     ],
+    instructionsNote: (
+      <>
+        You can see the detected bot visits and block bot IP addresses in the{' '}
+        <Link href={'/bot-firewall'}>Bot Firewall</Link> demo.
+      </>
+    ),
     moreResources: [
       {
         url: 'https://fingerprint.com/blog/preventing-content-scraping/',

diff --git a/src/pages/bot-firewall/index.tsx b/src/pages/bot-firewall/index.tsx
@@ -239,7 +239,12 @@ export const BotFirewall: NextPage<CustomPageProps> = ({ embed }) => {
       >
         <div className={styles.container}>
           <div className={styles.header}>
-            <h2 className={styles.title}>Detected bot visits</h2>
+            <h2 className={styles.title}>
+              Bots detected on{' '}
+              <Link href="/web-scraping" target="_blank">
+                Web scraping demo
+              </Link>
+            </h2>
             <Button
               size="small"
               outlined