Added no featured DAOs state.

packages/i18n/locales/en/translation.json

@@ -793,6 +793,7 @@
     "noCompletedCyclesYet": "No completed cycles yet.",
     "noDaosFollowedYet": "You have not yet followed any DAOs.",
     "noDisplayName": "no display name",
+    "noFeaturedDaosYet": "There are no featured DAOs yet.",
     "noFundsDuringInstantiation": "No funds will be transferred during instantiation.",
     "noGovernanceProposalsNeedDeposit": "There are no governance proposals that need deposits.",
     "noGovernanceProposalsOpenForVoting": "There are no governance proposals open for voting.",

packages/stateless/components/HorizontalScroller.tsx

@@ -1,3 +1,4 @@
+import { CheckBoxOutlineBlankRounded } from '@mui/icons-material'
 import clsx from 'clsx'
 import {
   ComponentType,
@@ -7,11 +8,13 @@ import {
   useRef,
   useState,
 } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useInView } from 'react-intersection-observer'
 
 import { LoadingData } from '@dao-dao/types'
 
 import { Loader } from './logo'
+import { NoContent } from './NoContent'
 
 export interface HorizontalScrollerProps<P extends {}> {
   Component: ComponentType<P>
@@ -28,6 +31,7 @@ export const HorizontalScroller = <P extends {}>({
   containerClassName,
   shadowClassName,
 }: HorizontalScrollerProps<P>) => {
+  const { t } = useTranslation()
   const [clonesWidth, setClonesWidth] = useState(0)
   const [autoscroll, setAutoscroll] = useState(true)
 
@@ -90,16 +94,26 @@ export const HorizontalScroller = <P extends {}>({
   return (
     <div className={clsx('relative', containerClassName)}>
       {/* Left shadow */}
-      <div
-        className={clsx('absolute top-0 bottom-0 left-0 z-10', shadowClassName)}
-        style={{
-          background:
-            'linear-gradient(to left, rgba(var(--color-background-base), 0), rgba(var(--color-background-base), 1) 100%)',
-        }}
-      ></div>
+      {!items.loading && items.data.length > 0 && (
+        <div
+          className={clsx(
+            'absolute top-0 bottom-0 left-0 z-10 animate-fade-in',
+            shadowClassName
+          )}
+          style={{
+            background:
+              'linear-gradient(to left, rgba(var(--color-background-base), 0), rgba(var(--color-background-base), 1) 100%)',
+          }}
+        ></div>
+      )}
 
       {items.loading ? (
         <Loader />
+      ) : items.data.length === 0 ? (
+        <NoContent
+          Icon={CheckBoxOutlineBlankRounded}
+          body={t('info.noFeaturedDaosYet')}
+        />
       ) : (
         <div
           className="no-scrollbar w-full overflow-scroll"
@@ -133,16 +147,18 @@ export const HorizontalScroller = <P extends {}>({
       )}
 
       {/* Right shadow */}
-      <div
-        className={clsx(
-          'absolute top-0 right-0 bottom-0 z-10',
-          shadowClassName
-        )}
-        style={{
-          background:
-            'linear-gradient(to right, rgba(var(--color-background-base), 0), rgba(var(--color-background-base), 1) 100%)',
-        }}
-      ></div>
+      {!items.loading && items.data.length > 0 && (
+        <div
+          className={clsx(
+            'absolute top-0 right-0 bottom-0 z-10 animate-fade-in',
+            shadowClassName
+          )}
+          style={{
+            background:
+              'linear-gradient(to right, rgba(var(--color-background-base), 0), rgba(var(--color-background-base), 1) 100%)',
+          }}
+        ></div>
+      )}
     </div>
   )
 }

packages/stateless/components/command/ContextPill.tsx

@@ -14,7 +14,7 @@ export interface ContextPillProps {
 export const ContextPill = ({ imageUrl, name, onClose }: ContextPillProps) => (
   <div
     className={clsx(
-      'animate-fadein flex shrink-0 flex-row items-center gap-1.5 rounded-full bg-component-badge-primary p-1',
+      'flex shrink-0 animate-fade-in flex-row items-center gap-1.5 rounded-full bg-component-badge-primary p-1',
       !imageUrl && 'pl-2',
       !onClose && 'pr-2'
     )}