From ed50452703d13be77432ad22dabf666be411c8a3 Mon Sep 17 00:00:00 2001
From: Deepankar Bajpeyi <dbajpeyi@gmail.com>
Date: Thu, 26 Sep 2024 14:44:11 +0200
Subject: [PATCH] feat: different styles for different components

---
 src/features/password-import.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/features/password-import.js b/src/features/password-import.js
index 42261341d..4eef152a4 100644
--- a/src/features/password-import.js
+++ b/src/features/password-import.js
@@ -2,7 +2,6 @@ import ContentFeature from '../content-feature'
 import { DDGProxy, DDGReflect, withExponentialBackoff } from '../utils'
 import { getElement } from './broker-protection/utils'
 
-
 const URL_ELEMENT_MAP = {
     '/': {
         name: 'cogWheel',
@@ -12,18 +11,18 @@ const URL_ELEMENT_MAP = {
         }
     },
     '/options': {
-        name: 'exportButton', 
+        name: 'exportButton',
         style: {
             scale: 1.01,
             backgroundColor: 'rgba(0, 39, 142, 0.5)'
         }
     },
     '/intro': {
-        name: 'signInButton', 
+        name: 'signInButton',
         style: {
             scale: 1.5,
-            backgroundColor: 'rgba(0, 39, 142, 0.3)'
-        },
+            backgroundColor: 'rgba(0, 39, 142, 0.5)'
+        }
     }
 }
 
@@ -40,9 +39,9 @@ export default class PasswordImport extends ContentFeature {
             inline: 'center'
         }) // Scroll into view
         const keyframes = [
-            { backgroundColor: 'rgba(0, 0, 255, 0)', offset: 0 },  // Start: transparent
-            { backgroundColor:  style.backgroundColor, offset: 0.5, transform: `scale(${style.scale})` },  // Midpoint: blue with 50% opacity
-            { backgroundColor: 'rgba(0, 0, 255, 0)', offset: 1 }   // End: transparent
+            { backgroundColor: 'rgba(0, 0, 255, 0)', offset: 0 }, // Start: transparent
+            { backgroundColor: style.backgroundColor, offset: 0.5, transform: `scale(${style.scale})` }, // Midpoint: blue with 50% opacity
+            { backgroundColor: 'rgba(0, 0, 255, 0)', offset: 1 } // End: transparent
         ]
 
         // Define the animation options
@@ -60,7 +59,7 @@ export default class PasswordImport extends ContentFeature {
     }
 
     findSignInButton () {
-        return document.querySelector('[aria-label="Sign in"]:not([target="_top"])');
+        return document.querySelector('[aria-label="Sign in"]:not([target="_top"])')
     }
 
     async findElement (name) {
@@ -90,7 +89,7 @@ export default class PasswordImport extends ContentFeature {
         const historyMethodProxy = new DDGProxy(this, History.prototype, 'pushState', {
             async apply (target, thisArg, args) {
                 const pageURL = args[2].split('?')[0]
-                const {name, style} = URL_ELEMENT_MAP[pageURL]
+                const { name, style } = URL_ELEMENT_MAP[pageURL]
                 const element = await findElement(name)
                 animateElement(element, style)
                 return DDGReflect.apply(target, thisArg, args)
@@ -100,14 +99,14 @@ export default class PasswordImport extends ContentFeature {
         // listen for popstate events in order to run on back/forward navigations
         window.addEventListener('popstate', async () => {
             console.log('pushState URL', window.location.pathname)
-            const {name, style} = URL_ELEMENT_MAP[window.location.pathname]
+            const { name, style } = URL_ELEMENT_MAP[window.location.pathname]
             const element = await findElement(name)
             animateElement(element, style)
         })
 
         document.addEventListener('DOMContentLoaded', async () => {
             console.log('pushState URL', window.location.pathname)
-            const {name, style} = URL_ELEMENT_MAP[window.location.pathname]
+            const { name, style } = URL_ELEMENT_MAP[window.location.pathname]
             const element = await findElement(name)
             animateElement(element, style)
         })