Merge branch 'develop' into feature/undo-gzip-messages

ingef · Jan 22, 2024 · 4d3d99b · 4d3d99b
2 parents 2acf37a + 068eac2
commit 4d3d99b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/frontend/src/js/button/IconButton.tsx b/frontend/src/js/button/IconButton.tsx
@@ -72,7 +72,7 @@ const SxBasicButton = styled(BasicButton)<{
     opacity: 1;
 
     background-color: ${({ frame, bgHover, theme }) =>
-      frame || bgHover ? theme.col.grayVeryLight : " inherit"};
+      frame || bgHover ? theme.col.bgAlt : " inherit"};
   }
 
   &:disabled {

diff --git a/frontend/src/js/external-forms/form-components/DropzoneList.tsx b/frontend/src/js/external-forms/form-components/DropzoneList.tsx
@@ -109,7 +109,11 @@ const DropzoneList = <DroppableObject extends PossibleDroppableObject>(
                 />
               )}
               <ListItem>
-                <StyledIconButton icon={faTimes} onClick={() => onDelete(i)} />
+                <StyledIconButton
+                  bgHover
+                  icon={faTimes}
+                  onClick={() => onDelete(i)}
+                />
                 {item}
               </ListItem>
             </ConceptContainer>

diff --git a/frontend/src/js/external-forms/form-components/DynamicInputGroup.tsx b/frontend/src/js/external-forms/form-components/DynamicInputGroup.tsx
@@ -14,23 +14,25 @@ interface PropsT {
 }
 
 const Container = styled.div`
+  padding: 4px;
   display: flex;
   flex-wrap: wrap;
+  gap: 8px;
 `;
 
-const AddBtn = styled(IconButton)``;
-
 const RemoveBtn = styled(IconButton)`
   position: absolute;
-  top: -5px;
+  top: -7px;
   right: -7px;
+  opacity: 1;
+  z-index: 1;
   background-color: white;
 `;
 
 const GroupItem = styled("div")`
   padding: 2px 2px 2px 0;
   position: relative;
-  margin: 0 5px 5px 0;
+  max-width: 200px;
 `;
 
 const DynamicInputGroup = ({
@@ -59,11 +61,18 @@ const DynamicInputGroup = ({
             you can also just delete the following constraint:
            */}
           {limit !== 1 && (
-            <RemoveBtn tiny icon={faTimes} onClick={() => onRemoveClick(idx)} />
+            <RemoveBtn
+              bgHover
+              tiny
+              icon={faTimes}
+              onClick={() => onRemoveClick(idx)}
+            />
           )}
         </GroupItem>
       ))}
-      {limitNotReached && <AddBtn icon={faPlus} tiny onClick={onAddClick} />}
+      {limitNotReached && (
+        <IconButton bgHover icon={faPlus} tiny onClick={onAddClick} />
+      )}
     </Container>
   );
 };

diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptGroup.tsx
@@ -90,8 +90,6 @@ interface Props {
   rowPrefixFieldname?: string;
 }
 
-const DropzoneListItem = styled("div")``;
-
 const Row = styled("div")`
   display: flex;
   align-items: center;
@@ -316,7 +314,7 @@ const FormConceptGroup = (props: Props) => {
           );
         }}
         items={props.value.map((row, i) => (
-          <DropzoneListItem>
+          <div>
             {props.renderRowPrefix
               ? props.renderRowPrefix({
                   value: props.value,
@@ -459,7 +457,7 @@ const FormConceptGroup = (props: Props) => {
                 ),
               )}
             />
-          </DropzoneListItem>
+          </div>
         ))}
       />
       {isCopyModalOpen && (