finished styling v1

Sofianel5 · Jun 5, 2021 · 26c9aae · 26c9aae
1 parent ed4e442
commit 26c9aae
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 123 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
         "react-phone-number-input": "^3.1.22",
         "request": "^2.51.0",
         "request-promise": "^4.2.6",
+        "s-ago": "^2.2.0",
         "schema-utils": "2.6.6",
         "sound-play": "^1.1.0",
         "tailwindcss": "^2.1.2",

diff --git a/resources/public/css/styles.css b/resources/public/css/styles.css
@@ -782,6 +782,14 @@ select {
 	margin-top: 10px;
 	margin-bottom: 10px;
 }
+.my-\[15px\] {
+	margin-top: 15px;
+	margin-bottom: 15px;
+}
+.my-\[5px\] {
+	margin-top: 5px;
+	margin-bottom: 5px;
+}
 .mt-\[10px\] {
 	margin-top: 10px;
 }
@@ -797,24 +805,24 @@ select {
 .mt-\[15px\] {
 	margin-top: 15px;
 }
-.mr-\[30px\] {
-	margin-right: 30px;
-}
-.mr-\[20px\] {
-	margin-right: 20px;
-}
 .mr-\[10px\] {
 	margin-right: 10px;
 }
-.ml-\[20px\] {
-	margin-left: 20px;
-}
 .mt-\[5px\] {
 	margin-top: 5px;
 }
 .mb-\[30px\] {
 	margin-bottom: 30px;
 }
+.mr-\[20px\] {
+	margin-right: 20px;
+}
+.ml-\[20px\] {
+	margin-left: 20px;
+}
+.ml-\[5px\] {
+	margin-left: 5px;
+}
 .block {
 	display: block;
 }
@@ -833,11 +841,8 @@ select {
 .h-\[100px\] {
 	height: 100px;
 }
-.h-\[30px\] {
-	height: 30px;
-}
-.h-\[20px\] {
-	height: 20px;
+.h-\[65px\] {
+	height: 65px;
 }
 .min-h-\[50px\] {
 	min-height: 50px;
@@ -857,15 +862,12 @@ select {
 .w-\[100px\] {
 	width: 100px;
 }
-.w-\[30px\] {
-	width: 30px;
-}
-.max-w-\[150px\] {
-	max-width: 150px;
-}
 .max-w-\[140px\] {
 	max-width: 140px;
 }
+.flex-1 {
+	flex: 1 1 0%;
+}
 .cursor-pointer {
 	cursor: pointer;
 }
@@ -896,23 +898,46 @@ select {
 .justify-between {
 	justify-content: space-between;
 }
+.justify-start {
+	justify-content: flex-start;
+}
 .justify-evenly {
 	justify-content: space-evenly;
 }
-.justify-start {
-	justify-content: flex-start;
+.justify-end {
+	justify-content: flex-end;
 }
 .overflow-hidden {
 	overflow: hidden;
 }
 .overflow-x-hidden {
 	overflow-x: hidden;
 }
+.overflow-y-scroll {
+	overflow-y: scroll;
+}
+.overflow-y-hidden {
+	overflow-y: hidden;
+}
 .rounded-full {
 	border-radius: 9999px;
 }
-.rounded {
-	border-radius: 0.25rem;
+.border-0 {
+	border-width: 0px;
+}
+.border-b-2 {
+	border-bottom-width: 2px;
+}
+.border-b-\[1px\] {
+	border-bottom-width: 1px;
+}
+.border-gray-300 {
+	--tw-border-opacity: 1;
+	border-color: rgba(209, 213, 219, var(--tw-border-opacity));
+}
+.border-gray-500 {
+	--tw-border-opacity: 1;
+	border-color: rgba(107, 114, 128, var(--tw-border-opacity));
 }
 .bg-\[\#FFFAFF\] {
 	--tw-bg-opacity: 1;
@@ -926,6 +951,18 @@ select {
 	--tw-bg-opacity: 1;
 	background-color: rgba(48, 48, 54, var(--tw-bg-opacity));
 }
+.bg-\[\#3A3A41\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(58, 58, 65, var(--tw-bg-opacity));
+}
+.bg-\[\#43434C\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(67, 67, 76, var(--tw-bg-opacity));
+}
+.bg-\[\#30BCED\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(48, 188, 237, var(--tw-bg-opacity));
+}
 .bg-contain {
 	background-size: contain;
 }
@@ -935,21 +972,10 @@ select {
 .bg-no-repeat {
 	background-repeat: no-repeat;
 }
-.p-\[20px\] {
-	padding: 20px;
-}
 .px-\[100px\] {
 	padding-left: 100px;
 	padding-right: 100px;
 }
-.py-\[50px\] {
-	padding-top: 50px;
-	padding-bottom: 50px;
-}
-.py-\[30px\] {
-	padding-top: 30px;
-	padding-bottom: 30px;
-}
 .px-\[20px\] {
 	padding-left: 20px;
 	padding-right: 20px;
@@ -962,6 +988,14 @@ select {
 	padding-top: 5px;
 	padding-bottom: 5px;
 }
+.px-\[50px\] {
+	padding-left: 50px;
+	padding-right: 50px;
+}
+.px-\[75px\] {
+	padding-left: 75px;
+	padding-right: 75px;
+}
 .pt-\[10px\] {
 	padding-top: 10px;
 }
@@ -994,6 +1028,12 @@ select {
 .font-normal {
 	font-weight: 400;
 }
+.font-thin {
+	font-weight: 100;
+}
+.font-light {
+	font-weight: 300;
+}
 .uppercase {
 	text-transform: uppercase;
 }
@@ -1020,10 +1060,18 @@ select {
 	--tw-text-opacity: 1;
 	color: rgba(9, 188, 138, var(--tw-text-opacity));
 }
+.text-gray-500 {
+	--tw-text-opacity: 1;
+	color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
 .shadow-2xl {
 	--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-md {
+	--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .focus\:border-\[\#30BCED\]:focus {
 	--tw-border-opacity: 1;
 	border-color: rgba(48, 188, 237, var(--tw-border-opacity));

diff --git a/resources/public/html/chat.html b/resources/public/html/chat.html
@@ -1,14 +1,26 @@
 <!DOCTYPE html>
-<html>
+<html style="-webkit-app-region: drag">
 
 <head>
     <meta charset="UTF-8">
     <title>BuddyList</title>
+    <link rel="stylesheet" href="../css/styles.css" />
+    <style>
+         ::-webkit-scrollbar {
+            width: 12px;
+        }
+
+         ::-webkit-scrollbar-track {
+            background-color: #3A3A41;
+        }
+
+         ::-webkit-scrollbar-thumb {
+            background-color: #7D7D8C
+        }
+    </style>
 </head>
 
-<body>
-    <div id="app-container">
-    </div>
+<body id="app-container">
 </body>
 <script src="../js/chat/chat.js"></script>
 

diff --git a/src/buddylistclient/main/core.cljs b/src/buddylistclient/main/core.cljs
@@ -127,7 +127,7 @@
 (defn notify-new-message [with-user message]
   (let [notification-params (clj->js {:title (str "New message from " with-user)
                                       :body message
-                                      :sound (.resolve path (js* "__dirname") "../assets/imrcv.wav")})
+                                      :sound (.resolve path (js* "__dirname") "../resources/public/sounds/imrcv.wav")})
         notification (Notification. notification-params)]
     (.show notification)))
 
@@ -150,9 +150,9 @@
         (println new-max old-max))
       (println "new max null" old-max))))
 
-(defn launch-chat [with-user]
-  (swap! *win* assoc-in [:chats with-user] (BrowserWindow. (clj->js {:width 500 :height 400 :webPreferences {:nodeIntegration true :contextIsolation false}})))
-  (.loadFile (-> @*win* :chats (get with-user)) (.resolve path (js* "__dirname") "../resources/public/html/chat.html") (clj->js {:query {:with-user with-user :user (:username @*user*)}}))
+(defn launch-chat [with-user data]
+  (swap! *win* assoc-in [:chats with-user] (BrowserWindow. (clj->js {:width 500 :minWidth 350 :height 400 :titleBarStyle "hidden" :webPreferences {:nodeIntegration true :contextIsolation false}})))
+  (.loadFile (-> @*win* :chats (get with-user)) (.resolve path (js* "__dirname") "../resources/public/html/chat.html") (clj->js {:query {:with-user data :user (->> @*user* clj->js (.stringify js/JSON))}}))
   (.on (-> @*win* :chats (get with-user) .-webContents) "did-finish-load"
        (fn []
          (println "chat did-finish-load " with-user)
@@ -165,15 +165,16 @@
   (.on (-> @*win* :chats (get with-user)) "closed" #(swap! *win* dissoc-in [:chats with-user])))
 
 (.on ipcMain "buddies:selected"
-     (fn [_ username]
-       (if-not (contains? (:chats @*win*) username)
-         (launch-chat username)
-         (.show (-> @*win* :chats (get username))))))
+     (fn [_ buddy data]
+       (println "data:" data)
+       (if-not (contains? (:chats @*win*) buddy)
+         (launch-chat buddy data)
+         (.show (-> @*win* :chats (get buddy))))))
 
 (.on ipcMain "addbuddy"
      (fn [_ buddy-username]
        (.then (user/add-buddy (:username @*user*) (:auth-token @*user*) buddy-username)
-              (fn [m]
+              (fn [_]
                 (.reload (-> @*win* :buddylist))
                 (.close (-> @*win* :add-buddy))))))
 
@@ -197,6 +198,14 @@
            (.catch (fn [err]
                      (println "File error:" err))))))
 
+(.on ipcMain "new-buddies-order"
+     (fn [_ new-buddies-order]
+       (-> (user/set-new-buddies-order (:username @*user*) (:auth-token @*user*) (js->clj new-buddies-order))
+           (.then (fn [m]
+                    (reset! *user* (js->clj m :keywordize-keys true))))
+           (.catch (fn [err]
+                     (println "new-buddies-order.err:" err))))))
+
 (defn open-addbuddy-win []
   (swap! *win* assoc :add-buddy (BrowserWindow. (clj->js {:width 300 :height 300 :webPreferences {:nodeIntegration true :contextIsolation false}})))
   (.loadURL (:add-buddy @*win*) (str "file://" (.resolve path (js* "__dirname") "../resources/public/html/addbuddy.html")))

diff --git a/src/buddylistclient/main/user.cljs b/src/buddylistclient/main/user.cljs
@@ -101,19 +101,6 @@
         (.then #(.-data %))
         (.catch #(println %)))))
 
-(defn upload-pfp- [username auth-token f]
-  (let [form {:image {:value (.createReadStream fs (-> f
-                                                       .-filePaths
-                                                       (aget 0)
-                                                       .toString))
-                      :options {:contentType nil}}}
-        headers {:authorization auth-token :request-user username}
-        options (clj->js {:method "POST" :url "https://buddylist.app/set-pfp" :formData form :headers headers})
-        request (rp options)]
-    (-> request
-        (.then #(-> % (js->clj :keywordize-keys true)))
-        (.catch #(println "user.upload-pfp error:" %)))))
-
 (defn upload-pfp [username auth-token f]
   (let [form (FormData.)
         _ (.append form "image" (.createReadStream fs (-> f
@@ -125,4 +112,14 @@
         request (axios options)]
     (-> request
         (.then #(-> % (js->clj :keywordize-keys true) :data))
-        (.catch #(println "user.upload-pfp error:" %)))))
+        (.catch #(println "user.upload-pfp error:" %)))))
+
+(defn set-new-buddies-order [username auth-token new-buddies-order]
+  (println new-buddies-order)
+  (let [headers {:authorization auth-token :request-user username "Content-Type" "application/json"}
+        params {:new-buddies-order new-buddies-order}
+        options (clj->js {:method "POST" :url "https://buddylist.app/rearrange-buddies" :headers headers :data params})
+        request (axios options)]
+    (-> request
+        (.then #(.-data %))
+        (.catch #(println (-> % .-response .-data))))))