diff --git a/src/components/TokenForm/GitTokenForm.tsx b/src/components/TokenForm/GitTokenForm.tsx index 69402203..a3431246 100644 --- a/src/components/TokenForm/GitTokenForm.tsx +++ b/src/components/TokenForm/GitTokenForm.tsx @@ -10,7 +10,6 @@ import { ServiceEmailTypes, ServiceTokenTypes, ServiceUserNameTypes } from '@ser import { useAuthing } from './gitTokenHooks'; const AuthingLoginButton = styled(Button)` - white-space: nowrap; width: 100%; `; const GitTokenInput = styled(TextField)``; diff --git a/src/pages/Main/WorkspaceSelector.tsx b/src/pages/Main/WorkspaceSelector.tsx index 6d7849b6..61d43dc7 100644 --- a/src/pages/Main/WorkspaceSelector.tsx +++ b/src/pages/Main/WorkspaceSelector.tsx @@ -2,7 +2,7 @@ import Promise from 'bluebird'; import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import BadgeRaw from '@material-ui/core/Badge'; -import styled, { css } from 'styled-components'; +import styled, { css, keyframes } from 'styled-components'; import defaultIcon from '../../images/default-icon.png'; import { getAssetsFileUrl } from '@/helpers/url'; @@ -40,6 +40,10 @@ const Root = styled.div<{ hibernated?: boolean; active?: boolean }>` `} `; +const backgroundColorShift = keyframes` +from {background-color: #dddddd;} + to {background-color: #eeeeee} +`; // TODO: background: theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.common.white, // TODO: color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.common.white), // TODO: border: theme.palette.type === 'dark' ? 'none' : 1px solid rgba(0, 0, 0, 0.12), @@ -69,6 +73,9 @@ const Avatar = styled.div<{ large?: boolean; transparent?: boolean; addAvatar: b &${({ highlightAdd, addAvatar }) => (highlightAdd && addAvatar ? '' : ':hover')}, &:hover { background-color: #eeeeee; + animation: ${backgroundColorShift} 5s infinite; + animation-direction: alternate; + animation-timing-function: cubic-bezier(0.4, 0, 1, 1); color: black; } ${({ addAvatar }) =>