mobile profile tab styles

src/css/style.css

@@ -448,7 +448,7 @@ a.logo img:not(:last-child) {
 }
 
 .nav .active .identicon img {
-  border: 1px solid var(--purple);
+  border: 1px solid var(--text-color);
 }
 
 .nav a.my-profile:focus .identicon img {

src/js/components/feed/FeedTypeSelector.tsx

@@ -1,30 +1,52 @@
+import styled from 'styled-components';
+
 import Icons from '../../Icons';
 import localState from '../../LocalState';
 
+const Tab = styled.a`
+  /* Default styles for all 'a' elements inside '.tabs' */
+
+  &.isProfile_left {
+    border-radius: 0;
+  }
+
+  &.isProfile_right {
+    border-radius: 0;
+  }
+
+  @media (min-width: 626px) {
+    &.isProfile_left {
+      border-radius: 8px 0 0 0;
+    }
+
+    &.isProfile_right {
+      border-radius: 0 8px 0 0;
+    }
+  }
+`;
+
 export default function FeedTypeSelector({ setDisplay, display, index }) {
   const isProfile = ['posts', 'postsAndReplies', 'likes'].includes(index);
   return (
     <div className="tabs">
-      <a
-        style={isProfile ? { 'border-radius': '8px 0 0 0' } : {}}
+      <Tab
         onClick={() => {
-          setDisplay('posts'); // faster to do this also
+          setDisplay('posts');
           localState.get('settings').get('feed').get('display').put('posts');
         }}
-        className={display === 'grid' ? '' : 'active'}
+        className={`${display === 'grid' ? '' : 'active'} ${isProfile ? 'isProfile_left' : ''}`}
       >
         {Icons.post}
-      </a>
-      <a
-        style={isProfile ? { 'border-radius': '0 8px 0 0' } : {}}
-        className={display === 'grid' ? 'active' : ''}
+      </Tab>
+      <Tab
         onClick={() => {
-          setDisplay('grid'); // faster to do this also
+          setDisplay('grid');
           localState.get('settings').get('feed').get('display').put('grid');
         }}
+        className={`${display === 'grid' ? 'active' : ''} ${isProfile ? 'isProfile_right' : ''}`}
       >
         {Icons.grid}
-      </a>
+      </Tab>
     </div>
   );
 }