fix(ui): using a separate css file

res.qrc

@@ -178,5 +178,7 @@
         <file>img/caps_lock.svg</file>
         <file>themes/default/contentDialog/contentDialog.css</file>
         <file>themes/default/tooliconsZone/tooliconsZone.css</file>
+        <file>themes/default/genericChatRoomWidget/genericChatRoomWidget.css</file>
+        <file>themes/dark/genericChatRoomWidget/genericChatRoomWidget.css</file>
     </qresource>
 </RCC>

src/widget/genericchatroomwidget.cpp

@@ -124,39 +124,11 @@ bool GenericChatroomWidget::isActive()
 void GenericChatroomWidget::setActive(bool _active)
 {
     active = _active;
-    if (active) {
-        currentColors.baseBackground = Style::getColor(Style::GroundBase); // When active
-        currentColors.statusLbl = Style::getColor(Style::StatusActive); // Color when active
-        currentColors.nameLbl = Style::getColor(Style::NameActive); // Color when active
-    } else {
-        currentColors.baseBackground = Style::getColor(Style::ThemeMedium); // Base background color
-        currentColors.statusLbl = Style::getColor(Style::GroundExtra); // Base color
-        currentColors.nameLbl = Style::getColor(Style::GroundBase); // Base color
-    }
-
-    changeStyle();
-}
 
-void GenericChatroomWidget::changeStyle()
+    setProperty("active", active);
-{
+    nameLabel->setProperty("active", active);
-    QString wgtStyle = QString("GenericChatroomWidget {"
+    statusMessageLabel->setProperty("active", active);
-                               "    background-color: #%1;" // Base background color
+    Style::repolish(this);
-                               "}"
-                               "GenericChatroomWidget:hover {"
-                               "    background-color: #%2;" // On mouse over
-                               "}"
-                               "CroppingLabel#statusMessageLabelObj {"
-                               "    color: #%3;"
-                               "}"
-                               "CroppingLabel#nameLabelObj {"
-                               "    color: #%4;"
-                               "}")
-    .arg(currentColors.baseBackground.rgba(), 0, 16)
-    .arg(currentColors.mouseOver.rgba(), 0, 16)
-    .arg(currentColors.statusLbl.rgba(), 0, 16)
-    .arg(currentColors.nameLbl.rgba(), 0, 16);
-
-    setStyleSheet(wgtStyle);
 }
 
 void GenericChatroomWidget::setName(const QString& name)
@@ -186,12 +158,7 @@ QString GenericChatroomWidget::getTitle() const
 
 void GenericChatroomWidget::reloadTheme()
 {
-    currentColors.baseBackground = Style::getColor(Style::ThemeMedium); // Base background color
+    setStyleSheet(Style::getStylesheet("genericChatRoomWidget/genericChatRoomWidget.css"));
-    currentColors.mouseOver = Style::getColor(Style::ThemeLight); // On mouse over
-    currentColors.statusLbl = Style::getColor(Style::GroundExtra); // statusMessageLabel base color
-    currentColors.nameLbl = Style::getColor(Style::GroundBase); // nameLabel base color
-
-    changeStyle();
 }
 
 void GenericChatroomWidget::activate()

src/widget/genericchatroomwidget.h

@@ -85,16 +85,6 @@ protected:
     MaskablePixmapWidget* avatar;
     CroppingLabel* statusMessageLabel;
     bool active;
-
-private:
-    void changeStyle();
-    struct Colors{
-        QColor baseBackground;
-        QColor mouseOver;
-        QColor statusLbl;
-        QColor nameLbl;
-    };
-    Colors currentColors;
 };
 
 #endif // GENERICCHATROOMWIDGET_H

themes/dark/genericChatRoomWidget/genericChatRoomWidget.css

@@ -0,0 +1,21 @@
+GenericChatroomWidget {
+    background-color: @themeMedium; /* Base background color */
+}
+GenericChatroomWidget:hover {
+    background-color: @themeLight; /* On mouse over */
+}
+GenericChatroomWidget[active="true"] {
+    background-color: @groundBase; /* When active */
+}
+CroppingLabel#statusMessageLabelObj {
+    color: @groundExtra; /* Base color */
+}
+CroppingLabel#statusMessageLabelObj[active="true"] {
+    color: @statusActive; /* Color when active */
+}
+CroppingLabel#nameLabelObj {
+    color: @groundExtra; /* Base color */
+}
+CroppingLabel#nameLabelObj[active="true"] {
+    color: @nameActive; /* Color when active */
+}

themes/default/genericChatRoomWidget/genericChatRoomWidget.css

@@ -0,0 +1,21 @@
+GenericChatroomWidget {
+    background-color: @themeMedium; /* Base background color */
+}
+GenericChatroomWidget:hover {
+    background-color: @themeLight; /* On mouse over */
+}
+GenericChatroomWidget[active="true"] {
+    background-color: @groundBase; /* When active */
+}
+CroppingLabel#statusMessageLabelObj { 
+    color: @groundExtra; /* Base color */
+}
+CroppingLabel#statusMessageLabelObj[active="true"] { 
+    color: @statusActive; /* Color when active */
+}
+CroppingLabel#nameLabelObj {
+    color: @groundBase; /* Base color */
+}
+CroppingLabel#nameLabelObj[active="true"] {
+    color: @nameActive;  /* Color when active */
+}