Merge lp:~nataliabidart/ubuntuone-control-panel/new-colors into lp:ubuntuone-control-panel

[Natalia Bidart]

- Modified stylesheet to use the new colours from brand, and to also ease
  the reading of white text (LP: #956077).
- Fixed the gap tab outlines (LP: #822629).

Screenshot of new look at:

http://ubuntuone.com/5JFlOvCs29xQMjOzoEU9m9

[lp:~nataliabidart/ubuntuone-control-panel/new-colors]

302. By Natalia Bidart on 2012-03-22

Clean up.

[Roberto Alsina (ralsina)]

+1 pretty

review: Approve

[lp:~nataliabidart/ubuntuone-control-panel/new-colors]

303. By Natalia Bidart on 2012-03-22

Also remove the right padding for the help_button to match 0 left padding when
focused.

[Robert Grant (rtgrant)]

+1 Nice

review: Approve

=== added file 'data/external_icon_dark_grey.png'
Binary files data/external_icon_dark_grey.png	1970-01-01 00:00:00 +0000 and data/external_icon_dark_grey.png	2012-03-22 20:32:25 +0000 differ
=== modified file 'data/qt/images.qrc'
--- data/qt/images.qrc	2012-03-15 01:25:08 +0000
+++ data/qt/images.qrc	2012-03-22 20:32:25 +0000
@@ -2,6 +2,7 @@
   <qresource prefix="/">
     <file>../banner.png</file>
     <file>../computer.png</file>
+    <file>../external_icon_dark_grey.png</file>
     <file>../external_icon_orange.png</file>
     <file>../external_icon_white.png</file>
     <file>../icon.png</file>

=== modified file 'data/qt/preferences.ui'
--- data/qt/preferences.ui	2012-03-14 18:37:40 +0000
+++ data/qt/preferences.ui	2012-03-22 20:32:25 +0000
@@ -95,6 +95,9 @@
         <property name="orientation">
          <enum>Qt::Vertical</enum>
         </property>
+        <property name="sizeType">
+         <enum>QSizePolicy::Minimum</enum>
+        </property>
         <property name="sizeHint" stdset="0">
          <size>
           <width>40</width>

=== modified file 'data/qt/side_widget.ui'
--- data/qt/side_widget.ui	2012-03-14 15:11:19 +0000
+++ data/qt/side_widget.ui	2012-03-22 20:32:25 +0000
@@ -20,7 +20,16 @@
    <property name="spacing">
     <number>40</number>
    </property>
-   <property name="margin">
+   <property name="leftMargin">
+    <number>0</number>
+   </property>
+   <property name="topMargin">
+    <number>0</number>
+   </property>
+   <property name="rightMargin">
+    <number>10</number>
+   </property>
+   <property name="bottomMargin">
     <number>0</number>
    </property>
    <item>
@@ -83,6 +92,9 @@
           <property name="text">
            <string notr="true">Install</string>
           </property>
+          <property name="wordWrap">
+           <bool>true</bool>
+          </property>
          </widget>
         </item>
        </layout>
@@ -125,6 +137,9 @@
           <property name="text">
            <string notr="true">Sign In</string>
           </property>
+          <property name="wordWrap">
+           <bool>true</bool>
+          </property>
          </widget>
         </item>
        </layout>
@@ -164,6 +179,9 @@
           <property name="text">
            <string notr="true">Select sync folders</string>
           </property>
+          <property name="wordWrap">
+           <bool>true</bool>
+          </property>
          </widget>
         </item>
        </layout>
@@ -203,6 +221,9 @@
           <property name="text">
            <string notr="true">Sync, stream, share!</string>
           </property>
+          <property name="wordWrap">
+           <bool>true</bool>
+          </property>
          </widget>
         </item>
        </layout>

=== modified file 'data/qt/ubuntuone.qss'
--- data/qt/ubuntuone.qss	2012-03-21 18:17:34 +0000
+++ data/qt/ubuntuone.qss	2012-03-22 20:32:25 +0000
@@ -7,7 +7,7 @@
 */
 
 QMainWindow {
-    background-color: #aea79f;
+    background-color: #adadad;
 }
 
 QWidget {
@@ -16,6 +16,7 @@
 
 QFrame {
     border: none;
+    border-color: #333333;
 }
 
 UbuntuOneWizard,
@@ -23,13 +24,12 @@
     background: white;
     border-radius: 5px;
     border-style: solid;
-    border-color: #939389;
     border-width: 1px;
     min-height: 90px;
 }
 
 QFrame#frame_greeting {
-    margin 0px;
+    margin: 0px;
     padding-left: 15px;
     padding-top: 10px;
     padding-right: 10px;
@@ -39,7 +39,6 @@
 QFrame#frame_status,
 QFrame#frame_storage {
     border-style: dotted;
-    border-color: #939389;
     border-left-width: 1px;
     padding: 10px;
     min-width: 40px;
@@ -47,24 +46,21 @@
 
 QFrame#account_separator {
     border-style: dotted;
-    border-color: #939389;
     border-bottom-width: 1px;
 }
 
 QFrame#frm_box { /*The Loading Overlay frame.*/
-    background: #ffffff;
+    background: white;
     border-radius: 5px;
     border-style: solid;
-    border-color: #939389;
     border-width: 1px;
     color: white;
     min-height: 100px;
 }
 
-SideWidget {
+SideWidget {  /* is a QFrame, so border color is already set */
     background-color: white;
     border-style: dotted;
-    border-color: #939389;
     border-right-width: 1px;
     color: white;
     min-height: 100px;
@@ -100,7 +96,7 @@
 
 QPushButton:enabled {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-        stop: 0 #ffffff,stop: 1.0 #e6e6e6);
+        stop: 0 white, stop: 1.0 #e6e6e6);
     color: #333333;
     border-color: #999999;
 }
@@ -111,7 +107,7 @@
 
 QPushButton:enabled:hover {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-        stop: 0 #ffffff,stop: 1.0 #ededed);
+        stop: 0 white, stop: 1.0 #ededed);
 }
 
 QPushButton:enabled:pressed {
@@ -169,10 +165,9 @@
     background: transparent;
     border: none;
     text-decoration: underline;
-    color: white;
-    padding-left: 10px;
-    padding-right: 25px;
-    background-image: url(:/external_icon_white.png);
+    padding-left: 2px;  /* 2px border buffer when focused */
+    padding-right: 15px;
+    background-image: url(:/external_icon_dark_grey.png);
     background-repeat: no-repeat;
     background-position: right;
     background-origin: margin;
@@ -185,8 +180,8 @@
     padding-bottom: 100%;
     /* end of hack */
     /* Compensate for border so text doesn't move */
-    padding-left: 8px;
-    padding-right: 23px;
+    padding-left: 0px;
+    padding-right: 13px;
 }
 
 GoToWebButton#share_publish_button {
@@ -213,51 +208,65 @@
     padding-right: 23px;
 }
 
+GoToWebButton#edit_profile_button,
+GoToWebButton#edit_services_button,
+GoToWebButton#get_more_space_button {
+    padding-left: 8px;
+    padding-right: 25px;
+    background-image: url(:/external_icon_white.png);
+    background-repeat: no-repeat;
+    background-position: right;
+    background-origin: margin;
+}
+
+QTabWidget {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-style: solid;
+    padding: 10px;
+}
+
+QTabWidget::pane {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    border-style: solid;
+    border-color: #333333;
+    border-width: 1px;
+    background: white;
+    position: absolute;
+    top: -2px;
+}
+
 QTabBar::tab {
-    height: 15px;
-    color: #333333;
-    background-color: #e4e0dd;
+    background-color: #e3e0dd;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
     border-style: solid;
     padding: 12px;
-    border-top-color: #939389;
-    border-right-color: #939389;
-    border-left-color: white;
-    border-bottom-color: #939389;
+    border-color: #898989;
+    border-left-color: #e3e0dd;  /* same as background */
     border-width: 1px;
+    margin-bottom: 1px;  /* to be able to override the QTabWidget border */
+    border-bottom-color: #333333;  /* same as background for QTabWidget */
+}
+
+QTabBar::tab:first {
+    border-left-color: #898989;  /* same as border-color */
+    border-bottom-left-radius: 0px;
 }
 
 QTabBar::tab:selected {
     background-color: white;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border-style: solid;
-    padding: 12px;
-    border-top-color: #939389;
-    border-right-color: #939389;
-    border-left-color: white;
-    border-bottom-color: white;
-    border-width: 1px;
-}
-
-QTabBar::tab:first {
-    border-left-color: #939389;
-}
-
-QTabBar::tab:middle:!selected {
-    border-left-color: #e4e0dd;
-}
-
-QTabBar::tab:last:!selected {
-    border-left-color: #e4e0dd;
-}
-
-QTabBar::tab:hover {
-    background: #f6f6f6;
-    text-decoration: underline;
-}
-
+    border-color: #333333;
+    border-bottom-color: white;  /* same as background for selected */
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+}
+
+QTabBar::tab:hover,
 QTabBar::tab:focus {
     text-decoration: underline;
     /* hack to make the mild-orange focused box dissapear */
@@ -266,24 +275,6 @@
     /* end of hack */
 }
 
-QTabWidget {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-style: solid;
-    padding: 10px;
-}
-
-QTabWidget::pane {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
-    border-style: solid;
-    border-color: #939389;
-    border-width: 1px;
-    background: white;
-    border-top: 2px solid white;
-}
-
 QGroupBox {
     padding-top: 30px;
     border: none;
@@ -332,10 +323,6 @@
     margin-top: -4px;
 }
 
-QLabel#follow_us_label {
-    color: white;
-}
-
 QLabel[OverQuota="true"],
 QLabel#warning_label {
     color: #df2d1f;
@@ -343,7 +330,6 @@
 
 QAbstractItemView {
     border-style: solid;
-    border-color: #898989;
     border-top-width: 1px;
     border-bottom-width: 1px;
     alternate-background-color: #f7f6f5;
@@ -363,17 +349,6 @@
     padding-right: 0px;
 }
 
-GoToWebButton#edit_profile_button,
-GoToWebButton#edit_services_button,
-GoToWebButton#get_more_space_button {
-    padding-left: 8px;
-    padding-right: 25px;
-    background-image: url(:/external_icon_white.png);
-    background-repeat: no-repeat;
-    background-position: right;
-    background-origin: margin;
-}
-
 QSpinBox {
     padding: 3px;
     background-color: white;