starting the design of polls

src/app/components/stream/status/poll/poll.component.html

@@ -1,8 +1,8 @@
 <div class="poll">
     <div *ngFor="let o of poll.options">
-        <input id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}"> 
+        <input class="poll__input" id="{{o.title}}" type="{{choiceType}}" name="poll" value="{{o.title}}"> 
-        <label for="{{o.title}}">{{o.title}}</label>
+        <label class="noselect poll__label" for="{{o.title}}">{{o.title}}</label>
         <br/>
     </div>
-    <a href >Vote</a> <span>{{poll.votes_count}} votes - X days left</span>
+    <button href class="btn btn-sm btn-custom-primary poll__btn-vote" title="don't boo, vote!">Vote</button> <div class="poll__statistics">{{poll.votes_count}} votes - X days left</div>
 </div>

src/app/components/stream/status/poll/poll.component.scss

@@ -0,0 +1,32 @@
+// @import "variables";
+// @import "commons";
+// @import "panel";
+@import "buttons";
+
+.poll {
+
+    &__btn-vote {
+        margin: 0 10px 0 0;
+        padding: 4px 15px;
+    }
+
+    &__statistics {
+        display: inline-block;
+        font-size: 0.8em;
+        color: rgb(101, 121, 160);
+    }
+
+    &__label {
+        cursor: pointer;
+    }
+}
+
+.noselect {
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome and Opera */
+  }

src/app/components/stream/status/status.component.html

@@ -67,7 +67,7 @@
             (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
             (textSelected)="textSelected()"></app-databinded-text>
 
-        <app-poll *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll>
+        <app-poll class="status__poll" *ngIf="!isContentWarned && displayedStatus.poll" [poll]="displayedStatus.poll"></app-poll>
 
         <app-card class="status__card" *ngIf="!isContentWarned && displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>
 

src/app/components/stream/status/status.component.scss

@@ -116,6 +116,11 @@
         margin: 10px 10px 0 $avatar-column-space;
         display: block;
     }
+    &__poll {
+        word-wrap: break-word;
+        margin: 10px 10px 0 $avatar-column-space;
+        display: block;
+    }
     &__content-warning {
         min-height: 80px;
         display: block; // border: 1px solid greenyellow;