Refactor response history item removal UI by renaming the wrapper element and adjusting associated styles

Author: robertpiosik

packages/ui/src/components/editor/panel/Responses/Responses.module.scss

@@ -96,7 +96,7 @@
       }
     }
 
-    &__remove-wrapper {
+    &__remove {
       position: absolute;
       display: flex;
       height: 100%;
@@ -108,17 +108,17 @@
         transparent
       );
       padding-left: 10px;
-    }
 
-    &__remove {
-      display: flex;
+      &__button {
+        display: flex;
 
-      > span {
-        opacity: var(--dimmed-opacity);
-      }
+        > span {
+          opacity: var(--dimmed-opacity);
+        }
 
-      &:hover > span {
-        opacity: 1;
+        &:hover > span {
+          opacity: 1;
+        }
       }
     }
 

packages/ui/src/components/editor/panel/Responses/Responses.tsx

@@ -110,9 +110,9 @@ export const Responses: React.FC<Props> = (props) => {
               </span>
             </div>
           </div>
-          <div className={styles['responses__item__remove-wrapper']}>
+          <div className={styles['responses__item__remove']}>
             <button
-              className={styles['responses__item__remove']}
+              className={styles['responses__item__remove__button']}
               onClick={() => {
                 props.on_response_history_item_remove(item.created_at)
               }}