updated onboarding component

packages/core/admin/admin/src/pages/Admin/Onboarding/StaticLinks/StyledLink.js

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-
-const StyledLink = styled.a`
-  display: flex;
-  width: 100%;
-  height: 27px;
-  padding: 0 20px;
-  color: #919bae;
-  span,
-  svg {
-    margin: auto 0;
-  }
-  svg {
-    margin-right: 10px;
-  }
-  &:hover {
-    background-color: #f7f8f8;
-    text-decoration: none;
-    color: #919bae;
-  }
-`;
-
-export default StyledLink;

packages/core/admin/admin/src/pages/Admin/Onboarding/StaticLinks/index.js

@@ -6,11 +6,46 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Text } from '@strapi/parts/Text';
 import { InjectionZone } from '../../../../shared/components';
-import StyledLink from './StyledLink';
 
-function StaticLinks() {
+const StyledLink = styled.a`
+  display: flex;
+  width: 100%;
+  height: 27px;
+  padding: 0 20px;
+  color: ${({ theme }) => theme.colors.neutral400};
+  text-decoration: none;
+  span,
+  svg {
+    margin: auto 0;
+  }
+  svg {
+    margin-right: 10px;
+  }
+
+  ${[Text]} {
+    color: ${({ theme }) => theme.colors.neutral400};
+    margin: auto 0;
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.neutral100};
+    color: ${({ theme }) => theme.colors.neutral500};
+
+    ${[Text]} {
+      color: ${({ theme }) => theme.colors.neutral700};
+    }
+  }
+
+  ${[Text]} {
+    color: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+
+const StaticLinks = () => {
   const { formatMessage } = useIntl();
   const staticLinks = [
     {
@@ -34,7 +69,7 @@ function StaticLinks() {
           <li key={label}>
             <StyledLink href={destination} target="_blank" rel="noopener noreferrer">
               <FontAwesomeIcon icon={icon} />
-              <span>{label}</span>
+              <Text>{label}</Text>
             </StyledLink>
           </li>
         );
@@ -42,6 +77,6 @@ function StaticLinks() {
       <InjectionZone area="admin.tutorials.links" />
     </ul>
   );
-}
+};
 
 export default StaticLinks;

packages/core/admin/admin/src/pages/Admin/Onboarding/Wrapper.js

@@ -76,7 +76,7 @@ const Wrapper = styled.div`
     margin-right: 15px;
     background-color: white;
     box-shadow: 0 2px 4px 0 #e3e9f3;
-    border-radius: 3px;
+    border-radius: ${({ theme }) => theme.spaces[2]};
     overflow: hidden;
     &.shown {
       animation: ${fadeIn} 0.5s forwards;
@@ -104,8 +104,8 @@ const Wrapper = styled.div`
       height: 100%;
       border-radius: 50%;
       color: white;
-      background: #0e7de7;
+      background: ${({ theme }) => theme.colors.primary600};
-      box-shadow: 0px 2px 4px 0px rgba(227, 233, 243, 1);
+      box-shadow: ${({ theme }) => theme.shadows.tableShadow};
       i,
       svg {
         margin: auto;