|
|
|
|
|
|
|
|
* along with this program; if not, write to the Free Software Foundation, |
|
|
* along with this program; if not, write to the Free Software Foundation, |
|
|
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
|
|
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
|
|
*/ |
|
|
*/ |
|
|
|
|
|
import styled from '@emotion/styled'; |
|
|
|
|
|
import { themeBorder } from 'design-system'; |
|
|
import * as React from 'react'; |
|
|
import * as React from 'react'; |
|
|
import EllipsisIcon from '../../components/icons/EllipsisIcon'; |
|
|
import EllipsisIcon from '../../components/icons/EllipsisIcon'; |
|
|
import { translate } from '../../helpers/l10n'; |
|
|
import { translate } from '../../helpers/l10n'; |
|
|
|
|
|
|
|
|
icon: React.ReactNode |
|
|
icon: React.ReactNode |
|
|
) { |
|
|
) { |
|
|
return ( |
|
|
return ( |
|
|
<button |
|
|
|
|
|
|
|
|
<StyledTutorialButtons |
|
|
className={`button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-${mode}`} |
|
|
className={`button button-huge display-flex-column big-spacer-right big-spacer-bottom tutorial-mode-${mode}`} |
|
|
// Currently, OtherCI is the same tutorial as Manual. We might update it to its own stand-alone |
|
|
// Currently, OtherCI is the same tutorial as Manual. We might update it to its own stand-alone |
|
|
// tutorial in the future. |
|
|
// tutorial in the future. |
|
|
|
|
|
|
|
|
<div className="medium big-spacer-top"> |
|
|
<div className="medium big-spacer-top"> |
|
|
{translate('onboarding.tutorial.choose_method', mode)} |
|
|
{translate('onboarding.tutorial.choose_method', mode)} |
|
|
</div> |
|
|
</div> |
|
|
</button> |
|
|
|
|
|
|
|
|
</StyledTutorialButtons> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</> |
|
|
</> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const StyledTutorialButtons = styled.button` |
|
|
|
|
|
border: ${themeBorder('default', 'projectCardBorder')}; |
|
|
|
|
|
&:hover, |
|
|
|
|
|
&:focus, |
|
|
|
|
|
&:focus-visible, |
|
|
|
|
|
&:active { |
|
|
|
|
|
border: ${themeBorder('default', 'tabBorder')}; |
|
|
|
|
|
outline: none; |
|
|
|
|
|
} |
|
|
|
|
|
`; |