From 37f0b56e1d86f0146f3a40a65b5f0c0ce2d45ad6 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 6 Mar 2020 16:43:45 +0200
Subject: [PATCH] SharePrompt styles adapted to design changes

---
 src/common/SharePrompt/styles.less | 80 ++++++++++++++++++------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/common/SharePrompt/styles.less b/src/common/SharePrompt/styles.less
index 7deac93f2..059adbb67 100644
--- a/src/common/SharePrompt/styles.less
+++ b/src/common/SharePrompt/styles.less
@@ -1,15 +1,12 @@
-.share-prompt-container {
-    min-width: 18rem;
-    background: var(--color-surfacelighter);
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
+.share-prompt-container {
     .buttons-container {
         display: flex;
         flex-direction: row;
 
         .button-container {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: 14rem;
+            flex: 1;
             display: flex;
             flex-direction: row;
             align-items: center;
@@ -20,20 +17,11 @@
                 margin-right: 1rem;
             }
 
-            &:hover {
-                filter: brightness(1.2);
-            }
-
-            &:focus {
-                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                outline-offset: calc(-2 * var(--focus-outline-size));
-            }
-
             .icon {
                 flex: none;
                 height: 1.2rem;
                 margin-right: 1rem;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -41,18 +29,33 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
+                font-size: 1.1rem;
                 font-weight: 500;
                 text-align: center;
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
+            }
+        }
+
+        .facebook-button, .twitter-button {
+            &:focus {
+                outline-color: @color-background-dark5;
             }
         }
 
         .facebook-button {
-            background-color: var(--color-facebook);
+            background-color: @color-secondary;
+
+            &:hover {
+                background-color: @color-secondary-light2;
+            }
         }
 
         .twitter-button {
-            background-color: var(--color-twitter);
+            background-color: @color-secondaryvariant2-light1;
+
+            &:hover {
+                background-color: @color-secondaryvariant2-light2;
+            }
         }
     }
 
@@ -60,15 +63,32 @@
         display: flex;
         flex-direction: row;
         margin-top: 1rem;
-        border: thin solid var(--color-surface);
+        background-color: @color-surface-light2;
+
+        &:hover {
+            .url-text-input {
+                background-color: @color-surface-light4;
+            }
+
+            .copy-button {
+                background-color: @color-accent3-light2;
+            }
+        }
+
+        &:focus {
+            outline-style: solid;
+            outline-width: var(--focus-outline-size);
+            outline-color: @color-background-dark5;
+            outline-offset: calc(-1 * var(--focus-outline-size));
+        }
 
         .url-text-input {
             flex: 1;
             align-self: stretch;
             padding: 1rem;
-            color: var(--color-backgroundlighter);
+            font-size: 1.1rem;
             text-align: center;
-            border-right: thin solid var(--color-surface);
+            color: @color-background-dark5;
         }
 
         .copy-button {
@@ -79,16 +99,11 @@
             align-items: center;
             justify-content: center;
             width: 8rem;
-            padding: 0.5rem;
-            background-color: var(--color-surface);
-
-            &:hover {
-                filter: brightness(1.2);
-            }
+            padding: 1rem;
+            background-color: @color-accent3;
 
             &:focus {
-                outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
-                outline-offset: calc(-1.5 * var(--focus-outline-size));
+                outline: none;
             }
 
             .icon {
@@ -96,7 +111,7 @@
                 width: 1.2rem;
                 height: 1.2rem;
                 margin-right: 0.5rem;
-                fill: var(--color-surfacedarker);
+                fill: @color-surface-light5;
             }
 
             .label {
@@ -104,7 +119,8 @@
                 flex-shrink: 1;
                 flex-basis: auto;
                 max-height: 2.4em;
-                color: var(--color-surfacedarker);
+                font-size: 1.1rem;
+                color: @color-surface-light5;
             }
         }
     }