Added attributes and removed superfluous css, updated readme

README.md

@@ -43,6 +43,10 @@ Common attributes:
 | Attribute | Description | Type | Default |
 |---|---|---| --- |
 | text | Text of the sign-in button | string | 'Sign in with <Provider>' |
+| buttonBackgroundColor | Hex, Named or rgb version of the button background color | string | '#4285F4' |
+| disabledButtonBackgroundColor | Hex, Named or rgb version of the button background color, disabled state | string | 'grey' |
+| buttonTextColor | Hex, Named or rgb version of the button text color | string | '#FFFFFF' |
+| buttonWidth | %, PX, EM, VW width, or auto for default | string | '100%' |
 
 The attributes for the GoogleAuth component are:
 

src/facebook-auth/FacebookAuth.svelte

@@ -1,13 +1,13 @@
-<button on:click={login} {disabled} class="facebook-auth">
+<button on:click={login} {disabled} class="facebook-auth" style="--button-width: {buttonWidth}; --button-disabled-color: {disabledButtonBackgroundColor}; --button-color : {buttonBackgroundColor}">
   <img src="data:image/png;base64,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" alt="Facebook" />
-  <span>{text}</span>
+  <span style='--text-color: {buttonTextColor}'>{text}</span>
 </button>
 
 <style>
-  button.facebook-auth {
-    width: 100%;
+  button {
+    width: var(--button-width);
     border: 0;
-    background-color: #4285F4;
+    background-color: var(--button-color);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -16,24 +16,24 @@
     cursor: pointer;
   }
 
-  button.facebook-auth:disabled {
-    background-color: grey;
+  button:disabled {
+    background-color: var(--button-disabled-color);
   }
 
-  .facebook-auth img {
+  img {
     padding: 4px;
     height: 36px;
     width: 36px;
     border-radius: 2px;
     margin: 0;
   }
 
-  .facebook-auth span {
+  span {
     font-family: Roboto, sans-serif;
     font-size: 14px;
     font-weight: bold;
     padding: 0 12px;
-    color: white;
+    color: var(--text-color);
   }
 </style>
 
@@ -48,6 +48,10 @@
   let disabled = true
   export let appId
   export let text = 'Sign in with Facebook'
+  export let buttonBackgroundColor = '#4285F4';
+  export let disabledButtonBackgroundColor = 'grey';
+  export let buttonTextColor = '#ffffff';
+  export let buttonWidth = '100%';
 
   onMount(() => {
     loader(

src/google-auth/GoogleAuth.svelte

@@ -1,14 +1,16 @@
-<button bind:this={signinCta} {disabled} class="google-auth">
+<button bind:this={signinCta} {disabled} 
+style="--button-width: {buttonWidth}; --button-disabled-color: {disabledButtonBackgroundColor}; --button-color : {buttonBackgroundColor}"
+class="google-auth">
   <img src="data:image/png;base64,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" alt="Google" />
-  <span>{text}</span>
+  <span style="--button-text-color: {buttonTextColor}">{text}</span>
 </button>
 
 <style>
 
-  button.google-auth {
-    width: 100%;
+  button {
+    width: var(--button-width);
     border: 0;
-    background-color: #4285F4;
+    background-color: var(--button-color);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -17,11 +19,11 @@
     cursor: pointer;
   }
 
-  button.google-auth:disabled {
-    background-color: grey;
+  button:disabled {
+    background-color: var(--button-disabled-color)
   }
 
-  .google-auth img {
+  img {
     background: white;
     padding: 4px;
     height: 30px;
@@ -30,12 +32,12 @@
     margin: 4px;
   }
 
-  .google-auth span {
+  span {
     font-family: Roboto, sans-serif;
     font-size: 14px;
     font-weight: bold;
     padding: 0 12px;
-    color: white;
+    color: var(--button-text-color);
   }
 </style>
 
@@ -49,6 +51,10 @@
   export let clientId
   export let text = 'Sign in with Google'
   let disabled = true
+  export let buttonBackgroundColor = '#4285F4';
+  export let disabledButtonBackgroundColor = 'grey';
+  export let buttonTextColor = '#ffffff';
+  export let buttonWidth = '100%';
 
   onMount(() => {
     loader(