style: 💄 improve threat and control description style

klarna-incubator · Aug 16, 2024 · a3ddfd4 · a3ddfd4
1 parent 322bc7e
commit a3ddfd4
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/app/src/components/model/panels/EditableDescription.js b/app/src/components/model/panels/EditableDescription.js
@@ -92,21 +92,21 @@ export const DescriptionPreview = ({
         ></Box>
       </Box>
     );
-  } else {
-    return (
-      <Box>
-        {showTitle && (
-          <Typography variant="body1" sx={{ ...titleSx }}>
-            Description
-          </Typography>
-        )}
-        <Box
-          dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
-          sx={{ ...boxSx }}
-        ></Box>
-      </Box>
-    );
   }
+
+  return (
+    <Box>
+      {showTitle && (
+        <Typography variant="body1" sx={{ ...titleSx }}>
+          Description
+        </Typography>
+      )}
+      <Box
+        dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+        sx={{ ...boxSx }}
+      ></Box>
+    </Box>
+  );
 };
 
 export const EditableDescription = ({
@@ -115,6 +115,7 @@ export const EditableDescription = ({
   updateDescription,
   placeholder = "",
   showInputLabel = true,
+  inputSx = {},
   showPreviewTitle = false,
   previewSx = {},
   previewTitleSx = {},
@@ -145,7 +146,18 @@ export const EditableDescription = ({
   };
 
   if (readOnly) {
-    return <DescriptionPreview description={description} />;
+    return (
+      <DescriptionPreview
+        showTitle={showPreviewTitle}
+        description={description}
+        titleSx={{ ...previewTitleSx, color: "rgba(255, 255, 255, 0.5)" }}
+        boxSx={{
+          ...previewSx,
+          color: "rgba(255, 255, 255, 0.5)",
+          borderColor: "rgba(255, 255, 255, 0.5)",
+        }}
+      />
+    );
   }
 
   if (isEditing) {
@@ -162,6 +174,9 @@ export const EditableDescription = ({
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={(e) => handleOnKeyDown(e)}
         inputRef={descriptionInput}
+        inputProps={{
+          style: { ...inputSx },
+        }}
       />
     );
   } else {

diff --git a/app/src/components/model/panels/right/Control.js b/app/src/components/model/panels/right/Control.js
@@ -169,9 +169,14 @@ export function Control(props) {
               updateDescription={updateDescription}
               readOnly={readOnly}
               showInputLabel={false}
+              inputSx={{
+                color: "rgba(255, 255, 255, 0.7)",
+                fontSize: "0.75rem",
+                lineHeight: "1.5",
+              }}
               previewSx={{
                 paddingBottom: "10px",
-                lineHeight: "1.45",
+                lineHeight: "1.5",
                 fontSize: "0.75rem",
                 color: "text.secondary",
               }}

diff --git a/app/src/components/model/panels/right/Suggestion.js b/app/src/components/model/panels/right/Suggestion.js
@@ -15,7 +15,10 @@ import {
 } from "../../../../api/gram/suggestions";
 import { useModelID } from "../../hooks/useModelID";
 import { useSelectedComponent } from "../../hooks/useSelectedComponent";
-import { DescriptionPreview } from "../EditableDescription";
+import {
+  DescriptionPreview,
+  EditableDescription,
+} from "../EditableDescription";
 
 function SuggestionMitigations({ suggestion, threatSuggestions }) {
   const threatsMitigated = suggestion?.mitigates?.filter((m) =>
@@ -88,6 +91,7 @@ export function Suggestion({ suggestion, rejected, readOnly, isControl }) {
                   paddingBottom: "10px",
                   lineHeight: "1.45",
                   fontSize: "0.75rem",
+                  color: "rgba(255, 255, 255, 0.7)",
                 }}
               />
             )}

diff --git a/app/src/components/model/panels/right/Threat.js b/app/src/components/model/panels/right/Threat.js
@@ -241,9 +241,14 @@ export function Threat({
               updateDescription={updateDescription}
               readOnly={readOnly}
               showInputLabel={false}
+              inputSx={{
+                color: "rgba(255, 255, 255, 0.7)",
+                fontSize: "0.75rem",
+                lineHeight: "1.5",
+              }}
               previewSx={{
                 paddingBottom: "10px",
-                lineHeight: "1.45",
+                lineHeight: "1.5",
                 fontSize: "0.75rem",
                 color: "text.secondary",
               }}