From 3d9fa462a6352fa50e266686461ae836bc7d7e26 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 4 Nov 2024 12:31:22 +0100
Subject: [PATCH] Improve imported card container style (#22653)

---
 .../lovelace/sections/hui-grid-section.ts     |  5 +++--
 .../lovelace/views/hui-sections-view.ts       | 20 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts
index fe4236bea0..d311a4d073 100644
--- a/src/panels/lovelace/sections/hui-grid-section.ts
+++ b/src/panels/lovelace/sections/hui-grid-section.ts
@@ -242,8 +242,9 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           min-height: var(--row-height);
         }
 
-        .container.edit-mode:not(.import-only) {
-          border-start-end-radius: 0px;
+        .container.import-only {
+          border: none;
+          padding: 0 !important;
         }
 
         .card {
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 492fe8da29..8dff28e127 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -1,5 +1,11 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
-import { mdiDelete, mdiDrag, mdiPencil, mdiViewGridPlus } from "@mdi/js";
+import {
+  mdiDelete,
+  mdiDrag,
+  mdiEyeOff,
+  mdiPencil,
+  mdiViewGridPlus,
+} from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -245,6 +251,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                 <div class="section imported-cards">
                   <div class="imported-card-header">
                     <p class="title">
+                      <ha-svg-icon .path=${mdiEyeOff}></ha-svg-icon>
                       ${this.hass.localize(
                         "ui.panel.lovelace.editor.section.imported_cards_title"
                       )}
@@ -480,9 +487,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
 
       .imported-card-header {
-        margin-top: 24px;
-        padding: 16px 8px;
-        border-top: 2px dashed var(--divider-color);
+        margin-top: 36px;
+        padding: 32px 0 16px 0;
+        border-top: 4px dotted var(--divider-color);
       }
 
       .imported-card-header .title {
@@ -491,6 +498,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
         font-size: 16px;
         font-weight: 400;
         line-height: 24px;
+        --mdc-icon-size: 18px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 8px;
       }
       .imported-card-header .subtitle {
         margin: 0;