Orange is the new black

app/Resources/FOSUserBundle/views/ChangePassword/changePassword_content.html.twig

@@ -4,7 +4,7 @@
     <div class="form-group">
         {{ form_label(form.current_password, 'Current password') }}
         <div class="input-group">
-            {{ form_widget(form.current_password, {'attr': {'class': 'input-lg'}}) }}
+            {{ form_widget(form.current_password) }}
             <span class="input-group-addon"><span class="icon-key"></span></span>
         </div>
     </div>
@@ -12,7 +12,7 @@
     <div class="form-group">
         {{ form_label(form.new.first, 'New password') }}
         <div class="input-group">
-            {{ form_widget(form.new.first, {'attr': {'class': 'input-lg'}}) }}
+            {{ form_widget(form.new.first) }}
             <span class="input-group-addon"><span class="icon-lock"></span></span>
         </div>
     </div>
@@ -20,7 +20,7 @@
     <div class="form-group">
         {{ form_label(form.new.second, 'Confirm new password') }}
         <div class="input-group">
-            {{ form_widget(form.new.second, {'attr': {'class': 'input-lg'}}) }}
+            {{ form_widget(form.new.second) }}
             <span class="input-group-addon"><span class="icon-lock-open"></span></span>
         </div>
     </div>
@@ -28,4 +28,4 @@
     {{ form_widget(form) }}
 
     <input type="submit" class="btn btn-block btn-inverse btn-lg" value="{{ 'change_password.submit'|trans({}, 'FOSUserBundle') }}" />
-</form>
+</form>

app/Resources/FOSUserBundle/views/Profile/edit_content.html.twig

@@ -4,7 +4,7 @@
     <div class="form-group">
         {{ form_label(form.username) }}
         <div class="input-group">
-            {{ form_widget(form.username, {'attr': {'class': 'input-lg'}}) }}
+            {{ form_widget(form.username) }}
             <span class="input-group-addon"><span class="icon-user"></span></span>
         </div>
     </div>
@@ -12,7 +12,7 @@
     <div class="form-group">
         {{ form_label(form.email) }}
         <div class="input-group clearfix">
-            {{ form_widget(form.email, {'attr': {'class': 'input-lg'}}) }}
+            {{ form_widget(form.email) }}
             <span class="input-group-addon"><span class="icon-mail"></span></span>
         </div>
     </div>
@@ -20,7 +20,7 @@
     <div class="form-group">
         {{ form_label(form.current_password) }}
         <div class="input-group">
-            {{ form_widget(form.current_password, {'attr': {'class': 'input-lg'}}) }}
+            {{ form_widget(form.current_password) }}
             <span class="input-group-addon"><span class="icon-lock"></span></span>
         </div>
     </div>

app/Resources/FOSUserBundle/views/Registration/register_content.html.twig

@@ -1,6 +1,10 @@
 {% trans_default_domain 'FOSUserBundle' %}
 
 <form action="{{ path('fos_user_registration_register') }}" method="POST" class="fos_user_registration_register col-md-6">
+    <h2 class="title">
+        Create account
+    </h2>
+
     {% if form is defined %}
         {{ form_errors(form) }}
     {% endif %}
@@ -8,7 +12,7 @@
     <div class="form-group clearfix">
         <label for="fos_user_registration_email">Email:</label>
         <div class="input-group clearfix">
-            <input class="form-control input-lg" type="text" id="fos_user_registration_email" name="fos_user_registration_email">
+            <input class="form-control" type="text" id="fos_user_registration_email" name="fos_user_registration_email">
             <span class="input-group-addon"><span class="icon-mail"></span></span>
         </div>
     </div>
@@ -16,7 +20,7 @@
     <div class="form-group">
         <label for="fos_user_registration_username">Username:</label>
         <div class="input-group">
-            <input class="form-control input-lg" type="text" id="fos_user_registration_username" name="fos_user_registration_username">
+            <input class="form-control" type="text" id="fos_user_registration_username" name="fos_user_registration_username">
             <span class="input-group-addon"><span class="icon-user"></span></span>
         </div>
     </div>
@@ -24,7 +28,7 @@
     <div class="form-group">
         <label for="fos_user_registration_plainPassword_first">Password:</label>
         <div class="input-group">
-            <input class="form-control input-lg" type="password" id="fos_user_registration_plainPassword_first" name="fos_user_registration_plainPassword[first]">
+            <input class="form-control" type="password" id="fos_user_registration_plainPassword_first" name="fos_user_registration_plainPassword[first]">
             <span class="input-group-addon"><span class="icon-lock"></span></span>
         </div>
     </div>
@@ -32,10 +36,14 @@
     <div class="form-group">
         <label for="fos_user_registration_plainPassword_second">Repeat Password:</label>
         <div class="input-group">
-            <input class="form-control input-lg" type="password" id="fos_user_registration_plainPassword_second" name="fos_user_registration_plainPassword[second]">
+            <input class="form-control" type="password" id="fos_user_registration_plainPassword_second" name="fos_user_registration_plainPassword[second]">
             <span class="input-group-addon"><span class="icon-lock-open"></span></span>
         </div>
     </div>
 
-    <input type="submit" class="btn btn-block btn-primary btn-lg" value="{{ 'registration.submit'|trans }}" />
-</form>
+    <div class="clearfix"></div>
+
+    <hr>
+
+    <input type="submit" class="btn btn-block btn-success btn-lg" value="{{ 'registration.submit'|trans }}" />
+</form>

app/Resources/FOSUserBundle/views/Resetting/request.html.twig

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block fos_user_content %}
-<form action="{{ path('fos_user_resetting_send_email') }}" method="POST" class="fos_user_resetting_request col-md-offset-3 col-md-6">
+<form action="{{ path('fos_user_resetting_send_email') }}" method="POST" class="fos_user_resetting_request col-md-6">
     {% if invalid_username is defined %}
         <div class="alert alert-warning">
             <p>{{ 'resetting.request.invalid_username'|trans({'%username%': invalid_username}) }}</p>
@@ -19,11 +19,11 @@
     <div class="form-group">
         <label for="username">{{ 'resetting.request.username'|trans }}</label>
         <div class="input-group">
-            <input type="text" id="username" name="username" required="required" class="form-control input-lg" />
+            <input type="text" id="username" name="username" required="required" class="form-control" />
             <span class="input-group-addon"><span class="icon-user"></span></span>
         </div>
     </div>
 
     <input type="submit" class="btn btn-block btn-inverse btn-lg" value="{{ 'resetting.request.submit'|trans }}" />
 </form>
-{% endblock %}
+{% endblock %}

app/Resources/FOSUserBundle/views/layout.html.twig

@@ -9,7 +9,7 @@
     </section>
 {% else %}
     <h2 class="title">
-        {{ app.user.username }} <small>(that's you!)</small>
+        {{ app.user.username }}
     </h2>
 
     <section class="row">

app/Resources/HWIOAuthBundle/views/Connect/login.html.twig

@@ -3,17 +3,16 @@
 {% trans_default_domain 'FOSUserBundle' %}
 
 {% block fos_user_header %}
-<h3 class="row title">
-    <span class="col-md-6">Sign in</span>
-
-    <span class="col-md-6">Or create new account</span>
-</h3>
 {% endblock %}
 
 {% block fos_user_content %}
     {# HWIOAuthBundle uses the same template for the login and the connect functionality currently
        so we need to check if the user is already authenticated. #}
     <div class="col-md-6">
+        <h2 class="title">
+            Sign in
+        </h2>
+
         {% if not app.user %}
             {% if error is defined and error is not empty %}
                 <div class="alert alert-warning">
@@ -25,7 +24,7 @@
                 <div class="form-group">
                     <label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
                     <div class="input-group">
-                        <input class="form-control input-lg" type="text" id="username" name="_username">
+                        <input class="form-control" type="text" id="username" name="_username">
                         <span class="input-group-addon"><span class="icon-user"></span></span>
                     </div>
                 </div>
@@ -33,7 +32,7 @@
                 <div class="form-group">
                     <label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
                     <div class="input-group">
-                        <input class="form-control input-lg" type="text" id="password" name="_password">
+                        <input class="form-control" type="text" id="password" name="_password">
                         <span class="input-group-addon"><span class="icon-lock"></span></span>
                     </div>
                 </div>
@@ -60,7 +59,7 @@
         {% endif %}
 
         {% for owner in hwi_oauth_resource_owners() %}
-            <a class="btn btn-block btn-{{ owner }} btn-lg" href="{{ hwi_oauth_login_url(owner) }}"><span class="icon-{{ owner }}"></span>Login with {{ owner | trans({}, 'HWIOAuthBundle') }}</a>{% if not loop.last %}<br />{% endif %}
+            <a class="btn btn-block btn-{{ owner }} btn-primary btn-lg" href="{{ hwi_oauth_login_url(owner) }}"><span class="icon-{{ owner }}"></span>Login with {{ owner | trans({}, 'HWIOAuthBundle') }}</a>{% if not loop.last %}<br />{% endif %}
         {% endfor %}
     </div>
 

src/Packagist/WebBundle/Form/Type/PackageType.php

@@ -26,7 +26,6 @@ class PackageType extends AbstractType
         $builder->add('repository', 'text', array(
             'label' => 'Repository URL (Git/Svn/Hg)',
             'attr'  => array(
-                'class'       => 'input-lg',
                 'placeholder' => 'i.e.: git://github.com/composer/composer.git',
             )
         ));

src/Packagist/WebBundle/Resources/public/css/main.css

@@ -1,4 +1,16 @@
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,300italic);
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,500,600,300italic);
+
+/*
+ main header: #2d2d32
+ secondary header: #f28d1a
+
+ light grey: #f3f4f5;
+ colors danger/error: #ff4533 #cd3729
+ colors warning: #ed9e2e #F28D1A
+ colors success: #83c129 #69ad21
+ colors default: #bbbfc4 #a5aab0
+
+ */
 
 @font-face {
     font-family: 'fontello';
@@ -19,11 +31,22 @@ pre, code {
   font-family: Consolas, "Courier New", Courier, monospace;
 }
 
+label {
+  font-weight: normal;
+}
+
 body {
-    background: #fff;
+    background: #FAFAFA;
     font-family: 'Open Sans', sans-serif;
 }
 
+a, .package .package-aside a {
+  color: #F25B1A;
+}
+a:hover, .package .package-aside a:hover {
+  color: #2d2d32;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
@@ -45,13 +68,14 @@ strong {
     right: 0;
     top: 0;
     z-index: 10;
-    background: #2c3e50;
-    min-height: 59px;
-    border-bottom: 5px solid #068FD5;
+    background: #2d2d32;
+    min-height: 64px;
+    border-bottom: 5px solid #f28d1a;
 }
 
 .navbar {
     margin: 0;
+    border: 0;
 }
 
 .navbar .navbar-brand {
@@ -71,8 +95,8 @@ strong {
 .navbar .navbar-brand em {
     padding-left: 15px;
     padding-top: 8px;
-    font: italic 14px 'Times New Roman';
-    color: #BDC3C7;
+    font-size: 14px;
+    color: #f3f4f5;
 }
 
 .navbar-collapse {
@@ -81,52 +105,46 @@ strong {
 
 .navbar-toggle {
     background: rgba(0, 0, 0, 0.3);
+    margin-top: 12px;
 }
 
 .navbar-toggle span {
     background: #fff;
 }
 
-.navbar .nav > li > a, .navbar .nav > .active > a {
+.navbar .nav > li > a, .navbar .nav > .active > a, .navbar .nav > li > section {
     padding: 18px 25px 19px;
     background: none;
     box-shadow: none;
-    border-left: 1px solid rgba(69, 78, 92, 0.5);
     text-shadow: none;
     color: #fff;
 }
 .nav .nav-user-signin {
-    padding: 18px 25px 17px !important;
+    padding: 18px 25px 19px !important;
 }
 
 .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
-    background: #068fd5;
     box-shadow: none;
     color: #fff;
 }
 
 
-
-.navbar .nav > li:last-child > a {
-    border-right: 1px solid rgba(69, 78, 92, 0.5);
-}
-
 .navbar .nav > li > a:hover {
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.1);
     color: #fff;
 }
 
 .navbar .nav > li > a:focus {
-    background: #068FD5;
+    background: #f28d1a;
     color: #fff;
 }
 
 .navbar .nav {
     float: right;
-    margin: 0;
+    margin: 1px 0 0 0;
     color: #fff;
     font-family: 'Open Sans', sans-serif;
-    font-size: 16px;
+    font-size: 14px;
 }
 
 .nav-user {
@@ -139,14 +157,27 @@ strong {
 }
 
 .navbar .nav > .nav-user > section {
-    padding: 5px 20px 0 0;
-    cursor: default;
+    cursor: pointer;
 }
 
 .navbar .nav > .nav-user > .nav-user-signin {
     padding: 17px 20px;
-    border-left: 1px solid rgba(69, 78, 92, 0.5);
-    color: #454e5c;
+}
+
+.navbar .nav > li > a, .navbar .nav > li > section, .navbar .nav > .active > a, .navbar .nav > .nav-user > .nav-user-signin {
+  border-left: 1px solid rgba(118, 111, 107, 0.69);
+}
+.navbar .nav > li:last-child > a {
+  border-right: 1px solid rgba(118, 111, 107, 0.69);
+}
+@media (max-width: 767px) {
+  .navbar .nav > li > a, .navbar .nav > .active > a, .navbar .nav > .nav-user > .nav-user-signin, .navbar .nav > .nav-user > section {
+    border-right: 1px solid rgba(118, 111, 107, 0.69);
+    border-bottom: 1px solid rgba(118, 111, 107, 0.69);
+  }
+  .navbar .nav > li:last-child > a {
+    border-bottom: 0;
+  }
 }
 
 .navbar .nav > .nav-user > section a {
@@ -155,7 +186,7 @@ strong {
 }
 
 .navbar .nav > .nav-user > section:hover {
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(255, 255, 255, 0.1);
 }
 
 .navbar .nav > .nav-user > section > .nav-user-menu, .navbar .nav > .nav-user > section > .signin-box {
@@ -167,7 +198,7 @@ strong {
 }
 
 .navbar .nav > .nav-user > section:hover > .nav-user-menu a:hover {
-    color: #08c;
+    color: #f28d1a;
 }
 
 .nav-user section img {
@@ -177,18 +208,20 @@ strong {
     margin-top: -5px;
 }
 
-.nav-user .nav-user-menu {
+.nav-user .nav-user-menu, .nav-user .signin-box {
+    z-index: 110;
+    background: #2d2d32;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
     top: 57px;
+    right: 0;
     position: absolute;
-    z-index: 110;
+}
+.nav-user .nav-user-menu {
     width: 220px;
-    background: #2C3E50;
-    box-shadow: 2px 3px 3px #454e5c;
 }
 
 .nav-user .nav-user-menu ul {
     padding: 12px 15px 12px 20px;
-    background: rgba(0, 0, 0, 0.3);
 }
 
 .nav-user .nav-user-menu li {
@@ -213,13 +246,7 @@ strong {
 }
 
 .nav-user .signin-box {
-    top: 57px;
-    right: 0;
     width: 300px;
-    position: absolute;
-    z-index: 110;
-    background: #1f2b38;
-    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
     color: #fff;
 }
 
@@ -254,7 +281,7 @@ strong {
 }
 
 .nav-user .signin-box .signin-box-register {
-    background: #7f8c8d;
+    background: #f28d1a;
     float: left;
     font-size: 14px;
     font-weight: 600;
@@ -274,7 +301,7 @@ strong {
 
 .nav-user .btn-github {
     font-weight: 600;
-    padding: 7px 12px 5px;
+    padding: 6px 12px 5px;
     width: 56%;
 }
 
@@ -282,6 +309,8 @@ strong {
     font-size: 20px;
     margin: 0 4px 0 0;
     vertical-align: bottom;
+    position: relative;
+    top: 2px;
 }
 
 
@@ -320,7 +349,7 @@ body > section:first-child {
 
 .wrapper .container {
     padding: 26px 20px;
-    color: #2c3e50;
+    color: #2d2d32;
 }
 .wrapper .container.flash-container {
   padding-bottom: 0;
@@ -346,7 +375,7 @@ body > section:first-child {
 }
 
 .wrapper-blue {
-    background: #068FD5;
+    background: #f28d1a;
 }
 
 .wrapper-blue .container {
@@ -363,15 +392,14 @@ body > section:first-child {
 }
 
 .wrapper-footer {
-    background: #2c3e50;
+    background: #2d2d32;
     font-size: 14px;
     line-height: 16px;
     padding: 35px 0 20px;
 }
 footer p {
   float: left;
-  margin-left: 90px;
-  color: #dddfe1;
+  color: #c3c3c3;
 }
 
 .wrapper-footer ul {
@@ -386,11 +414,6 @@ footer p {
     color: #fff;
 }
 
-.wrapper-footer a:hover {
-    text-decoration: none;
-    border-bottom: 1px dotted #fff;
-}
-
 .wrapper-footer .social {
     font-size: 26px;
 }
@@ -407,20 +430,12 @@ footer p {
 
 #search-form input[type="search"] {
     padding: 0 0 0 15px;
-    font: 20px 'Open Sans', sans-serif;
+    font: 14px 'Open Sans', sans-serif;
     border: 0;
-    height: 58px;
-    color: #555;
+    height: 32px;
+    color: #2d2d32;
     outline: none;
-}
-
-#search-form input[type="search"]:focus {
     border-radius: 2px;
-    color: #2c3e50;
-}
-
-#search-form .form-control:focus::-moz-placeholder {
-    color: #2c3e50;
 }
 
 
@@ -568,11 +583,6 @@ ul.packages .metadata-block:last-child {
   margin-bottom: 0;
 }
 
-ul.packages .abandoned {
-  color: #ff4533;
-  font-size: 18px;
-}
-
 .input-group input:focus:invalid:focus {
     border-color: #fa3a15;
 }
@@ -609,9 +619,8 @@ ul.packages .abandoned {
 
 .nav-tabs li a {
     padding: 11px 20px;
-    background: #f3f4f5;
+    background: #fff;
     color: #515966;
-    font-size: 15px;
     font-weight: 600;
     border-radius: 0;
 }
@@ -625,16 +634,16 @@ ul.packages .abandoned {
 }
 
 .nav-tabs li.active a, .nav-tabs.nav-stacked > li > a:hover {
-    background: #068fd5;
+    background: #f28d1a;
     color: #fff;
 }
 
 .nav-tabs.nav-stacked > li > a, .nav-tabs.nav-stacked > li > a:hover {
-    border-width: 0 0 1px;
+    border: 0;
 }
 
 .nav-tabs.nav-stacked > li > a:hover {
-    background: #068fd5;
+    background: #f28d1a;
 }
 
 .nav-tabs.nav-stacked [class^="icon-"], .nav-tabs.nav-stacked [class*=" icon-"] {
@@ -643,6 +652,12 @@ ul.packages .abandoned {
     margin-top: -2px;
 }
 
+.nav-stacked>li+li {
+  margin-top: 0;
+}
+.nav-tabs>li{
+  margin-bottom: 0;
+}
 
 .btn {
     padding: 9px 20px;
@@ -670,6 +685,11 @@ ul.packages .abandoned {
     color: #fff;
     font-size: 14px;
 }
+.btn-default:focus, .btn-default:active {
+  color: #fff;
+  background-color: #a5aab0;
+  border-bottom-color: #bbbfc4;
+}
 
 .btn.disabled {
     border-bottom-color: #e1e1e8;
@@ -690,7 +710,8 @@ ul.packages .abandoned {
     border-bottom-color: #cd3729;
 }
 .btn-danger:focus, .btn-danger:active {
-    border-bottom-color: #cd3729;
+    background: #cd3729;
+    border-bottom-color: #ff4533;
 }
 
 .btn-inverse, .btn-inverse:hover {
@@ -699,19 +720,18 @@ ul.packages .abandoned {
     border-bottom-color: #303339;
 }
 .btn-inverse:focus, .btn-inverse:active {
-    border-bottom-color: #303339;
+    color: #fff;
+    background: #303339;
+    border-bottom-color: #454e5c;
 }
 
-.btn-primary {
-    background: #36b7e6;
-    border-bottom-color: #2fa1ca;
-}
-.btn-primary:hover, .btn-github:hover {
-    background: #36b7e6;
-    border-bottom-color: #2fa1ca;
+.btn-primary, .btn-primary:hover {
+  background: #3594e2;
+  border-bottom-color: #2f6cca;
 }
 .btn-primary:focus, .btn-primary:active {
-    border-bottom-color: #2fa1ca;
+  background: #2f6cca;
+  border-bottom-color: #3594e2;
 }
 
 .btn-success, .btn-success:hover {
@@ -719,23 +739,23 @@ ul.packages .abandoned {
     border-bottom-color: #69ad21;
 }
 .btn-success:focus, .btn-success:active {
-    border-bottom-color: #69ad21;
+    background: #69ad21;
+    border-bottom-color: #83c129;
 }
 
 .btn-warning, .btn-warning:hover {
     background: #ed9e2e;
-    border-bottom-color: #d58512;
+    border-bottom-color: #F28D1A;
 }
 .btn-warning:focus, .btn-warning:active {
-    border-bottom-color: #d58512;
+    background: #F28D1A;
+    border-bottom-color: #ed9e2e;
 }
 
 .btn-github {
     line-height: 26px;
     font-weight: 600;
     color: #fff;
-    background: #36b7e6;
-    border-bottom-color: #2fa1ca;
     text-align: center;
 }
 
@@ -759,13 +779,13 @@ ul.packages .abandoned {
 }
 
 .sortable .glyphicon.active {
-  color: #00335D;
+  color: #2d2d32;
 }
 
 .sortable #order-bys-wrapper {
   font-size: 24px;
   position: relative;
-  top: 15px;
+  top: 2px;
   margin-left: -12px;
 }
 
@@ -809,22 +829,6 @@ ul.packages .abandoned {
     margin-bottom: -1px !important;
     position: relative;
 }
-.package .versions .version {
-  position: relative;
-  display: block;
-  height: 26px;
-}
-.package .delete-version {
-  display: inline-block;
-}
-.package .delete-version .submit {
-  position: absolute;
-  right: 5px;
-  top: 7px;
-}
-.package .delete-version .submit:hover {
-  color: #CD3729;
-}
 .package .action input.loading {
   background-position: 10px center;
   background-image: url("../img/loader.gif");
@@ -861,6 +865,25 @@ ul.packages .abandoned {
 .package .details p {
     margin: 0;
 }
+.package .details .maintainers {
+  padding-bottom: 6px;
+  font-size: 0.0001px;
+}
+.package .details .maintainers img {
+  margin-bottom: 4px;
+  margin-right: 4px;
+}
+.package .details #add-maintainer {
+  margin-top: 3px;
+  margin-bottom: 7px;
+  float: right;
+  font-size: 14px;
+}
+.package .details #remove-maintainer {
+  float: right;
+  clear: right;
+  font-size: 14px;
+}
 .package .details .canonical {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -894,34 +917,37 @@ ul.packages .abandoned {
 
 
 
+.package .package-aside {
+  border-top: 2px solid #f28d1a;
+  border-radius: 0;
 
-@media (min-width: 992px) {
-    .package .package-aside {
-      background: #2C3E50;
-      padding-top: 15px;
-      padding-bottom: 15px;
-      border-radius: 2px;
-    }
-    .package .package-aside {
-      color: #BDC3C7;
-    }
-    .package .package-aside a, .package .package-aside i {
-      color: #fff;
-    }
-    .package .details-toggler:hover a {
-      color: #068FD5;
-    }
+  margin: 0;
+  padding: 20px 0 0;
+}
+.package .package-aside.versions-wrapper {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+.package-aside .details {
+  padding-left: 0;
 }
+.package .package-aside i {
+  color: #bbbfc4;
+}
+.package .package-aside i:hover {
+  color: #a5aab0;
+}
+
 .package .details-toggler.open, .package .details-toggler.open a, .package .details-toggler.open i {
-  background: #068FD5;
+  background: #f28d1a;
   color: #fff;
 }
 
-.package .versions-wrapper, .package .version-details {
+.package .package-aside.versions-wrapper, .package .version-details {
   margin-top: 20px;
 }
 .package .version-details .title {
-  border-top: 1px solid #dddfe1;
+  border-top: 2px solid #f28d1a;
   padding-top: 10px;
 }
 .package .versions {
@@ -952,11 +978,55 @@ ul.packages .abandoned {
   cursor: pointer;
 }
 
+.package .versions .version {
+  position: relative;
+  display: block;
+  height: 26px;
+}
+.package .delete-version {
+  display: inline-block;
+}
+.package .delete-version .submit {
+  position: absolute;
+  right: 5px;
+  top: 7px;
+}
+.package .delete-version .submit:hover {
+  color: #cd3729;
+}
+
+@media (min-width: 992px) {
+    .package-aside .details {
+      padding-left: 15px;
+    }
+    .package .package-aside {
+      background: #fff;
+      border-radius: 2px;
+      border-top: 0;
+      padding: 10px 0 0 0;
+      margin-left: -15px;
+      margin-right: -15px;
+    }
+    .package .package-aside.versions-wrapper {
+      margin-left: 0;
+      margin-right: 0;
+      padding: 15px;
+    }
+    .package .versions {
+      margin: 0 -15px;
+    }
+    .package .versions .version {
+      padding: 2px 15px 2px 15px;
+    }
+    .package .delete-version .submit {
+      right: 15px;
+    }
+}
 
 .package .version-details .version-number {
   font-size: 16px;
   font-weight: 600;
-  color: #2C3E50;
+  color: #2d2d32;
 }
 .version-details.loading .title .version-number:after {
   display: inline-block;
@@ -980,7 +1050,7 @@ ul.packages .abandoned {
     text-transform: lowercase;
 }
 .package i {
-    color: #2C3E50;
+    color: #2d2d32;
 }
 .package .version-details .source-reference {
     margin-left: 10px;
@@ -1006,10 +1076,12 @@ ul.packages .abandoned {
   content: "";
 }
 .package .version-details .package-links {
-  border-top: 1px solid #dddfe1;
+  border-top: 2px solid #f28d1a;
+  border-bottom: 2px solid #f28d1a;
   margin-top: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
+  margin-bottom: 20px;
 }
 .package .version-details .package-links ul  {
     padding-left: 18px;
@@ -1049,8 +1121,7 @@ ul.packages .abandoned {
   top: 15px;
 }
 .package .mark-favorite.is-starred {
-  color: #F7EB2A;
-  text-shadow: 0px 0px 0px rgba(100, 70, 16, 1);
+  color: #F28D1A;
 }
 @media (max-width: 767px) {
     .package .mark-favorite {
@@ -1107,24 +1178,24 @@ ul.packages .abandoned {
   font-size: 1.5em;
 }
 .legend-first {
-  color: #068FD5;
+  color: #f28d1a;
 }
 .legend-second {
-  color: #2c3e50;
+  color: #2d2d32;
 }
 
 pre, code {
-    background: #F3F4F5;
+    background: #fff;
     border: none;
     border-radius: 2px;
-    color: #2C3E50;
+    color: #2d2d32;
 }
 
 .wrapper .content h2.title, .wrapper .content h3.title {
     margin: -5px 0 15px;
     padding: 0 0 15px;
-    border-bottom: 1px solid #DDDFE1;
-    color: #2c3e50;
+    border-bottom: 2px solid #f28d1a;
+    color: #2d2d32;
 }
 
 .wrapper .content h3.title {
@@ -1150,7 +1221,7 @@ pre, code {
 }
 
 .wrapper .content h2 a {
-    color: #2C3E50;
+    color: #2d2d32;
     font-weight: 600;
     text-decoration: none;
 }
@@ -1177,11 +1248,11 @@ pre, code {
 }
 
 .font-bold {
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .font-fat {
-    font-weight: 700;
+    font-weight: 600;
 }
 
 .text-center {
@@ -1234,13 +1305,13 @@ pre, code {
 .packages .package-item {
     padding: 5px 15px;
     margin-bottom: 10px;
-    background: #F3F4F5;
+    background: #fff;
     border-radius: 4px;
 }
 
 .packages .selected .package-item {
     padding: 3px 13px;
-    border: 2px solid #2980b9;
+    border: 2px solid #F28D1A;
 }
 
 .packages .package-item h4 {
@@ -1257,25 +1328,28 @@ pre, code {
 .alert {
     background: none;
     border: none;
-    border-left: 10px solid #000;
+    border-left: 4px solid #000;
     box-shadow: none;
-    border-radius: 2px;
+    border-radius: 0;
     padding: 5px 0 5px 10px;
 }
+.alert p {
+  margin: 0;
+}
 .flash-container .alert {
   margin-bottom: 0;
 }
 .alert-warning {
-    border-left-color: #D58512;
-    color: #D58512;
+    border-left-color: #F28D1A;
+    color: #2d2d32;
 }
 .alert-danger, .alert-error {
-    border-left-color: #CD3729;
-    color: #CD3729;
+    border-left-color: #cd3729;
+    color: #2d2d32;
 }
 .alert-success {
     border-left-color: #69AD21;
-    color: #69AD21;
+    color: #2d2d32;
 }
 
 

src/Packagist/WebBundle/Resources/public/js/charts.js

@@ -2,8 +2,8 @@
     "use strict";
 
     var colors = [
-        'rgba(6,143,213,1)',
-        'rgba(44,62,80,1)'
+        'rgba(242, 141, 26, 1)',
+        'rgba(45, 45, 50, 1)'
     ];
 
     Chart.defaults.global.responsive = true;

src/Packagist/WebBundle/Resources/views/Package/edit.html.twig

@@ -5,16 +5,15 @@
 {% endblock %}
 
 {% block content %}
-    <div class="box clearfix">
-        <h1>
-            Edit {{ package.name }}
-        </h1>
+<h2 class="title">Edit {{ package.name }}</h2>
 
-        <form action="{{ path('edit_package', {'name': package.name}) }}" method="post" {{ form_enctype(form) }}>
-            {{ form_widget(form) }}
+<section class="row">
+    <form class="col-md-6" action="{{ path('edit_package', {'name': package.name}) }}" method="POST" {{ form_enctype(form) }}>
+        {{ form_widget(form) }}
 
-            <input type="submit" value="Update" />
-        </form>
-    </div>
-{% endblock %}
+        <hr>
 
+        <input class="btn btn-block btn-primary btn-lg" id="submit" type="submit" value="Update" />
+    </form>
+</section>
+{% endblock %}

src/Packagist/WebBundle/Resources/views/User/favorites.html.twig

@@ -8,12 +8,10 @@
 <h2 class="title">
     {{ user.username }}
     <small>
-        {%- if isActualUser %}
-            (that's you!)
-        {%- else %}
+        {%- if not isActualUser %}
             member since: {{ user.createdAt|date('M d, Y') }}
             {%- if is_granted('ROLE_ADMIN') %}
-                <strong>email: <a href="mailto:{{ user.email }}">{{ user.email }}</a></strong>
+                <a href="mailto:{{ user.email }}">{{ user.email }}</a>
             {%- endif %}
         {%- endif %}
     </small>

src/Packagist/WebBundle/Resources/views/User/packages.html.twig

@@ -8,12 +8,10 @@
 <h2 class="title">
     {{ user.username }}
     <small>
-        {%- if isActualUser %}
-            (that's you!)
-        {%- else %}
+        {%- if not isActualUser %}
             member since: {{ user.createdAt|date('M d, Y') }}
             {%- if is_granted('ROLE_ADMIN') %}
-                <strong>email: <a href="mailto:{{ user.email }}">{{ user.email }}</a></strong>
+                <a href="mailto:{{ user.email }}">{{ user.email }}</a>
             {%- endif %}
         {%- endif %}
     </small>

src/Packagist/WebBundle/Resources/views/User/profile.html.twig

@@ -10,7 +10,7 @@
     <small>
         member since: {{ user.createdAt|date('M d, Y') }}
         {%- if is_granted('ROLE_ADMIN') %}
-            <strong>email: <a href="mailto:{{ user.email }}">{{ user.email }}</a></strong>
+            <a href="mailto:{{ user.email }}">{{ user.email }}</a>
         {%- endif %}
     </small>
 </h2>

src/Packagist/WebBundle/Resources/views/Web/searchSection.html.twig

@@ -5,7 +5,7 @@
         {%- if showSearchDesc == 'show' %}
         <div class="row">
             <div class="col-xs-12 hidden-xs">
-                <p>Packagist is the main <a href="http://getcomposer.org/">Composer</a> repository. It aggregates all sorts of PHP packages that are installable with Composer.</p>
+                <p>Packagist is the main <a href="http://getcomposer.org/">Composer</a> repository. It aggregates public PHP packages installable with Composer.</p>
             </div>
         </div>
         {%- endif %}

src/Packagist/WebBundle/Resources/views/Web/viewPackage.html.twig

@@ -108,43 +108,41 @@
                 <div class="col-md-offset-1 col-md-3">
                     <div class="row package-aside">
                         <div class="details col-xs-12 col-sm-6 col-md-12">
-                            {% set repoUrl = package.repository|replace({'git://github.com/': 'https://github.com/', 'git@github.com:': 'https://github.com/'}) %}
-                            <p class="canonical">
-                                <i class="icon-box" title="Canonical Repository URL"></i>
-                                <a href="{{ repoUrl }}" title="Canonical Repository URL">{{ repoUrl|replace({'https://':'', 'http://':''}) }}</a>
-                            </p>
                             <p class="maintainers">
-                                <i class="glyphicon glyphicon-user"></i>
                                 {% for maintainer in package.maintainers -%}
-                                    <a href="{{ path('user_profile', {'name': maintainer.username}) }}">{{ maintainer.username }}</a>{{ loop.last ? '' : ', ' }}
+                                    <a href="{{ path('user_profile', {'name': maintainer.username}) }}"><img width="48" height="48" title="{{ maintainer.username }}" src="http://www.gravatar.com/avatar/{{ maintainer.email|gravatar_hash }}?s=48&amp;d=identicon"></a>
                                 {% endfor %}
                                 {% if addMaintainerForm is defined or removeMaintainerForm is defined %}
                                     {% if addMaintainerForm is defined %}<a id="add-maintainer" href="{{ path('add_maintainer', {'name': package.name}) }}"><i class="glyphicon glyphicon-plus"></i></a>{% endif %}
-                                    {% if addMaintainerForm is defined and removeMaintainerForm is defined %} / {% endif %}
                                     {% if removeMaintainerForm is defined %}<a id="remove-maintainer" href="{{ path('remove_maintainer', {'name': package.name}) }}"><i class="glyphicon glyphicon-remove"></i></a>{% endif %}
                                 {% endif %}
                             </p>
 
+                            {% set repoUrl = package.repository|replace({'git://github.com/': 'https://github.com/', 'git@github.com:': 'https://github.com/'}) %}
+                            <p class="canonical">
+                                <a href="{{ repoUrl }}" title="Canonical Repository URL">{{ repoUrl|replace({'https://':'', 'http://':''}) }}</a>
+                            </p>
+
                             {% if version and version.homepage %}
-                                <p><i class="glyphicon glyphicon-home"></i> <a href="{{ version.homepage }}">Homepage</a></p>
+                                <p><a href="{{ version.homepage }}">Homepage</a></p>
                             {% endif %}
                             {% if version.support.source is defined %}
-                                <p><i class="glyphicon glyphicon-align-left"></i> <a href="{{ version.support.source }}">Source</a></p>
+                                <p><a href="{{ version.support.source }}">Source</a></p>
                             {% endif %}
                             {% if version and version.support.issues is defined %}
-                                <p><i class="glyphicon glyphicon-exclamation-sign"></i> <a href="{{ version.support.issues }}">Issues</a></p>
+                                <p><a href="{{ version.support.issues }}">Issues</a></p>
                             {% endif %}
                             {% if version and version.support.irc is defined %}
-                                <p><i class="glyphicon glyphicon-comment"></i> <a href="{{ version.support.irc }}">IRC</a></p>
+                                <p><a href="{{ version.support.irc }}">IRC</a></p>
                             {% endif %}
                             {% if version and version.support.forum is defined %}
-                                <p><i class="glyphicon glyphicon-comment"></i> <a href="{{ version.support.forum }}">Forum</a></p>
+                                <p><a href="{{ version.support.forum }}">Forum</a></p>
                             {% endif %}
                             {% if version and version.support.wiki is defined %}
-                                <p><i class="glyphicon glyphicon-book"></i> <a href="{{ version.support.wiki }}">Wiki</a></p>
+                                <p><a href="{{ version.support.wiki }}">Wiki</a></p>
                             {% endif %}
                             {% if version and version.support.docs is defined %}
-                                <p><i class="glyphicon glyphicon-book"></i> <a href="{{ version.support.docs }}">Documentation</a></p>
+                                <p><a href="{{ version.support.docs }}">Documentation</a></p>
                             {% endif %}
                         </div>
 
@@ -160,7 +158,7 @@
             {% if addMaintainerForm is defined or removeMaintainerForm is defined %}
                 <div class="row">
                     {% if addMaintainerForm is defined %}
-                        <form id="add-maintainer-form" class="col-sm-6 col-sm-offset-6 {{ show_add_maintainer_form|default(false) ? '': 'hidden' }}" action="{{ path('add_maintainer', {'name': package.name}) }}" method="POST" {{ form_enctype(addMaintainerForm) }}>
+                        <form id="add-maintainer-form" class="col-sm-6 col-md-3 col-md-offset-9 {{ show_add_maintainer_form|default(false) ? '': 'hidden' }}" action="{{ path('add_maintainer', {'name': package.name}) }}" method="POST" {{ form_enctype(addMaintainerForm) }}>
                             <div>
                                 <h4>Add Maintainer</h4>
                                 <p>
@@ -175,7 +173,7 @@
                     {% endif %}
 
                     {% if removeMaintainerForm is defined %}
-                        <form id="remove-maintainer-form" class="col-sm-6 col-sm-offset-6 {{ show_remove_maintainer_form|default(false) ? '': 'hidden' }}" action="{{ path('remove_maintainer', {'name': package.name}) }}" method="POST" {{ form_enctype(removeMaintainerForm) }}>
+                        <form id="remove-maintainer-form" class="col-sm-6 col-md-3 col-md-offset-9 {{ show_remove_maintainer_form|default(false) ? '': 'hidden' }}" action="{{ path('remove_maintainer', {'name': package.name}) }}" method="POST" {{ form_enctype(removeMaintainerForm) }}>
                             <div>
                                 <h4>Remove Maintainer</h4>
                                 <p>

src/Packagist/WebBundle/Resources/views/layout.html.twig

@@ -47,7 +47,6 @@
                         {%- if app.user %}
                             <li class="nav-user">
                                 <section>
-                                    <img width="57" height="57" alt="" src="http://www.gravatar.com/avatar/{{ app.user.email|gravatar_hash }}">
                                     <a href="{{ path('fos_user_profile_show') }}">{{ app.user.username }}</a>
 
                                     <section class="nav-user-menu">
@@ -57,7 +56,7 @@
                             </li>
                         {%- else %}
                             <li>
-                                <a href="{{ path('fos_user_registration_register') }}">Create a new account</a>
+                                <a href="{{ path('fos_user_registration_register') }}">Create account</a>
                             </li>
                             <li class="nav-user">
                                 <section class="nav-user-signin">
@@ -86,7 +85,7 @@
                                             {%- endif %}
 
                                             <div class="signin-box-buttons">
-                                                <a href="{{ hwi_oauth_login_url('github') }}" class="pull-right btn btn-github"><span class="icon-github"></span>Use Github</a>
+                                                <a href="{{ hwi_oauth_login_url('github') }}" class="pull-right btn btn-primary btn-github"><span class="icon-github"></span>Use Github</a>
                                                 <button type="submit" class="btn btn-success" id="_submit" name="_submit">{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}</button>
                                             </div>
                                         </form>
@@ -99,10 +98,10 @@
                             </li>
                         {%- endif %}
                             <li>
-                                <a style="background: #83c129;" href="{{ path('browse') }}">Browse</a>
+                                <a href="{{ path('browse') }}">Browse</a>
                             </li>
                             <li>
-                                <a style="background: #83c129;" href="{{ path('submit') }}">Submit</a>
+                                <a href="{{ path('submit') }}">Submit</a>
                             </li>
                         </ul>
                     </div>
@@ -152,13 +151,13 @@
         <footer class="wrapper-footer">
             <nav class="container">
                 <div class="row">
-                    <ul class="social col-xs-3 col-md-2 pull-right">
+                    <ul class="social col-xs-5 col-md-2 pull-right">
                         <li><a href="http://github.com/composer/packagist" title="{{ 'menu.github'|trans }}"><span class="icon-github"></span></a></li>
                         <li><a href="https://twitter.com/packagist" title="{{ 'menu.twitter'|trans }}"><span class="icon-twitter"></span></a></li>
                         <li><a href="mailto:contact@packagist.org" title="{{ 'menu.contact'|trans }}"><span class="icon-mail"></span></a></li>
                     </ul>
 
-                    <ul class="col-xs-3 col-md-2">
+                    <ul class="col-xs-4 col-md-2">
                         <li><a href="{{ path('about') }}">{{ 'menu.about_packagist'|trans }}</a></li>
                         <li><a href="{{ path('feeds') }}">{{ 'menu.rss_feeds'|trans }}</a></li>
                     </ul>
@@ -170,7 +169,7 @@
                 </div>
 
                 <div class="row">
-                    <p class="toran col-xs-8 pull-right text-right">Packagist maintenance and hosting is supported by <a href="https://toranproxy.com/">Toran Proxy</a></p>
+                    <p class="toran col-xs-12">Packagist maintenance and hosting is supported by <a href="https://toranproxy.com/">Toran Proxy</a></p>
                 </div>
             </nav>
         </footer>