From c56fd48f39687165aa397a871f8cbb3c39234271 Mon Sep 17 00:00:00 2001
From: Tomide Oladipo <ayotomiiide@gmail.com>
Date: Thu, 6 Jul 2023 15:16:48 +0100
Subject: [PATCH 1/7] Add ThunderNFT to projects.

---
 .../app/src/systems/Ecosystem/_projects/thunderNFT   | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/app/src/systems/Ecosystem/_projects/thunderNFT

diff --git a/packages/app/src/systems/Ecosystem/_projects/thunderNFT b/packages/app/src/systems/Ecosystem/_projects/thunderNFT
new file mode 100644
index 00000000..4a06a633
--- /dev/null
+++ b/packages/app/src/systems/Ecosystem/_projects/thunderNFT
@@ -0,0 +1,12 @@
+---
+title: ThunderNFT
+status: live
+published: false
+description: 'The Superior NFT Experience, on Fuel.'
+name: ThunderNFT
+url: 'https://thundernft.market/'
+tags:
+  - nft
+  - marketplace
+---
+

From 3bf4fee8bdf3b05b9e1a2d57b6338dbb5a6e6add Mon Sep 17 00:00:00 2001
From: Tomide Oladipo <ayotomiiide@gmail.com>
Date: Thu, 6 Jul 2023 15:17:05 +0100
Subject: [PATCH 2/7] Add ThunderNFT to projects.

---
 .../src/systems/Ecosystem/_projects/thunderNFT.md    | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/app/src/systems/Ecosystem/_projects/thunderNFT.md

diff --git a/packages/app/src/systems/Ecosystem/_projects/thunderNFT.md b/packages/app/src/systems/Ecosystem/_projects/thunderNFT.md
new file mode 100644
index 00000000..4a06a633
--- /dev/null
+++ b/packages/app/src/systems/Ecosystem/_projects/thunderNFT.md
@@ -0,0 +1,12 @@
+---
+title: ThunderNFT
+status: live
+published: false
+description: 'The Superior NFT Experience, on Fuel.'
+name: ThunderNFT
+url: 'https://thundernft.market/'
+tags:
+  - nft
+  - marketplace
+---
+

From d08e7f3355e7b4d056e20a8f7ea0d067d625de9a Mon Sep 17 00:00:00 2001
From: Tomide Oladipo <ayotomiiide@gmail.com>
Date: Thu, 6 Jul 2023 15:17:06 +0100
Subject: [PATCH 3/7] Delete thunderNFT

---
 .../app/src/systems/Ecosystem/_projects/thunderNFT   | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 packages/app/src/systems/Ecosystem/_projects/thunderNFT

diff --git a/packages/app/src/systems/Ecosystem/_projects/thunderNFT b/packages/app/src/systems/Ecosystem/_projects/thunderNFT
deleted file mode 100644
index 4a06a633..00000000
--- a/packages/app/src/systems/Ecosystem/_projects/thunderNFT
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: ThunderNFT
-status: live
-published: false
-description: 'The Superior NFT Experience, on Fuel.'
-name: ThunderNFT
-url: 'https://thundernft.market/'
-tags:
-  - nft
-  - marketplace
----
-

From 338ac1dc3a66e558a01561d5a226399bc469a033 Mon Sep 17 00:00:00 2001
From: tomide <ayotomiiide@gmail.com>
Date: Thu, 6 Jul 2023 16:06:01 +0100
Subject: [PATCH 4/7] update prose config

---
 _prose.yml                                      | 17 +++--------------
 .../src/systems/Ecosystem/data/projects.json    | 15 +--------------
 2 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/_prose.yml b/_prose.yml
index 1824bf01..77f05929 100644
--- a/_prose.yml
+++ b/_prose.yml
@@ -2,10 +2,6 @@ prose:
   rooturl: '/packages/app/src/systems/Ecosystem/_projects'
   metadata:
     /packages/app/src/systems/Ecosystem/_projects:
-      - name: 'title'
-        field:
-          label: 'Project Title'
-          element: 'text'
       - name: 'name'
         field:
           label: 'Project Name'
@@ -27,14 +23,7 @@ prose:
         field:
           element: 'text'
           label: 'Project Icon URL'
-      - name: 'status'
+      - name: 'isLive'
         field:
-          element: 'select'
-          label: 'Project Status'
-          options:
-            - name: 'Live'
-              value: 'live'
-            - name: 'In Testnet'
-              value: 'testnet'
-            - name: 'In Development'
-              value: 'development'
+          element: 'checkbox'
+          label: 'Is Live?'
diff --git a/packages/app/src/systems/Ecosystem/data/projects.json b/packages/app/src/systems/Ecosystem/data/projects.json
index 8485a6d0..fe51488c 100644
--- a/packages/app/src/systems/Ecosystem/data/projects.json
+++ b/packages/app/src/systems/Ecosystem/data/projects.json
@@ -1,14 +1 @@
-[
-  {
-    "title": "Fuelet app",
-    "status": "live",
-    "published": false,
-    "name": "Fuelet app",
-    "url": "https://fuelet.app/",
-    "tags": ["wallet", "mobile", "infra"],
-    "description": "Non-custodial wallet on Fuel.",
-    "icon_url": "https://fuelet.app/images/svg/logo.svg",
-    "contents": "",
-    "id": "20230628FueletApp"
-  }
-]
+[]

From 7da94ef50751608591fe62a4471cd74542d2dc91 Mon Sep 17 00:00:00 2001
From: Tomide Oladipo <ayotomiiide@gmail.com>
Date: Fri, 7 Jul 2023 11:47:12 +0100
Subject: [PATCH 5/7] Create 2023-07-07-Orao-network.md

---
 .../Ecosystem/_projects/2023-07-07-Orao-network.md     | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 packages/app/src/systems/Ecosystem/_projects/2023-07-07-Orao-network.md

diff --git a/packages/app/src/systems/Ecosystem/_projects/2023-07-07-Orao-network.md b/packages/app/src/systems/Ecosystem/_projects/2023-07-07-Orao-network.md
new file mode 100644
index 00000000..eb458c9e
--- /dev/null
+++ b/packages/app/src/systems/Ecosystem/_projects/2023-07-07-Orao-network.md
@@ -0,0 +1,10 @@
+---
+isLive: true
+published: false
+name: Orao network
+url: 'https://orao.network/'
+tags:
+  - infra
+  - data
+description: Oracle Service for Custom Data Feeds.
+---

From dfb249e040256240691efcecb1747fa1d440caf0 Mon Sep 17 00:00:00 2001
From: Tomide Oladipo <ayotomiiide@gmail.com>
Date: Fri, 7 Jul 2023 11:53:22 +0100
Subject: [PATCH 6/7] Delete
 packages/app/src/systems/Ecosystem/_projects/thunderNFT.md

---
 .../src/systems/Ecosystem/_projects/thunderNFT.md    | 12 ------------
 1 file changed, 12 deletions(-)
 delete mode 100644 packages/app/src/systems/Ecosystem/_projects/thunderNFT.md

diff --git a/packages/app/src/systems/Ecosystem/_projects/thunderNFT.md b/packages/app/src/systems/Ecosystem/_projects/thunderNFT.md
deleted file mode 100644
index 4a06a633..00000000
--- a/packages/app/src/systems/Ecosystem/_projects/thunderNFT.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: ThunderNFT
-status: live
-published: false
-description: 'The Superior NFT Experience, on Fuel.'
-name: ThunderNFT
-url: 'https://thundernft.market/'
-tags:
-  - nft
-  - marketplace
----
-

From ec25e5c6de3cac21431f01c50dd1a93e82525d5a Mon Sep 17 00:00:00 2001
From: Tomide Oladipo <ayotomiiide@gmail.com>
Date: Fri, 7 Jul 2023 12:05:49 +0100
Subject: [PATCH 7/7] fix: spaces and sizes on ecosystem page (#61)

* ft: fix spaces and sizes on ecosystem page

* fix: spacing on the project cards

* fix: minor improvements
---
 .../EcosystemTags/EcosystemTags.tsx           | 17 +++---
 .../ProjectItem/ProjectItem.stories.tsx       |  8 ---
 .../components/ProjectItem/ProjectItem.tsx    | 52 ++++++++----------
 .../components/ProjectList/ProjectList.tsx    |  2 +
 .../Ecosystem/data/sample_projects.json       | 18 +++---
 .../src/systems/Ecosystem/pages/Ecosystem.tsx | 55 ++++++++++++-------
 packages/app/src/systems/Ecosystem/types.ts   | 10 +---
 7 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/packages/app/src/systems/Ecosystem/components/EcosystemTags/EcosystemTags.tsx b/packages/app/src/systems/Ecosystem/components/EcosystemTags/EcosystemTags.tsx
index f739bad0..9925464c 100644
--- a/packages/app/src/systems/Ecosystem/components/EcosystemTags/EcosystemTags.tsx
+++ b/packages/app/src/systems/Ecosystem/components/EcosystemTags/EcosystemTags.tsx
@@ -20,12 +20,12 @@ export const EcosystemTags = ({
 }: EcosystemTagsProps) => {
   if (isLoading) return <EcosystemTagsLoading />;
   return (
-    <Box.Flex justify="flex-start" align="center" gap="$3" wrap="wrap">
+    <Box.Flex justify="flex-start" align="center" gap="$2" wrap="wrap">
       <Button
         variant="outlined"
         onPress={onPressAllCategories}
-        css={!activeTag ? styles.active : styles.default}
-        size="sm"
+        css={{ ...styles.tag, ...(!activeTag && styles.active) }}
+        size="xs"
       >
         All Categories
       </Button>
@@ -35,8 +35,8 @@ export const EcosystemTags = ({
           variant="outlined"
           key={tag}
           onPress={() => onPressTag?.(tag)}
-          css={activeTag === tag ? styles.active : styles.default}
-          size="sm"
+          css={{ ...styles.tag, ...(activeTag === tag && styles.active) }}
+          size="xs"
         >
           {tag}
         </Button>
@@ -46,8 +46,9 @@ export const EcosystemTags = ({
 };
 
 const styles = {
-  default: cssObj({
+  tag: cssObj({
     color: '$intentsBase12',
+    padding: '$4 $3',
   }),
   active: cssObj({
     borderColor: '$intentsPrimary10',
@@ -55,8 +56,8 @@ const styles = {
   }),
   divider: cssObj({
     width: '1px',
-    height: '$4',
-    backgroundColor: '$intentsBase9',
+    height: '$3',
+    backgroundColor: '$intentsBase6',
   }),
 };
 
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.stories.tsx b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.stories.tsx
index 3ca39dda..de0f4a21 100644
--- a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.stories.tsx
+++ b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.stories.tsx
@@ -13,14 +13,6 @@ const meta: Meta<typeof ProjectItem> = {
   parameters: {
     layout: 'fullscreen',
   },
-  argTypes: {
-    status: {
-      options: ['live', 'testnet', 'in-development'],
-      control: {
-        type: 'select',
-      },
-    },
-  },
 };
 
 export default meta;
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
index 17065200..2a121c1a 100644
--- a/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
+++ b/packages/app/src/systems/Ecosystem/components/ProjectItem/ProjectItem.tsx
@@ -12,7 +12,6 @@ import { motion } from 'framer-motion';
 import type { FC } from 'react';
 
 import type { Project } from '../../types';
-import { STATUS_TEXT } from '../../types';
 
 import { ProjectItemLoader } from './ProjectItemLoader';
 
@@ -32,7 +31,7 @@ export const ProjectItem: ProjectItemComponent = ({
   name,
   description,
   url,
-  status,
+  isLive,
 }: ProjectItemProps) => {
   const onCardPress = () => {
     window.open(url, '_blank');
@@ -56,8 +55,8 @@ export const ProjectItem: ProjectItemComponent = ({
           iconSize={20}
           css={styles.projectIcon}
         />
-        <Box.Stack gap="$2" justify="space-between" css={styles.details}>
-          <Box.Stack align="flex-start" gap="$2">
+        <Box.Stack gap="$1" justify="space-between" css={styles.details}>
+          <Box.Stack align="flex-start" gap="$1">
             <Box.Flex
               align="flex-start"
               justify="space-between"
@@ -66,7 +65,12 @@ export const ProjectItem: ProjectItemComponent = ({
               <Text fontSize="base" color="intentsBase12">
                 {name}
               </Text>
-              <Icon icon="ArrowUpRight" size={20} stroke={1} />
+              <Icon
+                icon="ArrowUpRight"
+                color="intentsBase8"
+                size={20}
+                stroke={1}
+              />
             </Box.Flex>
             <Text fontSize="sm"> {description}</Text>
           </Box.Stack>
@@ -76,14 +80,16 @@ export const ProjectItem: ProjectItemComponent = ({
               css={styles.link}
               href={url}
               color="intentsBase12"
-              size="sm"
+              size="xs"
             >
               {getUrlHostName(url)}
             </ButtonLink>
-            <Tag intent="base" size="xs" css={styles.tag} variant="ghost">
-              <Box css={{ ...styles.dot, ...styles[`dot-${status}`] }} />
-              {STATUS_TEXT[status]}
-            </Tag>
+            {isLive ? (
+              <Tag intent="base" size="xs" css={styles.tag} variant="ghost">
+                <Box css={styles.dot} />
+                {'Live on mainnet'}
+              </Tag>
+            ) : null}
           </Box.Flex>
         </Box.Stack>
       </Card.Body>
@@ -105,31 +111,20 @@ const styles = {
   link: cssObj({
     textDecoration: 'underline',
     color: '$intentsBase12',
+    padding: '0',
   }),
   dot: cssObj({
-    width: '$2',
-    height: '$2',
+    width: '$1',
+    height: '$1',
     borderRadius: '50%',
-  }),
-  'dot-live': cssObj({
-    background: '$intentsPrimary9',
-    border: '1px solid $intentsPrimary11',
-    boxShadow: ' 0px 0px 4px #ffffff',
-  }),
-  'dot-testnet': cssObj({
-    background: '$intentsInfo9',
-    border: '1px solid $intentsInfo11',
-    boxShadow: ' 0px 0px 4px #ffffff',
-  }),
-  'dot-in-development': cssObj({
-    background: '$intentsWarning9',
-    border: '1px solid $intentsWarning11',
-    boxShadow: ' 0px 0px 4px #ffffff',
+    border: '1px solid #A9F6D5',
+    background: '#00F58C',
+    boxShadow: '0px 0px 4px 0px #00F58C',
   }),
   tag: cssObj({
     color: '$intentsBase12',
     borderRadius: '$sm',
-    padding: '0 $2',
+    padding: '0 $1',
     backgroundColor: '$gray5',
   }),
   projectIcon: cssObj({
@@ -148,6 +143,7 @@ const styles = {
     alignItems: 'flex-start',
     gap: '$4',
     justifyContent: 'flex-start',
+    padding: '$6',
   }),
 };
 
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectList/ProjectList.tsx b/packages/app/src/systems/Ecosystem/components/ProjectList/ProjectList.tsx
index c6cc8137..12e2c160 100644
--- a/packages/app/src/systems/Ecosystem/components/ProjectList/ProjectList.tsx
+++ b/packages/app/src/systems/Ecosystem/components/ProjectList/ProjectList.tsx
@@ -38,9 +38,11 @@ export const ProjectList = ({
 
 const styles = {
   grid: cssObj({
+    alignItems: 'flex-start',
     /// show only 1 column on mobile
     '@media (max-width: 768px)': {
       gridTemplateColumns: '1fr',
+      alignItems: 'stretch',
     },
   }),
 };
diff --git a/packages/app/src/systems/Ecosystem/data/sample_projects.json b/packages/app/src/systems/Ecosystem/data/sample_projects.json
index cbbbe293..1005a635 100644
--- a/packages/app/src/systems/Ecosystem/data/sample_projects.json
+++ b/packages/app/src/systems/Ecosystem/data/sample_projects.json
@@ -1,44 +1,40 @@
 [
   {
     "name": "Sway Swap",
-    "description": "SwaySwap is a blazingly fast DEX built on the fastest modular execution layer: Fuel.",
+    "description": "",
     "tags": ["defi", "swap"],
     "url": "https://fuellabs.github.io/swayswap/",
-    "status": "live"
+    "isLive": true
   },
   {
     "name": "Fuelet",
     "description": "Non-custodial wallet on Fuel.",
     "tags": ["wallet", "mobile", "infra"],
-    "url": "https://fuelet.app/",
-    "status": "live"
+    "url": "https://fuelet.app/"
   },
   {
     "name": "ThunderNFT",
     "description": "The Superior NFT Experience, on Fuel.",
     "tags": ["marketplace", "nft"],
     "url": "https://thundernft.market/",
-    "status": "in-development"
+    "isLive": true
   },
   {
     "name": "Orao Network",
     "description": "Oracle Service for Custom Data Feeds.",
     "tags": ["oracle", "infra"],
-    "url": "https://orao.network/",
-    "status": "live"
+    "url": "https://orao.network/"
   },
   {
     "name": "SwayLend",
     "description": "First ever Lending protocol on Fuel Network.",
     "tags": ["defi", "lending"],
-    "url": "https://swaylend.com/",
-    "status": "testnet"
+    "url": "https://swaylend.com/"
   },
   {
     "name": "Poolshark",
     "description": "Poolshark is an open-source AMM protocol that makes it easy for users to catch directional moves from the comfort of a liquidity pool.",
     "tags": ["defi", "infra", "amm"],
-    "url": "https://docs.poolsharks.io/",
-    "status": "in-development"
+    "url": "https://docs.poolsharks.io/"
   }
 ]
diff --git a/packages/app/src/systems/Ecosystem/pages/Ecosystem.tsx b/packages/app/src/systems/Ecosystem/pages/Ecosystem.tsx
index 943b6179..fb916700 100644
--- a/packages/app/src/systems/Ecosystem/pages/Ecosystem.tsx
+++ b/packages/app/src/systems/Ecosystem/pages/Ecosystem.tsx
@@ -27,27 +27,29 @@ export function Ecosystem() {
     <Layout {...animations.slideInTop()}>
       <Box.Flex css={styles.container} align="center" grow={1}>
         <Box.Stack gap="$10" grow={1}>
-          <Box.Flex justify="space-between" align="bottom">
-            <Box.Stack gap="$2">
-              <Heading as="h2" css={styles.heading}>
+          <Box.Flex
+            justify="space-between"
+            align="flex-end"
+            css={styles.headingWrapper}
+          >
+            <Box.Stack gap="$2" wrap="wrap">
+              <Heading as="h3" css={styles.heading}>
                 Explore Fuel Dapps
               </Heading>
-              <Text as="small" color="intentsBase12">
-                Here&apos;s a list of apps built on Fuel
+              <Text as="small" fontSize="sm" color="intentsBase12">
+                Here&apos;s a list of dapps built on Fuel
               </Text>
             </Box.Stack>
-            <Box.Stack>
-              <Input>
-                <Input.Field
-                  name="search"
-                  placeholder="Search"
-                  type="text"
-                  onChange={handleSearch}
-                  value={search || ''}
-                />
-                <Input.ElementRight element={<Icon icon="Search" />} />
-              </Input>
-            </Box.Stack>
+            <Input size="sm" css={styles.searchBar}>
+              <Input.Field
+                name="search"
+                placeholder="Search"
+                type="text"
+                onChange={handleSearch}
+                value={search || ''}
+              />
+              <Input.ElementRight element={<Icon icon="Search" />} />
+            </Input>
           </Box.Flex>
           <EcosystemTags
             tags={tags}
@@ -71,15 +73,30 @@ const styles = {
   heading: cssObj({
     margin: 0,
   }),
-  wrapper: cssObj({}),
+  subHeading: cssObj({
+    fontSize: '0.875rem',
+  }),
+  headingWrapper: cssObj({
+    '@media (max-width: 768px)': {
+      flexDirection: 'column',
+      gap: '$10',
+      alignItems: 'flex-start',
+    },
+  }),
+  searchBar: cssObj({
+    '@media (max-width: 768px)': {
+      width: '100%',
+    },
+  }),
   container: cssObj({
     marginTop: '$12',
     maxWidth: '$xl',
-    padding: '$12',
+    padding: '$24 $40',
     margin: '0 auto',
 
     '@media (max-width: 768px)': {
       maxWidth: '100%',
+      padding: '$12',
     },
   }),
 };
diff --git a/packages/app/src/systems/Ecosystem/types.ts b/packages/app/src/systems/Ecosystem/types.ts
index 99f04b72..c0030e1c 100644
--- a/packages/app/src/systems/Ecosystem/types.ts
+++ b/packages/app/src/systems/Ecosystem/types.ts
@@ -3,13 +3,5 @@ export type Project = {
   description: string;
   tags: string[];
   url: string;
-  status: ProjectStatus;
-};
-
-export type ProjectStatus = 'live' | 'testnet' | 'in-development';
-
-export const STATUS_TEXT: Record<ProjectStatus, string> = {
-  live: 'Live on Mainnet',
-  testnet: 'Live on Testnet',
-  'in-development': 'In development',
+  isLive?: boolean;
 };