diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-05-28 12:43:57 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-05-28 12:43:57 +1000 |
| commit | afa1cae73c3df3ab099ca718c2db8621d26aac4b (patch) | |
| tree | 0fdd341b9cf4e4c2839eebd40fb3ecafe8789919 /src/components/TutorialPane.vue | |
| parent | c547ba59906bdd0ccebe5d4592739227dd0c73eb (diff) | |
Add RButton component
Diffstat (limited to 'src/components/TutorialPane.vue')
| -rw-r--r-- | src/components/TutorialPane.vue | 30 |
1 files changed, 10 insertions, 20 deletions
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index d5f681c..18628f8 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -1,6 +1,7 @@ <script lang="ts"> import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; +import RButton from './RButton.vue'; import {Action} from '../lib'; export default defineComponent({ @@ -33,14 +34,6 @@ export default defineComponent({ overflow: 'auto', }; }, - buttonStyles(): Record<string,string> { - return { - display: 'block', - padding: '8px 16px', - borderRadius: '5px', - backgroundColor: '#292524', - }; - }, }, watch: { triggerFlag(){ @@ -87,7 +80,7 @@ export default defineComponent({ this.sendEnabledFeatures(); } }, - components: {CloseIcon, }, + components: {CloseIcon, RButton, }, emits: ['tutorial-close', 'tutorial-stage-chg', ], }); </script> @@ -107,12 +100,12 @@ export default defineComponent({ quis nostrud exercitation ullamco. </div> <div class="w-full flex justify-evenly mt-2"> - <button :style="buttonStyles" class="hover:brightness-125" @click="onStartTutorial"> + <r-button class="bg-stone-800 text-white" @click="onStartTutorial"> Start Tutorial - </button> - <button :style="buttonStyles" class="hover:brightness-125" @click="onClose"> + </r-button> + <r-button class="bg-stone-800 text-white" @click="onClose"> Close - </button> + </r-button> </div> </template> <template v-else> @@ -166,15 +159,12 @@ export default defineComponent({ </div> <!-- Buttons --> <div class="w-full flex justify-evenly mt-2"> - <button :style="buttonStyles" - :disabled="stage == 1" :class="stage == 1 ? ['brightness-75'] : ['hover:brightness-125']" - @click="onPrevClick"> + <r-button :disabled="stage == 1" class="bg-stone-800 text-white" @click="onPrevClick"> Prev - </button> - <button :style="buttonStyles" class="hover:brightness-125" - @click="(stage != maxStage) ? onNextClick() : onClose()"> + </r-button> + <r-button class="bg-stone-800 text-white" @click="(stage != maxStage) ? onNextClick() : onClose()"> {{stage != maxStage ? 'Next' : 'Finish'}} - </button> + </r-button> </div> </template> </div> |