diff --git a/resources/public/img/icon-fb.svg b/resources/public/img/icon-fb.svg
new file mode 100644
index 0000000..2f7946c
--- /dev/null
+++ b/resources/public/img/icon-fb.svg
@@ -0,0 +1,3 @@
+
diff --git a/resources/public/img/icon-gh.svg b/resources/public/img/icon-gh.svg
new file mode 100644
index 0000000..820de22
--- /dev/null
+++ b/resources/public/img/icon-gh.svg
@@ -0,0 +1,3 @@
+
diff --git a/resources/public/img/icon-rd.svg b/resources/public/img/icon-rd.svg
new file mode 100644
index 0000000..b811bc0
--- /dev/null
+++ b/resources/public/img/icon-rd.svg
@@ -0,0 +1,7 @@
+
diff --git a/resources/public/img/icon-sl.svg b/resources/public/img/icon-sl.svg
new file mode 100644
index 0000000..7add764
--- /dev/null
+++ b/resources/public/img/icon-sl.svg
@@ -0,0 +1,16 @@
+
diff --git a/resources/public/img/icon-tw.svg b/resources/public/img/icon-tw.svg
new file mode 100644
index 0000000..cc6dcb0
--- /dev/null
+++ b/resources/public/img/icon-tw.svg
@@ -0,0 +1,3 @@
+
diff --git a/resources/public/img/icon-yt.svg b/resources/public/img/icon-yt.svg
new file mode 100644
index 0000000..b636bb7
--- /dev/null
+++ b/resources/public/img/icon-yt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/resources/public/img/icon_dropdown-white.svg b/resources/public/img/icon_dropdown-white.svg
new file mode 100644
index 0000000..9a93271
--- /dev/null
+++ b/resources/public/img/icon_dropdown-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/cljs/commiteth/core.cljs b/src/cljs/commiteth/core.cljs
index ef841c7..c783428 100644
--- a/src/cljs/commiteth/core.cljs
+++ b/src/cljs/commiteth/core.cljs
@@ -135,9 +135,47 @@
@top-hunters))))))
(defn footer []
- [:div.commiteth-footer "Built by " [:a {:href "https://status.im"} "Status"]
- (when-not (= "unknown" version)
- [:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])])
+ (let [social-links [["icon-fb" "Facebook" "https://www.facebook.com/ethstatus"]
+ ["icon-tw" "Twitter" "https://twitter.com/ethstatus"]
+ ["icon-gh" "Github" "https://github.com/status-im"]
+ ["icon-rd" "Reddit" "https://www.reddit.com/r/statusim/"]
+ ["icon-yt" "YouTube" "https://www.youtube.com/channel/UCFzdJTUdzqyX4e9dOW7UpPQ/"]]]
+ [:div.commiteth-footer
+ [:div.commiteth-footer-inner
+ [:div.commiteth-footer-logo-container
+ [:div
+ (svg/status-logo-footer)]
+ [:div.commiteth-footer-status-addr
+ "Status Research & Development GmbH
+Baarerstrasse 10
+Zug, Switzerland"]]
+ [:div.commiteth-footer-table
+ [:div.commiteth-footer-table__column
+ [:h4.commiteth-footer-header "Social networks"]
+ [:ul.commiteth-footer-list
+ (for [[svg caption url] social-links]
+ [:li.commiteth-footer-link
+ [:a {:href url}
+ [:div.commiteth-footer-icon
+ {:style {"background-image" (str "url(/img/" svg ".svg)")}}]
+ [:span.commiteth-footer-link-label caption]]])]]
+ [:div.commiteth-footer-table__column
+ [:h4.commiteth-footer-header "Community"]
+ [:ul.commiteth-footer-list
+ [:li.commiteth-footer-link
+ [:a {:href "https://wiki.status.im/"}
+ "Wiki"]]
+ [:li.commiteth-footer-link
+ [:a {:href "https://status.im/jobs.html"}
+ "Jobs"]]]]
+ [:div.commiteth-footer-table__column
+ [:h4.commiteth-footer-header "Language"]
+ [:ul.commiteth-footer-list
+ [:li.commiteth-footer-link
+ [:select.commiteth-language-switcher {:name "lang"}
+ [:option {:value "en"} "English"]]]]]]]
+ (when-not (= "unknown" version)
+ [:div.version-footer "version " [:a {:href (str "https://github.com/status-im/commiteth/commit/" version)} version]])]))
(defn page []
(let [current-page (rf/subscribe [:page])
@@ -157,8 +195,8 @@
[:div.ui.container.top-hunters
[:h3.top-hunters-header "Top hunters"]
[:div.top-hunters-subheader "All time"]
- [top-hunters]]])]
- [footer]]]])))
+ [top-hunters]]])]]
+ [footer]]])))
(secretary/set-config! :prefix "#")
diff --git a/src/less/style.less b/src/less/style.less
index fc7d7bf..3c9fe37 100644
--- a/src/less/style.less
+++ b/src/less/style.less
@@ -422,20 +422,118 @@
}
}
+
+
.commiteth-footer {
- background-color: #4a5c69;
- line-height: 1.8em;
- a {
- &:hover {
- color: #a8aab1!important;
- }
- color: #a8aab1!important;
- }
- &.group-title { color: #fff; opacity: 0.6; }
+ background-color: #1e3751;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+.commiteth-footer-inner {
+ display: flex;
+ justify-content: space-between;
+ width: 1080px;
+}
+
+.commiteth-footer-table {
+ display: flex;
+}
+
+.commiteth-footer-table__column {
+ box-sizing: border-box;
+ padding: 60px 40px;
+ li { display: list-item; }
+ ul { list-style: none; }
+}
+
+.commiteth-footer-column-header {
+ color: #fff;
+ font-size: 17px;
+ opacity: .5;
+}
+
+.commiteth-footer-header {
+ color: #fff;
+ opacity: .5;
+ font-size: 17px;
+ margin: 0 0 40px 0;
+ font-weight: 300;
+}
+
+.commiteth-footer-logo-container {
+ width: 26%;
+ padding: 65px 75px 0 10px;
}
+.commiteth-footer-link a {
+ color: #fff;
+ height: 32px;
+ line-height: 32px;
+ font-size: 16px;
+ margin: 0 0 15px 0;
+}
+
+.commiteth-footer-link-label {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+ text-align: left;
+}
+
+
+.commieteth-footer-social-container {
+ width: 40%;
+ padding: 65px 100px 75px 300px;
+}
+
+.commiteth-footer-status-addr {
+ color: #fff;
+ opacity: 0.4;
+ width: 168px;
+ line-height: 1.67;
+ text-align: left;
+ height: 50px;
+ padding-top: 30px;
+ padding-bottom: 30px;
+}
+
+.commiteth-footer-icon {
+ display: inline-block;
+ width: 32px;
+ height: 32px;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 50%;
+ margin: 0 15px 0 0;
+ background-repeat: no-repeat;
+ background-size: 24px;
+ background-position: center;
+}
+
+.commiteth-language-switcher {
+ color: white;
+ -webkit-appearance: none;
+ font-size: 16px;
+ line-height: 32px;
+ padding: 0 24px 0 0;
+ background-image: url(../img/icon_dropdown-white.svg);
+ background-size: 24px;
+ background-repeat: no-repeat;
+ background-position: right center;
+ background-color: #1e3751;
+ border: 0;
+}
+
.version-footer {
+ bottom: 0;
font-size: .8em;
a {
&:hover {