Remove react-md@1 (#606)

Also add an initial load progress to the list entities widget. --------- Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>
Howdju · Oct 23, 2023 · 58f0c80 · 58f0c80
1 parent 8972248
commit 58f0c80
Show file tree

Hide file tree

Showing 41 changed files with 131 additions and 861 deletions.
diff --git a/premiser-ui/package.json b/premiser-ui/package.json
@@ -165,7 +165,6 @@
     "react-flip-move": "^3.0.1",
     "react-helmet": "^6.1.0",
     "react-material-symbols": "^4.1.1",
-    "react-md": "^1.2.11",
     "react-redux": "^7.2.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

diff --git a/premiser-ui/src/App.scss b/premiser-ui/src/App.scss
@@ -31,20 +31,11 @@ body,
 p {
   line-height: 20px;
 }
-// Display link buttons with the correct color
-.md-btn.md-background--primary a {
-  color: $md-primary-background-text-color;
-}
-.md-btn.md-background--secondary a,
-#error-boundary {
-  color: $md-secondary-background-text-color;
-}
 
 .error-message,
 .error-message li,
-.error-message a,
-.md-text--error a {
-  color: $md-text-field-error-color;
+.error-message a {
+  color: $error-color;
 }
 
 b {
@@ -95,15 +86,6 @@ strong {
   color: $light-text-color;
 }
 
-#app-nav-drawer {
-  width: min(400px, $md-drawer-desktop-width);
-
-  // TODO(276) make this more like the left-nav rules
-  // The left nav drawer's rules are:
-  // On mobile devices, the width of the drawer will be calc(100vw - 56px) and a max width of 320px.
-  // On tablets and desktop screens, the width will be equal to the $md-drawer-tablet-width and $md-drawer-desktop-width but no more than 400px.
-}
-
 // This should be in react-md's _tooltips.scss, but it isn't loaded for some reason
 .inline-rel-container {
   display: inline-block;
@@ -127,35 +109,13 @@ strong {
   @include center-contents;
 }
 
-.context-menu--floating {
-  // Must be above the .justification-tree .verified icons
-  z-index: 2;
-  button {
-    background-color: white;
-  }
-  &,
-  &.md-menu-container {
-    position: absolute;
-  }
-}
-
-.md-inline-block.text-expand-toggle {
-  vertical-align: text-top;
-}
-
 .clickable {
   cursor: pointer;
   &:hover {
     text-decoration: underline;
   }
 }
 
-.md-tab-label {
-  font-family: "Oswald", sans-serif;
-  font-weight: 200;
-  font-size: 20px;
-}
-
 .selection-label {
   display: flex;
   align-items: center;

diff --git a/premiser-ui/src/CreateJustificationDialog.scss b/premiser-ui/src/CreateJustificationDialog.scss
diff --git a/premiser-ui/src/CreateJustificationDialog.tsx b/premiser-ui/src/CreateJustificationDialog.tsx
@@ -24,8 +24,6 @@ import {
   DialogFooter,
 } from "./components/dialog/Dialog";
 
-import "./CreateJustificationDialog.scss";
-
 type Props = {
   id: ComponentId;
   editorId: string;
@@ -91,7 +89,6 @@ export default function CreateJustificationDialog(props: Props) {
       id="newJustificationDialog"
       visible={visible || false}
       onRequestClose={onHide}
-      className="md-overlay--wide-dialog"
       title="Add justification"
     >
       <DialogContent>
@@ -108,7 +105,7 @@ export default function CreateJustificationDialog(props: Props) {
           }
         />
       </DialogContent>
-      <DialogFooter className="md-dialog-footer md-dialog-footer--inline">
+      <DialogFooter>
         {addNewJustificationDialogCancelButton}
         {addNewJustificationDialogSubmitButton}
       </DialogFooter>

diff --git a/premiser-ui/src/CreatePropositionPage.test.tsx b/premiser-ui/src/CreatePropositionPage.test.tsx
@@ -28,7 +28,6 @@ import {
   clickEnabledButton,
   getElementByQuerySelector,
   makeRouteComponentProps,
-  progressToBeGone,
   renderWithProviders,
   setupUserEvent,
   withFakeTimers,
@@ -483,7 +482,7 @@ describe("CreatePropositionPage", () => {
       );
 
       await waitFor(() => {
-        progressToBeGone(screen.queryByRole("progressbar"));
+        expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
       });
 
       // Use click/keyboard instead of type to trigger autocompletes.
@@ -495,7 +494,7 @@ describe("CreatePropositionPage", () => {
 
       const createButton = screen.getByRole("button", { name: /create/i });
       await waitFor(() =>
-        expect(createButton).not.toHaveClass("md-text--disabled")
+        expect(createButton).not.toHaveClass("rmd-button--disabled")
       );
 
       // Act

diff --git a/premiser-ui/src/Header.scss b/premiser-ui/src/Header.scss
@@ -6,37 +6,17 @@
     color: $light-text-color;
   }
 
-  .md-autocomplete-list {
-    * {
-      color: $primary-text-color;
-    }
-  }
-
   .mainSearchAutocomplete {
     margin-top: 10px;
     margin-left: 10px;
     padding-right: 20px;
-
-    .md-divider {
-      // Don't show the divider until the input is selected
-      background-color: inherit;
-      &:after {
-        // Make it a little smaller than the default 2px because $light-text-color is kind of bright
-        height: 1px;
-        background-color: $light-text-color;
-      }
-    }
   }
 }
 
 #main-search-container {
   flex-grow: 1;
 }
 
-a.md-title--toolbar {
-  text-decoration: none;
-}
-
 #title {
   font-family: "Orbitron", sans-serif;
   font-weight: 400;

diff --git a/premiser-ui/src/JustificationBranch.scss b/premiser-ui/src/JustificationBranch.scss
@@ -1,10 +1,9 @@
-@import "~react-md/src/scss/react-md";
-
 @import "./colors";
+@import "./components";
 @import "./grid";
 @import "./util";
 
-$slide-size: $md-btn-icon-size;
+$slide-size: $icon-button-size;
 
 .counter-justifications h3 {
   margin: $grid-gutter 0;
@@ -69,11 +68,6 @@ $slide-size: $md-btn-icon-size;
     }
   }
 
-  .md-list--menu {
-    // Menus will always be ltr
-    direction: ltr;
-  }
-
   .justification-status-text {
     text-align: right;
     display: inline-block;
@@ -82,9 +76,6 @@ $slide-size: $md-btn-icon-size;
 
   &.positivey {
     & > * > .actions {
-      // Override App.scss .md-dialog-footer--card
-      justify-content: flex-start;
-
       .rmd-icon,
       .material-symbols {
         // When positivey, the icons make more sense flipped

diff --git a/premiser-ui/src/JustificationBranch.tsx b/premiser-ui/src/JustificationBranch.tsx
@@ -329,6 +329,7 @@ function JustificationBranch({
           <Card
             key="newCounterJustificationCard"
             className="justification-card"
+            style={{ width: "100%" }}
           >
             <CardContent>
               <CounterJustificationEditor

diff --git a/premiser-ui/src/JustificationCard.tsx b/premiser-ui/src/JustificationCard.tsx
@@ -1,5 +1,4 @@
-import React, { Component, CSSProperties } from "react";
-import { Props as ReactMdProps } from "react-md/lib";
+import React, { Component, CSSProperties, MouseEventHandler } from "react";
 import cn from "classnames";
 
 import { ContextTrailItem, JustificationView } from "howdju-common";
@@ -19,7 +18,7 @@ interface Props {
   contextTrailItems?: ContextTrailItem[];
   showBasisUrls?: boolean;
   doShowTargets?: boolean;
-  onExpandCounterAncestors?: ReactMdProps["onClick"];
+  onExpandCounterAncestors?: MouseEventHandler;
   onClickWritQuoteUrl?: OnClickJustificationWritQuoteUrl;
   style?: CSSProperties;
 }

diff --git a/premiser-ui/src/JustificationChatBubble.scss b/premiser-ui/src/JustificationChatBubble.scss
@@ -13,7 +13,3 @@
     flex-grow: 1;
   }
 }
-
-.justification-context-menu {
-  align-self: flex-start;
-}
diff --git a/premiser-ui/src/JustificationEntityViewer.tsx b/premiser-ui/src/JustificationEntityViewer.tsx
@@ -1,5 +1,4 @@
-import React, { ComponentType } from "react";
-import { Props as ReactMdProps } from "react-md/lib";
+import React, { ComponentType, MouseEventHandler } from "react";
 import moment from "moment";
 import { FontIcon } from "@react-md/icon";
 
@@ -32,7 +31,7 @@ interface Props {
   contextTrailItems?: ContextTrailItem[];
   showStatusText: boolean;
   onClickWritQuoteUrl?: OnClickJustificationWritQuoteUrl;
-  onExpandCounterAncestors?: ReactMdProps["onClick"];
+  onExpandCounterAncestors?: MouseEventHandler;
   component?: ComponentType | string;
   suggestionsKey?: SuggestionsKey;
 }

diff --git a/premiser-ui/src/JustificationRootTargetCard.scss b/premiser-ui/src/JustificationRootTargetCard.scss
@@ -1,25 +1,15 @@
-@import "~react-md/src/scss/react-md";
 @import "./flatui-colors";
 @import "./colors";
 @import "./grid";
 @import "./components";
 
 $gradient-start-opacity: 0.6;
 $gradient-point: 25%;
-$slide-size: $md-btn-icon-size;
+$slide-size: $icon-button-size;
 
-// All must be less than $md-toolbar-z-index (default 15) or else they will float above the toolbar upon scrolling
-// ($md-menu-z-index is 10)
 $gradient-z-index: 5;
 $over-gradient-z-index: 10;
 
-.context-menu--root-target {
-  z-index: $over-gradient-z-index;
-  .md-list--menu {
-    z-index: $over-gradient-z-index + 1;
-  }
-}
-
 ul.target-trail {
   padding-left: 35px;
   li {
@@ -28,10 +18,6 @@ ul.target-trail {
   }
 }
 
-.context-menu {
-  float: right;
-}
-
 .entity-viewer .entity-viewer {
   margin-left: 15px;
 }
@@ -41,7 +27,7 @@ ul.target-trail {
   // https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
 
   // Provide a background color for the card, which we make transparent
-  background: get-color("card", $md-light-theme);
+  background: white;
 
   .root-target-card {
     // The z-index must apply to the children to get them over the gradient.

diff --git a/premiser-ui/src/PropositionCompoundViewerAtomItem.scss b/premiser-ui/src/PropositionCompoundViewerAtomItem.scss
@@ -18,90 +18,3 @@ li.proposition-atom {
     border: 2px solid $peter-river;
   }
 }
-
-$context-menu-horizontal-offset: -80px;
-$context-menu-vertical-offset: 40px;
-
-.context-menu--proposition-atom {
-  .proposition-justifications-justification-trees--positive & {
-    right: $context-menu-horizontal-offset;
-  }
-  .proposition-justifications-justification-trees--negative & {
-    left: $context-menu-horizontal-offset;
-  }
-  .proposition-justifications-justification-trees--combined
-    .justification-tree.positivey
-    & {
-    right: $context-menu-horizontal-offset;
-  }
-  .proposition-justifications-justification-trees--combined
-    .justification-tree.negativey
-    & {
-    left: $context-menu-horizontal-offset;
-  }
-
-  &-enter {
-    opacity: 0;
-
-    .proposition-justifications-justification-trees--positive & {
-      right: 0;
-    }
-    .proposition-justifications-justification-trees--negative & {
-      left: 0;
-    }
-    .proposition-justifications-justification-trees--combined
-      .justification-tree.positivey
-      & {
-      right: 0;
-    }
-    .proposition-justifications-justification-trees--combined
-      .justification-tree.negativey
-      & {
-      left: 0;
-    }
-  }
-  &-enter#{&}-enter-active {
-    opacity: 1;
-    transition: opacity 250ms ease-in, right 250ms, left 250ms, top 250ms;
-
-    .proposition-justifications-justification-trees--positive & {
-      right: $context-menu-horizontal-offset;
-    }
-    .proposition-justifications-justification-trees--negative & {
-      left: $context-menu-horizontal-offset;
-    }
-    .proposition-justifications-justification-trees--combined
-      .justification-tree.positivey
-      & {
-      right: $context-menu-horizontal-offset;
-    }
-    .proposition-justifications-justification-trees--combined
-      .justification-tree.negativey
-      & {
-      left: $context-menu-horizontal-offset;
-    }
-  }
-  &-leave {
-    opacity: 1;
-  }
-  &-leave#{&}-leave-active {
-    opacity: 0;
-    transition: opacity 500ms ease-in, right 500ms, left 500ms, top 500ms;
-    .proposition-justifications-justification-trees--positive & {
-      right: 0;
-    }
-    .proposition-justifications-justification-trees--negative & {
-      left: 0;
-    }
-    .proposition-justifications-justification-trees--combined
-      .justification-tree.positivey
-      & {
-      right: 0;
-    }
-    .proposition-justifications-justification-trees--combined
-      .justification-tree.negativey
-      & {
-      left: 0;
-    }
-  }
-}