fix: hide horizontal separator if "offline subscriptions" section is …

…hidden (#740)
standardnotes · Nov 15, 2021 · f830834 · f830834
1 parent 60eeee3
commit f830834
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 49 deletions.
diff --git a/app/assets/javascripts/preferences/panes/Extensions.tsx b/app/assets/javascripts/preferences/panes/Extensions.tsx
@@ -20,7 +20,13 @@ const loadExtensions = (application: WebApplication) => application.getItems([
 export const Extensions: FunctionComponent<{
   application: WebApplication
   extensionsLatestVersions: ExtensionsLatestVersions,
-}> = observer(({ application, extensionsLatestVersions }) => {
+  className?: string,
+}> = observer(
+  ({
+     application,
+     extensionsLatestVersions,
+     className = ''
+   }) => {
 
   const [customUrl, setCustomUrl] = useState('');
   const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
@@ -84,7 +90,7 @@ export const Extensions: FunctionComponent<{
     });
 
   return (
-    <div>
+    <div className={className}>
       {visibleExtensions.length > 0 &&
         <div>
           {

diff --git a/app/assets/javascripts/preferences/panes/account/Advanced.tsx b/app/assets/javascripts/preferences/panes/account/Advanced.tsx
@@ -1,12 +1,11 @@
 import { FunctionalComponent } from 'preact';
-import { PreferencesGroup, PreferencesSegment, Title } from '@/preferences/components';
+import { PreferencesGroup, PreferencesSegment } from '@/preferences/components';
 import { OfflineSubscription } from '@/preferences/panes/account/offlineSubscription';
 import { WebApplication } from '@/ui_models/application';
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
 import { Extensions } from '@/preferences/panes/Extensions';
 import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
-import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 import { AccordionItem } from '@/components/shared/AccordionItem';
 
 interface IProps {
@@ -24,8 +23,7 @@ export const Advanced: FunctionalComponent<IProps> = observer(
             <div className='flex flex-row items-center'>
               <div className='flex-grow flex flex-col'>
                 <OfflineSubscription application={application} appState={appState} />
-                <HorizontalSeparator classes="mt-8 mb-8" />
-                <Extensions application={application} extensionsLatestVersions={extensionsLatestVersions} />
+                <Extensions className={'mt-3'} application={application} extensionsLatestVersions={extensionsLatestVersions} />
               </div>
             </div>
           </AccordionItem>

diff --git a/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx b/app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
@@ -10,6 +10,7 @@ import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/strings';
 import { ButtonType } from '@standardnotes/snjs';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 
 interface IProps {
   application: WebApplication;
@@ -55,10 +56,6 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
     setIsSuccessfullyRemoved(true);
   };
 
-  if (!shouldShowOfflineSubscription()) {
-    return null;
-  }
-
   const handleRemoveClick = async () => {
     application.alertService.confirm(
       STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
@@ -77,48 +74,55 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
       });
   };
 
+  if (!shouldShowOfflineSubscription()) {
+    return null;
+  }
+
   return (
-    <div className='flex items-center justify-between'>
-      <div className='flex flex-col mt-3 w-full'>
-        <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
-        <form onSubmit={handleSubscriptionCodeSubmit}>
-          <div className={'mt-2'}>
-            {!hasUserPreviouslyStoredCode && (
-              <DecoratedInput
-                onChange={(code) => setActivationCode(code)}
-                placeholder={'Offline Subscription Code'}
-                text={activationCode}
-                disabled={isSuccessfullyActivated}
-                className={'mb-3'}
+    <>
+      <div className='flex items-center justify-between'>
+        <div className='flex flex-col mt-3 w-full'>
+          <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
+          <form onSubmit={handleSubscriptionCodeSubmit}>
+            <div className={'mt-2'}>
+              {!hasUserPreviouslyStoredCode && (
+                <DecoratedInput
+                  onChange={(code) => setActivationCode(code)}
+                  placeholder={'Offline Subscription Code'}
+                  text={activationCode}
+                  disabled={isSuccessfullyActivated}
+                  className={'mb-3'}
+                />
+              )}
+            </div>
+            {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
+              <div className={'mt-3 mb-3 info font-bold'}>
+                Successfully {isSuccessfullyActivated ? 'Activated' : 'Removed'}!
+              </div>
+            )}
+            {hasUserPreviouslyStoredCode && (
+              <Button
+                type='danger'
+                label='Remove offline key'
+                onClick={() => {
+                  handleRemoveClick();
+                }}
               />
             )}
-          </div>
-          {(isSuccessfullyActivated || isSuccessfullyRemoved) && (
-            <div className={'mt-3 mb-3 info font-bold'}>
-              Successfully {isSuccessfullyActivated ? 'Activated' : 'Removed'}!
-            </div>
-          )}
-          {hasUserPreviouslyStoredCode && (
-            <Button
-              type='danger'
-              label='Remove offline key'
-              onClick={() => {
-                handleRemoveClick();
-              }}
-            />
-          )}
-          {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
-            <Button
-              label={'Submit'}
-              type='primary'
-              disabled={activationCode === ''}
-              onClick={(event) =>
-                handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
-              }
-            />
-          )}
-        </form>
+            {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
+              <Button
+                label={'Submit'}
+                type='primary'
+                disabled={activationCode === ''}
+                onClick={(event) =>
+                  handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
+                }
+              />
+            )}
+          </form>
+        </div>
       </div>
-    </div>
+      <HorizontalSeparator classes='mt-8 mb-5' />
+    </>
   );
 });