Cleanup css modules usage (#39646)

* Cleanup css modules usage

* fixup! Cleanup css modules usage

* fixup! fixup! Cleanup css modules usage

* revert one class

frontend/src/metabase/components/LabelIcon/LabelIcon.module.css

@@ -5,11 +5,6 @@
   border-radius: 3px;
 }
 
-.emojiIcon {
-  text-align: center;
-  font-size: 20px;
-}
-
 .icon {
   composes: transition-color from "style";
   color: currentColor;

frontend/src/metabase/components/List/List.module.css

@@ -31,13 +31,6 @@
   border-color: var(--color-brand);
 }
 
-.headerLink {
-  composes: ml2 from "style";
-  flex-shrink: 0;
-  color: var(--color-brand);
-  font-size: 14px;
-}
-
 .headerButton {
   composes: ml1 from "style";
   align-items: center;
@@ -75,31 +68,14 @@
   font-size: 14px;
 }
 
-.itemSubtitleLight {
-  composes: text-light from "style";
-  font-size: 14px;
-}
-
-.itemSubtitleBold {
-  color: var(--title-color);
-}
-
-.icons {
-  flex-direction: row;
-  align-items: center;
-  display: flex;
-}
-
 .leftIcons {
   composes: mr2 from "style";
   align-self: flex-start;
   flex-shrink: 0;
   display: flex;
-  composes: icons;
-}
-
-.rightIcons {
-  composes: icons;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
 }
 
 .itemIcons {
@@ -107,21 +83,6 @@
   padding-top: 4px;
 }
 
-.extraIcons {
-  composes: icons;
-  top: 0;
-  position: absolute;
-  height: 100%;
-  right: -40px;
-}
-
-/* hack fix for IE 11 which was hiding the archive icon */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  .extraIcons {
-    composes: icons;
-  }
-}
-
 .icon {
   position: relative;
   color: var(--muted-color);
@@ -139,50 +100,9 @@
   color: var(--color-brand);
 }
 
-/* ITEM CHECKBOX */
-.itemCheckbox {
-  composes: icon;
-  display: none;
-  visibility: visible !important;
-  margin-left: 10px;
-}
-
-.item:hover .itemCheckbox,
-.item.selected .itemCheckbox {
-  display: inline;
-}
-
-.item.selected .itemCheckbox {
-  color: var(--color-brand);
-}
-
-/* ITEM ICON */
-.itemIcon {
-  composes: icon;
-  visibility: visible !important;
-  position: relative;
-}
-
-.item:hover .itemIcon,
-.item.selected .itemIcon {
-  display: none;
-}
-
 /* CHART ICON */
 .chartIcon {
   composes: icon;
   visibility: visible !important;
   position: relative;
 }
-
-/* ACTION ICONS */
-.tagIcon,
-.favoriteIcon,
-.archiveIcon {
-  composes: icon;
-  composes: mx1 from "style";
-}
-
-.trigger {
-  line-height: 0;
-}

frontend/src/metabase/components/ListItem/ListItem.jsx

@@ -26,11 +26,7 @@ const ListItem = ({
         </div>
         <div className={S.itemBody}>
           <div className={S.itemTitle}>
-            <ListItemName
-              className={S.itemName}
-              tooltip={name}
-              tooltipMaxWidth="100%"
-            >
+            <ListItemName tooltip={name} tooltipMaxWidth="100%">
               <h3>{name}</h3>
             </ListItemName>
           </div>

frontend/src/metabase/components/Sidebar.module.css

@@ -10,8 +10,7 @@
   text-decoration: none;
 }
 
-.item,
-.sectionTitle {
+.item {
   composes: py1 mb1 from "style";
   align-items: center;
   display: flex;
@@ -27,32 +26,20 @@
   line-height: 1em;
 }
 
-.sectionTitle {
-  composes: my1 text-bold from "style";
-  font-size: 16px;
-}
-
-.item:hover,
-.sectionTitle:hover {
+.item:hover {
   background-color: var(--color-bg-medium);
   color: var(--color-brand);
 }
 
 .item.selected,
-.item.selected .icon,
-.sectionTitle.selected {
+.item.selected .icon {
   color: var(--color-brand);
 }
 
-.item.selected,
-.sectionTitle.selected {
+.item.selected {
   background-color: rgba(80, 158, 227, 0.15);
 }
 
-.divider {
-  composes: my2 border-bottom from "style";
-}
-
 .name {
   composes: ml2 text-bold from "style";
   color: var(--color-text-medium);

frontend/src/metabase/parameters/components/ParameterValueWidget.module.css

@@ -7,33 +7,6 @@
   color: var(--color-text-medium);
 }
 
-.nameInput {
-  align-items: center;
-  display: flex;
-  min-height: 30px;
-  min-width: 150px;
-  color: var(--color-text-medium);
-  border: none;
-  font-size: 1em;
-  font-weight: 600;
-}
-
-.fullscreen {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.fullscreen .name {
-  font-size: 14px;
-}
-
-.fullscreen .parameter {
-  min-width: 0;
-  min-height: 0;
-  background-color: transparent;
-  font-size: 14px;
-}
-
 .parameter.selected {
   font-weight: bold;
   color: var(--color-brand);
@@ -90,47 +63,9 @@
   color: var(--color-text-white);
 }
 
-.nameInput:focus,
-.input:focus {
-  outline: none;
-}
-
 .name {
   composes: mr1 from "style";
   font-size: 16px;
   font-weight: bold;
   color: var(--color-text-medium);
 }
-
-.parameterButtons {
-  display: flex;
-  justify-content: space-around;
-  font-size: smaller;
-}
-
-.editButton,
-.removeButton {
-  cursor: pointer;
-  align-items: center;
-  display: flex;
-}
-
-.editButton:hover {
-  color: var(--color-brand);
-}
-
-.removeButton:hover {
-  color: var(--color-error);
-}
-
-.editNameIconContainer {
-  display: inline-block;
-  height: 0;
-  margin-left: 0.25em;
-  width: 10px;
-}
-
-.editNameIconContainer > svg {
-  position: absolute;
-  top: -6px;
-}

frontend/src/metabase/reference/components/Detail.jsx

@@ -20,13 +20,7 @@ const Detail = ({
   <div className={cx(S.detail)}>
     <div className={isEditing ? cx(S.detailBody, "flex-full") : S.detailBody}>
       <div className={S.detailTitle}>
-        {url ? (
-          <Link to={url} className={S.detailName}>
-            {name}
-          </Link>
-        ) : (
-          <span className={S.detailName}>{name}</span>
-        )}
+        {url ? <Link to={url}>{name}</Link> : <span>{name}</span>}
       </div>
       <div
         className={cx(description ? S.detailSubtitle : S.detailSubtitleLight)}

frontend/src/metabase/reference/components/Field.module.css

@@ -23,11 +23,6 @@
   font-size: 14px;
 }
 
-.fieldSelect {
-  composes: input p1 from "style";
-  display: block;
-}
-
 .fieldType {
   composes: text-medium pr2 from "style";
   flex: 0.25;

frontend/src/metabase/reference/components/ReferenceHeader.jsx

@@ -34,6 +34,8 @@ const ReferenceHeader = ({
         </Ellipsified>
 
         {headerLink && (
+          /* TODO: there is only L.headerButton, so either change to
+          L.headerButton or remove */
           <div key="2" className={cx("flex-full", S.headerButton)}>
             <Link
               to={headerLink}

frontend/src/metabase/reference/components/ReferenceHeader.module.css

@@ -18,25 +18,6 @@
   max-width: 550px;
 }
 
-.subheader {
-  composes: mt1 mb2 from "style";
-}
-
-.subheaderBody {
-  composes: text-medium text-bold from "style";
-  font-size: 14px;
-}
-
-.subheaderLink {
-  color: var(--color-brand);
-  text-decoration: none;
-}
-
-.subheaderLink:hover {
-  color: var(--color-brand);
-  transition: color 0.3s linear;
-}
-
 .headerSchema {
   composes: text-light from "style";
   position: absolute;

frontend/src/metabase/reference/databases/DatabaseSidebar.jsx

@@ -11,7 +11,7 @@ import SidebarItem from "metabase/components/SidebarItem";
 const DatabaseSidebar = ({ database, style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
     <ul>
-      <div className={S.breadcrumbs}>
+      <div>
         <Breadcrumbs
           className="py4 ml3"
           crumbs={[[t`Databases`, "/reference/databases"], [database.name]]}

frontend/src/metabase/reference/databases/FieldSidebar.jsx

@@ -12,7 +12,7 @@ import MetabaseSettings from "metabase/lib/settings";
 const FieldSidebar = ({ database, table, field, style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
     <ul>
-      <div className={S.breadcrumbs}>
+      <div>
         <Breadcrumbs
           className="py4 ml3"
           crumbs={[

frontend/src/metabase/reference/databases/TableSidebar.jsx

@@ -11,7 +11,7 @@ import MetabaseSettings from "metabase/lib/settings";
 
 const TableSidebar = ({ database, table, style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
-    <div className={S.breadcrumbs}>
+    <div>
       <Breadcrumbs
         className="py4 ml3"
         crumbs={[

frontend/src/metabase/reference/guide/BaseSidebar.jsx

@@ -10,7 +10,7 @@ import SidebarItem from "metabase/components/SidebarItem";
 
 const BaseSidebar = ({ style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
-    <div className={S.breadcrumbs}>
+    <div>
       <Breadcrumbs
         className="py4 ml3"
         crumbs={[[t`Data Reference`]]}

frontend/src/metabase/reference/metrics/MetricSidebar.jsx

@@ -12,7 +12,7 @@ import MetabaseSettings from "metabase/lib/settings";
 const MetricSidebar = ({ metric, user, style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
     <ul>
-      <div className={S.breadcrumbs}>
+      <div>
         <Breadcrumbs
           className="py4 ml3"
           crumbs={[[t`Metrics`, "/reference/metrics"], [metric.name]]}

frontend/src/metabase/reference/segments/SegmentFieldSidebar.jsx

@@ -11,7 +11,7 @@ import SidebarItem from "metabase/components/SidebarItem";
 const SegmentFieldSidebar = ({ segment, field, style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
     <ul className="mx3">
-      <div className={S.breadcrumbs}>
+      <div>
         <Breadcrumbs
           className="py4"
           crumbs={[

frontend/src/metabase/reference/segments/SegmentSidebar.jsx

@@ -12,7 +12,7 @@ import MetabaseSettings from "metabase/lib/settings";
 const SegmentSidebar = ({ segment, user, style, className }) => (
   <div className={cx(S.sidebar, className)} style={style}>
     <ul>
-      <div className={S.breadcrumbs}>
+      <div>
         <Breadcrumbs
           className="py4 ml3"
           crumbs={[[t`Segments`, "/reference/segments"], [segment.name]]}

frontend/src/metabase/visualizations/visualizations/PieChart/PieChart.module.css

@@ -32,7 +32,3 @@
   font-weight: bold;
   text-transform: uppercase;
 }
-
-.Donut path {
-  transition: opacity 0.3s linear;
-}