Clean up contact page

GaiwanTeam · Sep 9, 2024 · 23dbec9 · 23dbec9
1 parent 6c0cdb3
commit 23dbec9
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 30 deletions.
diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -106,6 +106,7 @@ body {
 }
 
 h5, h4, h2, h1, h3 {
+  color: var(--text-1);
   max-inline-size: inherit;
 }
 
@@ -149,24 +150,24 @@ body {
   margin-top: var(--size-1);
 }
 
-ul {
+.site-copy ul {
   padding-top: var(--size-2);
   padding-bottom: var(--size-2);
 }
 
-ul li {
+.site-copy ul li {
   padding-top: var(--size-1);
   padding-bottom: var(--size-1);
   list-style-type: disc;
   list-style-position: inside;
 }
 
-ol {
+.site-copy ol {
   padding-top: var(--size-2);
   padding-bottom: var(--size-2);
 }
 
-ol li {
+.site-copy ol li {
   padding-top: var(--size-1);
   padding-bottom: var(--size-1);
   list-style-type: decimal;
@@ -447,9 +448,10 @@ ol li {
   width: 100px;
 }
 
-.contacts-contact_detail .co_gaiwan_compass_html_components__image_frame {
-  width: 100px;
-  --arc-thickness: 7%;
+.contacts-contact_detail .heading {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--size-3);
 }
 
 .contacts-contact_detail .contact-list {
@@ -461,26 +463,48 @@ ol li {
   background-color: var(--surface-3);
 }
 
-.contacts-contact_detail .remove-btn:hover {
+.contacts-contact_detail .remove-btn {
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.contacts-contact_detail .remove-btn:active, .contacts-contact_detail .remove-btn:hover {
   background-color: var(--surface-4);
 }
 
 .contacts-contact_detail .contact {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  margin-top: var(--size-2);
+  margin-bottom: var(--size-2);
+  padding-top: var(--size-2);
+  padding-bottom: var(--size-2);
+  box-shadow: var(--shadow-2);
+  font-size: var(--size-3);
+  background-color: var(--surface-2);
 }
 
-.contacts-contact_detail .contact div {
+.contacts-contact_detail .contact .details {
+  flex-grow: 1;
   margin-right: var(--size-2);
 }
 
 .contacts-contact_detail .contact .co_gaiwan_compass_html_components__image_frame {
   width: 50px;
   --arc-thickness: 7%;
+  margin-left: var(--size-2);
   margin-right: var(--size-2);
 }
 
+.contacts-contact_detail .profile-name {
+  font-weight: 600;
+}
+
+.contacts-contact_detail .email {
+  font-size: var(--size-3);
+  color: var(--text-2);
+}
+
 .filters-filter_section {
   display: flex;
   flex-wrap: wrap;

diff --git a/src/co/gaiwan/compass/css/styles.clj b/src/co/gaiwan/compass/css/styles.clj
@@ -9,7 +9,9 @@
    [:p {:max-inline-size "inherit"}]
    [#{:ul :ol} :list-none :m-0 :p-0]
    [:body :overflow-x-hidden :w-screen]
-   [#{:h1 :h2 :h3 :h4 :h5} {:max-inline-size "inherit"}]
+   [#{:h1 :h2 :h3 :h4 :h5}
+    {:color t/--text-1
+     :max-inline-size "inherit"}]
 
    ;; override open-props normalize, we like the buttons a bit more rounded
    [#{:button :.btn} {:border-radius t/--radius-2}]
@@ -29,8 +31,8 @@
           :margin-bottom t/--size-2}]
     [:h4 {:margin-top t/--size-2
           :margin-bottom t/--size-1}]
-    [:h5 {:margin-top t/--size-1}]]
+    [:h5 {:margin-top t/--size-1}]
 
-   [:ul :py-2 [:li :py-1 :list-disc :list-inside]]
-   [:ol :py-2 [:li :py-1 :list-decimal :list-inside]]
+    [:ul :py-2 [:li :py-1 :list-disc :list-inside]]
+    [:ol :py-2 [:li :py-1 :list-decimal :list-inside]]]
    ])
diff --git a/src/co/gaiwan/compass/html/contacts.clj b/src/co/gaiwan/compass/html/contacts.clj
@@ -31,34 +31,42 @@
        [:textarea (m/md->hiccup bio)])]]))
 
 (o/defstyled contact-detail :div
-  [c/image-frame :w-100px {--arc-thickness "7%"}]
+  [:.heading :flex :justify-between
+   :mb-3]
   [:.contact-list :w-full :ga-4]
   [:.remove-btn :cursor-pointer :border-none {:background-color t/--surface-3}]
-  [:.remove-btn [:&:hover {:background-color t/--surface-4}]]
-  [:.contact :flex :items-center :justify-between
-   [:div :mr-2]
-   [c/image-frame :w-50px {--arc-thickness "7%"} :mr-2]]
+  [:.remove-btn
+   :font-semibold
+   {:color t/--text-1}
+   [#{:&:hover :&:active}
+    {:background-color t/--surface-4}]]
+  [:.contact :flex :items-center :my-2 :py-2
+   :shadow-2 :font-size-3
+   {:background-color t/--surface-2}
+   [:.details :flex-grow :mr-2]
+   [c/image-frame :w-50px {--arc-thickness "7%"} :mx-2]]
+  [:.profile-name :font-semibold]
+  [:.email :font-size-3 {:color t/--text-2}]
+
   ([{:public-profile/keys [name]
      :user/keys [uuid] :as user}]
    [:<>
-    [:div [c/image-frame {:profile/image (user/avatar-css-value user)}]]
-    [:div.details
-     [:h3.title name]]
-    [:button {:hx-target "#modal"
-              :hx-get (url-for :contact/qr)}
-     "Add Contact"]
+    [:div.heading
+     [:h2 "Your Contacts"]
+     [:button {:hx-target "#modal"
+               :hx-get (url-for :contact/qr)}
+      [graphics/scan-icon] "Add Contact"]]
     [:div
      [:a
       {:href (url-for :contacts/index)
        :style {:display "none"}
        :hx-trigger "contact-deleted from:body"}]
-     [:h3 "Contacts"]
      [:div.contact-list
       (for [c (:user/contacts user)]
         [:div.contact
          [c/image-frame {:profile/image (user/avatar-css-value c)}]
-         [:div
-          [:div (:public-profile/name c)]
-          [:div (:discord/email c)]]
+         [:div.details
+          [:div.profile-name (:public-profile/name c)]
+          [:div.email (:discord/email c)]]
          [:button.remove-btn {:hx-delete (url-for :contact/link {:id (:db/id c)})}
-          [graphics/person-remove] "Remove Contact"]])]]]))
+          [graphics/person-remove] "Remove"]])]]]))
diff --git a/src/co/gaiwan/compass/html/graphics.clj b/src/co/gaiwan/compass/html/graphics.clj
@@ -66,3 +66,17 @@
   (garden.stylesheet/at-keyframes
    :dash
    [:to {:stroke-dashoffset 0}]))
+
+(o/defstyled scan-icon :svg
+  ([]
+   [:<> {:viewbox "0 0 1040 1024"}
+    [:path
+     {:d "M331.312778 27.631314l0-0.002047L200.124923 27.629267c-93.889367 0-170.006975 76.115562-170.006975 170.006975l0 131.107013c0 0.024559 0 0.053212 0 0.080841 0 33.271778 26.970258 60.239989 60.238966 60.239989 33.269731 0 60.239989-26.968212 60.239989-60.239989l0-0.002047 0 0L150.596903 211.858152c0-35.208896 28.54308-63.751976 63.752999-63.751976l116.879987 0c0.024559 0 0.053212 0.002047 0.080841 0.002047 33.268708 0 60.239989-26.968212 60.239989-60.238966C391.549697 54.601572 364.579439 27.631314 331.312778 27.631314z"}]
+    [:path
+     {:d "M993.938334 690.254823c0-33.267685-26.969235-60.236919-60.238966-60.236919s-60.238966 26.969235-60.238966 60.236919l0 0.002047 0 0 0 116.962875c0 35.20992-28.544103 63.752999-63.754023 63.752999L692.743504 870.972744c-33.268708 0-60.241013 26.970258-60.241013 60.237943 0 33.270754 26.972305 60.238966 60.241013 60.238966 0.026606 0 0.054235-0.002047 0.082888-0.002047l131.104967 0c93.892437 0 170.006975-76.116585 170.006975-170.007999L993.938334 690.25687l0 0L993.938334 690.254823z"}]
+    [:path
+     {:d "M331.312778 870.972744 214.349903 870.972744c-35.20992 0-63.752999-28.54308-63.752999-63.752999L150.596903 690.25687l0 0 0-0.002047c0-33.267685-26.970258-60.236919-60.239989-60.236919-33.268708 0-60.238966 26.969235-60.238966 60.236919 0 0.026606 0 0.056282 0 0.080841l0 131.103944c0 93.891414 76.117608 170.007999 170.006975 170.007999l131.104967 0c0.028653 0 0.056282 0.002047 0.082888 0.002047 33.269731 0 60.239989-26.968212 60.239989-60.238966C391.551744 897.943003 364.581486 870.972744 331.312778 870.972744z"}]
+    [:path
+     {:d "M823.931359 27.629267l-131.187855 0 0 0.002047c-33.268708 0-60.241013 26.970258-60.241013 60.237943 0 33.270754 26.972305 60.238966 60.241013 60.238966 0.026606 0 0.054235-0.002047 0.082888-0.002047l116.879987 0c35.20992 0 63.754023 28.54308 63.754023 63.751976l0 116.966968 0 0c0 33.271778 26.969235 60.237943 60.238966 60.237943s60.238966-26.966165 60.238966-60.237943l0 0L993.938334 197.636243C993.938334 103.744829 917.823795 27.629267 823.931359 27.629267z"}]
+    [:path
+     {:d "M963.820386 449.299983c-0.026606 0-0.056282 0.002047-0.080841 0.002047L60.321854 449.302029c-0.028653 0-0.056282-0.002047-0.082888-0.002047-33.270754 0-60.238966 26.970258-60.238966 60.241013 0 33.266661 26.968212 60.237943 60.238966 60.237943l903.579373 0 0 0 0.002047 0c33.267685 0 60.234873-26.970258 60.234873-60.237943C1024.055259 476.270241 997.087047 449.299983 963.820386 449.299983z"}]]))