setting sticky header for settings and profile

app/client/web/src/App.tsx

@@ -19,7 +19,7 @@ const theme = createTheme({
     'databag-green': ['#eef6f2', '#cce5d9', '#aad4bf', '#68c4af', '#559e83', '#559e83', '#3c7759', '#2b5540', '#1a3326', '#09110d'],
     'dark-surface': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
     'light-surface': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#777777', '#666666'],
-    'dark-text': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#777777', '#666666'],
+    'dark-text': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#666666', '#444444', '#222222'],
     'light-text': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
     'dark-databag-green': ['#99bb99', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83', '#559e83'],
     'light-databag-green': ['#888888', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844', '#448844'],

app/client/web/src/card/Card.module.css

@@ -53,7 +53,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     font-style: italic;
-    color: var(--mantine-color-text-9);
+    color: var(--mantine-color-text-7);
   }
 
   .handle {

app/client/web/src/constants/Strings.ts

@@ -1,5 +1,3 @@
-import {NativeModules, Platform} from 'react-native';
-
 export const en = {
   unknown: 'Unknown',
   sealed: 'Sealed',

app/client/web/src/contacts/Contacts.module.css

@@ -14,7 +14,7 @@
     padding-left: 16px;
     padding-right: 16px;
     padding-bottom: 8px;
-    border-bottom: 2px solid var(--mantine-color-text-9);
+    border-bottom: 2px solid var(--mantine-color-text-8);
     width: 100%;
 
     .input {

app/client/web/src/content/Content.tsx

@@ -46,7 +46,7 @@ export function Content({ select }: { select: (focus: Focus) => void }) {
           </Button>
         )}
       </div>
-      {channels.length === 0 && <div className={classes.none}>{state.strings.noContacts}</div>}
+      {channels.length === 0 && <div className={classes.none}>{state.strings.noTopics}</div>}
       {channels.length !== 0 && <div className={classes.channels}>{channels}</div>}
       {state.layout === 'large' && (
         <div className={classes.bar}>

app/client/web/src/profile/Profile.module.css

@@ -1,21 +1,21 @@
 .contact {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 8px;
-  padding-bottom: 4px;
   width: 100%;
+  height: 100%;
 
   .detail {
-    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
     flex-grow: 1;
     width: 100%;
+    overflow: scroll;
+    padding-left: 16px;
+    padding-right: 16px;
   }
 
   .header {
@@ -23,6 +23,11 @@
     flex-direction: row;
     align-items: center;
     width: 100%;
+    border-bottom: 1px solid var(--mantine-color-text-9);
+    padding-left: 16px;
+    padding-right: 16px;
+    height: 48px;
+    flex-shrink: 0;
   }
 
   .close {

app/client/web/src/profile/Profile.tsx

@@ -237,12 +237,12 @@ export function Profile({ params, close }: { params: ProfileParams; close?: () =
 
   return (
     <div className={classes.contact}>
-      <div className={classes.detail}>
       <div className={classes.header}>
         {close && <IconX size={28} className={classes.match} />}
         <Text className={classes.label}>{`${state.handle}${state.node ? '/' + state.node : ''}`}</Text>
         {close && <IconX size={30} className={classes.close} onClick={close} />}
       </div>
+      <div className={classes.detail}>
         <div className={classes.image}>
           <Image radius="md" src={state.imageUrl} />
         </div>

app/client/web/src/settings/Settings.module.css

@@ -85,13 +85,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 8px;
-  padding-bottom: 8px;
   gap: 2px;
+  height: 100%;
 
-  .header {
+  .headerLabel {
     font-size: 22px;
     text-align: center;
     text-wrap: nowrap;
@@ -100,6 +97,28 @@
     width: 100%;
   }
 
+  .header {
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 16px;
+    padding-right: 16px;
+    width: 100%;
+    height: 48px;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--mantine-color-text-7);
+  }
+
+  .detail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    overflow: scroll;
+    padding-left: 16px;
+    padding-right: 16px;
+    width: 100%;
+  }
+
   .image {
     position: relative;
     width: 90%;

app/client/web/src/settings/Settings.tsx

@@ -336,7 +336,10 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
     <>
       {state.profileSet && (
         <div className={classes.settings}>
-          <Text className={classes.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
+          <div className={classes.header}>
+            <Text className={classes.headerLabel}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
+          </div>
+          <div className={classes.detail}>
             <div className={classes.image}>
               {state.profile.imageSet && (
                 <div className={classes.imageSet}>
@@ -513,6 +516,7 @@ export function Settings({ showLogout }: { showLogout: boolean }) {
               </div>
             </div>
           </div>
+        </div>
       )}
       <Modal title={state.strings.changeLogin} opened={changeOpened} onClose={changeClose} overlayProps={{ backgroundOpacity: 0.55, blur: 3 }} centered>
         <div className={classes.change}>