2 files changed, 44 insertions, 75 deletions

diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.scss b/src/client/views/newlightbox/components/EditableText/EditableText.scss
index 7828538ab..8007e8d43 100644
--- a/src/client/views/newlightbox/components/EditableText/EditableText.scss
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.scss
@@ -1,34 +1,34 @@
-@import '../../NewLightboxStyles.scss';
+@use '../../NewLightboxStyles.scss' as newstyles;
 
 .lb-editableText,
 .lb-displayText {
     padding: 4px 7px !important;
-    border: $standard-border !important;
-    border-color: $gray-l2 !important;
+    border: newstyles.$standard-border !important;
+    border-color: newstyles.$gray-l2 !important;
 }
 
 .lb-editableText {
-  -webkit-appearance: none;
-  overflow: hidden;
-  font-size: inherit;
-  border: none;
-  outline: none;
-  width: 100%;
-  margin: 0px;
-  padding: 0px;
-  box-shadow: none !important;
-  background: none;
-
-  &:focus {
+    -webkit-appearance: none;
+    overflow: hidden;
+    font-size: inherit;
+    border: none;
     outline: none;
-    background-color: $blue-l1;
-  }
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+    box-shadow: none !important;
+    background: none;
+
+    &:focus {
+        outline: none;
+        background-color: newstyles.$blue-l1;
+    }
 }
 
 .lb-displayText {
-  cursor: text !important;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  font-size: inherit;
-}
\ No newline at end of file
+    cursor: text !important;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    font-size: inherit;
+}
diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.tsx b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
index e9e7ca264..cff84e990 100644
--- a/src/client/views/newlightbox/components/EditableText/EditableText.tsx
+++ b/src/client/views/newlightbox/components/EditableText/EditableText.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react'
-import './EditableText.scss'
-import { Size } from 'browndash-components'
+import * as React from 'react';
+import './EditableText.scss';
+import { Size } from '@dash/components';
 
 export interface IEditableTextProps {
-  text: string
-  placeholder?: string
-  editing: boolean
-  onEdit: (newText: string) => void
-  setEditing: (editing: boolean) => void
-  backgroundColor?: string
-  size?: Size
-  height?: number
+    text: string;
+    placeholder?: string;
+    editing: boolean;
+    onEdit: (newText: string) => void;
+    setEditing: (editing: boolean) => void;
+    backgroundColor?: string;
+    size?: Size;
+    height?: number;
 }
 
 /**
@@ -20,46 +20,15 @@ export interface IEditableTextProps {
  * @returns
  */
 export const EditableText = (props: IEditableTextProps) => {
-  const {
-    editing,
-    height,
-    size,
-    text,
-    onEdit,
-    setEditing,
-    backgroundColor,
-    placeholder,
-  } = props
+    const { editing, height, text, onEdit, setEditing, backgroundColor, placeholder } = props;
 
-  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onEdit(event.target.value)
-  }
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        onEdit(event.target.value);
+    };
 
-  return editing ? (
-    <input
-      style={{ background: backgroundColor, height: height }}
-      placeholder={placeholder}
-      size={1}
-      className="lb-editableText"
-      autoFocus
-      onChange={handleOnChange}
-      onBlur={() => setEditing(false)}
-      defaultValue={text}
-    ></input>
-  ) : (
-    <input
-      style={{ background: backgroundColor, height: height }}
-      placeholder={placeholder}
-      size={1}
-      className="lb-editableText"
-      autoFocus
-      onChange={handleOnChange}
-      onBlur={() => setEditing(false)}
-      defaultValue={text}
-    ></input>
-    // <div className="lb-displayText" onClick={(e) => {
-    //     e.stopPropagation()
-    //     setEditing(true)
-    // }}>{text}</div>
-  )
-}
+    return editing ? (
+        <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
+    ) : (
+        <input style={{ background: backgroundColor, height: height }} placeholder={placeholder} size={1} className="lb-editableText" autoFocus onChange={handleOnChange} onBlur={() => setEditing(false)} defaultValue={text}></input>
+    );
+};