Add bootstrap
MODIFY
HiddenWallet/HiddenWallet.GUI/HiddenWallet.GUI.njsproj
HiddenWallet/HiddenWallet.GUI/HiddenWallet.GUI.njsproj
<SubType>Code</SubType>
</Compile>
<Compile Include="main.js" />
+ <Content Include="app\css\justified-nav.css" />
<Content Include="index.html" />
<Content Include="package.json" />
</ItemGroup>
<ItemGroup>
<Folder Include="app\" />
+ <Folder Include="app\css\" />
</ItemGroup>
<!-- Do not delete the following Import Project. While this appears to do nothing it is a marker for setting TypeScript properties before our import that depends on them. -->
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" Condition="False" />

ADD
HiddenWallet/HiddenWallet.GUI/app/css/justified-nav.css
+body {
+ padding-top: 20px;
+}
+
+.footer {
+ padding-top: 40px;
+ padding-bottom: 40px;
+ margin-top: 40px;
+ border-top: 1px solid #eee;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+ text-align: center;
+ background-color: transparent;
+}
+
+ .jumbotron .btn {
+ padding: 14px 24px;
+ font-size: 21px;
+ }
+
+/* Customize the nav-justified links to be fill the entire space of the .navbar */
+
+.nav-justified {
+ background-color: #eee;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+ .nav-justified > li > a {
+ padding-top: 15px;
+ padding-bottom: 15px;
+ margin-bottom: 0;
+ font-weight: bold;
+ color: #777;
+ text-align: center;
+ background-color: #e5e5e5; /* Old browsers */
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
+ background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
+ background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
+ background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
+ background-repeat: repeat-x; /* Repeat the gradient */
+ border-bottom: 1px solid #d5d5d5;
+ }
+
+ .nav-justified > .active > a,
+ .nav-justified > .active > a:hover,
+ .nav-justified > .active > a:focus {
+ background-color: #ddd;
+ background-image: none;
+ -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
+ box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
+ }
+
+ .nav-justified > li:first-child > a {
+ border-radius: 5px 5px 0 0;
+ }
+
+ .nav-justified > li:last-child > a {
+ border-bottom: 0;
+ border-radius: 0 0 5px 5px;
+ }
+
+@media (min-width: 768px) {
+ .nav-justified {
+ max-height: 52px;
+ }
+
+ .nav-justified > li > a {
+ border-right: 1px solid #d5d5d5;
+ border-left: 1px solid #fff;
+ }
+
+ .nav-justified > li:first-child > a {
+ border-left: 0;
+ border-radius: 5px 0 0 5px;
+ }
+
+ .nav-justified > li:last-child > a {
+ border-right: 0;
+ border-radius: 0 5px 5px 0;
+ }
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+ /* Remove the padding we set earlier */
+ .masthead,
+ .marketing,
+ .footer {
+ padding-right: 0;
+ padding-left: 0;
+ }
+}

MODIFY
HiddenWallet/HiddenWallet.GUI/main.js
HiddenWallet/HiddenWallet.GUI/main.js
@@ -13,7 +13,7 @@ let mainWindow;
function createWindow() {
// Create the browser window.
- mainWindow = new BrowserWindow({ width: 800, height: 600 });
+ mainWindow = new BrowserWindow({ width: 640, height: 360, resizable: false });
// and load the index.html of the app.
mainWindow.loadURL(url.format({

MODIFY
HiddenWallet/HiddenWallet.GUI/package.json
HiddenWallet/HiddenWallet.GUI/package.json
"electron-builder": "^17.0.1"
},
"dependencies": {
- "angular": "^1.6.4"
+ "angular": "^1.6.4",
+ "bootstrap": "^3.3.7"
},
"scripts": {
"start": "electron .",

Add bootstrap