From 4bb917d2a28fa0cf78a9bda3faf7bb5a75f73683 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 4 Mar 2020 14:14:47 +0200
Subject: [PATCH] Addon styles adapted to design changes

---
 src/routes/Addons/Addon/styles.less | 79 +++++++++++++++++------------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less
index e57eea428..2d26d843a 100644
--- a/src/routes/Addons/Addon/styles.less
+++ b/src/routes/Addons/Addon/styles.less
@@ -1,16 +1,18 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .addon-container {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: 1rem;
-    background-color: var(--color-backgroundlighter);
+    padding: 1.5rem;
+    background-color: @color-background;
     cursor: inherit;
 
     .logo-container {
         flex: none;
-        width: 8rem;
-        height: 8rem;
-        background-color: var(--color-backgrounddarker);
+        width: 6rem;
+        height: 6rem;
+        background-color: @color-surface-light5;
 
         .logo {
             display: block;
@@ -26,7 +28,7 @@
             width: 100%;
             height: 100%;
             padding: 1rem;
-            fill: var(--color-surfacelighter);
+            fill: @color-secondaryvariant1-light3;
         }
     }
 
@@ -47,7 +49,8 @@
             padding: 0 0.5rem;
             max-height: 3.6em;
             font-size: 1.6rem;
-            color: var(--color-surfacelighter);
+            opacity: 0.9;
+            color: @color-surface-light5;
         }
 
         .version-container {
@@ -57,7 +60,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: var(--color-surfacelight);
+            opacity: 0.6;
+            color: @color-surface-light5;
         }
 
         .types-container {
@@ -67,7 +71,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 2.4em;
-            color: var(--color-surfacelight);
+            opacity: 0.4;
+            color: @color-surface-light5;
             text-transform: capitalize;
         }
 
@@ -78,7 +83,8 @@
             margin-top: 0.5rem;
             padding: 0 0.5rem;
             max-height: 4.8em;
-            color: var(--color-surfacelight);
+            opacity: 0.9;
+            color: @color-surface-light5;
         }
     }
 
@@ -91,7 +97,7 @@
             flex-direction: row;
             align-items: center;
             justify-content: center;
-            height: 3.5rem;
+            height: 4rem;
             padding: 0 1rem;
 
             &:not(:first-child) {
@@ -100,8 +106,8 @@
 
             .icon {
                 flex: none;
-                width: 1.5rem;
-                height: 1.5rem;
+                width: 2rem;
+                height: 2rem;
                 margin-right: 1rem;
             }
 
@@ -117,57 +123,64 @@
         }
 
         .install-button-container {
-            background-color: var(--color-signal5);
+            background-color: @color-accent3;
 
             &:hover {
-                filter: brightness(1.2);
+                background-color: @color-accent3-light2;
+            }
+
+            &:focus {
+                outline-color: @color-surface-light5;
             }
 
             .label {
-                color: var(--color-surfacelighter);
+                color: @color-surface-light5;
             }
         }
 
         .uninstall-button-container {
-            outline-color: var(--color-surfacedark);
+            outline-color: @color-background-light3;
             outline-style: solid;
 
             &:hover {
-                outline-color: var(--color-surfacelight);
+                background-color: @color-background-light2;
+            }
 
-                .label {
-                    color: var(--color-surfacelight);
-                }
+            &:focus {
+                outline-color: @color-surface-light5;
             }
 
             .label {
-                color: var(--color-surfacedark);
+                opacity: 0.9;
+                color: @color-surface-light5;
             }
         }
 
         .share-button-container {
-            outline-color: var(--color-secondarylighter);
-            outline-style: solid;
-
-            &:hover {
-                outline: none;
-                background: var(--color-secondarylight);
-
+            &:hover, &:focus {
                 .icon {
-                    fill: var(--color-surfacelighter);
+                    fill: @color-secondaryvariant1-light1;
                 }
 
                 .label {
-                    color: var(--color-surfacelighter);
+                    text-decoration: underline;
+                    color: @color-secondaryvariant1-light2;
                 }
             }
 
+            &:focus {
+                outline: none;
+                background-color: @color-surface-light5-20;
+            }
+
             .icon {
-                fill: var(--color-secondarylighter);
+                opacity: 0.6;
+                fill: @color-secondaryvariant1-dark1;
             }
 
             .label {
-                color: var(--color-secondarylighter);
+                opacity: 0.9;
+                color: @color-secondaryvariant1;
             }
         }
     }