feat(small): update default dashboard

livesession · Mar 7, 2024 · 89db81c · 89db81c
1 parent 945e52d
commit 89db81c
Show file tree

Hide file tree

Showing 17 changed files with 560 additions and 477 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -14,7 +14,7 @@ body:
     attributes:
       label: Contact Details
       description: How can we get in touch with you if we need more info?
-      placeholder: Please visit our slack channel [slack](https://adminjs.page.link/slack) or leave your email.
+      placeholder: Please visit our Discord channel [Discord](https://adminjs.page.link/discord) or leave your email.
     validations:
       required: false
   - type: textarea

diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
@@ -164,5 +164,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           JIRA_TOKEN: ${{ secrets.JIRA_TOKEN }}
           JIRA_EMAIL: ${{ secrets.JIRA_EMAIL }}
-          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
         run: yarn release
diff --git a/.releaserc b/.releaserc
@@ -24,13 +24,6 @@
     "@semantic-release/release-notes-generator",
     "@semantic-release/npm",
     "@semantic-release/github",
-    "@semantic-release/git",
-    [
-      "semantic-release-slack-bot",
-      {
-        "notifyOnSuccess": true,
-        "notifyOnFail": false
-      }
-    ]
+    "@semantic-release/git"
   ]
 }
diff --git a/README.md b/README.md
@@ -22,9 +22,9 @@ https://stats.adminjs.co
 - Check out the [documentation](https://docs.adminjs.co)
 - Try the [live demo](https://demo.adminjs.co) as mentioned above
 
-## Our open source community on Slack
+## Our open source community on Discord
 
-- [Join the community](https://adminjs.page.link/slack) to get help and be inspired.
+- [Join the community](https://adminjs.page.link/discord) to get help and be inspired.
 
 # What kind of problems it solves
 

diff --git a/package.json b/package.json
@@ -171,7 +171,6 @@
     "node-esm-import-all": "^1.0.0",
     "npm-run-all": "^4.1.5",
     "semantic-release": "^20.1.3",
-    "semantic-release-slack-bot": "^4.0.0",
     "sinon": "^15.0.2",
     "sinon-chai": "^3.7.0",
     "ts-node": "10.8.1",

diff --git a/src/frontend/components/app/default-dashboard.tsx b/src/frontend/components/app/default-dashboard.tsx
@@ -3,88 +3,82 @@ import { Box, Button, H2, H5, Illustration, IllustrationProps, Text } from '@adm
 import { styled } from '@adminjs/design-system/styled-components'
 
 import { useTranslation } from '../../hooks/index.js'
+import RocketSVG from './utils/rocket-svg.js'
+import DiscordLogo from './utils/discord-logo-svg.js'
 
-const pageHeaderHeight = 284
+const pageHeaderHeight = 300
 const pageHeaderPaddingY = 74
 const pageHeaderPaddingX = 250
 
 export const DashboardHeader: React.FC = () => {
   const { translateMessage } = useTranslation()
   return (
-    <Box position="relative" overflow="hidden" data-css="default-dashboard">
+    <Box data-css="default-dashboard">
       <Box
-        position="absolute"
-        top={50}
-        left={-10}
-        opacity={[0.2, 0.4, 1]}
-        animate
-      >
-        <Illustration variant="Rocket" />
-      </Box>
-      <Box
-        position="absolute"
-        top={-70}
-        right={-15}
-        opacity={[0.2, 0.4, 1]}
-        animate
-      >
-        <Illustration variant="Moon" />
-      </Box>
-      <Box
-        bg="grey100"
+        position="relative"
+        overflow="hidden"
+        bg="white"
         height={pageHeaderHeight}
         py={pageHeaderPaddingY}
         px={['default', 'lg', pageHeaderPaddingX]}
       >
-        <Text textAlign="center" color="white">
-          <H2>{translateMessage('welcomeOnBoard_title')}</H2>
-          <Text opacity={0.8}>
-            {translateMessage('welcomeOnBoard_subtitle')}
-          </Text>
+        <Box position="absolute" top={30} left={0} opacity={0.9} animate display={['none', 'none', 'none', 'block']}>
+          <RocketSVG />
+        </Box>
+        <Text textAlign="center" color="grey100">
+          <H2 fontWeight="bold">{translateMessage('welcomeOnBoard_title')}</H2>
+          <Text opacity={0.8}>{translateMessage('welcomeOnBoard_subtitle')}</Text>
         </Text>
       </Box>
     </Box>
   )
 }
 
 type BoxType = {
-  variant: string;
-  title: string;
-  subtitle: string;
-  href: string;
+  variant: string
+  title: string
+  subtitle: string
+  href: string
 }
 
-const boxes = ({ translateMessage }): Array<BoxType> => [{
-  variant: 'Planet',
-  title: translateMessage('addingResources_title'),
-  subtitle: translateMessage('addingResources_subtitle'),
-  href: 'https://adminjs.co/tutorial-passing-resources.html',
-}, {
-  variant: 'DocumentCheck',
-  title: translateMessage('customizeResources_title'),
-  subtitle: translateMessage('customizeResources_subtitle'),
-  href: 'https://adminjs.co/tutorial-customizing-resources.html',
-}, {
-  variant: 'DocumentSearch',
-  title: translateMessage('customizeActions_title'),
-  subtitle: translateMessage('customizeActions_subtitle'),
-  href: 'https://adminjs.co/tutorial-actions.html',
-}, {
-  variant: 'FlagInCog',
-  title: translateMessage('writeOwnComponents_title'),
-  subtitle: translateMessage('writeOwnComponents_subtitle'),
-  href: 'https://adminjs.co/tutorial-writing-react-components.html',
-}, {
-  variant: 'Folders',
-  title: translateMessage('customDashboard_title'),
-  subtitle: translateMessage('customDashboard_subtitle'),
-  href: 'https://adminjs.co/tutorial-custom-dashboard.html',
-}, {
-  variant: 'Astronaut',
-  title: translateMessage('roleBasedAccess_title'),
-  subtitle: translateMessage('roleBasedAccess_subtitle'),
-  href: 'https://adminjs.co/tutorial-rbac.html',
-}]
+const boxes = ({ translateMessage }): Array<BoxType> => [
+  {
+    variant: 'Details',
+    title: translateMessage('addingResources_title'),
+    subtitle: translateMessage('addingResources_subtitle'),
+    href: 'https://docs.adminjs.co/basics/resource#providing-resources-explicitly',
+  },
+  {
+    variant: 'Docs',
+    title: translateMessage('customizeResources_title'),
+    subtitle: translateMessage('customizeResources_subtitle'),
+    href: 'https://docs.adminjs.co/basics/resource#customizing-resources',
+  },
+  {
+    variant: 'Plug',
+    title: translateMessage('customizeActions_title'),
+    subtitle: translateMessage('customizeActions_subtitle'),
+    href: 'https://docs.adminjs.co/basics/action',
+  },
+  {
+    variant: 'Cup',
+    title: translateMessage('writeOwnComponents_title'),
+    subtitle: translateMessage('writeOwnComponents_subtitle'),
+    href: 'https://docs.adminjs.co/ui-customization/writing-your-own-components',
+  },
+  {
+    variant: 'Photos',
+    title: translateMessage('customDashboard_title'),
+    subtitle: translateMessage('customDashboard_subtitle'),
+    href: 'https://docs.adminjs.co/ui-customization/dashboard-customization',
+  },
+  {
+    variant: 'IdentityCard',
+    title: translateMessage('roleBasedAccess_title'),
+    subtitle: translateMessage('roleBasedAccess_subtitle'),
+    href: 'https://docs.adminjs.co/tutorials/adding-role-based-access-control',
+  },
+]
 
 const Card = styled(Box)`
   display: ${({ flex }): string => (flex ? 'flex' : 'block')};
@@ -94,10 +88,16 @@ const Card = styled(Box)`
   border: 1px solid transparent;
   border-radius: ${({ theme }) => theme.space.md};
   transition: all 0.1s ease-in;
+
   &:hover {
-    border: 1px solid ${({ theme }) => theme.colors.primary100};
+    border: 1px solid ${({ theme }) => theme.colors.primary60};
     box-shadow: ${({ theme }) => theme.shadows.cardHover};
   }
+
+  & .dsc-icon svg, .gh-icon svg {
+    width: 64px;
+    height: 64px;
+  }
 `
 
 Card.defaultProps = {
@@ -132,47 +132,51 @@ export const Dashboard: React.FC = () => {
                   width={100}
                   height={70}
                 />
-                <H5 mt="lg">{box.title}</H5>
+                <H5 mt="md">{box.title}</H5>
                 <Text>{box.subtitle}</Text>
               </Text>
             </Card>
           </Box>
         ))}
+        <Card width={1} m="lg">
+          <Text textAlign="center">
+            <Illustration variant="AdminJSLogo" />
+            <H5>{translateMessage('needMoreSolutions_title')}</H5>
+            <Text>{translateMessage('needMoreSolutions_subtitle')}</Text>
+            <Text mt="xxl">
+              <Button as="a" variant="contained" href="https://forms.adminjs.co/" target="_blank">
+                {translateButton('contactUs')}
+              </Button>
+            </Text>
+          </Text>
+        </Card>
         <Box width={[1, 1, 1 / 2]} p="lg">
-          <Card as="a" flex href="https://adminjs.page.link/slack" target="_blank">
-            <Box flexShrink={0}><Illustration variant="SlackLogo" /></Box>
+          <Card as="a" flex href="https://adminjs.page.link/discord" target="_blank">
+            <Box flexShrink={0} className="dsc-icon">
+              <DiscordLogo />
+            </Box>
             <Box ml="xl">
               <H5>{translateMessage('community_title')}</H5>
               <Text>{translateMessage('community_subtitle')}</Text>
             </Box>
           </Card>
         </Box>
         <Box width={[1, 1, 1 / 2]} p="lg">
-          <Card as="a" flex href="https://github.com/SoftwareBrothers/adminjs/issues" target="_blank">
-            <Box flexShrink={0}><Illustration variant="GithubLogo" /></Box>
+          <Card
+            as="a"
+            flex
+            href="https://github.com/SoftwareBrothers/adminjs/issues"
+            target="_blank"
+          >
+            <Box flexShrink={0} className="gh-icon">
+              <Illustration variant="GithubLogo" />
+            </Box>
             <Box ml="xl">
               <H5>{translateMessage('foundBug_title')}</H5>
               <Text>{translateMessage('foundBug_subtitle')}</Text>
             </Box>
           </Card>
         </Box>
-        <Card width={1} m="lg">
-          <Text textAlign="center">
-            <Illustration variant="AdminJSLogo" />
-            <H5>{translateMessage('needMoreSolutions_title')}</H5>
-            <Text>{translateMessage('needMoreSolutions_subtitle')}</Text>
-            <Text mt="xxl">
-              <Button
-                as="a"
-                variant="contained"
-                href="https://forms.adminjs.co/"
-                target="_blank"
-              >
-                {translateButton('contactUs')}
-              </Button>
-            </Text>
-          </Text>
-        </Card>
       </Box>
     </Box>
   )

diff --git a/src/frontend/components/app/utils/discord-logo-svg.tsx b/src/frontend/components/app/utils/discord-logo-svg.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+const DiscordLogo: React.FC = () => (
+  <svg
+    viewBox="115.237 115.462 66.898 66.898"
+    width="66.898"
+    height="66.898"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      transform="matrix(0.3344910442829132, 0, 0, 0.3344910442829132, 93.82939147949219, 109.77567291259766)"
+    >
+      <defs>
+        <rect id="SVGID_1_" x="78" y="31" width="172" height="172" />
+      </defs>
+      <clipPath id="SVGID_2_">
+        <rect x="78" y="31" width="172" height="172" style={{ overflow: 'visible' }} />
+      </clipPath>
+      <g className="st0" clipPath="url('#SVGID_2_')">
+        <path
+          className="st1"
+          d="M78,116.8C78,69.4,116.4,31,163.8,31c47.4,0,85.8,38.4,85.8,85.8s-38.4,85.8-85.8,85.8c0,0,0,0,0,0    C116.4,202.5,78,164.1,78,116.8C78,116.8,78,116.8,78,116.8z"
+          fill="rgb(88, 101, 242)"
+        />
+        <path
+          className="st2"
+          d="M202.4,81.9c-7.3-3.3-14.9-5.7-22.8-7c-1,1.8-2.1,4.1-2.9,6c-8.4-1.3-16.9-1.3-25.3,0c-0.9-2.1-1.9-4.1-3-6    c-7.9,1.3-15.6,3.7-22.8,7.1c-14.4,21.5-18.3,42.4-16.4,63.1c8.5,6.3,17.9,11.1,28,14.1c2.3-3.1,4.3-6.3,6-9.7    c-3.3-1.2-6.4-2.7-9.4-4.5c0.8-0.6,1.5-1.2,2.3-1.8c17.7,8.4,38.3,8.4,56,0c0.8,0.6,1.5,1.2,2.3,1.8c-3,1.8-6.2,3.3-9.5,4.5    c1.7,3.4,3.7,6.6,6,9.7c10.1-3.1,19.6-7.8,28-14.1C221.1,121.1,214.9,100.3,202.4,81.9z M145.6,132.3c-5.5,0-9.9-5-9.9-11.1    s4.4-11.2,9.9-11.2c5.6,0,10,5,10,11.2C155.5,127.3,151.2,132.3,145.6,132.3z M182.4,132.3c-5.5,0-9.9-5-9.9-11.1    s4.4-11.2,9.9-11.2c5.6,0,10,5,9.9,11.2S187.9,132.3,182.4,132.3z"
+          fill="rgb(255, 255, 255)"
+        />
+      </g>
+    </g>
+    <rect x="115.237" y="115.462" className="st3" width="66.898" height="66.898" fill="none" />
+  </svg>
+)
+
+export { DiscordLogo }
+export default DiscordLogo