UI improvements: Add titles, rename sections, update colors - Relay Settings and Advanced Settings titles added, Content Moderation renamed, font colors updated to white, table borders removed

Author: whosthatguy

src/components/blocked-pubkeys/BlockedPubkeys.tsx

@@ -11,6 +11,7 @@ import { LockFilled } from '@ant-design/icons';
 import styled from 'styled-components';
 import { DashboardWrapper } from '@app/pages/DashboardPages/DashboardPage.styles';
 import { BaseRow } from '@app/components/common/BaseRow/BaseRow';
+import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import { Balance } from '@app/components/relay-dashboard/Balance/Balance';
 import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning';
 import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions';
@@ -56,6 +57,7 @@ export const BlockedPubkeys: React.FC = () => {
 
   return (
     <DashboardWrapper>
+      <PageTitle>Content Moderation</PageTitle>
       <BaseRow>
         <PageStyles.LeftSideCol xl={16} xxl={17}>
           <S.BaseColRoot>
@@ -64,7 +66,7 @@ export const BlockedPubkeys: React.FC = () => {
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                   <div>
                     <Title level={3}>
-                      Access Control <LockFilled />
+                      Content Moderation <LockFilled />
                     </Title>
                     <Text style={{ color: 'var(--text-light-color)' }}>
                       Control access to your relay and manage flagged pubkeys

src/components/relay-settings/layouts/DesktopLayout.tsx

@@ -105,7 +105,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
                 <BaseRow gutter={[60, 60]}>
                     <BaseCol xs={24}>
                         <S.HeadingContainer>
-                            <S.LabelSpan>{'Options'}</S.LabelSpan>
+                            <S.LabelSpan>{'Relay Settings'}</S.LabelSpan>
                         </S.HeadingContainer>
 
                         <NetworkSection

src/components/relay-settings/layouts/MobileLayout.tsx

@@ -100,7 +100,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = ({
         <BaseRow gutter={[20, 24]}>
             <BaseCol span={24}>
                 <S.HeadingContainer>
-                    <S.LabelSpan>{'Options'}</S.LabelSpan>
+                    <S.LabelSpan>{'Relay Settings'}</S.LabelSpan>
                 </S.HeadingContainer>
 
                 <NetworkSection

src/components/settings/SettingsPage.tsx

@@ -9,18 +9,22 @@ import WalletSettings from './WalletSettings';
 import GeneralSettings from './GeneralSettings';
 import RelayInfoSettings from './RelayInfoSettings';
 import * as S from '@app/pages/DashboardPages/DashboardPage.styles';
+import * as PageStyles from '@app/pages/uiComponentsPages/UIComponentsPage.styles';
 import { CollapsibleSection } from '@app/components/relay-settings/shared/CollapsibleSection/CollapsibleSection';
 import { Balance } from '@app/components/relay-dashboard/Balance/Balance';
 import { TotalEarning } from '@app/components/relay-dashboard/totalEarning/TotalEarning';
 import { ActivityStory } from '@app/components/relay-dashboard/transactions/Transactions';
 
 const SettingsPage: React.FC = () => {
   return (
-    <>
+    <S.DashboardWrapper>
       <PageTitle>Advanced Settings</PageTitle>
-      <S.DashboardWrapper>
-        <BaseRow>
-          <S.LeftSideCol xl={16} xxl={17} id="desktop-content">
+      <BaseRow>
+        <S.LeftSideCol xl={16} xxl={17} id="desktop-content">
+          <PageStyles.HeadingContainer>
+            <PageStyles.LabelSpan>Advanced Settings</PageStyles.LabelSpan>
+          </PageStyles.HeadingContainer>
+          
           <CollapsibleSection header="General Settings">
             <GeneralSettings />
           </CollapsibleSection>
@@ -44,26 +48,25 @@ const SettingsPage: React.FC = () => {
           <CollapsibleSection header="Wallet Settings">
             <WalletSettings />
           </CollapsibleSection>
-          </S.LeftSideCol>
+        </S.LeftSideCol>
 
-          <S.RightSideCol xl={8} xxl={7}>
-            <S.RightSideContentWrapper>
-              <div id="balance" className="liquid-element">
-                <Balance />
-              </div>
-              <S.Space />
-              <div id="total-earning" className="liquid-element">
-                <TotalEarning />
-              </div>
-              <S.Space />
-              <div id="activity-story" className="liquid-element">
-                <ActivityStory />
-              </div>
-            </S.RightSideContentWrapper>
-          </S.RightSideCol>
-        </BaseRow>
-      </S.DashboardWrapper>
-    </>
+        <S.RightSideCol xl={8} xxl={7}>
+          <S.RightSideContentWrapper>
+            <div id="balance" className="liquid-element">
+              <Balance />
+            </div>
+            <S.Space />
+            <div id="total-earning" className="liquid-element">
+              <TotalEarning />
+            </div>
+            <S.Space />
+            <div id="activity-story" className="liquid-element">
+              <ActivityStory />
+            </div>
+          </S.RightSideContentWrapper>
+        </S.RightSideCol>
+      </BaseRow>
+    </S.DashboardWrapper>
   );
 };
 

src/components/tables/Tables/Tables.styles.ts

@@ -218,7 +218,7 @@ export const Card = styled(CommonCard)`
       rgba(0, 178, 178, 0.03) 100%);
     
     .ant-card-head-title {
-      color: rgba(0, 178, 178, 0.9);
+      color: rgba(255, 255, 255, 0.95);
       text-shadow:
         0 0 12px rgba(0, 178, 178, 0.4),
         0 2px 4px rgba(0, 0, 0, 0.4);
@@ -251,10 +251,33 @@ export const Card = styled(CommonCard)`
   div.ant-table-container,
   .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table {
     border-radius: ${borderRad};
-    border: 1px solid rgba(0, 178, 178, 0.12);
+    border: none !important;
     overflow: hidden;
   }
   
+  /* Remove all table borders */
+  .ant-table {
+    border: none !important;
+  }
+  
+  .ant-table-container {
+    border: none !important;
+  }
+  
+  .ant-table-bordered {
+    border: none !important;
+  }
+  
+  .ant-table-bordered > .ant-table-container {
+    border: none !important;
+  }
+  
+  /* Remove any remaining left/right borders */
+  table {
+    border-left: none !important;
+    border-right: none !important;
+  }
+  
   .ant-table-container {
     box-shadow:
       inset 0 2px 4px rgba(0, 178, 178, 0.08),

src/components/tables/Tables/Tables.tsx

@@ -32,7 +32,7 @@ export const Tables: React.FC = () => {
               style={{
                 background: 'linear-gradient(135deg, rgba(0, 178, 178, 0.12) 0%, rgba(0, 139, 178, 0.08) 100%)',
                 border: '2px solid rgba(0, 178, 178, 0.25)',
-                color: 'rgba(0, 178, 178, 0.9)',
+                color: 'rgba(255, 255, 255, 0.95)',
                 padding: '8px 16px',
                 borderRadius: '12px',
                 fontSize: '14px',