Converted SCSS to JSS in ProjectDescriptions.js (#1602)

* Converted SCSS to JSS in ProjectSpecifications.js * Converted SCSS to JSS in ProjectDescriptions.js
hackforla · Feb 1, 2024 · 570bcd2 · 570bcd2
1 parent feb9437
commit 570bcd2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectDescriptions.js b/client/src/components/ProjectWizard/WizardPages/ProjectDescriptions.js
@@ -2,10 +2,24 @@ import React from "react";
 import PropTypes from "prop-types";
 import RuleInputPanels from "../RuleInput/RuleInputPanels";
 import DiscoverTooltips from "./DiscoverTooltips";
-import { useTheme } from "react-jss";
+import { createUseStyles, useTheme } from "react-jss";
+
+const useStyles = createUseStyles({
+  disclaimer: {
+    fontStyle: "normal",
+    fontWeight: "400",
+    position: "relative",
+    textAlign: "center",
+    top: "20px"
+  },
+  asterisk: {
+    color: "red"
+  }
+});
 
 function ProjectDescriptions(props) {
   const { rules, onInputChange, onAINInputError } = props;
+  const classes = useStyles();
   const theme = useTheme();
   return (
     <div>
@@ -27,10 +41,9 @@ function ProjectDescriptions(props) {
           showPlaceholder={true}
         />
       </form>
-      <div className="tdm-wizard-page-disclaimer">
+      <div className={classes.disclaimer}>
         <DiscoverTooltips />
-        <span className="tdm-wizard-page-disclaimer-asterisk">*</span>{" "}
-        designates required fields
+        <span className={classes.asterisk}>*</span> designates required fields
       </div>
     </div>
   );

diff --git a/client/src/components/ProjectWizard/WizardPages/ProjectSpecifications.js b/client/src/components/ProjectWizard/WizardPages/ProjectSpecifications.js
@@ -17,6 +17,15 @@ const useStyles = createUseStyles(theme => ({
   alignRight: {
     gridColumn: "h-end",
     justifyContent: "flex-end"
+  },
+  subtitle: {
+    marginTop: "0.5em",
+    marginBottom: "1em",
+    textAlign: "center",
+    fontWeight: "normal",
+    fontStyle: "normal",
+    fontSize: "20px",
+    lineHeight: "140%"
   }
 }));
 
@@ -26,7 +35,7 @@ function ProjectSpecifications(props) {
   return (
     <div>
       <div className={classes.header}>Determine Project Level</div>
-      <h3 className="tdm-wizard-page-subtitle">
+      <h3 className={classes.subtitle}>
         Project Level (left panel) and Citywide Parking Baseline (next page) are
         determined by the use specifications entered below.
       </h3>