Profile tweaks

src/index.css

@@ -47,6 +47,12 @@ code {
   display: inline-block;
 }
 
+.btn.active {
+  border: 2px solid;
+  background-color: #222;
+  font-weight: bold;
+}
+
 .btn:hover {
   background-color: #333;
 }
@@ -141,4 +147,18 @@ div.form-group > div:first-child {
 
 .ReactModal__Body--open {
   overflow: hidden;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.tabs {
+  display: flex;
+  margin: 10px 0;
+  overflow-x: auto;
+}
+
+.tabs > div {
+  margin-right: 10px;
 }

src/pages/ProfilePage.css

@@ -10,7 +10,7 @@
 .profile .avatar {
     width: 256px;
     height: 256px;
-    background-size: contain;
+    background-size: cover;
     cursor: pointer;
     border-radius: 10px;
 }

src/pages/ProfilePage.js

@@ -167,8 +167,13 @@ export default function ProfilePage() {
                     {isMe ? editor() : details()}
                 </div>
             </div>
-            <br />
-            <div className="btn">Notes</div>
+            <div className="tabs">
+                <div className="btn active">Notes</div>
+                <div className="btn">Reactions</div>
+                <div className="btn">Followers</div>
+                <div className="btn">Follows</div>
+                <div className="btn">Relays</div>
+            </div>
             {notes?.sort((a, b) => b.created_at - a.created_at).map(a => <Note key={a.id} data={a} />)}
         </>
     )