dark theme and resizable window support

[ghost]

1. Added dark theme. This is a pretty simple addition -- the button in settings menu toggles .dark-theme class on the body tag. A new CSS file, dark-theme.css, is included after bootstrap.min.css which overrides colors only when the .dark-theme class is on. Some !important tags are used in dark-theme.css to override inline styles that come later in index.py. Preference is stored in the app_settings.json file.

2. Added resizable windows. Also pretty simple addition -- I just had to change some CSS on certain elements. More work needs to be done to fully utilize the screen real estate. Minimum screen size is in effect.

Notes:

1. I had to delete my app_settings.json file in order for the dark_mode setting to save. I am not sure if there is already a process in place for adding new keys to that file, but there needs to be. This is probably as simple as setting the default dark_mode: False in Python, but I did not implement this because there might be a mechanism in place I am not aware of. Fixed.

2. Dark mode on startup is delayed by two seconds. That is because of the setTimeout in index.py for loading the app settings from Python. I'm sure there is a way to get those settings into javascript sooner, but I figured the 2 seconds delay was intentional for some reason. Fixed.

3. Screen real estate isn't properly used on large windows. This should be an easy fix since as of now all bootstrap col-* classes are defined using the xs screen size. For example on the send tab, the labels are very far away from the fields, This should be as simple as adding col-lg-1 or similar to those elements. Fixed.

4. I am using a blank wallet so I do not have any transactions or addresses in my address book. There might be a styling issue I missed because of that. Ideally I can run the wallet on testnet in order to make many transactions, etc. Still need to test some of these features.

Edit: Other things to consider:

1. I believe I saw on Reddit a user on a hi-res mac display said his window was scaled really small. This is likely due to the retina display on some macs. I have my wife's iMac in the house that I will need to test this on and see if there is a solution on the PySide portion of the code. Researching, this may be the solution: app.setAttribute(Qt.WA_MacFrameworkScaled)

2. The dialog boxes opened by Python don't adhere to the dark theme. Minor issue barely worth worrying about, but since the dark_mode preference is accessible from Python, maybe there is a way to make those qt dialogs dark. Fixed.

[ghost]

Fixed several issues regarding responsiveness such as:

1) On receive tab, the accordion would not take the full height. As far as I know, there is not a good way to fix this with bootstrap accordions, so I added several media queries targeting the window height and added 50px increments to the panel body.

2) On the send tab, I changed the labels to be a fixed width, else they ended up too far from the input fields.

3) On the settings tab, I put a max width on the daemon settings field group.

4) I changed a few PyQT lines to check if the window is maximized and if so call self.showMaximized() instead of self.showNormal(). Otherwise when calling the wallet from the tray icon, the window size would shrink if it was previously maximized.

I have not checked the transaction history tab, or the address book for responsiveness. Although they should be fine, I'm sure I can make them better suited for larger screens. I need figure out how to run the wallet on testnet in order to do that (or import my live wallet and make a few transactions.)

Edit 1: Issue of needing to delete app_settings.json in order for dark mode to save preference between open/close of wallet still exists. That will be addressed in a separate PR. Issue fixed in this PR.

Edit 2: Added a Dark QT theme for alerts and password prompts. Also added code to merge the default settings dict defined in the AppSettings class with the settings loaded from the app_settings.json file. This is important for any future variables saved into that file.

[quangvu3]

This works well except some display bug like the text on progress status needs changing to light color (see picture).

Some improvements I think can be added too:

• Solution to increase/decrease font size depending on window size (that will hopefully solve 4k screen problem)

  • Easy way to switch bw themes

(Having a merge conflicts and some breaks after merging identicon commits, probably needs a rebase)

[ghost]

I noticed the dark text needing to be changed. I will tidy up all of these loose ends for final commit. I also did some work on the address book window to make that responsive and easier to work with on larger screens.

Finally, I'd like to update the tx history table since it is forced to paginate even on larger screens. Datatablesjs is a really good plugin for this, and it would even allow us to add a "search tx" box (allow users to search by txid, blockheight, amount, etc). I will likely do that in another PR though and just finish this PR up with the current pagination solution.