From 1d9b0c727050bc8f6edab8fc2b67f0fd9c66f323 Mon Sep 17 00:00:00 2001
From: hadijahkyampeire <hadijah315@gmail.com>
Date: Sun, 30 Jul 2023 02:43:53 +0300
Subject: [PATCH] - some tweaks

---
 .../draggable-question.component.tsx          | 19 +++++++++---------
 .../draggable-question.scss                   | 20 +++++++++++++++++--
 .../droppable-container.component.tsx         |  2 +-
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
index 446be3a..9cf22f8 100644
--- 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
index f4a600b..b2c2dcd 100644
--- 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
index ca48ebb..ff6955f 100644
--- 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 (