add divider between share with and public url

src/components/CollectionShare.tsx

@@ -18,7 +18,7 @@ import SubmitButton from './SubmitButton';
 import MessageDialog from './MessageDialog';
 import { Collection } from 'types/collection';
 import { appendCollectionKeyToShareURL } from 'utils/collection';
-import { Row, Value } from './Container';
+import { FlexWrapper } from './Container';
 import { CodeBlock } from './CodeBlock';
 import { ButtonVariant, getVariantColor } from './pages/gallery/LinkButton';
 import { handleSharingErrors } from 'utils/error';
@@ -138,7 +138,7 @@ function CollectionShare(props: Props) {
             content: constants.DISABLE_PUBLIC_SHARING_MESSAGE,
             close: { text: constants.CANCEL },
             proceed: {
-                text: constants.DELETE,
+                text: constants.DISABLE,
                 action: disablePublicSharingHelper,
                 variant: ButtonVariant.danger,
             },
@@ -240,41 +240,7 @@ function CollectionShare(props: Props) {
                         </Form>
                     )}
                 </Formik>
-                <Row style={{ margin: '10px' }}>
-                    <Value width="auto" style={{ paddingTop: '5px' }}>
-                        {constants.PUBLIC_SHARING}
-                    </Value>
-                    <Form.Switch
-                        style={{ marginLeft: '20px' }}
-                        checked={!!publicShareUrl}
-                        id="collection-public-sharing-toggler"
-                        className="custom-switch-md"
-                        onChange={handleCollectionPublicSharing}
-                    />
-                </Row>
-                <Row
-                    style={{
-                        margin: '10px',
-                        color: getVariantColor(ButtonVariant.danger),
-                    }}>
-                    {sharableLinkError}
-                </Row>
-                <div
-                    style={{
-                        height: '1px',
-                        margin: '10px 0px',
-                        background: '#444',
-                        width: '100%',
-                    }}
-                />
-
-                {publicShareUrl && (
-                    <div style={{ width: '100%', wordBreak: 'break-all' }}>
-                        <>{constants.PUBLIC_URL}</>
-                        <CodeBlock key={publicShareUrl} code={publicShareUrl} />
-                    </div>
-                )}
-                {props.collection.sharees?.length > 0 && (
+                {props.collection.sharees?.length > 0 ? (
                     <>
                         <p>{constants.SHAREES}</p>
 
@@ -290,12 +256,48 @@ function CollectionShare(props: Props) {
                             </tbody>
                         </Table>
                     </>
-                )}
-                {props.collection.sharees?.length === 0 && !publicShareUrl && (
+                ) : (
                     <div style={{ marginTop: '12px' }}>
                         {constants.ZERO_SHAREES()}
                     </div>
                 )}
+                <div
+                    style={{
+                        height: '1px',
+                        margin: '10px 0px',
+                        background: '#444',
+                        width: '100%',
+                    }}
+                />
+                <div style={{ marginBottom: '1rem' }}>
+                    <FlexWrapper>
+                        <FlexWrapper style={{ paddingTop: '5px' }}>
+                            {constants.PUBLIC_SHARING}
+                        </FlexWrapper>
+                        <Form.Switch
+                            style={{ marginLeft: '20px' }}
+                            checked={!!publicShareUrl}
+                            id="collection-public-sharing-toggler"
+                            className="custom-switch-md"
+                            onChange={handleCollectionPublicSharing}
+                        />
+                    </FlexWrapper>
+                    {sharableLinkError && (
+                        <FlexWrapper
+                            style={{
+                                marginTop: '10px',
+                                color: getVariantColor(ButtonVariant.danger),
+                            }}>
+                            {sharableLinkError}
+                        </FlexWrapper>
+                    )}
+                </div>
+                {publicShareUrl && (
+                    <div style={{ width: '100%', wordBreak: 'break-all' }}>
+                        <>{constants.PUBLIC_URL}</>
+                        <CodeBlock key={publicShareUrl} code={publicShareUrl} />
+                    </div>
+                )}
             </DeadCenter>
         </MessageDialog>
     );

src/pages/index.tsx

@@ -146,6 +146,7 @@ export default function LandingPage() {
             await router.push(PAGES.VERIFY);
         }
         await initLocalForage();
+        setLoading(false);
     };
 
     const initLocalForage = async () => {

src/utils/strings/englishConstants.tsx

@@ -357,7 +357,7 @@ const englishConstants = {
             </div>
         </>
     ),
-    PUBLIC_URL: 'publicly sharable url',
+    PUBLIC_URL: 'public link',
     SHARE_WITH_SELF: 'oops, you cannot share with yourself',
     ALREADY_SHARED: (email) =>
         `oops, you're already sharing this with ${email}`,