Various visual improvements

FuelLabs · Jan 24, 2024 · 156fb87 · 156fb87
1 parent 59052bd
commit 156fb87
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/packages/app/src/systems/Ecosystem/components/FeaturedProjects/CardComponent.tsx b/packages/app/src/systems/Ecosystem/components/FeaturedProjects/CardComponent.tsx
@@ -52,6 +52,8 @@ const CardComponent: React.FC<CardComponentProps> = ({
                 : '/ecosystem/bannerImages/default.jpeg'
             })`,
             backgroundSize: 'cover',
+            height: 'fit-content',
+            backgroundRepeat: 'no-repeat',
             backgroundPosition: 'center',
             position: 'relative',
             overflow: 'hidden',
@@ -66,12 +68,17 @@ const CardComponent: React.FC<CardComponentProps> = ({
               <ProjectImage name={project.name} image={project.image} />
             </Box>
           </Box>
+        </Card.Header>
+        <Card.Body css={styles.cardBody}>
+          <Text fontSize="base" color="intentsBase12" css={styles.header}>
+            {project.name}
+          </Text>
           <Box css={styles.statusContainer}>
             {project.tags?.map((tag, index) => (
               <Tag
                 key={index}
                 variant="ghost"
-                intent="info"
+                intent="base"
                 size="xs"
                 style={{
                   fontSize: '$xs',
@@ -83,11 +90,6 @@ const CardComponent: React.FC<CardComponentProps> = ({
               </Tag>
             ))}
           </Box>
-        </Card.Header>
-        <Card.Body css={styles.cardBody}>
-          <Text fontSize="base" color="intentsBase12" css={styles.header}>
-            {project.name}
-          </Text>
           <Box css={styles.cardContent}>
             <Text>{project.description}</Text>
           </Box>

diff --git a/packages/app/src/systems/Ecosystem/components/FeaturedProjects/styles.tsx b/packages/app/src/systems/Ecosystem/components/FeaturedProjects/styles.tsx
@@ -236,6 +236,7 @@ export const styles = {
     borderRadius: '5px',
     paddingLeft: '5px',
     paddingRight: '5px',
+    border: '1px solid $intentsBase8',
     '@media (max-width: 768px)': {
       fontSize: '0.65rem', // Smaller font size on small screens
     },
@@ -248,8 +249,9 @@ export const styles = {
   }),
   statusContainer: cssObj({
     position: 'absolute',
-    bottom: '16px',
-    right: '10px',
+    //bottom: '16px',
+    marginTop: '5px',
+    right: '15px',
     display: 'flex',
     flexDirection: 'row',
     flexwrap: 'wrap',

diff --git a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx
@@ -107,9 +107,10 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
               </Badge>
             ))}
           </Box>
+          <Box css={styles.divider}></Box>
 
           <p style={styles.paragraph}>{project.description}</p>
-
+          <Box css={styles.divider}></Box>
           <h2 style={styles.h2}>Socials</h2>
           <Box css={styles.socials}>
             {project.twitter && (
@@ -154,8 +155,6 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
               </Button>
             )}
           </Box>
-          <Box css={styles.divider}></Box>
-
           <Box css={styles.alert}>
             <Alert status="info">
               <Alert.Description style={{ fontSize: '13px' }}>

diff --git a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx
@@ -71,11 +71,11 @@ export const styles = {
   }),
   websiteButton: cssObj({
     alignItems: 'center',
-    overflow: 'hidden',
+    //overflow: 'hidden',
     position: 'relative',
     marginBottom: '7.5px',
     border: '1px solid $intentsBase8',
-    zIndex: 2,
+    zIndex: 3,
   }),
   socials: cssObj({
     display: 'flex',
@@ -148,18 +148,22 @@ export const styles = {
   }),
   button: cssObj({
     position: 'absolute',
-    top: '215px',
-    left: '130px',
+    top: '217px',
+    left: '125px',
     border: '1px solid $intentsBase8',
     backgroundColor: '$intentsBase1',
+    borderRadius: '5px',
     zIndex: '1',
   }),
   alert: cssObj({
-    paddingTop: '20px',
+    //paddingTop: '10px',
   }),
   divider: cssObj({
-    height: '0.5px',
+    height: '1px',
     width: '100%',
+    position: 'relative',
     backgroundColor: '$intentsBase6',
+    marginBottom: '5px',
+    overflow: 'visible',
   }),
 };