Refresh the frontend, getting rid of rounded edges, restyling buttons, fixing styling of pop-up confirmation and dismissable information elements and fixing inconsistencies in records pagination.

bemani/frontend/static/components/edit.react.js

@@ -9,7 +9,7 @@ var Edit = React.createClass({
                 onClick={function(event) {
                     this.props.onClick(event);
                 }.bind(this)}
-                title={this.props.title ? this.props.title : 'edit'}
+                title={this.props.title ? this.props.title : 'update'}
             />
         );
     },

bemani/frontend/static/controllers/popn/player.react.js

@@ -41,7 +41,7 @@ var profile_view = React.createClass({
             var player = this.state.player[this.state.version];
             return (
                 <div>
-                    <div className="section">
+                    <div className="section popn-nav">
                         <h3>{player.name}'s profile</h3>
                         {this.state.profiles.map(function(version) {
                             return (

bemani/frontend/static/controllers/popn/records.react.js

@@ -164,7 +164,7 @@ var network_records = React.createClass({
         return (
             <span>
                 { paginate ?
-                    <div className="section">
+                    <div className="section popn-nav">
                         {songids.map(function(songid) {
                             if (songid < 0) {
                                 curbutton = curbutton + 1;

bemani/frontend/static/controllers/popn/settings.react.js

@@ -125,7 +125,7 @@ var settings_view = React.createClass({
             var player = this.state.player[this.state.version];
             return (
                 <div>
-                    <div className="section">
+                    <div className="section popn-nav">
                         {this.state.profiles.map(function(version) {
                             return (
                                 <Nav

bemani/frontend/static/form.css

@@ -32,72 +32,6 @@ form div.action {
     margin-top: 5px;
 }
 
-input[type="submit"] {
-    border: 1px solid #cddcc1;
-    background: #e7ffd4;
-    cursor: pointer;
-    border-radius: 3px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 6px;
-    padding-right: 6px;
-    margin-right: 5px;
-}
-
-input[type="button"], button.nav, button.toggle, button.edit, button.add, button.viewmore {
-    border: 1px solid #dadada;
-    background: #ffffff;
-    cursor: pointer;
-    border-radius: 3px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 6px;
-    padding-right: 6px;
-}
-
-input[type="button"] {
-    margin-right: 5px;
-}
-
-button.toggle:not(:last-child):not(:only-child), button.edit:not(:last-child):not(:only-child), button.delete:not(:last-child):not(:only-child), button.add:not(:last-child):not(:only-child) {
-    margin-right: 5px;
-}
-
-button.nav:not(:last-child) {
-    margin-right: 5px;
-}
-
-button.nav {
-    margin-bottom: 5px;
-}
-
-button.active {
-    font-weight: bold;
-}
-
-button.delete {
-    border: 1px solid #d6caca;
-    background: #ffe4e4;
-    cursor: pointer;
-    border-radius: 3px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 6px;
-    padding-right: 6px;
-}
-
-input[type="text"], input[type="password"], textarea {
-    border: 1px solid #dadada;
-    padding: 2px;
-    border-radius: 3px;
-}
-
-select {
-    border: 1px solid #dadada;
-    padding: 1px;
-    border-radius: 3px;
-}
-
 option.placeholder {
     font-style: italic;
 }
@@ -105,3 +39,82 @@ option.placeholder {
 div.buttons {
     padding-top:5px;
 }
+
+input[type="submit"] {
+    border: 1px solid #cddcc1;
+    background: #e7ffd4;
+    margin-right: 5px;
+}
+
+input[type="button"], button.nav, button.toggle, button.edit, button.add, button.viewmore, button.btn-default {
+    border: 1px solid #dadada;
+    background: #f8f8f8;
+    margin-right: 5px;
+}
+
+input[type="submit"], input[type="button"], button {
+    border-radius: 0px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 12px;
+    padding-right: 12px;
+    cursor: pointer;
+}
+
+input[type="text"], input[type="password"], textarea {
+    border: 1px solid #dadada;
+    padding: 4px;
+    border-radius: 0px;
+}
+
+select {
+    border: 1px solid #dadada;
+    padding: 4px 4px 3px 4px;
+    border-radius: 0px;
+}
+
+input[type="button"] {
+    margin-right: 5px;
+}
+
+button.toggle:not(:last-child):not(:only-child), button.edit:not(:last-child):not(:only-child), button.delete:not(:last-child):not(:only-child), button.add:not(:last-child):not(:only-child), button.nav:not(:last-child):not(:only-child) {
+    margin-right: 5px;
+}
+
+span + button.edit, span + button.toggle, span + button.delete, span + button.add,
+div + button.edit, div + button.toggle, div + button.delete, div + button.add {
+    margin-left: 15px;
+}
+
+button.nav {
+    margin-bottom: 5px;
+    margin-right: 0px;
+    border: 1px solid #dadada;
+    background: #f8f8f8;
+}
+
+button.prev::before {
+    content: "\2BC7";
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+button.next::after {
+    content: "\2BC8";
+    font-weight: bold;
+    margin-left: 5px;
+}
+
+button.active {
+    text-shadow: 0.33px 0.33px #000000;
+    border: 1px solid #999999;
+}
+
+button.delete {
+    border: 1px solid #d6caca;
+    background: #ffe4e4;
+}
+
+.popn-nav button {
+    height: 32px;
+}

bemani/frontend/static/site.css

@@ -69,7 +69,7 @@ ul.messages {
 ul.messages li {
     padding: 5px;
     margin-top: 10px;
-    border-radius: 5px;
+    border-radius: 0px;
     font-size: smaller;
 }
 
@@ -80,6 +80,7 @@ ul.messages div.close {
     color: #000000;
     float: right;
     cursor: pointer;
+    margin-right: 3px;
 }
 
 ul.messages li.error {

bemani/frontend/static/table.css

@@ -82,8 +82,8 @@ td.nochart {
 }
 
 table.list input[type="checkbox"], table.add input[type="checkbox"] {
-    width: 21px;
-    height: 21px;
+    width: 26px;
+    height: 26px;
     margin: 0px;
 }