up

src/components/GameScreensPanel.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 
 import type { ScreenState } from '@/api/generated/crabs/evening_detective_server'
 import ScreenBindingModal from '@/components/ScreenBindingModal.vue'
+import UiBlock from '@/components/UiBlock.vue'
 
 const props = defineProps<{
   screens: ScreenState[]
@@ -20,12 +21,10 @@ const showBindingModal = ref(false)
 </script>
 
 <template>
-  <div class="screens-block">
-    <n-flex align="center" justify="space-between">
+  <UiBlock>
+    <n-flex align="center" justify="space-between" class="screen-header">
       <p class="screens-title">Экраны</p>
-      <n-button size="small" type="primary" @click="showBindingModal = true">
-        Привязать экран
-      </n-button>
+      <n-button size="small" @click="showBindingModal = true"> Привязать экран </n-button>
     </n-flex>
     <n-alert
       v-if="screens.some((screen) => screen.status === 'disconnected')"
@@ -53,7 +52,7 @@ const showBindingModal = ref(false)
         </n-flex>
       </div>
     </template>
-  </div>
+  </UiBlock>
   <ScreenBindingModal
     v-model:show="showBindingModal"
     :binding="props.screenBinding"
@@ -62,26 +61,23 @@ const showBindingModal = ref(false)
 </template>
 
 <style scoped>
-.screens-block {
-  background-color: #222;
-  border-radius: 10px;
-  margin: 12px 0;
-  padding: 16px;
-}
-
 .screens-title {
   font-size: 18px;
   font-weight: 600;
-  margin-bottom: 12px;
+  margin: 0;
+}
+
+.screen-header {
+  margin-bottom: 8px;
 }
 
 .screen-row {
   align-items: center;
   border-top: 1px solid rgb(255 255 255 / 10%);
   display: flex;
-  gap: 12px;
+  gap: 8px;
   justify-content: space-between;
-  padding: 12px 0;
+  padding: 8px 0;
 }
 
 .screen-status {
@@ -91,7 +87,7 @@ const showBindingModal = ref(false)
 
 .screen-empty {
   color: #aaa;
-  margin: 12px 0 0;
+  margin: 16px 0 0;
 }
 
 .screen-error {