feat(dashboard): enhance premium section with styled containers and improved layout

Author: sumansaurabh

src/components/dashboard/DashboardContent/DashboardContent.tsx

@@ -13,35 +13,59 @@ import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
 import { DashboardTabs } from '../DashboardTabs/DashboardTabs';
 
+// A container to give a subtle, premium background and some padding.
+const PremiumContainer = styled.div`
+  background: linear-gradient(to bottom, #f7f7f7, #eeeeee);
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+`;
+
+// A container for the header (title + buttons).
+// Add a subtle border or bottom separation, which can help with a premium separation of sections.
+const HeaderContainer = styled(Flex)`
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 1.5rem;
+`;
+
 const StyledBaseSpace = styled(BaseSpace)`
   .dashboard-crown-icon {
     font-size: 30px !important;
-    color: #ffa500;
+    /* Metallic silver or gold accent. You can swap #c0c0c0 (silver) with #FFD700 (gold) */
+    color: #c0c0c0;
+    transition: color 0.3s, transform 0.3s;
 
     &:hover {
-      color: #ffa500;
+      color: #a8a8a8;
+      transform: scale(1.1);
     }
   }
 
   .dashboard-link-icon {
     font-size: 28px !important;
-    color: #1890ff;
+    color: #6c6c6c;
+    transition: color 0.3s, transform 0.3s;
 
     &:hover {
-      color: #40a9ff;
+      color: #4f4f4f;
+      transform: scale(1.05);
     }
   }
 
   .ant-btn-disabled .dashboard-link-icon {
     color: #00000040;
+    transform: none;
   }
 
   .dashboard-git-icon {
     font-size: 28px !important;
-    color: #3e75c3;
+    color: #6c6c6c;
+    transition: color 0.3s, transform 0.3s;
 
     &:hover {
-      color: #305d9c;
+      color: #4f4f4f;
+      transform: scale(1.05);
     }
   }
 `;
@@ -57,7 +81,6 @@ export const DashboardContent: React.FC = () => {
   const [premiumType, setPremiumType] = useState<Boolean>(params.has('premium'));
   const [repo, setRepo] = useState<GitAppUsageType>();
   const [isLoading, setIsLoading] = useState(true);
-  // const 
 
   useEffect(() => {
     getGitApp(orgName || '', repoName || '', 'GITHUB')
@@ -84,15 +107,20 @@ export const DashboardContent: React.FC = () => {
   }
 
   return (
-    <>
-      <Flex justify="space-between" align="center" wrap="wrap" gap=".75rem">
+    <PremiumContainer>
+      <HeaderContainer justify="space-between" align="center" wrap="wrap" gap=".75rem">
         <Title level={4} style={{ marginBottom: '0' }}>
           {orgName}/{repoName}
         </Title>
 
         <StyledBaseSpace size="middle">
+          {/* Show the premium crown if the user is not premium */}
           {!premiumType && (
-            <BaseTooltip placement="topRight" title={t('dashboard.premiumBtnInfo')} color={theme.primary6}>
+            <BaseTooltip
+              placement="topRight"
+              title={t('dashboard.premiumBtnInfo')}
+              color={theme.primary6}
+            >
               <BaseButton
                 type="text"
                 size="small"
@@ -102,6 +130,7 @@ export const DashboardContent: React.FC = () => {
             </BaseTooltip>
           )}
 
+          {/* Netlify link (if available) */}
           <BaseTooltip
             placement="topRight"
             title={repo?.netlify?.site_url ? t('dashboard.archUrl') : t('dashboard.archUrlUnavailable')}
@@ -119,6 +148,7 @@ export const DashboardContent: React.FC = () => {
             />
           </BaseTooltip>
 
+          {/* GitHub link */}
           <BaseTooltip placement="topRight" title={t('dashboard.gitUrl')} color={theme.primary6}>
             <BaseButton
               type="link"
@@ -130,8 +160,10 @@ export const DashboardContent: React.FC = () => {
             />
           </BaseTooltip>
         </StyledBaseSpace>
-      </Flex>
-        {(repo) &&<DashboardTabs repoDetails = {repo}/>}
-    </>
+      </HeaderContainer>
+
+      {/* The rest of your Dashboard content */}
+      {repo && <DashboardTabs repoDetails={repo} />}
+    </PremiumContainer>
   );
 };