Network switch for tweet destination

app/src/pages/write-tweet/write-tweet.html

@@ -16,17 +16,25 @@
 <ion-content padding>
   <form [formGroup]="tweet" (ngSubmit)="submitTweet()">
     <ion-item class="padding-0">
-      <ion-label color="primary" floating>Your tweet</ion-label>
+      <ion-label color="primary" stacked>Your tweet</ion-label>
       <ion-textarea type="text" formControlName="text" maxlength="140" [attr.rows]="4"></ion-textarea>
     </ion-item>
 
     <div class="actions">
-      <svg width="20" height="20" class="progress-circle">
-        <circle class="background-stroke" cx="10" cy="10" r="8"></circle>
-        <circle class="progress-stroke" cx="10" cy="10" r="8" transform="rotate(-90, 10, 10)" [style.strokeDashoffset]="tweetCharProgress"></circle>
-      </svg>
-
-      <span class="progress-stats">{{ (tweet.value.text).length }}/140</span>
+      <span class="progress">
+          <svg width="20" height="20" class="progress-circle">
+              <circle class="background-stroke" cx="10" cy="10" r="8"></circle>
+              <circle class="progress-stroke" cx="10" cy="10" r="8" transform="rotate(-90, 10, 10)" [style.strokeDashoffset]="tweetCharProgress"></circle>
+            </svg>
+      
+            <span class="progress-stats">{{ (tweet.value.text).length }}/140</span>
+      </span>
+      
+      <span class="network-switch">
+          <ion-icon name="logo-twitter"></ion-icon>
+          <ion-toggle checked="false"></ion-toggle>
+          <ion-icon name="glasses"></ion-icon>
+      </span>
 
       <button ion-button type="submit" [disabled]="!tweet.valid" class="submit-tweet">tweet!</button>
     </div>

app/src/pages/write-tweet/write-tweet.scss

@@ -6,25 +6,32 @@ page-write-tweet {
         display: flex;
         flex-direction: row;
         align-items: center;
-        .progress-stats {
-            margin-left: 5px;
+        justify-content: space-between;
+        .progress {
+            display: flex;
+            align-items: center;
+            .progress-stats {
+                margin-left: 5px;
+            }
+            .background-stroke,
+            .progress-stroke {
+                fill: transparent;
+                stroke-width: 2;
+                stroke-dasharray: 50.2654825;
+                transition: stroke-dashoffset 0.5s;
+                -webkit-animation-play-state: running;
+            }
+            .background-stroke {
+                stroke: #ddd;
+            }
+            .progress-stroke {
+                stroke: blue;
+            }
         }
-        .background-stroke,
-        .progress-stroke {
-            fill: transparent;
-            stroke-width: 2;
-            stroke-dasharray: 50.2654825;
-            transition: stroke-dashoffset 0.5s;
-            -webkit-animation-play-state: running;
-        }
-        .background-stroke {
-            stroke: #ddd;
-        }
-        .progress-stroke {
-            stroke: blue;
-        }
-        .submit-tweet {
-            margin-left: auto;
+        .network-switch {
+            display: flex;
+            align-items: center;
+            margin-left: 16px;
         }
     }
 }