Merge pull request #3380 from JoinColony/fix/16115953-loading-skeleton-gradient

fix: change loading skeleton gradient for dark mode

Author: adam-strzelec

src/components/common/LoadingSkeleton/LoadingSkeleton.tsx

@@ -15,7 +15,6 @@ const LoadingSkeleton: React.FC<LoadingSkeletonProps> = ({
   ) : (
     <>{children}</>
   );
-
 LoadingSkeleton.displayName = displayName;
 
 export default LoadingSkeleton;

src/components/frame/Extensions/themes/consts.ts

@@ -67,6 +67,7 @@ export const light = {
   teamsGrey50: '#F4F4F4',
   teamsGrey100: '#D7E2EE',
   teamsGrey500: '#415A77',
+  skeletonGradient: 'rgba(255, 255, 255, 0.5)',
 };
 
 export const dark = {
@@ -138,4 +139,5 @@ export const dark = {
   teamsGrey50: '#2E405E',
   teamsGrey100: '#314972',
   teamsGrey500: '#5A7BA0',
+  skeletonGradient: 'rgba(146, 149, 152, 0.5)',
 };

src/components/frame/Extensions/themes/utils.ts

@@ -71,6 +71,7 @@ export const mapTheme = (variables: ITheme): IMappedTheme => {
     '--color-teams-grey-50': variables.teamsGrey50 || '',
     '--color-teams-grey-100': variables.teamsGrey100 || '',
     '--color-teams-grey-500': variables.teamsGrey500 || '',
+    '--color-skeleton-gradient': variables.skeletonGradient || '',
   };
 };
 

tailwind.config.js

@@ -107,6 +107,9 @@ module.exports = {
         100: 'var(--color-teams-grey-100)',
         500: 'var(--color-teams-grey-500)',
       },
+      gradient: {
+        base: 'var(--color-skeleton-gradient)',
+      },
     },
     fontFamily: {
       inter: ['Inter', 'sans-serif'],
@@ -254,8 +257,7 @@ module.exports = {
             'background-color': theme('colors.gray.100'),
             'background-repeat': 'no-repeat',
             'min-height': '1em',
-            'background-image':
-              'linear-gradient(90deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0))',
+            'background-image': `linear-gradient(90deg,rgba(255, 255, 255, 0),${theme('colors.gradient.base')},rgba(255, 255, 255, 0))`,
             'background-size': '2.5rem 100%',
             'background-position': 'left -2.5rem top 0',
             animation: 'shine 1.125s ease infinite',