IN-3118: python Example QR

Author: nikhilPank

examples/yoti_example_django/yoti_example/static/index.css

@@ -26,8 +26,8 @@
     font-size: 40px;
     font-weight: 700;
     line-height: 1.2;
-
-    margin: 0;
+    margin-top: 0;
+    margin-bottom: 80px;
 
     text-align: center;
 
@@ -45,8 +45,8 @@
 }
 
 #yoti-share-button {
-    width: 130px;
-    height: 50px;
+    width: 250px;
+    height: 45px;
 }
 
 .yoti-login-or-separator {
@@ -56,7 +56,7 @@
     font-weight: bold;
     line-height: 1.5;
     text-align: center;
-    margin-bottom: 30px;
+    margin-top: 30px;
 }
 
 .yoti-login-dialog {

examples/yoti_example_django/yoti_example/templates/index.html

@@ -73,8 +73,12 @@ <h3 class="yoti-sponsor-app-header">The Yoti app is free to download and use:</h
       "clientSdkId": "{{client_sdk_id}}",
       "scenarioId": "{{scenario_id}}",
       "button": {
-        "label": "Use Yoti"
-      }
+            "label": "Use Yoti",
+            "align": "center",
+            "width": "auto",
+            "verticalAlign": "top"
+          },
+          "type": "modal"
     }]
   });
 </script>

examples/yoti_example_flask/static/index.css

@@ -26,8 +26,8 @@
     font-size: 40px;
     font-weight: 700;
     line-height: 1.2;
-
-    margin: 0;
+    margin-top: 0;
+    margin-bottom: 80px;
 
     text-align: center;
 
@@ -45,8 +45,8 @@
 }
 
 #yoti-share-button {
-    width: 130px;
-    height: 50px;
+    width: 250px;
+    height: 45px;
 }
 
 .yoti-login-or-separator {
@@ -56,7 +56,7 @@
     font-weight: bold;
     line-height: 1.5;
     text-align: center;
-    margin-bottom: 30px;
+    margin-top: 30px;
 }
 
 .yoti-login-dialog {

examples/yoti_example_flask/templates/index.html

@@ -73,8 +73,12 @@ <h3 class="yoti-sponsor-app-header">The Yoti app is free to download and use:</h
       "clientSdkId": "{{client_sdk_id}}",
       "scenarioId": "{{scenario_id}}",
       "button": {
-        "label": "Use Yoti"
-      }
+            "label": "Use Yoti",
+            "align": "center",
+            "width": "auto",
+            "verticalAlign": "top"
+          },
+          "type": "modal"
     }]
   });
 </script>