Merge pull request #5 from DevlinRocha/settings-sidebar

Created dividers and styled text/font

src/components/userSettings/SettingsSidebar.tsx

@@ -39,6 +39,8 @@ export default function SettingsSidebar() {
           </UserProfile>
         </SettingsList>
 
+        <Divider />
+
         <SettingsList>
           <LogOut
             onClick={() => dispatch(setLogoutConfirmOpen(!logoutConfirmOpen))}
@@ -47,6 +49,8 @@ export default function SettingsSidebar() {
           </LogOut>
         </SettingsList>
 
+        <Divider />
+
         <SocialLinks>
           <SocialLink href="https://twitter.com/DevlinRocha" target="_blank">
             <StyledImage src={twitterIcon} width={16} height={16} />
@@ -83,11 +87,11 @@ const SettingsList = tw.ol`
 `;
 
 const ListHeading = tw.h3`
-  px-2.5 pb-1.5
+  px-2.5 pb-1.5 text-xs font-bold
 `;
 
 const ListItem = tw.li`
-  px-2.5 py-1.5 mb-0.5 rounded-md cursor-pointer
+  px-2.5 py-1.5 mb-0.5 font-medium rounded-md cursor-pointer
   hover:bg-gray-200
 `;
 
@@ -97,6 +101,10 @@ const MyAccount = tw(ListItem)`
 const UserProfile = tw(ListItem)`
 `;
 
+const Divider = tw.div`
+  h-px mx-2.5 my-2 bg-gray-200
+`;
+
 const LogOut = tw(ListItem)`
   text-red-500
 `;