From c9f866e5384ea28c713a4e00fdac86375f113028 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 24 Apr 2023 18:53:30 +0530
Subject: [PATCH] style: profile settings, activity theming (#951)

---
 apps/app/components/core/feeds.tsx            | 25 ++++++++++--------
 apps/app/components/issues/activity.tsx       |  4 +--
 .../issues/comment/comment-card.tsx           |  9 +++----
 .../[workspaceSlug]/me/profile/index.tsx      | 26 ++++++++++---------
 4 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index 0d68fd7a6..b5cb0bb78 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -67,15 +67,19 @@ const activityDetails: {
   },
   name: {
     message: "set the name to",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: (
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+    ),
   },
   description: {
     message: "updated the description.",
-    icon: <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />,
+    icon: (
+      <ChatBubbleBottomCenterTextIcon className="h-3 w-3 text-brand-secondary" aria-hidden="true" />
+    ),
   },
   estimate_point: {
     message: "set the estimate point to",
-    icon: <PlayIcon className="h-3 w-3 text-gray-500 -rotate-90" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
   },
   target_date: {
     message: "set the due date to",
@@ -91,7 +95,7 @@ const activityDetails: {
   },
   estimate: {
     message: "updated the estimate",
-    icon: <PlayIcon className="h-3 w-3 text-gray-500 -rotate-90" aria-hidden="true" />,
+    icon: <PlayIcon className="h-3 w-3 -rotate-90 text-gray-500" aria-hidden="true" />,
   },
   link: {
     message: "updated the link",
@@ -153,11 +157,11 @@ export const Feeds: React.FC<any> = ({ activities }) => (
         ) {
           const { workspace_detail, project, issue } = activity;
           value = (
-            <span className="text-gray-600">
+            <span className="text-brand-secondary">
               created{" "}
               <Link href={`/${workspace_detail.slug}/projects/${project}/issues/${issue}`}>
                 <a className="inline-flex items-center hover:underline">
-                  this issue. <ArrowTopRightOnSquareIcon className="h-3.5 w-3.5 ml-1" />
+                  this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
                 </a>
               </Link>
             </span>
@@ -198,7 +202,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
 
         if (activity.field === "comment") {
           return (
-            <div key={activity.id}>
+            <div key={activity.id} className="mt-2">
               <div className="relative flex items-start space-x-3">
                 <div className="relative px-1">
                   {activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
@@ -219,7 +223,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
 
                   <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
                     <ChatBubbleLeftEllipsisIcon
-                      className="h-3.5 w-3.5 text-gray-400"
+                      className="h-3.5 w-3.5 text-brand-secondary"
                       aria-hidden="true"
                     />
                   </span>
@@ -242,9 +246,8 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                           : activity.old_value
                       }
                       editable={false}
-                      onBlur={() => ({})}
                       noBorder
-                      customClassName="text-xs bg-brand-surface-1"
+                      customClassName="text-xs border border-brand-base bg-brand-base"
                     />
                   </div>
                 </div>
@@ -268,7 +271,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
                     <div>
                       <div className="relative px-1.5">
                         <div className="mt-1.5">
-                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-1 ring-white">
+                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
                             {activity.field ? (
                               activityDetails[activity.field as keyof typeof activityDetails]?.icon
                             ) : activity.actor_detail.avatar &&
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index f14ee2761..b3e419e17 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -110,9 +110,7 @@ const activityDetails: {
   },
 };
 
-type Props = {};
-
-export const IssueActivitySection: React.FC<Props> = () => {
+export const IssueActivitySection: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index b368812a3..0d9aae830 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -68,7 +68,10 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-brand-surface-2 px-0.5 py-px">
-          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-gray-400" aria-hidden="true" />
+          <ChatBubbleLeftEllipsisIcon
+            className="h-3.5 w-3.5 text-brand-secondary"
+            aria-hidden="true"
+          />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -110,10 +113,6 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
               </div>
             </form>
           ) : (
-            // <div
-            //   className="mt-2 mb-6 text-sm text-gray-700"
-            //   dangerouslySetInnerHTML={{ __html: comment.comment_html }}
-            // />
             <RemirrorRichTextEditor
               value={comment.comment_html}
               editable={false}
diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index ea6b510ee..6487fbbd8 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -147,8 +147,8 @@ const Profile: NextPage = () => {
         <div className="space-y-8 sm:space-y-12">
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold text-brand-base">Profile Picture</h4>
-              <p className="text-brand-secondary">
+              <h4 className="text-lg font-semibold text-brand-base">Profile Picture</h4>
+              <p className="text-sm text-brand-secondary">
                 Max file size is 5MB. Supported file types are .jpg and .png.
               </p>
             </div>
@@ -156,7 +156,7 @@ const Profile: NextPage = () => {
               <div className="flex items-center gap-4">
                 <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                   {!watch("avatar") || watch("avatar") === "" ? (
-                    <div className="bg-brand-surface-2 h-12 w-12 p-2 rounded-md">
+                    <div className="h-12 w-12 rounded-md bg-brand-surface-2 p-2">
                       <UserIcon className="h-full w-full text-brand-secondary" />
                     </div>
                   ) : (
@@ -195,12 +195,12 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold text-brand-base">Full Name</h4>
-              <p className="text-brand-secondary">
+              <h4 className="text-lg font-semibold text-brand-base">Full Name</h4>
+              <p className="text-sm text-brand-secondary">
                 This name will be reflected on all the projects you are working on.
               </p>
             </div>
-            <div className="col-span-12 sm:col-span-6 flex items-center gap-2">
+            <div className="col-span-12 flex items-center gap-2 sm:col-span-6">
               <Input
                 name="first_name"
                 id="first_name"
@@ -224,8 +224,8 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold text-brand-base">Email</h4>
-              <p className="text-brand-secondary">The email address that you are using.</p>
+              <h4 className="text-lg font-semibold text-brand-base">Email</h4>
+              <p className="text-sm text-brand-secondary">The email address that you are using.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Input
@@ -241,8 +241,8 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold text-brand-base">Role</h4>
-              <p className="text-brand-secondary">Add your role.</p>
+              <h4 className="text-lg font-semibold text-brand-base">Role</h4>
+              <p className="text-sm text-brand-secondary">Add your role.</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <Controller
@@ -270,8 +270,10 @@ const Profile: NextPage = () => {
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-xl font-semibold text-brand-base">Theme</h4>
-              <p className="text-brand-secondary">Select or customize your interface color scheme.</p>
+              <h4 className="text-lg font-semibold text-brand-base">Theme</h4>
+              <p className="text-sm text-brand-secondary">
+                Select or customize your interface color scheme.
+              </p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <ThemeSwitch />