clean up question list

frontend/src/metabase/css/core/hover.css

-.hover-parent.hover--display .hover-child       { display: none; }
+
+/*
+  display
+  hide and show a child element using display
+*/
+.hover-parent.hover--display .hover-child,
+.hover-parent:hover.hover--display .hover-child--hidden { display: none; }
+
 .hover-parent:hover.hover--display .hover-child { display: block; }
 
-.hover-parent.hover--visibility .hover-child       { visibility: hidden; }
+/*
+  visibility
+  hide and show a child element using visibility
+*/
+.hover-parent.hover--visibility .hover-child,
+.hover-parent:hover.hover--visibility .hover-child--hidden { visibility: hidden; }
+
 .hover-parent:hover.hover--visibility .hover-child { visibility: visible; }

frontend/src/metabase/questions/components/Item.jsx

@@ -12,38 +12,51 @@ import Tooltip from "metabase/components/Tooltip.jsx";
 
 import Urls from "metabase/lib/urls";
 
+const ITEM_ICON_SIZE = 20;
 
 const Item = ({ id, description, name, created, by, selected, favorite, archived, icon, setItemSelected, setFavorited, setArchived }) =>
-    <div className={cx('hover-parent hover--visibility', S.item, { [S.selected]: selected, [S.favorite]: favorite, [S.archived]: archived })}>
-        <div className={S.leftIcons}>
-            { icon && <Icon className={S.chartIcon} name={icon} size={20} /> }
-            <CheckBox
-                checked={selected}
-                onChange={(e) => setItemSelected({ [id]: e.target.checked })}
-                className={S.itemCheckbox}
-                size={20}
-                padding={3}
-                borderColor="currentColor"
-                invertChecked
+    <div className={cx('hover-parent hover--visibility', S.item)}>
+        <div className="flex flex-full align-center">
+            <div className="relative flex ml1 mr2" style={{ width: ITEM_ICON_SIZE, height: ITEM_ICON_SIZE }}>
+                { icon &&
+                    <Icon
+                        className="text-light-blue absolute top left visible hover-child--hidden"
+                        name={icon}
+                        size={ITEM_ICON_SIZE}
+                    />
+                }
+                <CheckBox
+                    className={cx(
+                        "cursor-pointer absolute top left",
+                        { "visible text-brand": selected },
+                        { "hover-child text-brand-hover text-light-blue transition-color": !selected }
+                    )}
+                    checked={selected}
+                    onChange={(e) => setItemSelected({ [id]: e.target.checked })}
+                    size={ITEM_ICON_SIZE}
+                    padding={3}
+                    borderColor="currentColor"
+                    invertChecked
+                />
+            </div>
+            <ItemBody
+                description={description}
+                id={id}
+                name={name}
+                setFavorited={setFavorited}
+                favorite={favorite}
             />
         </div>
-        <ItemBody
-            description={description}
-            id={id}
-            name={name}
-            setFavorited={setFavorited}
-            favorite={favorite}
-        />
-        <div>
+        <div className="flex flex-column ml-auto">
             <ItemCreated
                 by={by}
                 created={created}
             />
-            <div className="hover-child flex ml-auto">
+            <div className="hover-child mt1 ml-auto">
                 <Tooltip tooltip="Move to a collection">
                     <Link to={`/questions/${id}/move`}>
                         <Icon
-                            className="cursor-pointer text-brand-hover transition-color mx1"
+                            className="text-light-blue cursor-pointer text-brand-hover transition-color mx2"
                             name="move"
                             size={18}
                         />
@@ -51,7 +64,7 @@ const Item = ({ id, description, name, created, by, selected, favorite, archived
                 </Tooltip>
                 <Tooltip tooltip={archived ? "Unarchive" : "Archive"}>
                     <Icon
-                        className="cursor-pointer text-brand-hover transition-color"
+                        className="text-light-blue cursor-pointer text-brand-hover transition-color"
                         name={ archived ? "unarchive" : "archive"}
                         onClick={() => setArchived(id, !archived, true)}
                         size={18}
@@ -78,14 +91,19 @@ Item.propTypes = {
 
 const ItemBody = pure(({ id, name, description, favorite, setFavorited }) =>
     <div className={S.itemBody}>
-        <div className={cx('flex align-center', S.itemTitle)}>
+        <div className={cx('flex', S.itemTitle)}>
             <Link to={Urls.card(id)} className={cx(S.itemName)}>
                 {name}
             </Link>
             <Tooltip tooltip={favorite ? "Unfavorite" : "Favorite"}>
                 <Icon
-                    className={S.favoriteIcon}
-                    name="star" size={20}
+                    className={cx(
+                        "flex cursor-pointer text-brand-hover transition-color",
+                        {"hover-child text-light-blue": !favorite},
+                        {"visible text-brand": favorite}
+                    )}
+                    name={favorite ? "star" : "staroutline"}
+                    size={ITEM_ICON_SIZE}
                     onClick={() => setFavorited(id, !favorite) }
                 />
             </Tooltip>

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

@@ -38,7 +38,6 @@
 
 :local(.itemTitle) {
     composes: text-bold from "style";
-    composes: inline-block from "style";
     color: var(--title-color);
     font-size: 18px;
 }
@@ -61,97 +60,9 @@
     color: var(--title-color);
 }
 
-:local(.icons) {
-    composes: flex flex-row align-center from "style";
-}
-:local(.leftIcons) {
-    composes: icons;
-    width: 50px;
-}
-:local(.rightIcons) {
-    composes: icons;
-}
-
-:local(.extraIcons) {
-    composes: icons;
-    composes: absolute top full-height from "style";
-    right: -40px;
-}
-
-/* hack fix for IE 11 which was hiding the archive icon */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  :local(.extraIcons) {
-      composes: icons;
-  }
-}
-
-:local(.icon) {
-    composes: relative cursor-pointer from "style";
-    color: var(--muted-color);
-}
-
-:local(.item) :local(.icon) {
-    visibility: hidden;
-}
-:local(.item):hover :local(.icon) {
-    visibility: visible;
-}
-:local(.icon):hover {
-    color: var(--blue-color);
-    transition: color .3s linear;
-}
-
-/* ITEM CHECKBOX */
-:local(.itemCheckbox) {
-    composes: icon;
-    display: none;
-    visibility: visible !important;
-    margin-left: 10px;
-}
-:local(.item):hover :local(.itemCheckbox),
-:local(.item.selected) :local(.itemCheckbox) {
-    display: inline;
-}
-:local(.item.selected) :local(.itemCheckbox) {
-    color: var(--blue-color);
-}
-
-/* CHART ICON */
-:local(.chartIcon) {
-    composes: icon;
-    visibility: visible !important;
-    composes: relative from "style";
-}
-:local(.item):hover :local(.chartIcon),
-:local(.item.selected) :local(.chartIcon) {
-    display: none;
-}
-
-/* ACTION ICONS */
-:local(.tagIcon),
-:local(.favoriteIcon),
-:local(.archiveIcon) {
-    composes: icon;
-    composes: mx1 from "style";
-}
-
 /* TAG */
 :local(.open) :local(.tagIcon) {
     visibility: visible;
     color: var(--blue-color);
 }
 
-/* FAVORITE */
-:local(.item.favorite) :local(.favoriteIcon) {
-    visibility: visible;
-    color: var(--blue-color);
-}
-
-/* ARCHIVE */
-:local(.item.archived) :local(.archiveIcon) {
-    color: var(--blue-color);
-}
-
-:local(.trigger) {
-    line-height: 0;
-}