From 06dca9813c1a2d652e43819ff3a065d2e0843b1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 12 Jan 2022 15:36:24 +0100
Subject: [PATCH] Removing weird border in cowebsites and cowebsite button

---
 .../CoWebsiteThumbnailSlot.svelte             | 28 ++++++++++++++++++-
 .../Layouts/PresentationLayout.svelte         |  6 +++-
 front/src/Components/Video/MediaBox.svelte    |  1 -
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index a3895a52..2fee5fd0 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -46,7 +46,7 @@
 
 <div
     id={"cowebsite-thumbnail-" + index}
-    class="cowebsite-thumbnail nes-container is-rounded nes-pointer"
+    class="cowebsite-thumbnail nes-pointer"
     class:asleep={$state === "asleep"}
     class:loading={$state === "loading"}
     class:ready={$state === "ready"}
@@ -57,7 +57,33 @@
 </div>
 
 <style lang="scss">
+    .cowebsite-thumbnail::before {
+        content: "";
+        position: absolute;
+        width: 58px;
+        height: 58px;
+        left: -8px;
+        top: -8px;
+
+        margin: 4px;
+
+        border-style: solid;
+        border-width: 4px;
+        border-image-slice: 3;
+        border-image-width: 3;
+        border-image-repeat: stretch;
+        border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
+        border-image-outset: 1;
+    }
+
+    .cowebsite-thumbnail.vertical::before {
+        width: 48px;
+        height: 48px;
+    }
+
     .cowebsite-thumbnail {
+
+        position: relative;
         padding: 0;
         background-color: rgba(#000000, 0.6);
         margin: 1%;
diff --git a/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte b/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte
index 8cecfe12..16b762e5 100644
--- a/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte
+++ b/front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte
@@ -149,7 +149,7 @@
         .highlighted-cowebsite {
             height: 100% !important;
             width: 96%;
-            background-color: rgba(#000000, 0.6);
+            /*background-color: rgba(#000000, 0.6);*/
             margin: 0 !important;
 
             .actions {
@@ -164,6 +164,10 @@
                     pointer-events: all;
                 }
             }
+
+            &.nes-container.is-rounded {
+              border-image-outset: 1;
+            }
         }
     }
 </style>
diff --git a/front/src/Components/Video/MediaBox.svelte b/front/src/Components/Video/MediaBox.svelte
index eca34aa5..2abfa953 100644
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/front/src/Components/Video/MediaBox.svelte
@@ -5,7 +5,6 @@
     import { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
     import LocalStreamMediaBox from "./LocalStreamMediaBox.svelte";
     import type { Streamable } from "../../Stores/StreamableCollectionStore";
-    import PixelContainer from "../Container/PixelContainer.svelte";
 
     export let streamable: Streamable;
     export let isHightlighted = false;