- some tweaks

openmrs · Jul 29, 2023 · 1d9b0c7 · 1d9b0c7
1 parent 12c9550
commit 1d9b0c7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 12 deletions.
diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
@@ -42,22 +42,23 @@ export const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     });
   const style = {
     transform: CSS.Translate.toString(transform),
-    cursor: isDragging ? "grabbing" : "grab",
   };
+
   const dragStyles = isDragging ? styles.isDragged : styles.normal;
 
   return (
     <div className={dragStyles} style={style}>
-      <div
-        className={styles.questionContainer}
-        ref={setNodeRef}
-        {...attributes}
-        {...listeners}
-      >
-        <Draggable className={styles.draggableIcon} />
+      <div className={styles.iconAndName}>
+        <div
+          className={styles.dragIconContainer}
+          ref={setNodeRef}
+          {...attributes}
+          {...listeners}
+        >
+          <Draggable className={styles.dragIcon} size={16} />
+        </div>
         <p className={styles.questionLabel}>{question.label}</p>
       </div>
-
       <div className={styles.buttonsContainer}>
         <Button
           kind="ghost"

diff --git a/src/components/interactive-builder/draggable-question.scss b/src/components/interactive-builder/draggable-question.scss
@@ -7,7 +7,7 @@
   align-items: center;
 }
 
-.questionContainer {
+.iconAndName {
   display: flex;
   align-items: center;
 }
@@ -30,6 +30,22 @@
   background-color: rgba(255, 255, 255, 0.552);
 }
 
-.draggableIcon {
+.dragIconContainer {
+  cursor: pointer;
+  margin-right: spacing.$spacing-03;
+
+
+
+  :hover {
+    background-color: $ui-02;
+  }
+}
+.dragIcon {
   margin: 0 spacing.$spacing-03;
+  padding: 0.25rem;
+  color: $ui-04;
+  margin-top: 0.2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
 }
diff --git a/src/components/interactive-builder/droppable-container.component.tsx b/src/components/interactive-builder/droppable-container.component.tsx
@@ -12,7 +12,7 @@ export function Droppable({ id, children }: DroppableProps) {
   });
 
   const style = {
-    border: `1px solid ${isOver ? "#3ddbd9" : "transparent"}`,
+    border: `1px solid ${isOver ? "#005d5d" : "transparent"}`,
   };
 
   return (