Fix: Antenna (#2275)

* chore(apps, feed): update bg color opacity * chore(apps): update spacing * chore(apps):update login modal details * chore(ds): update component
AKASHAorg · May 14, 2024 · d8fba18 · d8fba18
1 parent fc4c41d
commit d8fba18
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/extensions/apps/antenna/src/components/pages/entry-page/beam-section.tsx b/extensions/apps/antenna/src/components/pages/entry-page/beam-section.tsx
@@ -82,12 +82,12 @@ const BeamSection: React.FC<BeamSectionProps> = props => {
             setShowEditor={setIsReflecting}
           />
         )}
-        {pendingReflections
-          .filter(content => !hasOwn(content, 'reflection') && content.beamID === beamId)
-          .map((content, index) => (
-            <PendingReflect key={`pending-${index}-${beamId}`} entryData={content} />
-          ))}
       </Stack>
+      {pendingReflections
+        .filter(content => !hasOwn(content, 'reflection') && content.beamID === beamId)
+        .map((content, index) => (
+          <PendingReflect key={`pending-${index}-${beamId}`} entryData={content} />
+        ))}
     </Stack>
   );
 };

diff --git a/extensions/apps/antenna/src/components/pages/my-antenna-page/index.tsx b/extensions/apps/antenna/src/components/pages/my-antenna-page/index.tsx
@@ -25,9 +25,11 @@ const MyAntennaPage: React.FC<unknown> = () => {
       _navigateToModal.current?.({
         name: 'login',
         redirectTo,
-        message,
+        title: t('Member Only Feature'),
+        message: message ?? t('You need to connect first to be able to use this feature.'),
       });
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
   const isLoggedUser = React.useMemo(() => !!authenticatedProfile?.did.id, [authenticatedProfile]);

diff --git a/extensions/apps/antenna/src/components/reflect-editor/pending-reflect.tsx b/extensions/apps/antenna/src/components/reflect-editor/pending-reflect.tsx
@@ -12,7 +12,7 @@ export function PendingReflect(props: PendingReflectProps) {
 
   return (
     <Stack
-      background={{ light: 'secondaryLight/30', dark: 'secondaryDark/30' }}
+      background={{ light: 'secondaryLight/10', dark: 'secondaryDark/10' }}
       customStyle="border border(grey8 dark:grey3)"
       data-testid="pending-reflect"
     >

diff --git a/libs/design-system-components/src/components/StartCard/index.tsx b/libs/design-system-components/src/components/StartCard/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { tw } from '@twind/core';
-import Card from '@akashaorg/design-system-core/lib/components/Card';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
+import Card from '@akashaorg/design-system-core/lib/components/Card';
+import Stack from '@akashaorg/design-system-core/lib/components/Stack';
 import Text from '@akashaorg/design-system-core/lib/components/Text';
 
 export type StartCardProps = {
@@ -37,35 +38,39 @@ const StartCard: React.FC<StartCardProps> = ({
 }: StartCardProps) => {
   return (
     <Card noBorderRadius={noBorderRadius} customStyle="gap-1">
-      <div className={tw(`flex justify-center w-full`)}>
+      <Stack direction="row" justify="center" fullWidth={true}>
         {!!title && <Text variant="h5">{title}</Text>}
         {!!subtitle && <Text variant="subtitle1">{subtitle}</Text>}
-      </div>
+      </Stack>
       {showMainArea && (
-        <div className={tw(`w-full px-4 ${hideMainAreaOnMobile && 'hidden'}`)}>
+        <Stack
+          spacing="gap-y-3"
+          fullWidth={true}
+          {...(hideMainAreaOnMobile && { customStyle: 'hidden' })}
+        >
           {!!image && (
             <img
               loading="lazy"
               alt={image}
-              className={tw('max-w-[1/2] mx-auto py-3 pr-2')}
+              className={tw('max-w-[1/2] mx-auto pr-2')}
               src={image}
             />
           )}
           {!!icon && icon}
           <Text variant="h6" align="center">
             {heading}
           </Text>
-          <Text variant="body1" align="center" customStyle="pt-3 px-8">
+          <Text variant="body1" align="center" customStyle=" px-8">
             {description}
           </Text>
           {onClickCTA && (
-            <div className={tw(`p-4 flex items-center justify-end`)}>
+            <Stack direction="row" align="center" justify="end">
               <Button variant="primary" label={CTALabel} onClick={onClickCTA} />
-            </div>
+            </Stack>
           )}
-        </div>
+        </Stack>
       )}
-      {showSecondaryArea && <Text color="grey1">{secondaryDescription}</Text>}
+      {showSecondaryArea && <Text variant="body1">{secondaryDescription}</Text>}
     </Card>
   );
 };

diff --git a/libs/feed/src/components/editable-reflection/index.tsx b/libs/feed/src/components/editable-reflection/index.tsx
@@ -117,7 +117,7 @@ const EditableReflection: React.FC<ReflectCardProps> = props => {
   if (editInProgress && newContent) {
     return (
       <Stack
-        background={{ light: 'secondaryLight/30', dark: 'secondaryDark/30' }}
+        background={{ light: 'secondaryLight/10', dark: 'secondaryDark/10' }}
         customStyle="border border(grey8 dark:grey3)"
       >
         <ReflectionCard