From ab136e331092ea3d7670db2c9d73d7f21d2870bd Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 15 Mar 2024 00:12:22 +0800
Subject: [PATCH] chore: tweak styles

---
 proto/api/v2/user_service.proto                 | 9 +++++++++
 web/src/components/MemoContent/index.tsx        | 2 +-
 web/src/components/Settings/SectionMenuItem.tsx | 9 +++++----
 web/src/components/UserAvatar.tsx               | 2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/proto/api/v2/user_service.proto b/proto/api/v2/user_service.proto
index a8f71188..3326d528 100644
--- a/proto/api/v2/user_service.proto
+++ b/proto/api/v2/user_service.proto
@@ -16,11 +16,13 @@ service UserService {
   rpc ListUsers(ListUsersRequest) returns (ListUsersResponse) {
     option (google.api.http) = {get: "/api/v2/users"};
   }
+
   // GetUser gets a user by name.
   rpc GetUser(GetUserRequest) returns (GetUserResponse) {
     option (google.api.http) = {get: "/api/v2/{name=users/*}"};
     option (google.api.method_signature) = "name";
   }
+
   // CreateUser creates a new user.
   rpc CreateUser(CreateUserRequest) returns (CreateUserResponse) {
     option (google.api.http) = {
@@ -29,6 +31,7 @@ service UserService {
     };
     option (google.api.method_signature) = "user";
   }
+
   // UpdateUser updates a user.
   rpc UpdateUser(UpdateUserRequest) returns (UpdateUserResponse) {
     option (google.api.http) = {
@@ -37,16 +40,19 @@ service UserService {
     };
     option (google.api.method_signature) = "user,update_mask";
   }
+
   // DeleteUser deletes a user.
   rpc DeleteUser(DeleteUserRequest) returns (DeleteUserResponse) {
     option (google.api.http) = {delete: "/api/v2/{name=users/*}"};
     option (google.api.method_signature) = "name";
   }
+
   // GetUserSetting gets the setting of a user.
   rpc GetUserSetting(GetUserSettingRequest) returns (GetUserSettingResponse) {
     option (google.api.http) = {get: "/api/v2/{name=users/*}/setting"};
     option (google.api.method_signature) = "name";
   }
+
   // UpdateUserSetting updates the setting of a user.
   rpc UpdateUserSetting(UpdateUserSettingRequest) returns (UpdateUserSettingResponse) {
     option (google.api.http) = {
@@ -55,11 +61,13 @@ service UserService {
     };
     option (google.api.method_signature) = "setting,update_mask";
   }
+
   // ListUserAccessTokens returns a list of access tokens for a user.
   rpc ListUserAccessTokens(ListUserAccessTokensRequest) returns (ListUserAccessTokensResponse) {
     option (google.api.http) = {get: "/api/v2/{name=users/*}/access_tokens"};
     option (google.api.method_signature) = "name";
   }
+
   // CreateUserAccessToken creates a new access token for a user.
   rpc CreateUserAccessToken(CreateUserAccessTokenRequest) returns (CreateUserAccessTokenResponse) {
     option (google.api.http) = {
@@ -68,6 +76,7 @@ service UserService {
     };
     option (google.api.method_signature) = "name";
   }
+
   // DeleteUserAccessToken deletes an access token for a user.
   rpc DeleteUserAccessToken(DeleteUserAccessTokenRequest) returns (DeleteUserAccessTokenResponse) {
     option (google.api.http) = {delete: "/api/v2/{name=users/*}/access_tokens/{access_token}"};
diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index 29db2c73..ff6706f1 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -73,7 +73,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
           <div
             ref={memoContentContainerRef}
             className={classNames(
-              "w-full max-w-full word-break text-base leading-6 space-y-2 whitespace-pre-wrap",
+              "w-full max-w-full word-break text-base leading-snug space-y-2 whitespace-pre-wrap",
               showCompactMode && "line-clamp-6",
             )}
             onClick={handleMemoContentClick}
diff --git a/web/src/components/Settings/SectionMenuItem.tsx b/web/src/components/Settings/SectionMenuItem.tsx
index da2c6b2b..f6b2f9cb 100644
--- a/web/src/components/Settings/SectionMenuItem.tsx
+++ b/web/src/components/Settings/SectionMenuItem.tsx
@@ -10,14 +10,15 @@ interface SettingMenuItemProps {
 
 const SectionMenuItem: React.FC<SettingMenuItemProps> = ({ text, icon: IconComponent, isSelected, onClick }) => {
   return (
-    <span
+    <div
       onClick={onClick}
-      className={`w-auto px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg select-none hover:opacity-80 ${
+      className={`w-auto max-w-full px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg select-none hover:opacity-80 ${
         isSelected ? "bg-zinc-100 shadow dark:bg-zinc-900" : ""
       }`}
     >
-      <IconComponent className="w-4 h-auto mr-2 opacity-80" /> {text}
-    </span>
+      <IconComponent className="w-4 h-auto mr-2 opacity-80 shrink-0" />
+      <span className="truncate">{text}</span>
+    </div>
   );
 };
 
diff --git a/web/src/components/UserAvatar.tsx b/web/src/components/UserAvatar.tsx
index 0f5a35cf..af20df3b 100644
--- a/web/src/components/UserAvatar.tsx
+++ b/web/src/components/UserAvatar.tsx
@@ -8,7 +8,7 @@ interface Props {
 const UserAvatar = (props: Props) => {
   const { avatarUrl, className } = props;
   return (
-    <div className={classNames(`w-8 h-8 overflow-clip rounded-lg`, className)}>
+    <div className={classNames(`w-8 h-8 overflow-clip rounded-xl`, className)}>
       <img
         className="w-full h-auto shadow min-w-full min-h-full object-cover dark:opacity-80"
         src={avatarUrl || "/full-logo.webp"}