improve poll looks

customize.dist/pages.js

@@ -480,14 +480,14 @@ define([
                         h('p', Msg.poll_p_encryption)
                     ]),
                     h('div.upper', [
-                        h('button#publish', {
+                        h('button#publish.btn.btn-success', {
                             style: { display: 'none' }
                         }, Msg.poll_publish_button),
-                        h('button#admin', {
+                        h('button#admin.btn.btn-primary', {
                             style: { display: 'none' },
                             title: Msg.poll_admin_button
                         }, Msg.poll_admin_button),
-                        h('button#help', {
+                        h('button#help.btn.btn-default', {
                             title: Msg.poll_show_help_button
                         }, Msg.poll_show_help_button)
                     ]),
@@ -503,13 +503,13 @@ define([
                         ]),
                         h('div#tableContainer', [
                             h('div#tableScroll'),
-                            h('button#create-user', {
+                            h('button#create-user.btn.btn-default', {
                                 title: Msg.poll_create_user
                             }, h('span.fa.fa-plus')),
-                            h('button#create-option', {
+                            h('button#create-option.btn.btn-default', {
                                 title: Msg.poll_create_option
                             }, h('span.fa.fa-plus')),
-                            h('button#commit', {
+                            h('button#commit.btn.btn-default', {
                                 title: Msg.poll_commit
                             }, h('span.fa.fa-check'))
                         ])

www/poll/main.js

@@ -11,6 +11,7 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/customize/src/less/toolbar.less',
     'less!/customize/src/less/cryptpad.less',
     'less!/poll/poll.less',
@@ -135,7 +136,7 @@ define([
         var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
         $createOption.append(APP.$createRow);
         $commitCell.append(APP.$commit);
-        $('#create-user, #create-option').css('display', 'inline-block');
+        $('#create-user, #create-option').css('display', 'inline-flex');
         if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
         var width = $('#table').outerWidth();
         if (width) {

www/poll/poll.less

@@ -55,9 +55,14 @@ body {
     width: 400px;
 }
 
+input[type="text"], textarea {
+    background-color: white;
+    color: black;
+    border: 0;
+}
+
 input[type="text"][disabled], textarea[disabled] {
     background-color: transparent;
-    font: white;
     border: 0px;
 }
 
@@ -114,6 +119,7 @@ table#table {
     min-height: 5em;
     font-size: 20px;
     font-weight: bold;
+    border: 1px solid black;
 
 }
 #description[disabled] {
@@ -132,6 +138,10 @@ table#table {
 div.upper {
     width: 80%;
     margin: auto;
+
+    & > * {
+        margin-right: 1em;
+    }
 }
 
 // from cryptpad.less
@@ -329,7 +339,6 @@ form.realtime, div.realtime {
         input {
             &[type="text"] {
                 height: auto;
-                border: 1px solid @base;
                 width: 80%;
             }
         }
@@ -375,6 +384,7 @@ form.realtime, div.realtime {
                 //border-radius: 20px 0 0 20px;
                 input[type="text"] {
                     width: ~"calc(100% - 50px)";
+                    padding: 0 0.5em;
                 }
                 .edit {
                     float:right;
@@ -460,3 +470,19 @@ form.realtime, div.realtime {
     #adduser { .top-left; }
     #addoption { .bottom-left; }
 }
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &.btn-default {
+        background-color: #BBB;
+        color: black;
+
+        &:hover {
+            background-color: #DDD;
+        }
+    }
+}
+