diff --git a/packages/compass-shell/src/components/shell-header/shell-header.jsx b/packages/compass-shell/src/components/shell-header/shell-header.jsx index a1c3d320f49..37915d07389 100644 --- a/packages/compass-shell/src/components/shell-header/shell-header.jsx +++ b/packages/compass-shell/src/components/shell-header/shell-header.jsx @@ -1,4 +1,4 @@ -import { Icon, IconButton, css, spacing, uiColors } from '@mongodb-js/compass-components'; +import { Icon, IconButton, css, spacing, uiColors, keyframes } from '@mongodb-js/compass-components'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; @@ -16,11 +16,28 @@ const shellHeaderLeftStyles = css({ alignItems: 'center' }); + +const shellHeaderDefaultColor = uiColors.gray.light1; +const shellHeaderFlashColorDark = uiColors.gray.light1; +const shellHeaderFlashColorLight = uiColors.gray.light1; +const shellLoaderFlash = keyframes` + 0% { color: ${uiColors.gray.light1}; } + 10% { color: ${shellHeaderFlashColorDark}; } + 20% { color: ${shellHeaderFlashColorLight}; } + 30% { color: ${shellHeaderFlashColorDark}; } + 40% { color: ${shellHeaderFlashColorLight}; } + 50% { color: ${shellHeaderFlashColorDark}; } + 60% { color: ${shellHeaderFlashColorLight}; } + 70% { color: ${shellHeaderFlashColorDark}; } + 80% { color: ${shellHeaderFlashColorLight}; } + 100% { color: ${uiColors.gray.light1}; } +`; + const shellHeaderToggleStyles = css({ background: 'none', border: 'none', cursor: 'pointer', - color: uiColors.gray.light1, + color: shellHeaderDefaultColor, padding: `0px ${spacing[2]}px`, height: '100%', display: 'flex', @@ -34,11 +51,13 @@ const shellHeaderToggleStyles = css({ transition: 'all 200ms', userSelect: 'none', textTransform: 'uppercase', + animation: `${shellLoaderFlash} 2s linear`, '&:hover': { color: uiColors.gray.light3 } }); + const shellHeaderRightStyles = css({ display: 'flex', paddingTop: spacing[1] / 2,