Sign in flow

src/lib/components/Button.svelte

@@ -24,6 +24,7 @@
 
   export let disabled = false;
   export let custom;
+  export let btnID;
   export let customControl = false;
   export let textColor
   export let background
@@ -74,7 +75,7 @@
 		.join(';');
 </script>
 
-<button style={cssVarStyles} use:forwardAll class={classSet} {disabled}><slot /></button>
+<button id={btnID} style={cssVarStyles} use:forwardAll class={classSet} {disabled}><slot /></button>
 
 <style>
   .custom-control {

src/lib/components/Card.svelte

@@ -9,6 +9,8 @@
   export let minHeight;
   export let fontSize = "38px";
   export let custom = "";
+  export let state;
+  export let goto;
 
   function toVariable(key, value) {
     return value ? `${key}: ${value};` : undefined;
@@ -63,24 +65,25 @@
 </div>
 
 <style>
-  h2 {
-    font-size: var(--fontSize);
-  }
-  header {
-    display: grid;
-    grid-template-columns: auto max-content;
-  }
   .card-container {
     width: calc(var(--width, var(--content-width)) - 40px);
     height: calc(var(--height, auto));
     min-width: calc(var(--width, var(--content-width)) - 40px);
-    min-height: var(--modal-min-height);
+    min-height: var(--min-height);
     background-color: var(--color-white);
     padding: 20px;
     box-shadow: var(--box-shadow-lg);
     display: grid;
     grid-template-rows: max-content auto max-content;
     font-size: 14px;
-    min-height: var(--min-height);
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: auto max-content;
+  }
+
+  h2 {
+    font-size: var(--fontSize);
   }
 </style>

src/stories/components/RallyDialog.css → src/lib/components/auth-cards/Auth.css

@@ -1,102 +1,123 @@
-
- .valid{
-  color: var(--color-green-70) !important;
+.card-container {
+  margin-bottom: 4rem;
+  width: 100%;
 }
 
-.mzp-t-mozilla,
-.modal-body,
-.card-body,
-.cta {
+.card-container,
+.card-body {
   justify-self: center;
 }
-.modal-body {
+
+.card-body-create {
+  width: 80%;
+}
+
+.container-header {
+  margin-bottom: 20px;
+}
+
+.title-wrapper {
   display: flex;
-  flex-direction: column;
-  /* margin-top: 45px; */
+  justify-content: center;
+  padding-bottom: 10px;
+}
+
+.title-text {
+  z-index: 1;
+  white-space: nowrap;
+  display: inline-block;
 }
 
-.modal-body-signin{
-  width: 80%; 
+.card-body-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.cta {
-  display: none !important;
+/* form styles start */
+.input-wrapper {
+  display: flex;
 }
 
-.mzp-t-mozilla {
-  grid-area: title;
+input {
   width: 100%;
+  height: 50px;
 }
 
-.dismiss {
-  grid-area: dismiss;
+input[required]:invalid:focus {
+  border: 2px solid red;
 }
 
-.card-container {
-  margin-bottom: 4rem;
+.label-wrapper {
+  display: flex;
+  justify-content: space-between;
 }
 
-.container-header {
-  direction: rtl;
-  grid-template-rows: auto max-content;
-  grid-template-areas:
-    "dismiss"
-    "title";
-  margin-bottom: 20px;
+.mzp-c-field-label {
+  font-weight: 600;
+  font-size: 12px;
+  color: #818282;
 }
 
-.modal-button, .card-button {
-  display: flex;
-  margin-top: 15px;
-  width: 100%;
-  align-items: center;
-  padding: 6px 20px !important;
+form img {
+  margin: 2px 0 0 -35px;
+  cursor: pointer;
 }
 
-.modal-button.signin, .modal-button.create, .card-button.signin, c.ard-button.create  {
-  justify-content: center;
-  margin-top: 0;
-  height: 50px; 
+.error-msg-active,
+.info-msg-active {
+  text-align: left;
+  font-size: 12px;
+  color: gray;
+  padding: 0;
+  position: absolute;
+  left: 0;
+  top: 87px;
 }
 
-.reset-pw{
-  width: 85%; 
+.error-msg-active{
+  position: inherit;
+  color: red;
+  padding-top: 5px;
+  top: 0px; 
 }
 
-/* dialog body styles */
-.modal-body-content, .card-body-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.valid {
+  color: var(--color-green-70) !important;
 }
 
+.hide-error-msg {
+  display: none;
+}
+
+/* button styles */
 .button-wrapper {
   width: 244px;
   margin: auto;
 }
 
-.title-wrapper {
+.card-button {
   display: flex;
-  justify-content: center;
-}
-
-.title-text {
-  z-index: 1;
-  white-space: nowrap;
-  display: inline-block;
+  margin-top: 15px;
+  width: 100%;
+  align-items: center;
+  padding: 6px 20px !important;
 }
 
 .button-text {
   margin-left: 10px;
-  font-size: 16px; 
+  font-size: 16px;
 }
 
-p {
-  margin: auto;
+.card-button.signin,
+.card-button.create {
+  justify-content: center;
+  margin-top: 0;
+  height: 50px;
 }
 
-p a {
-  color: #000000;
+.reset-pw {
+  width: 85%;
 }
 
 .body-text-privacy {
@@ -108,77 +129,41 @@ p a {
   font-size: 16px;
   padding-top: 40px;
   color: #000000;
+  text-align: center;
 }
 
-.body-text-action a {
+.body-text-action button {
+  border-color: transparent;
+  background: transparent;
+  cursor: pointer;
   font-weight: 700;
+  text-decoration: underline;
 }
 
-/* form styles */
-.label-wrapper {
-  display: flex;
-  justify-content: space-between;
-}
-
-.input-wrapper{
-  display: flex; 
-}
-
-input {
-  width: 100%;
-  height: 50px;
-}
-
-input[required]:invalid:focus {
-  border: 2px solid red;
+.body-text-action a {
+  font-weight: 700;
 }
 
-
-form img {
-  margin: 2px 0 0 -35px;
-  cursor: pointer;
+/* storybook styles */
+.sign-in-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.info-msg-active {
-  padding: 0;
-  margin-top: 10px;
+p {
+  margin: auto;
 }
 
-.error-msg-active,
-.info-msg-active {
-  text-align: left;
-  font-size: 12px;
-  color: gray;
-  padding: 10px;
+p a {
+  color: #000000;
 }
 
 ul {
   list-style: disc;
   font-size: 12px;
   color: gray;
-  padding: 5px 0 0 23px;
-}
-
-.hide-error-msg {
-  display: none;
-}
-
-.enter-pw {
-  color: #818282;
-}
-
-.label-wrapper {
-  display: flex;
-  justify-content: space-between;
-}
-
-.mzp-c-field-label {
-  font-weight: 600;
-  font-size: 12px;
-}
-
-.mzp-c-field-label a {
-  text-decoration: none;
-  color: var(--color-blue-50);
+  padding: 10px 0 0 23px;
+  text-align: left;
+  margin: 0;
 }
-