feat: add avatar placeholder styling and improve layout in GeneralSettings

Author: medyo

src/assets/App.css

@@ -143,6 +143,13 @@ a {
   border-radius: 20px;
 }
 
+.avatarPlaceholder {
+  height: 34px;
+  width: 34px;
+  margin-top: 10px;
+  border-radius: 20px;
+}
+
 .badgeCount {
   width: 20px;
   height: 20px;
@@ -1159,6 +1166,7 @@ Producthunt item
 /* User */
 .profileImageContainer {
   position: relative;
+  overflow: hidden;
 
   img {
     width: 40px;

src/components/Layout/Header.tsx

@@ -103,7 +103,7 @@ export const Header = () => {
                 </div>
               </>
             ) : (
-              <AvatarPlaceholder className="profileImage" />
+              <AvatarPlaceholder className="avatarPlaceholder" />
             )}
           </CircleButton>
         </div>

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -102,35 +102,35 @@ Select styles
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--card-content-divider);
-}
-.userContent .userImage {
-  width: 50px;
-  height: 50px;
-  border-radius: 100%;
-  align-self: flex-start;
-}
-.userContent .userInfos {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: auto;
-  margin-left: 10px;
-}
-.userContent .userName {
-  font-weight: 600;
-}
 
-.userContent .actions {
-  margin-top: 6px;
-}
-.userContent .sub {
-  font-size: 0.9em;
-  opacity: 0.9;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  column-gap: 4px;
+  .userImage {
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    align-self: flex-start;
+  }
+  .userInfos {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: auto;
+    margin-left: 10px;
+  }
+  .userName {
+    font-weight: 600;
+  }
+  .actions {
+    margin-top: 6px;
+  }
+  .sub {
+    font-size: 0.9em;
+    opacity: 0.9;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 4px;
+  }
 }
 
 .streaks {