Improved banner sizing on the Project Panel

FuelLabs · Jan 24, 2024 · 59052bd · 59052bd
1 parent 38a7419
commit 59052bd
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 61 deletions.
diff --git a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/ProjectDetailPanel.tsx
@@ -54,40 +54,24 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
     <>
       {isPanelVisible && (
         <Box ref={panelRef} css={styles.panelStyle} data-mobile={isMobileView}>
-          <Box>
-            <ProjectBanner
-              name={project.name}
-              banner={project.banner}
-              style={styles.banner}
-            />
-            <Box css={styles.closeButton}>
-              <TagCloseButton onPress={onClose} />
+          <Box style={styles.bannerContainer}>
+            <Box>
+              <ProjectBanner
+                name={project.name}
+                banner={project.banner}
+                style={styles.banner}
+              />
+              <Box css={styles.closeButton}>
+                <TagCloseButton onPress={onClose} />
+              </Box>
             </Box>
-          </Box>
-          <Box css={styles.imageContainer}>
-            <Box css={styles.image}>
-              <ProjectImage name={project.name} image={project.image} />
+            <Box css={styles.imageContainer}>
+              <Box css={styles.image}>
+                <ProjectImage name={project.name} image={project.image} />
+              </Box>
             </Box>
           </Box>
-          <Box>
-            <h1 style={styles.h1}>{project.name}</h1>
-            {project.url && (
-              <Button
-                as="a"
-                href={project.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                variant="ghost"
-                size="xs"
-                leftIcon="ExternalLink"
-                color="intentsBase8"
-                intent="base"
-                css={styles.websiteButton}
-              >
-                Visit Website
-              </Button>
-            )}
-          </Box>
+          <h1 style={styles.h1}>{project.name}</h1>
           {project.isLive ? (
             <Tag intent="base" size="xs" variant="outlined" css={styles.button}>
               <Box css={styles.dotLive} />
@@ -99,6 +83,23 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
               {'Building'}
             </Tag>
           )}
+          {project.url && (
+            <Button
+              as="a"
+              href={project.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="ghost"
+              size="xs"
+              leftIcon="ExternalLink"
+              color="intentsBase8"
+              intent="base"
+              css={styles.websiteButton}
+            >
+              Visit Website
+            </Button>
+          )}
+
           <Box style={styles.tagBox}>
             {project.tags?.map((tag, index) => (
               <Badge key={index} variant="outlined" style={styles.badge}>
@@ -108,13 +109,7 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
           </Box>
 
           <p style={styles.paragraph}>{project.description}</p>
-          <Alert status="info">
-            <Alert.Description style={{ fontSize: '13px' }}>
-              This content is provided by the app developers. Links and content
-              are not verified nor endorsed by Fuel. If you have any questions,
-              please contact the project directly.
-            </Alert.Description>
-          </Alert>
+
           <h2 style={styles.h2}>Socials</h2>
           <Box css={styles.socials}>
             {project.twitter && (
@@ -159,6 +154,17 @@ const ProjectDetailPanel: FC<ProjectDetailPanelProps> = ({
               </Button>
             )}
           </Box>
+          <Box css={styles.divider}></Box>
+
+          <Box css={styles.alert}>
+            <Alert status="info">
+              <Alert.Description style={{ fontSize: '13px' }}>
+                This content is provided by the app developers. Links and
+                content are not verified nor endorsed by Fuel. If you have any
+                questions, please contact the project directly.
+              </Alert.Description>
+            </Alert>
+          </Box>
         </Box>
       )}
     </>

diff --git a/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx b/packages/app/src/systems/Ecosystem/components/ProjectDetailPanel/styles.tsx
@@ -2,21 +2,22 @@ import { cssObj } from '@fuel-ui/css';
 
 export const styles = {
   panelStyle: cssObj({
+    display: 'flex',
     flexDirection: 'column',
     alignItems: 'start',
     position: 'fixed',
     right: 0,
     top: 0,
     height: '95%',
-    width: '50%',
+    width: '650px',
     backgroundColor: '$intentsBase1',
     padding: '30px',
     overflowY: 'auto',
     zIndex: 1000,
     borderLeft: '0.5px solid #2E2E2E',
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.6)',
     '&[data-mobile="true"]': {
-      width: '85%',
+      width: '88%',
       overflowY: 'scroll',
     },
   }),
@@ -25,27 +26,39 @@ export const styles = {
     position: 'fixed',
     top: 15,
     right: 15,
-    backgroundColor: '$intentsBase3',
+    backgroundColor: '$intentsBase5',
     borderRadius: '$md',
+    border: '1px solid $intentsBase10',
     height: '25px',
     width: '25px',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 4,
   }),
+  statusAlignment: cssObj({
+    display: 'flex',
+    flexDirection: 'row',
+    //alignItems: 'center',
+  }),
+  bannerContainer: cssObj({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  }),
   imageContainer: cssObj({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    width: '110px',
-    height: '110px',
+    width: '85px',
+    height: '85px',
     borderRadius: '12px',
     overflow: 'hidden',
     marginBottom: '20px',
-    position: 'relative',
+    position: 'absolute',
     border: '1px solid $intentsBase8',
     backgroundColor: '$intentsBase1',
-    top: '110px',
+    left: '30px',
+    top: '165px',
     zIndex: 2,
   }),
   image: cssObj({
@@ -54,18 +67,7 @@ export const styles = {
     justifyContent: 'center',
     alignItems: 'center',
     paddingTop: '6.5px',
-    transform: 'scale(285%)',
-  }),
-  backgroundImage: cssObj({
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    height: '275px',
-    width: '100%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    zIndex: 1,
-    borderBottom: '1px solid #2E2E2E',
+    transform: 'scale(230%)',
   }),
   websiteButton: cssObj({
     alignItems: 'center',
@@ -91,7 +93,7 @@ export const styles = {
     alignItems: 'center',
     marginBottom: '7.5px',
     position: 'relative',
-    marginTop: '130px',
+    marginTop: '240px',
   }),
   h2: cssObj({
     fontSize: '18px',
@@ -113,7 +115,9 @@ export const styles = {
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center',
     width: '100%',
-    height: '200px',
+    minHeight: '210px',
+    maxHeight: '225px',
+    height: 'fit-content',
     objectFit: 'cover',
     objectPosition: 'center',
     position: 'absolute',
@@ -144,9 +148,18 @@ export const styles = {
   }),
   button: cssObj({
     position: 'absolute',
-    left: '150px',
-    top: '210px',
+    top: '215px',
+    left: '130px',
     border: '1px solid $intentsBase8',
+    backgroundColor: '$intentsBase1',
     zIndex: '1',
   }),
+  alert: cssObj({
+    paddingTop: '20px',
+  }),
+  divider: cssObj({
+    height: '0.5px',
+    width: '100%',
+    backgroundColor: '$intentsBase6',
+  }),
 };