updated exisitng components

src/components/Container.ts

@@ -57,6 +57,7 @@ export const Value = styled.div<{ width?: string }>`
 `;
 
 export const FlexWrapper = styled.div`
+    width: 100%;
     display: flex;
     text-align: center;
     justify-content: center;

src/components/pages/gallery/CollectionOptions.tsx

@@ -21,6 +21,28 @@ interface Props {
     showCollectionShareModal: () => void;
     redirectToAll: () => void;
 }
+
+export const MenuLink = (props) => (
+    <LinkButton
+        style={{ fontSize: '14px', fontWeight: 700, padding: '8px 1em' }}
+        {...props}>
+        {props.children}
+    </LinkButton>
+);
+
+export const MenuItem = (props) => (
+    <ListGroup.Item
+        style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: '#282828',
+            padding: 0,
+        }}>
+        {props.children}
+    </ListGroup.Item>
+);
+
 const CollectionOptions = (props: Props) => {
     const collectionRename = async (
         selectedCollection: Collection,
@@ -75,23 +97,6 @@ const CollectionOptions = (props: Props) => {
         });
     };
 
-    const MenuLink = (props) => (
-        <LinkButton
-            style={{ fontSize: '14px', fontWeight: 700, padding: '8px 1em' }}
-            {...props}>
-            {props.children}
-        </LinkButton>
-    );
-
-    const MenuItem = (props) => (
-        <ListGroup.Item
-            style={{
-                background: '#282828',
-                padding: 0,
-            }}>
-            {props.children}
-        </ListGroup.Item>
-    );
     return (
         <Popover id="collection-options" style={{ borderRadius: '10px' }}>
             <Popover.Content style={{ padding: 0, border: 'none' }}>

src/components/pages/gallery/SelectedFileOptions.tsx

@@ -51,6 +51,14 @@ const SelectionContainer = styled.div`
     display: flex;
 `;
 
+export const IconWithMessage = (props) => (
+    <OverlayTrigger
+        placement="bottom"
+        overlay={<p style={{ zIndex: 1002 }}>{props.message}</p>}>
+        {props.children}
+    </OverlayTrigger>
+);
+
 const SelectedFileOptions = ({
     addToCollectionHelper,
     moveToCollectionHelper,
@@ -94,14 +102,6 @@ const SelectedFileOptions = ({
         });
     };
 
-    const IconWithMessage = (props) => (
-        <OverlayTrigger
-            placement="bottom"
-            overlay={<p style={{ zIndex: 1002 }}>{props.message}</p>}>
-            {props.children}
-        </OverlayTrigger>
-    );
-
     return (
         <SelectionBar>
             <SelectionContainer>