Next > Organize Previews: Fix background colour

danactive · Sep 12, 2023 · 2c5431e · 2c5431e
1 parent a67f041
commit 2c5431e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/next/src/components/OrganizePreviews/PreviewColumn.tsx b/next/src/components/OrganizePreviews/PreviewColumn.tsx
@@ -19,27 +19,27 @@ export const getBackgroundColor = (isDraggingOver: boolean, isDraggingFrom: bool
 }
 
 const Wrapper = styled.div<{ $isDraggingOver: boolean, $isDraggingFrom: boolean }>`
-  background-color: ${(props) => getBackgroundColor(props.$isDraggingOver, props.$isDraggingFrom)}
-  display: flex
-  flex-direction: column
-  padding: ${grid}px
-  border: ${grid}px
-  padding-bottom: 0
-  transition: background-color 0.2s ease, opacity 0.1s ease
-  user-select: none
-  width: 285px
+  background-color: ${(props) => getBackgroundColor(props.$isDraggingOver, props.$isDraggingFrom)};
+  display: flex;
+  flex-direction: column;
+  padding: ${grid}px;
+  border: ${grid}px;
+  padding-bottom: 0;
+  transition: background-color 0.2s ease, opacity 0.1s ease;
+  user-select: none;
+  width: 285px;
 `
 
 const scrollContainerHeight = 250
 
 const DropZone = styled.div`
   /* stop the list collapsing when empty */
-  min-height: ${scrollContainerHeight}px
+  min-height: ${scrollContainerHeight}px;
   /*
     not relying on the items for a margin-bottom
     as it will collapse when the list is empty
   */
-  padding-bottom: ${grid}px
+  padding-bottom: ${grid}px;
 `
 
 // eslint-disable-next-line prefer-arrow-callback

diff --git a/next/src/components/OrganizePreviews/PreviewImage.tsx b/next/src/components/OrganizePreviews/PreviewImage.tsx
@@ -31,10 +31,10 @@ function DraggableThumb({ item }: { item: Filesystem }) {
 }
 
 const Container = styled.div<{ $isDragging: boolean }>`
-  border: ${(props) => getBorderColor(props.$isDragging)} 5px solid
-  background-color: ${(props) => getBackgroundColor(props.$isDragging)}
-  box-sizing: border-box
-  padding: 4px
+  border: ${(props) => getBorderColor(props.$isDragging)} 5px solid;
+  background-color: ${(props) => getBackgroundColor(props.$isDragging)};
+  box-sizing: border-box;
+  padding: 4px;
 `
 
 function getStyle(provided: DraggableProvided, style?: React.CSSProperties) {