diff --git a/scripts/templates/plugin/client/components/MyPluginComponent.css b/scripts/templates/plugin/client/components/MyPluginComponent.css new file mode 100644 index 000000000..187e68750 --- /dev/null +++ b/scripts/templates/plugin/client/components/MyPluginComponent.css @@ -0,0 +1,27 @@ +.myPluginContainer { + padding: 10px; + background: #f0f0f0; + border: 1px solid #d6d6d6; + margin: 10px 0; + text-align: center; + border-radius: 3px; +} + +.logo { + position: block; + animation: spin 2s infinite ease; + animation-delay: 1s; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.description { + color: #444444; +} diff --git a/scripts/templates/plugin/client/components/MyPluginComponent.js b/scripts/templates/plugin/client/components/MyPluginComponent.js index 42bfc09fb..d586ab473 100644 --- a/scripts/templates/plugin/client/components/MyPluginComponent.js +++ b/scripts/templates/plugin/client/components/MyPluginComponent.js @@ -1,12 +1,22 @@ import React from 'react'; import {CoralLogo} from 'plugin-api/beta/client/components/ui'; +import styles from './MyPluginComponent.css'; class MyPluginComponent extends React.Component { render() { return ( -
- - Plugin Created by Talk CLI +
+ +
+

Plugin created by Talk CLI

+ + + To read more about client plugins check{' '} + + our docs and guides! + + +
); }