From e577886cdf5a24cdbfe2eaa0b99af2ced95d1a25 Mon Sep 17 00:00:00 2001
From: Eugene Serb <46799701+eugene-serb@users.noreply.github.com>
Date: Thu, 30 Jun 2022 20:15:31 +0300
Subject: [PATCH] Added new component message-item, decomposited wavelovers-app

---
 src/components/GamepadList.vue   |  4 +++
 src/components/MessageItem.vue   | 35 ++++++++++++++++++++++++++
 src/components/PatternList.vue   |  4 +++
 src/components/WaveloversApp.vue | 43 ++++++++------------------------
 4 files changed, 54 insertions(+), 32 deletions(-)
 create mode 100644 src/components/MessageItem.vue

diff --git a/src/components/GamepadList.vue b/src/components/GamepadList.vue
index c73ee5b..5320832 100644
--- a/src/components/GamepadList.vue
+++ b/src/components/GamepadList.vue
@@ -24,6 +24,10 @@
 
 <style>
     .device-list {
+        margin-bottom: 16px;
+        padding: 32px;
+        border-radius: var(--number-border-radius);
+        background: var(--color-content-item-background);
         display: flex;
         flex-direction: row;
         justify-content: space-around;
diff --git a/src/components/MessageItem.vue b/src/components/MessageItem.vue
new file mode 100644
index 0000000..5c903dc
--- /dev/null
+++ b/src/components/MessageItem.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="message">
+        <span>
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'MessageItem',
+        components: {},
+    };
+</script>
+
+<style>
+    .message {
+        width: 100%;
+        margin-bottom: 16px;
+        padding: 32px;
+        border-radius: var(--number-border-radius);
+        background: var(--color-content-item-background);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        font-size: 16px;
+    }
+
+    @media only screen and (min-width: 540px) {
+        .message {
+            font-size: 24px;
+        }
+    }
+</style>
diff --git a/src/components/PatternList.vue b/src/components/PatternList.vue
index 1b1d892..d391991 100644
--- a/src/components/PatternList.vue
+++ b/src/components/PatternList.vue
@@ -39,6 +39,10 @@
 
 <style>
     .pattern-list {
+        margin-bottom: 16px;
+        padding: 32px;
+        border-radius: var(--number-border-radius);
+        background: var(--color-content-item-background);
         display: flex;
         flex-direction: row;
         justify-content: space-around;
diff --git a/src/components/WaveloversApp.vue b/src/components/WaveloversApp.vue
index 1ad0436..d3f07b1 100644
--- a/src/components/WaveloversApp.vue
+++ b/src/components/WaveloversApp.vue
@@ -1,22 +1,14 @@
 <template>
     <div class="wavelovers">
-        <div class="content-item">
-            <PatternList v-if="patterns.length > 0"
-                         :patterns="patterns"
-                         :mode="mode"
-                         :isActive="isActive"
-                         @change="change" />
-            <div class="message" v-else>
-                <span>Loading...</span>
-            </div>
-        </div>
-        <div class="content-item">
-            <GamepadList v-if="gamepads.length > 0"
-                         :gamepads="gamepads" />
-            <div class="message" v-else>
-                <span>Press any gamepad's button or connect new gamepad.</span>
-            </div>
-        </div>
+        <PatternList v-if="patterns.length > 0"
+                     :patterns="patterns"
+                     :mode="mode"
+                     :isActive="isActive"
+                     @change="change" />
+        <MessageItem v-else>Loading...</MessageItem>
+        <GamepadList v-if="gamepads.length > 0"
+                     :gamepads="gamepads" />
+        <MessageItem v-else>Press any gamepad's button or connect new gamepad.</MessageItem>
     </div>
 </template>
 
@@ -24,12 +16,14 @@
     import PatternList from '@/components/PatternList.vue';
     import GamepadList from '@/components/GamepadList.vue';
     import Gamepad from '@/components/Gamepad.js';
+    import MessageItem from '@/components/MessageItem.vue';
 
     export default {
         name: 'WaveloversApp',
         components: {
             PatternList: PatternList,
             GamepadList: GamepadList,
+            MessageItem: MessageItem,
         },
         data: () => {
             return {
@@ -116,19 +110,4 @@
             flex-direction: column;
         }
     }
-
-    .message {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-        font-size: 16px;
-    }
-
-    @media only screen and (min-width: 540px) {
-        .message {
-            font-size: 24px;
-        }
-    }
 </style>