Inputing figma content for future showcase

RocketChat · Nov 18, 2021 · 333d7ce · 333d7ce
1 parent a99cd43
commit 333d7ce
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 24 deletions.
diff --git a/packages/fuselage/src/components/Fallback/Fallback.stories.tsx b/packages/fuselage/src/components/Fallback/Fallback.stories.tsx
@@ -54,31 +54,23 @@ export const Default = ({ searchTerm = 'search term here' }) => (
   </Box>
 );
 
-export const ActionButton = () => (
+export const ActionButton = ({ searchTerm = 'search term here' }) => (
   <Box>
     <Fallback>
       <FallbackIcon name='magnifier' />
-      <FallbackTitle>No app matches</FallbackTitle>
-      <FallbackSubtitle>No Marketplace matches for:</FallbackSubtitle>
+      <FallbackTitle>No installed app matches</FallbackTitle>
+      <FallbackSubtitle>
+        <span>
+          No app matches for <strong>"{searchTerm}"</strong>
+        </span>
+      </FallbackSubtitle>
       <FallbackSuggestion>
-        <FallbackSuggestionText>You can try to:</FallbackSuggestionText>
-        <FallbackSuggestionList>
-          <FallbackSuggestionListItem>
-            Search by category
-          </FallbackSuggestionListItem>
-          <FallbackSuggestionListItem>
-            Search for a more general term
-          </FallbackSuggestionListItem>
-          <FallbackSuggestionListItem>
-            Search for a more specific term
-          </FallbackSuggestionListItem>
-          <FallbackSuggestionListItem>
-            Check if the spelling is correct
-          </FallbackSuggestionListItem>
-        </FallbackSuggestionList>
+        <FallbackSuggestionText>
+          Try searching in the Marketplace instead
+        </FallbackSuggestionText>
       </FallbackSuggestion>
       <FallbackActions>
-        <FallbackAction>Reload</FallbackAction>
+        <FallbackAction>Search on Marketplace</FallbackAction>
       </FallbackActions>
     </Fallback>
   </Box>
@@ -87,13 +79,12 @@ export const ActionButtonWithNoSuggestions = () => (
   <Box>
     <Fallback>
       <FallbackIcon name='magnifier' />
-      <FallbackTitle>No app matches</FallbackTitle>
+      <FallbackTitle>No Apps Installed</FallbackTitle>
       <FallbackSubtitle>
-        No app matches for ”search term here” Try searching in the Marketplace
-        instead.
+        Explore the Marketplace to find awesome apps for Rocket.Chat
       </FallbackSubtitle>
       <FallbackActions>
-        <FallbackAction>Reload</FallbackAction>
+        <FallbackAction>Explore Marketplace</FallbackAction>
       </FallbackActions>
     </Fallback>
   </Box>

diff --git a/packages/fuselage/src/components/Fallback/Fallback.styles.scss b/packages/fuselage/src/components/Fallback/Fallback.styles.scss
@@ -38,7 +38,7 @@
     align-items: center;
 
     width: 100%;
-    max-width: 276px;
+    max-width: 410px;
 
     margin: 0;
     padding: 0;
@@ -48,6 +48,10 @@
     text-align: center;
   }
 
+  &__suggestion-text-nomargin {
+    margin: 0;
+  }
+
   &__suggestion,
   &__subtitle {
     margin-block-end: lengths.margin(24);

diff --git a/packages/fuselage/src/components/Fallback/Fallback.tsx b/packages/fuselage/src/components/Fallback/Fallback.tsx
@@ -28,6 +28,7 @@ export const FallbackSubtitle: FC = ({ children }) => (
 export const FallbackSuggestion: FC = ({ children }) => (
   <div className='rcx-fallback__suggestion'>{children}</div>
 );
+
 export const FallbackSuggestionText: FC = ({ children }) => (
   <div className='rcx-fallback__suggestion-text'>{children}</div>
 );