chore(front): replace components in embed modal

front/src/components/audio/EmbedWizard.vue

@@ -5,6 +5,11 @@ import { useStore } from '~/store'
 import { useClipboard } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 
+import Button from '~/components/ui/Button.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 interface Props {
   type: string
   id: number
@@ -69,54 +74,55 @@ const { copy, copied } = useClipboard({ source: embedCode })
             <p>
               {{ t('components.audio.EmbedWizard.help.width') }}
             </p>
-            <input
+            <Input
               id="embed-width"
               v-model.number="width"
               type="number"
               min="0"
               step="10"
-            >
+            />
           </div>
           <template v-if="type != 'track'">
             <br>
             <div class="field">
               <label for="embed-height">{{ t('components.audio.EmbedWizard.label.height') }}</label>
-              <input
+              <Input
                 id="embed-height"
                 v-model="height"
                 type="number"
                 :min="minHeight"
                 max="1000"
                 step="10"
-              >
+              />
             </div>
           </template>
         </div>
+        <Spacer />
         <div class="field">
-          <button
-            class="ui right accent labeled icon floated button"
+          <Button
+            class="right floated"
             @click="copy()"
+            icon="bi-copy"
+            secondary
           >
-            <i class="copy icon" />
             {{ t('components.audio.EmbedWizard.button.copy') }}
-          </button>
+          </Button>
           <label for="embed-width">{{ t('components.audio.EmbedWizard.label.embed') }}</label>
           <p>
             {{ t('components.audio.EmbedWizard.help.embed') }}
           </p>
           <textarea
             v-model="embedCode"
-            rows="5"
+            rows="3"
             readonly
+            style="width: 100%;"
           />
-          <div class="ui right">
-            <p
-              v-if="copied"
-              class="message"
-            >
-              {{ t('components.audio.EmbedWizard.message.copy') }}
-            </p>
-          </div>
+          <Alert
+            v-if="copied"
+            green
+          >
+            {{ t('components.audio.EmbedWizard.message.copy') }}
+          </Alert>
         </div>
       </div>
     </div>