better new account design

src/app/components/floating-column/add-new-account/add-new-account.component.html

@@ -1,19 +1,33 @@
 <div class="panel" [class.comrade__background]="isComrade">
     <h3 class="panel__title" [class.comrade__text]="isComrade">Add new account</h3>
 
+    <div class="panel__content">
         <h2 class="comrade__title" *ngIf="isComrade">Welcome Comrade!</h2>
         <form (ngSubmit)="onSubmit()">
-        <label [class.comrade__text]="isComrade">Please provide your <span *ngIf="isComrade">comrade</span> account:</label>
+            <label [class.comrade__text]="isComrade">Please provide your <span *ngIf="isComrade">comrade</span>
-        <input type="text" class="form-control form-control-sm form-color" [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrade__input]="isComrade"
+                account:</label>
+
+            <div>
+                <input type="text" class="form-control form-control-sm form-with-button"
+                    [(ngModel)]="mastodonFullHandle" name="mastodonFullHandle" [class.comrade__input]="isComrade"
                     placeholder="@nickname@mastodon.social" />
-        <br />
+                <!-- <br /> -->
-        <button *ngIf="!isLoading" type="submit" class="btn btn-success btn-sm"  [class.comrade__button]="isComrade">Submit</button>
+                <button type="submit" class="form-button"
+                    title="add this account"
+                    [class.comrade__button]="isComrade">
+                    <span *ngIf="!isLoading">Submit</span>
                     <app-waiting-animation *ngIf="isLoading" class="waiting-icon"></app-waiting-animation>
+                </button>
+               
+            </div>
         </form>
 
         <div *ngIf="isComrade" class="comrade__video">
-        <iframe width="300" height="170" src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <iframe width="300" height="170"
-
+                src="https://www.youtube.com/embed/NzBjnoRG7Mo?feature=oembed&autoplay=1&auto_play=1" frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+        </div>
 
     </div>
 </div>

src/app/components/floating-column/add-new-account/add-new-account.component.scss

@@ -1,21 +1,74 @@
 @import "variables";
+@import "mixins";
 @import "panel"; 
 
-.panel {
+$button-size: 70px;
 
+.panel {
+    padding-left: 0px;
+    // padding-right: 0px;
     background-position: 0 100%;
+
+    &__content {
+        padding-left: 5px;
+    }
 }
 
-.form-color {
+.form-with-button {
-    background-color: $column-color;
+    width: calc(100% - #{$button-size});
-    border-color: $button-border-color;
+    float: left;
-    color: #fff;
+
-    font-size: $default-font-size;
     &:focus {
         box-shadow: none;
     }
+
+    font-size: $default-font-size;
     height: 29px;
     padding: 0 5px 0 5px;    
+
+    background-color: $status-editor-title-background;
+    color: $status-editor-color;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-width: 0;
+    margin-bottom: 0;
+
+    // background-color: $column-color;
+    // border-color: $button-border-color;
+    // color: #fff;
+    // font-size: $default-font-size;
+    // &:focus {
+    //     box-shadow: none;
+    // }
+    // height: 29px;
+    // padding: 0 5px 0 5px; 
+}
+
+.waiting-icon {
+    position: relative;
+    top:1px;
+    left: 3px;
+}
+
+.form-button {
+    @include clearButton;
+    transition: all .2s;
+    background-color: $status-editor-footer-background;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+
+    &:hover {
+        background-color: lighten($status-editor-footer-background, 20%);
+        background-color: darken($status-editor-footer-background, 20%);
+    }
+
+    outline: inherit;
+    &:focus {
+        background-color: darken($status-editor-footer-background, 20%);
+    }
+
+    width: $button-size;
+    height: 29px;
 }
 
 $comrade_yellow: #ffcc00;

src/app/components/floating-column/add-new-account/add-new-account.component.ts

@@ -59,9 +59,12 @@ export class AddNewAccountComponent implements OnInit {
     }
 
     onSubmit(): boolean {
-        this.checkBlockList(this.instance);
+        if(this.isLoading) return false;
 
         this.isLoading = true;       
+
+        this.checkBlockList(this.instance);
+        
         this.checkAndCreateApplication(this.instance)
             .then((appData: AppData) => {
                 this.redirectToInstanceAuthPage(this.username, this.instance, appData);