Redesign elements styles

src/single_window/connection_status_window.cpp

@@ -18,13 +18,18 @@ int Render::ConnectionStatusWindow() {
                                     connection_status_window_height_));
 
     ImGui::SetWindowFontScale(0.5f);
-    // ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
+    ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
+    ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
     ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
     ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
+
     ImGui::Begin("ConnectionStatusWindow", nullptr,
                  ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
                      ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                      ImGuiWindowFlags_NoSavedSettings);
+    ImGui::PopStyleVar(2);
+    ImGui::PopStyleColor();
     ImGui::SetWindowFontScale(1.0f);
 
     ImGui::SetWindowFontScale(0.6f);
@@ -75,8 +80,11 @@ int Render::ConnectionStatusWindow() {
       ImGui::SetCursorPosX((window_width - IPUT_WINDOW_WIDTH / 2) * 0.5f);
       ImGui::SetCursorPosY(window_height * 0.4f);
       ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH / 2);
+
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
       ImGui::InputText("##password", (char *)remote_password_.c_str(), 7,
                        ImGuiInputTextFlags_CharsNoBlank);
+      ImGui::PopStyleVar();
 
       ImGui::SetCursorPosX(window_width * 0.28f);
       ImGui::SetCursorPosY(window_height * 0.75f);
@@ -117,8 +125,7 @@ int Render::ConnectionStatusWindow() {
 
     ImGui::SetWindowFontScale(0.5f);
     ImGui::End();
-    ImGui::PopStyleVar(2);
+    ImGui::PopStyleVar();
-    // ImGui::PopStyleColor();
     ImGui::SetWindowFontScale(1.0f);
   }
   return 0;

src/single_window/control_window.cpp

@@ -1,7 +1,7 @@
 #include "render.h"
 
 int Render::ControlWindow() {
-  ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(0, 0, 0, 0));
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   static bool a, b, c, d, e;
   ImGui::SetNextWindowPos(ImVec2(0, 0), ImGuiCond_Always);
   ImGui::SetWindowFontScale(0.5f);
@@ -23,10 +23,10 @@ int Render::ControlWindow() {
                     ImVec2(control_window_width, control_window_height_),
                     ImGuiChildFlags_Border, ImGuiWindowFlags_NoDecoration);
   ImGui::SetWindowFontScale(1.0f);
+  ImGui::PopStyleColor();
 
   ControlBar();
 
-  ImGui::PopStyleColor();
   ImGui::EndChild();
 
   return 0;

src/single_window/local_peer_window.cpp

@@ -8,7 +8,9 @@
 
 int Render::LocalWindow() {
   ImGui::SetNextWindowPos(ImVec2(0, menu_window_height_), ImGuiCond_Always);
-  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(255, 255, 255, 1));
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   ImGui::BeginChild(
       "LocalDesktopWindow",
       ImVec2(local_window_width_,
@@ -17,6 +19,7 @@ int Render::LocalWindow() {
       ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
           ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
           ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleColor();
 
   ImGui::SetWindowFontScale(1.0f);
   ImGui::Text(
@@ -24,13 +27,16 @@ int Render::LocalWindow() {
 
   ImGui::Spacing();
   {
+    ImGui::PushStyleColor(ImGuiCol_ChildBg,
+                          ImVec4(239.0 / 255, 240.0 / 255, 242.0 / 255, 1.0f));
     ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
-    ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(0, 0, 0, 0.05));
     ImGui::BeginChild("LocalDesktopWindow_1", ImVec2(330, 180),
                       ImGuiChildFlags_Border,
                       ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
                           ImGuiWindowFlags_NoTitleBar |
                           ImGuiWindowFlags_NoBringToFrontOnFocus);
+    ImGui::PopStyleVar();
+    ImGui::PopStyleColor();
     {
       ImGui::SetWindowFontScale(0.5f);
       ImGui::Text("%s",
@@ -40,10 +46,12 @@ int Render::LocalWindow() {
 
       ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
       ImGui::SetWindowFontScale(1.0f);
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
       ImGui::InputText(
           "##local_id", (char *)mac_addr_str_.c_str(),
           mac_addr_str_.length() + 1,
           ImGuiInputTextFlags_CharsUppercase | ImGuiInputTextFlags_ReadOnly);
+      ImGui::PopStyleVar();
 
       ImGui::SameLine();
       ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
@@ -57,6 +65,8 @@ int Render::LocalWindow() {
         copy_start_time_ = ImGui::GetTime();
       }
 
+      ImGui::PopStyleColor(3);
+
       auto time_duration = ImGui::GetTime() - copy_start_time_;
       if (local_id_copied_ && time_duration < 1.0f) {
         const ImGuiViewport *viewport = ImGui::GetMainViewport();
@@ -77,6 +87,8 @@ int Render::LocalWindow() {
         ImGui::Begin("ConnectionStatusWindow", nullptr,
                      ImGuiWindowFlags_NoDecoration | ImGuiWindowFlags_NoMove |
                          ImGuiWindowFlags_NoSavedSettings);
+        ImGui::PopStyleVar(2);
+        ImGui::PopStyleColor();
 
         auto window_width = ImGui::GetWindowSize().x;
         auto window_height = ImGui::GetWindowSize().y;
@@ -93,12 +105,9 @@ int Render::LocalWindow() {
         ImGui::SetWindowFontScale(1.0f);
 
         ImGui::End();
-        ImGui::PopStyleVar(2);
-        ImGui::PopStyleColor();
       }
 
       ImGui::SetWindowFontScale(1.0f);
-      ImGui::PopStyleColor(3);
 
       ImGui::Spacing();
       ImGui::Separator();
@@ -131,6 +140,7 @@ int Render::LocalWindow() {
       }
 
       ImGui::SetWindowFontScale(1.0f);
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
       ImGui::InputTextWithHint(
           "##server_pwd",
           localization::max_password_len[localization_language_index_].c_str(),
@@ -138,6 +148,7 @@ int Render::LocalWindow() {
           show_password_ ? ImGuiInputTextFlags_CharsNoBlank
                          : ImGuiInputTextFlags_CharsNoBlank |
                                ImGuiInputTextFlags_Password);
+      ImGui::PopStyleVar();
 
       ImGui::SameLine();
       ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
@@ -172,13 +183,12 @@ int Render::LocalWindow() {
       ImGui::SetWindowFontScale(1.0f);
       ImGui::PopStyleColor(3);
     }
-    ImGui::PopStyleColor();
+
     ImGui::EndChild();
-    ImGui::PopStyleVar();
   }
 
   ImGui::EndChild();
-  ImGui::PopStyleColor();
+  ImGui::PopStyleVar();
 
   return 0;
 }

src/single_window/menu_window.cpp

@@ -13,6 +13,8 @@ int Render::MenuWindow() {
       "MenuWindow", ImVec2(main_window_width_, menu_window_height_),
       ImGuiChildFlags_Border,
       ImGuiWindowFlags_MenuBar | ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleColor();
+
   ImGui::SetWindowFontScale(1.0f);
   if (ImGui::BeginMenuBar()) {
     if (ImGui::BeginMenu(ICON_FA_BARS, true)) {
@@ -34,7 +36,6 @@ int Render::MenuWindow() {
     }
   }
 
-  ImGui::PopStyleColor();
   ImGui::EndChild();
 
   return 0;
@@ -52,15 +53,18 @@ int Render::AboutWindow() {
   // ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(1.0, 1.0, 1.0, 1.0));
   ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 1.0f);
   ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+  ImGui::SetWindowFontScale(0.5f);
   ImGui::Begin(localization::about[localization_language_index_].c_str(),
                nullptr,
                ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
                    ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoSavedSettings);
-  ImGui::SetWindowFontScale(0.6f);
+  ImGui::SetWindowFontScale(1.0f);
+  ImGui::SetWindowFontScale(0.5f);
   std::string text = "Version 0.0.1";
   ImGui::Text("%s", text.c_str());
 
-  ImGui::SetCursorPosX(about_window_width_ * 0.4f);
+  ImGui::SetCursorPosX(about_window_width_ * 0.42f);
   ImGui::SetCursorPosY(about_window_height_ * 0.75f);
   // OK
   if (ImGui::Button(localization::ok[localization_language_index_].c_str())) {
@@ -68,7 +72,10 @@ int Render::AboutWindow() {
   }
 
   ImGui::SetWindowFontScale(1.0f);
+  ImGui::SetWindowFontScale(0.5f);
   ImGui::End();
+  ImGui::SetWindowFontScale(1.0f);
+  ImGui::PopStyleVar(3);
 
   return 0;
 }

src/single_window/remote_peer_window.cpp

@@ -7,7 +7,9 @@
 int Render::RemoteWindow() {
   ImGui::SetNextWindowPos(ImVec2(local_window_width_ - 1, menu_window_height_),
                           ImGuiCond_Always);
-  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(255, 255, 255, 1));
+  ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
+  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(1.0f, 1.0f, 1.0f, 1.0f));
   ImGui::BeginChild(
       "RemoteDesktopWindow",
       ImVec2(main_window_width_ - local_window_width_ + 1,
@@ -16,6 +18,7 @@ int Render::RemoteWindow() {
       ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
           ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
           ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleColor();
 
   ImGui::SetWindowFontScale(1.0f);
   ImGui::Text(
@@ -23,13 +26,17 @@ int Render::RemoteWindow() {
 
   ImGui::Spacing();
 
+  ImGui::PushStyleColor(ImGuiCol_ChildBg,
+                        ImVec4(239.0 / 255, 240.0 / 255, 242.0 / 255, 1.0f));
   ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
-  ImGui::PushStyleColor(ImGuiCol_ChildBg, ImVec4(0, 0, 0, 0.09));
+
   ImGui::BeginChild("RemoteDesktopWindow_1", ImVec2(330, 180),
                     ImGuiChildFlags_Border,
                     ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
                         ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoTitleBar |
                         ImGuiWindowFlags_NoBringToFrontOnFocus);
+  ImGui::PopStyleVar();
+  ImGui::PopStyleColor();
   {
     ImGui::SetWindowFontScale(0.5f);
     ImGui::Text("%s",
@@ -38,10 +45,11 @@ int Render::RemoteWindow() {
     ImGui::Spacing();
     ImGui::SetNextItemWidth(IPUT_WINDOW_WIDTH);
     ImGui::SetWindowFontScale(1.0f);
+    ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
     ImGui::InputText(
         "##remote_id_", remote_id_, IM_ARRAYSIZE(remote_id_),
         ImGuiInputTextFlags_CharsUppercase | ImGuiInputTextFlags_CharsNoBlank);
-
+    ImGui::PopStyleVar();
     ImGui::SameLine();
     if (ImGui::Button(ICON_FA_ARROW_RIGHT_LONG, ImVec2(55, 38)) || rejoin_) {
       connect_button_pressed_ = true;
@@ -75,8 +83,6 @@ int Render::RemoteWindow() {
     }
   }
   ImGui::EndChild();
-  ImGui::PopStyleVar();
-  ImGui::PopStyleColor();
   ImGui::EndChild();
   ImGui::PopStyleVar();
 

src/single_window/render.cpp

@@ -325,7 +325,8 @@ int Render::Run() {
     ImGui_ImplSDL2_NewFrame();
     ImGui::NewFrame();
 
-    ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(0, 0, 0, 0));
+    ImGui::PushStyleColor(ImGuiCol_WindowBg,
+                          ImVec4(1.0f, 1.0f, 1.0f, streaming_ ? 0 : 1.0f));
     ImGui::PushStyleVar(ImGuiStyleVar_WindowBorderSize, 0);
     ImGui::SetNextWindowPos(ImVec2(0, 0), ImGuiCond_Always);
     ImGui::SetNextWindowSize(

src/single_window/setting_button.cpp

@@ -7,7 +7,8 @@
 int Render::SettingButton() {
   ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(255, 255, 255, 1));
   ImGui::PushStyleColor(ImGuiCol_Button, ImVec4(0, 0, 0, 0));
-  ImGui::PushStyleColor(ImGuiCol_ButtonHovered, ImVec4(0, 0, 1, 0.4));
+  ImGui::PushStyleColor(ImGuiCol_ButtonHovered,
+                        ImVec4(104.0 / 255, 171.0 / 255, 251.0 / 255, 1.0f));
   ImGui::PushStyleColor(ImGuiCol_ButtonActive, ImVec4(0, 0, 0, 0));
 
   std::string gear = ICON_FA_GEAR;
@@ -51,12 +52,16 @@ int Render::SettingButton() {
     // Settings
     {
       ImGui::SetWindowFontScale(0.5f);
+      ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 5.0f);
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 3.0f);
+
       ImGui::Begin(localization::settings[localization_language_index_].c_str(),
                    nullptr,
                    ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse |
                        ImGuiWindowFlags_NoSavedSettings);
       ImGui::SetWindowFontScale(1.0f);
       ImGui::SetWindowFontScale(0.5f);
+      ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
       {
         const char *language_items[] = {
             localization::language_zh[localization_language_index_].c_str(),
@@ -155,6 +160,7 @@ int Render::SettingButton() {
         ImGui::SetCursorPosX(SETTINGS_OK_BUTTON_PADDING_EN);
       }
       ImGui::SetCursorPosY(160.0f);
+      ImGui::PopStyleVar();
 
       // OK
       if (ImGui::Button(
@@ -215,6 +221,7 @@ int Render::SettingButton() {
           LOG_INFO("Recreate peer instance successful");
         }
       }
+
       ImGui::SameLine();
       // Cancel
       if (ImGui::Button(
@@ -243,6 +250,7 @@ int Render::SettingButton() {
       ImGui::SetWindowFontScale(1.0f);
       ImGui::SetWindowFontScale(0.5f);
       ImGui::End();
+      ImGui::PopStyleVar(2);
       ImGui::SetWindowFontScale(1.0f);
     }
   }