Improve styling. Add about & how it works content

ui/resources/public/less/component/search-input.less

@@ -44,7 +44,7 @@
     align-items: center;
     background-color: #color[purple];
     cursor: pointer;
-    
+
     &:hover {
       background-color: #color[dark-blue];
     }
@@ -78,7 +78,7 @@
         align-items: center;
         height: @container-height;
         border-top: 2px solid #dfdfdf;
-        
+
         &:first-child {
           border-top: 1px solid white;
         }
@@ -103,7 +103,7 @@
   align-items: center;
   background-color: white;
   padding: 0.5em 1.0em;
-  margin: 0em 0.3em 0em 0.3em;
+  margin: 0em 0.3em 0.3em 0.3em;
   border-radius: 5px;
 
   @media #media[mobile-query] {

ui/resources/public/less/page/about.less

@@ -2,5 +2,15 @@
 
 
 .about-main-container {
+  .title {
+    font-size: 2em;
+  }
+  .description {
+    font-size: 1em;
+    p {
+      margin: 1em;
+      line-height: normal;
+    }
+  }
 
 }

ui/resources/public/less/page/how-it-works.less

@@ -2,5 +2,14 @@
 
 
 .how-it-works-main-container {
-
+  .title {
+    font-size: 2em;
+  }
+  .description {
+    font-size: 1em;
+    p {
+      margin: 1em;
+      line-height: normal;
+    }
+  }
 }

ui/src/ethlance/ui/component/carousel.cljs

@@ -72,7 +72,7 @@
 
 (defn c-carousel
   [{:keys []} & children]
-  [:div.ethlance-new-carousel
+  [:div.ethlance-new-carousel {:style {:height "22em"}}
    [:> react-carousel/CarouselProvider {:natural-slide-width 388
                                         :natural-slide-height 300
                                         :total-slides (count children)

ui/src/ethlance/ui/page/about.cljs

@@ -1,10 +1,15 @@
 (ns ethlance.ui.page.about
   (:require
     [district.ui.component.page :refer [page]]
-    [ethlance.ui.component.main-layout :refer [c-main-layout]]))
+    [ethlance.ui.component.main-layout :refer [c-main-layout]]
+    [ethlance.ui.util.content-helpers :refer [page-with-title]]))
 
 
+(def description
+  "The district0x network is a collective of decentralized marketplaces and communities known as ‘Districts’. Districts exist on top of a modular framework of Ethereum smart contracts and frontend libraries referred to as d0xINFRA.
+  The district0x network solves a number of coordination issues and inefficiencies commonly found within distributed community marketplaces. This is accomplished by providing tools that can better align incentives and decision making among the market participants themselves. The end goal is to create a self sustaining ecosystem that can flourish without the need for a central authority.")
+
 (defmethod page :route.misc/about []
   (fn []
     [c-main-layout {:container-opts {:class :about-main-container}}
-     "About"]))
+     (page-with-title "About" description)]))

ui/src/ethlance/ui/page/how_it_works.cljs

@@ -1,10 +1,18 @@
 (ns ethlance.ui.page.how-it-works
   (:require
     [district.ui.component.page :refer [page]]
-    [ethlance.ui.component.main-layout :refer [c-main-layout]]))
+    [ethlance.ui.component.main-layout :refer [c-main-layout]]
+    [ethlance.ui.util.content-helpers :refer [page-with-title]]))
+
+
+(def description
+  (str
+      "The free market is an economic system where the prices of goods and services are determined by unrestricted competition between privately owned businesses. In this system, supply and demand dictate production decisions and pricing, allowing consumers and producers to engage freely without significant government intervention. Businesses respond to consumer preferences, leading to an efficient allocation of resources as they strive to meet market needs.
+      Competition is a cornerstone of the free market, driving innovation and quality improvement. Companies compete to offer better products and services at lower prices to attract consumers. This competitive environment encourages efficiency and technological advancements, which can lead to overall economic growth and increased standards of living. Entrepreneurs have the freedom to enter markets, fostering diversity and choice for consumers.
+      However, for a free market to function effectively, certain legal frameworks must be in place, such as property rights and contract enforcement. While the free market promotes efficiency and innovation, it can also result in challenges like income inequality and market failures if left entirely unchecked. Therefore, some level of regulation is often considered necessary to address issues like monopolies, externalities, and to protect consumers and workers, balancing freedom with societal welfare."))
 
 
 (defmethod page :route.misc/how-it-works []
   (fn []
     [c-main-layout {:container-opts {:class :how-it-works-main-container}}
-     "How It Works"]))
+     (page-with-title "How It Works" description)]))

ui/src/ethlance/ui/page/job_detail.cljs

@@ -180,7 +180,7 @@
            :disabled (not can-send-proposals?)
            :on-change #(re/dispatch [:page.job-detail/set-proposal-token-amount %])}]
          [:label.post-label token-display-name]]
-        [:label "The amount is for payment type: " (util.job/get-in-pair-vector util.job/bid-option *bid-option)]
+        [:label {:style {:margin-top "1em" :margin-bottom "1em"}} (util.job/get-in-pair-vector util.job/bid-option *bid-option)]
         [:div.description-input
          [c-textarea-input
           {:disabled (not can-send-proposals?)
@@ -243,18 +243,18 @@
     [:div.proposal-form
      [:div.label "Accept arbiter quote"]
      [:div.amount-input
-      [:div.label "Arbiter: "]
+      [:div.label {:style {:margin-right "1em"}} "Arbiter: "]
       [c-text-input
        {:placeholder ""
         :disabled true
         :value (get-in arbitration-to-accept [:arbiter :user :user/name])}]]
      [:div.amount-input
-      [:div.label "Amount: "]
+      [:div.label {:style {:margin-right "1em"}} "Amount: "]
       [c-text-input
        {:placeholder ""
         :disabled true
         :value (token-utils/human-amount (get arbitration-to-accept :arbitration/fee) :eth)}]
-      [:label "ETH (Ether)"]]
+      [:label "ETH"]]
 
      (when arbiter-to-be-assigned?
        [c-button {:style (when (nil? arbitration-to-accept) {:background :gray})
@@ -524,6 +524,7 @@
                                        token-details
                                        token-id
                                        (:token-amount amount)])))
+                  :style {:margin-top "1em"}
                   :disabled? @add-funds-tx-in-progress?
                   :size :small}
         [c-button-label "Confirm"]]]

ui/src/ethlance/ui/page/new_job.cljs

@@ -211,7 +211,7 @@
 (defn c-invite-to-create-employer-profile
   []
   [c-main-layout {:container-opts {:class :new-job-main-container}}
-   [:div "Set up your employer profile to be able to create new jobs"]
+   [:div {:style {:margin "2em"}} "Set up your employer profile to be able to create new jobs"]
    [:div.button
     {:on-click (navigation/create-handler {:route :route.me/sign-up :query {:tab "employer"}})}
     "Go to employer profile page"]])

ui/src/ethlance/ui/page/profile.cljs

@@ -193,7 +193,8 @@
                           :placeholder "Briefly describe to what and why you're inviting the candidate"
                           :on-change #(re/dispatch [:page.profile/set-invitation-text %])}]
        [c-button {:color :primary
-                  :disabled? job-story-exists?
+                  :style {:margin-top "1em"}
+                  :active? (not job-story-exists?)
                   :on-click (fn []
                               (when-not job-story-exists?
                                 (re/dispatch [:page.profile/invite-candidate
@@ -392,7 +393,8 @@
                         :placeholder "Briefly describe to what and why you're inviting the arbiter"
                         :on-change #(re/dispatch [:page.profile/set-invitation-text %])}]
      [c-button {:color :primary
-                :disabled? job-story-exists?
+                :style {:margin-top "1em"}
+                :active? (not job-story-exists?)
                 :on-click (fn []
                             (when-not job-story-exists?
                               (re/dispatch [:page.profile/invite-arbiter

ui/src/ethlance/ui/util/content_helpers.cljs

@@ -0,0 +1,15 @@
+(ns ethlance.ui.util.content-helpers
+  (:require
+    [clojure.string]))
+
+(defn str->paragraphs [s]
+  (clojure.string/split-lines s))
+
+(defn page-with-title [title content-str]
+  [:div
+   [:h2 {:class :title} title]
+   (into [:div {:class :description :style {:white-space "pre-wrap"}}]
+         (->> content-str
+              str->paragraphs
+              (map clojure.string/trim ,,,)
+              (map #(conj [:p] %) ,,,)))])