` + site.status + `
diff --git a/package-lock.json b/package-lock.json
index b6fd26e..db7b321 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,18 +10,9 @@
"integrity": "sha512-s2ZfgRWXeNUQTQE3O85CDDrU2Uo90pMlMkTxkz85wQOuzVxB8t4cubMPup3WlTPFKHQgb6lDkAHS3ljkUSFO6A==",
"dev": true,
"requires": {
- "7zip-bin-linux": "1.2.0",
- "7zip-bin-mac": "1.0.1",
- "7zip-bin-win": "2.1.1"
+ "7zip-bin-mac": "1.0.1"
}
},
- "7zip-bin-linux": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/7zip-bin-linux/-/7zip-bin-linux-1.2.0.tgz",
- "integrity": "sha512-umB98LN18XBGKPw4EKET2zPDqVhEU1mxXA1Gx0BM+DoBt4hnlZPNkpSMNzmuNbQshi9SzLhqlTAyKcAgNrbV3Q==",
- "dev": true,
- "optional": true
- },
"7zip-bin-mac": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/7zip-bin-mac/-/7zip-bin-mac-1.0.1.tgz",
@@ -29,13 +20,6 @@
"dev": true,
"optional": true
},
- "7zip-bin-win": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/7zip-bin-win/-/7zip-bin-win-2.1.1.tgz",
- "integrity": "sha512-6VGEW7PXGroTsoI2QW3b0ea95HJmbVBHvfANKLLMzSzFA1zKqVX5ybNuhmeGpf6vA0x8FJTt6twpprDANsY5WQ==",
- "dev": true,
- "optional": true
- },
"@babel/code-frame": {
"version": "7.0.0-beta.36",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz",
@@ -978,6 +962,11 @@
"hoek": "4.2.0"
}
},
+ "bootstrap": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
+ "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
+ },
"boxen": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
diff --git a/package.json b/package.json
index add9b14..635bae7 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
"webpack-dev-server": "^2.11.0"
},
"dependencies": {
+ "bootstrap": "^4.0.0",
"compare-versions": "^3.1.0",
"electron-is-dev": "^0.3.0",
"fix-path": "^2.1.0",
diff --git a/scss/common/globals.scss b/scss/common/globals.scss
new file mode 100644
index 0000000..cb6c249
--- /dev/null
+++ b/scss/common/globals.scss
@@ -0,0 +1,18 @@
+@import "../common/variables.scss";
+
+/*
+ Global application wide styles and fonts
+ */
+body {
+ font-family: 'Montserrat', sans-serif;
+ background-color: $light;
+ display: block !important;
+}
+
+.column {
+ margin: 15px 0;
+}
+
+::-webkit-scrollbar {
+ display: none;
+}
diff --git a/scss/common/typography.scss b/scss/common/typography.scss
new file mode 100644
index 0000000..bcb072f
--- /dev/null
+++ b/scss/common/typography.scss
@@ -0,0 +1,22 @@
+@font-face {
+ font-family: 'Montserrat';
+ src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+h1, h2, h3 {
+ color: $primary;
+}
+
+h1 {
+ font-size: 2rem;
+}
+
+h2 {
+ font-size: 1.5rem;
+}
+
+h3 {
+ font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/scss/common/variables.scss b/scss/common/variables.scss
new file mode 100644
index 0000000..d05be4f
--- /dev/null
+++ b/scss/common/variables.scss
@@ -0,0 +1,13 @@
+$primary: #28bde4;
+$light: #c5c5c5;
+$dark: #23282b;
+$red: #d80000;
+$grey: #878787;
+$transparentDarkGrey: rgba(100,100,100,0.3);
+
+$theme-colors: (
+ "primary": $primary,
+ "secondary": $grey,
+ "light": $light,
+);
+
diff --git a/scss/components/buttons.scss b/scss/components/buttons.scss
new file mode 100644
index 0000000..c28709b
--- /dev/null
+++ b/scss/components/buttons.scss
@@ -0,0 +1,5 @@
+@import "../common/variables.scss";
+
+.btn {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/scss/card.scss b/scss/components/card.scss
similarity index 69%
rename from scss/card.scss
rename to scss/components/card.scss
index 0dfea1a..204a79f 100644
--- a/scss/card.scss
+++ b/scss/components/card.scss
@@ -1,18 +1,19 @@
+@import "../common/variables.scss";
+
/*
Project card styles
*/
-@import "./variables.scss";
/*
Base styles
*/
-.card-header, .card-footer {
- background-color: $darkGrey;
+.card.ddev-card .card-header, .card.ddev-card .card-footer {
+ background-color: $dark;
}
-.card {
+.card.ddev-card {
text-align: center;
- color: $darkGrey;
+ color: $dark;
}
/*
@@ -23,7 +24,7 @@
/*
Body
*/
-.card-body {
+.card.ddev-card .card-body {
margin: 0;
padding: 0;
position: relative;
@@ -59,20 +60,20 @@
/*
Buttons and footer
*/
-.running .startbtn{
- display: none;
-}
+ .card.ddev-card .btn {
+ margin: 5px;
+ }
-.stopped .stopbtn{
+.running .startbtn {
display: none;
}
-.stopped .restartbtn{
+.stopped .stopbtn {
display: none;
}
-.card .btn {
- margin: 5px;
+.stopped .restartbtn {
+ display: none;
}
.add .card-footer {
diff --git a/scss/components/footer.scss b/scss/components/footer.scss
new file mode 100644
index 0000000..01aa2df
--- /dev/null
+++ b/scss/components/footer.scss
@@ -0,0 +1,25 @@
+@import "../common/variables.scss";
+
+/*
+ Footer styles
+ */
+.footer {
+ height: 66px;
+ background-color: $dark;
+ bottom: 0;
+ position: fixed;
+ width: 100%;
+}
+
+.router-status {
+ line-height: 66px;
+ color: $white;
+ float: right;
+}
+
+.router-status-label {
+ color: $light;
+ float: right;
+ padding: 0 10px;
+ line-height: 66px;
+}
\ No newline at end of file
diff --git a/scss/components/header.scss b/scss/components/header.scss
new file mode 100644
index 0000000..b7e04b1
--- /dev/null
+++ b/scss/components/header.scss
@@ -0,0 +1,12 @@
+@import "../common/variables.scss";
+
+/*
+ Header styles
+ */
+.navbar {
+ background-color: $dark;
+}
+
+.ddev-logo {
+ height: 50px;
+}
\ No newline at end of file
diff --git a/scss/modals.scss b/scss/components/modals.scss
similarity index 87%
rename from scss/modals.scss
rename to scss/components/modals.scss
index 6f864a7..b73eb15 100644
--- a/scss/modals.scss
+++ b/scss/components/modals.scss
@@ -1,13 +1,14 @@
+@import "../common/variables.scss";
+
/*
All bootstrap modal overrides
*/
-@import "./variables.scss";
/*
Header
*/
.modal-header {
- background-color: $darkGrey;
+ background-color: $dark;
}
/*
@@ -55,7 +56,7 @@
margin: 10px;
}
-.add-modal-section-header{
+.add-modal-section-header {
border-bottom: 1px solid;
}
@@ -69,7 +70,7 @@
padding: 10px;
}
-.tile img{
+.tile img {
width: 100%;
}
@@ -94,28 +95,34 @@
align-items: center;
justify-content: center
}
+
.error-overlay {
padding: 50px;
}
+
.error-overlay div {
margin: 10px 0;
}
+
.loading-spinner {
font-size: 150px !important;
- color: $lightBlue;
+ color: $primary;
}
+
.error-icon {
- color: $errorRed;
+ color: $red;
}
+
.loading-text {
width: 55%;
margin-left: 20px;
- color: $lightBlue;
+ color: $primary;
font-weight: bold;
font-size: 20px;
}
+
.error-text {
- color: $lightBlue;
+ color: $primary;
font-weight: bold;
font-size: 20px;
}
@@ -125,5 +132,5 @@
*/
.modal-footer {
- background-color: $darkGrey;
+ background-color: $dark;
}
\ No newline at end of file
diff --git a/scss/main.scss b/scss/main.scss
index 60a0ff8..55f399b 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -2,102 +2,14 @@
Global styles and main container styles
*/
-@import "./variables.scss";
-@font-face {
- font-family: 'Montserrat';
- src: url('../fonts/Montserrat-ExtraLight.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
+@import "./common/variables.scss";
+@import "../node_modules/bootstrap/scss/bootstrap.scss";
-/*
- Global application wide styles and fonts
- */
-body {
- font-family: 'Montserrat', sans-serif;
- background-color: $lightGrey;
- display: block !important;
-}
-
-h1, h2, h3 {
- color: $lightBlue;
-}
-
-h1 {
- font-size: 24pt;
-}
-
-h2 {
- font-size: 18pt;}
-
-h3 {
- font-size: 14pt;
-}
-
-::-webkit-scrollbar {
- display: none;
-}
-
-/*
- Global button styles
- */
-.btn-primary {
- background-color: $lightBlue;
- border-color: $lightBlue;
-}
-
-.btn-secondary {
- background-color: $grey;
- border-color: $grey;
-}
-
-.btn {
- cursor: pointer;
-}
-
-/*
- Header styles
- */
-.navbar {
- background-color: $darkGrey;
-}
-
-.ddev-logo {
- height: 50px;
-}
-
-/*
- Base container styles
- */
-.container {
- margin: 70px 5px 70px 5px;
- max-width: 100%;
-}
-
-.column {
- margin: 15px 0;
-}
-
-/*
- Footer styles
- */
-.footer {
- height: 66px;
- background-color: $darkGrey;
- bottom: 0;
- position: fixed;
- width: 100%;
-}
-
-.router-status {
- line-height: 66px;
- color: $white;
- float: right;
-}
+@import "./common/globals.scss";
+@import "./common/typography.scss";
-.router-status-label {
- color: $lightGrey;
- float: right;
- padding: 0 10px;
- line-height: 66px;
-}
\ No newline at end of file
+@import "./components/buttons.scss";
+@import "./components/card.scss";
+@import "./components/footer.scss";
+@import "./components/header.scss";
+@import "./components/modals.scss";
\ No newline at end of file
diff --git a/scss/variables.scss b/scss/variables.scss
deleted file mode 100644
index efd20ac..0000000
--- a/scss/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$lightBlue: #28bde4;
-$lightGrey: #c5c5c5;
-$grey: #878787;
-$darkGrey: #23282b;
-$transparentDarkGrey: rgba(100,100,100,0.3);
-$white: #ffffff;
-$errorRed: #d80000;
\ No newline at end of file