style fixes

frontend/resources/public/css/screen.css

@@ -38,7 +38,7 @@ html body .loader-container .loader {
   border: 5px solid #f3f3f3;
   position: relative;
   animation: spin 1s linear infinite;
-  border-top: 5px solid #3498db;
+  border-top: 5px solid #8bd81e;
   border-radius: 50%;
 }
 
@@ -104,7 +104,8 @@ html body .scroll-button {
   
   html body .menu-button {
     width: 100%;
-    font-size: 3em;
+    font-size: 1.5em;
+    font-variant: small-caps;
     display: inherit;
   }
   
@@ -175,11 +176,20 @@ html body .scroll-button {
 html body .calendar .day-header {
   border: 2px solid black;
   text-align: center;
-  font-size: 2em;
+  font-size: 1.5em;
+  font-variant: small-caps;
+}
+
+html body .calendar .day-header .day-name {
+  color: red;
+}
+
+html body .calendar .day-header .date {
+  color: purple;
 }
 
 html body .calendar .day.today {
-  border: 0.4em solid red;
+  border: 0.2em solid #6cb802;
 }
 
 html body .calendar .day {
@@ -206,11 +216,11 @@ html body .calendar .day .orders .order:hover .actions {
 }
 
 html body .calendar .day .orders .order.pending {
-  color: grey;
+  color: rgb(247, 176, 176);
 }
 
 html body .calendar .day .orders .order.fulfilled {
-  color: red;
+  color: rgb(114, 114, 114);
 }
 
 html body .calendar .day .orders .who {

frontend/src/chicken_master/config.cljs

@@ -23,7 +23,7 @@
 
 (def default-settings {:first-day-offset (get-setting :first-day-offset 1) ; which is the first day of the week (add the offset to `day-names`)
                        :day-names (get-setting :day-names ["Niedz" "Pon" "Wt" "Śr" "Czw" "Pt" "Sob"]) ; how days should be displayed in the calendar view
-                       :date-format (get-setting :date-format "%D %m/%d") ; the format of the days (D - name, d - day, m - month)
+                       :date-format (get-setting :date-format "<span class=\"day-name\">%D</span> <span class=\"date\">%m/%d</span>") ; the format of the days (D - name, d - day, m - month)
 
                        :show-day-add-order (get-setting :show-day-add-order true) ; Show an add order button in each day
 

frontend/src/chicken_master/css.clj

@@ -21,9 +21,9 @@
      [:.loader {:margin :auto
                 :position :relative
                 :top "40%"
-                :border "5px solid #f3f3f3"; /* Light grey */
+                :border "5px solid #f3f3f3"
-                :border-top "5px solid #3498db"; /* Blue */
+                :border-top "5px solid #8bd81e"
-                :border-radius "50%";
+                :border-radius "50%"
                 :width "30px"
                 :height "30px"
                 :animation "spin 1s linear infinite"}]]
@@ -63,7 +63,8 @@
      {:max-width "800px"}
      [:.scroll-bar {:display :none}]
      [:.menu-button {:width "100%"
-                     :font-size "3em"
+                     :font-size "1.5em"
+                     :font-variant "small-caps"
                      :display :inherit}]
      [:.popup
       [:.popup-content {
@@ -100,8 +101,11 @@
     [:.calendar
      [:.day-header {:border "2px solid black"
                     :text-align :center
-                    :font-size "2em"}]
+                    :font-size "1.5em"
-     [:.day.today {:border "0.4em solid red"}]
+                    :font-variant "small-caps"}
+      [:.day-name {:color :red}]
+      [:.date {:color :purple}]]
+     [:.day.today {:border "0.2em solid #6cb802"}]
      [:.day {:border "2px solid black"
              :overflow :auto}
 
@@ -114,8 +118,8 @@
        [:.actions {:display :none
                    :float :right}]
        [:.order:hover [:.actions {:display :inline}]]
-       [:.order.pending {:color :grey}]
+       [:.order.pending {:color "rgb(247, 176, 176)"}]
-       [:.order.fulfilled {:color :red}]
+       [:.order.fulfilled {:color "rgb(114, 114, 114)"}]
 
        [:.who {:font-size "18px"
                :font-weight :bold
@@ -155,7 +159,6 @@
       [:.order-date-picker {:display :inline-block :width "75%" :cursor :pointer}]
       [:.product-item-edit {:margin-left "1em"}]]]
     [:.customer-product-group-edit {:margin-left "1.2em" :padding "0.5em"}]
-
     ]]
 
   ; Chrome, Safari, Edge, Opera

frontend/src/chicken_master/time.cljs

@@ -38,11 +38,13 @@
 (defn today? "true when `d1` is today" [d1] (same-day? (js/Date.) d1))
 
 (defn format-date [date]
-  (reduce (fn [date-str [from to]] (str/replace date-str from to))
+  ;; Yes, this is bad. Done on the assumption that the user can shoot themselves in the foot if they want to.
+  [:div {:dangerouslySetInnerHTML
+         {:__html (reduce (fn [date-str [from to]] (str/replace date-str from to))
                           (get @settings :date-format "%D %m/%d")
                           [["%d" (.getDate date)]
                            ["%m" (inc (.getMonth date))]
-           ["%D" (->> date .getDay (nth (get @settings :day-names)))]]))
+                           ["%D" (->> date .getDay (nth (get @settings :day-names)))]])}}])
 
 (defn iso-date [date] (.toIsoString ^js/goog.date.Date date true))
 

frontend/test/chicken_master/time_test.cljs

@@ -61,13 +61,16 @@
 (deftest test-format-date
   (testing "don't show date"
     (with-redefs [sut/settings (atom {:date-format ""})]
-      (is (= (sut/format-date (new Date 2020 01 01)) ""))))
+      (is (= (sut/format-date (new Date 2020 01 01))
+             [:div {:dangerouslySetInnerHTML {:__html ""}}]))))
 
   (testing "without name"
     (with-redefs [sut/settings (atom {:date-format "%m/%d"})]
-      (is (= (sut/format-date (new Date 2020 01 01)) "2/1"))))
+      (is (= (sut/format-date (new Date 2020 01 01))
+             [:div {:dangerouslySetInnerHTML {:__html "2/1"}}]))))
 
   (testing "with name"
     (with-redefs [sut/settings (atom {:date-format "%D %m/%d"
                                       :day-names ["Niedz" "Pon" "Wt" "Śr" "Czw" "Pt" "Sob"]})]
-      (is (= (sut/format-date (new Date 2020 01 01)) "Sob 2/1")))))
+      (is (= (sut/format-date (new Date 2020 01 01))
+             [:div {:dangerouslySetInnerHTML {:__html "Sob 2/1"}}])))))