From c90bf65595a61d291d547796c9f6c94ddcadb72e Mon Sep 17 00:00:00 2001
From: Spencer Cole <98931254+colespen@users.noreply.github.com>
Date: Wed, 20 Dec 2023 21:19:50 -0500
Subject: [PATCH] SC/Refactor: rw MulitMapLink & associated buttons (#2663)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Description and Motivation
- replace scss module styles with Tailwind
- replace all @mixin `buttonThatLooksLikeLink()` styled buttons with
same Tailwind class
- remove scss modules
- closes #2507

## Has this been tested? How?
- static, unit, e2e-local tests all pass

## Screenshots (if appropriate)

## Types of changes

***Refactor / chore***

## New frontend preview link is below in the Netlify comment 😎
---
 .../src/cards/ui/MultiMapLink.module.scss     |  6 ---
 frontend/src/cards/ui/MultiMapLink.tsx        |  3 +-
 .../cards/ui/UnknownBubblesAlert.module.scss  |  6 ---
 frontend/src/cards/ui/UnknownBubblesAlert.tsx |  3 +-
 .../pages/ExploreData/MadLibUI.module.scss    |  5 ---
 .../ExploreData/TopicOrLocationSelector.tsx   |  2 +-
 frontend/src/styles/globals.scss              |  9 ----
 frontend/tailwind.config.ts                   | 41 +++++++++----------
 8 files changed, 23 insertions(+), 52 deletions(-)
 delete mode 100644 frontend/src/cards/ui/MultiMapLink.module.scss
 delete mode 100644 frontend/src/cards/ui/UnknownBubblesAlert.module.scss

diff --git a/frontend/src/cards/ui/MultiMapLink.module.scss b/frontend/src/cards/ui/MultiMapLink.module.scss
deleted file mode 100644
index 02338993b3..0000000000
--- a/frontend/src/cards/ui/MultiMapLink.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../styles/variables.module';
-@import '../../styles/globals.scss';
-
-.CompareAcrossLink {
-  @include buttonThatLooksLikeLink();
-}
diff --git a/frontend/src/cards/ui/MultiMapLink.tsx b/frontend/src/cards/ui/MultiMapLink.tsx
index ab0aa9086f..c524ef0bf3 100644
--- a/frontend/src/cards/ui/MultiMapLink.tsx
+++ b/frontend/src/cards/ui/MultiMapLink.tsx
@@ -2,7 +2,6 @@ import {
   type DemographicType,
   DEMOGRAPHIC_DISPLAY_TYPES_LOWER_CASE,
 } from '../../data/query/Breakdowns'
-import styles from './MultiMapLink.module.scss'
 
 /*
 Generates the "COMPARES ACROSS GROUPS" button which opens the small multiples modal
@@ -21,7 +20,7 @@ export function MultiMapLink(props: MultiMapLinkProps) {
         onClick={() => {
           props.setMultimapOpen(true)
         }}
-        className={styles.CompareAcrossLink}
+        className='cursor-pointer border-0 bg-transparent p-0 text-alt-green underline'
         aria-label={
           'Open modal to Compare ' +
           props.currentDataType +
diff --git a/frontend/src/cards/ui/UnknownBubblesAlert.module.scss b/frontend/src/cards/ui/UnknownBubblesAlert.module.scss
deleted file mode 100644
index 35421d6358..0000000000
--- a/frontend/src/cards/ui/UnknownBubblesAlert.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../styles/variables.module';
-@import '../../styles/globals.scss';
-
-.UnknownBubblesLink {
-  @include buttonThatLooksLikeLink();
-}
diff --git a/frontend/src/cards/ui/UnknownBubblesAlert.tsx b/frontend/src/cards/ui/UnknownBubblesAlert.tsx
index 04281cb0b4..3f60cc1303 100644
--- a/frontend/src/cards/ui/UnknownBubblesAlert.tsx
+++ b/frontend/src/cards/ui/UnknownBubblesAlert.tsx
@@ -1,4 +1,3 @@
-import styles from './UnknownBubblesAlert.module.scss'
 import {
   type DemographicType,
   DEMOGRAPHIC_DISPLAY_TYPES_LOWER_CASE,
@@ -33,7 +32,7 @@ export default function UnknownBubblesAlert(props: UnknownBubblesAlertProps) {
       )}{' '}
       <button
         onClick={changeUnknownState}
-        className={styles.UnknownBubblesLink}
+        className='cursor-pointer border-0 bg-transparent p-0 text-alt-green underline'
         aria-label={
           'View the share of ' +
           props.fullDisplayName +
diff --git a/frontend/src/pages/ExploreData/MadLibUI.module.scss b/frontend/src/pages/ExploreData/MadLibUI.module.scss
index e95f5f3f05..883f15b37a 100644
--- a/frontend/src/pages/ExploreData/MadLibUI.module.scss
+++ b/frontend/src/pages/ExploreData/MadLibUI.module.scss
@@ -54,11 +54,6 @@
   font-style: italic;
 }
 
-.UsaButton {
-  @include buttonThatLooksLikeLink();
-  font-style: italic;
-}
-
 .TopicOrLocationSelectorPopover {
   padding: 20px;
 }
diff --git a/frontend/src/pages/ExploreData/TopicOrLocationSelector.tsx b/frontend/src/pages/ExploreData/TopicOrLocationSelector.tsx
index 73020caa0a..b9399696d3 100644
--- a/frontend/src/pages/ExploreData/TopicOrLocationSelector.tsx
+++ b/frontend/src/pages/ExploreData/TopicOrLocationSelector.tsx
@@ -177,7 +177,7 @@ export default function TopicOrLocationSelector(
                   USA_DISPLAY_NAME
                 ) : (
                   <button
-                    className={styles.UsaButton}
+                    className='cursor-pointer border-0 bg-transparent p-0 italic text-alt-green underline'
                     onClick={handleUsaButton}
                   >
                     United States
diff --git a/frontend/src/styles/globals.scss b/frontend/src/styles/globals.scss
index de83b6493e..197948a40e 100644
--- a/frontend/src/styles/globals.scss
+++ b/frontend/src/styles/globals.scss
@@ -9,15 +9,6 @@
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
 
-@mixin buttonThatLooksLikeLink {
-  text-decoration: underline;
-  background: none !important;
-  border: none !important;
-  padding: 0px;
-  color: $alt-green;
-  cursor: pointer;
-}
-
 // Font Family+Weight Options
 @mixin dmSans400 {
   font-family: 'DM Sans', sans-serif !important;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index cf2479dcc3..03d28e294f 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -18,18 +18,17 @@ export default {
     maxHeight: standardSizes,
     maxWidth: standardSizes,
     borderRadius: {
-      sm: '4px',
-      md: '8px',
-      lg: '16px',
-      xl: '30px',
+      'sm': '4px',
+      'md': '8px',
+      'lg': '16px',
+      'xl': '30px',
       '2xl': '40px',
     },
     boxShadow: {
-      raised:
+      'raised':
         'rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px',
       'raised-tighter':
         'rgba(0, 0, 0, 0.1) 0px 3px 3px -2px, rgba(0, 0, 0, 0.08) 0px 6px 7px 0px, rgba(0, 0, 0, 0.06) 0px 2px 9px 1px',
-
     },
     colors: {
       'alert-color': 'rgb(var(--alert-color) / <alpha-value>)',
@@ -101,6 +100,7 @@ export default {
       'time-purple': 'rgb(var(--time-purple) / <alpha-value>)',
       'time-yellow': 'rgb(var(--time-yellow) / <alpha-value>)',
       'toggle-color': 'rgb(var(--toggle-color) / <alpha-value>)',
+      'transparent': '#00000000',
       'unknown-map-even-more':
         'rgb(var(--unknown-map-even-more) / <alpha-value>)',
       'unknown-map-least': 'rgb(var(--unknown-map-least) / <alpha-value>)',
@@ -128,7 +128,7 @@ export default {
       sansTitle: ['DM Sans', 'sans-serif'],
       sansText: ['Inter', 'sans-serif'],
       serif: ['Taviraj', 'serif'],
-      math: ['KaTeX_Math', 'mono']
+      math: ['KaTeX_Math', 'mono'],
     },
     fontSize: {
       smallest: '0.75rem',
@@ -146,18 +146,18 @@ export default {
       biggestHeader: '4rem',
     },
     zIndex: {
-      "z-bottom": 'var(--z-bottom)',
-      "z-middle": 'var(--z-middle)',
-      "z-almost-top": 'var(--z-almost-top)',
-      "z-top": 'var(--z-top)',
+      'z-bottom': 'var(--z-bottom)',
+      'z-middle': 'var(--z-middle)',
+      'z-almost-top': 'var(--z-almost-top)',
+      'z-top': 'var(--z-top)',
     },
     extend: {
       maxHeight: {
-        aimToGo: "255px",
+        aimToGo: '255px',
       },
       maxWidth: {
-        aimToGo: "255px",
-        menu: "320px",
+        aimToGo: '255px',
+        menu: '320px',
         articleLogo: '700px',
         teamHeadshot: '181px',
         teamLogo: '250px',
@@ -167,26 +167,25 @@ export default {
         helperBox: '1200px',
       },
       minHeight: {
-        "preload-article": '750px',
+        'preload-article': '750px',
       },
       height: {
         littleHetLogo: '30px',
         joinEffortLogo: '720px',
       },
       width: {
-        littleHetLogo: '30px',
-        joinEffortLogo: '600px',
-        '90p': '90%'
+        'littleHetLogo': '30px',
+        'joinEffortLogo': '600px',
+        '90p': '90%',
       },
       padding: {
         '1p': '1%',
         '15p': '15%',
-
-      }
+      },
     },
   },
   plugins: [],
   corePlugins: {
     preflight: false,
-  }
+  },
 } satisfies Config