feat: implemented setting page

src/layout/header.tsx

@@ -70,10 +70,9 @@ export const Header = () => {
                   </svg>
                   Write
                 </Link>
-
+                <Link
-                <a
+                  to={appRoutes.settingsProfile}
                   className={navStyles.NMTI_SecInside_Link}
-                  href='settings-profile.html'
                 >
                   <svg
                     xmlns='http://www.w3.org/2000/svg'
@@ -85,7 +84,7 @@ export const Header = () => {
                     <path d='M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z'></path>
                   </svg>
                   Settings
-                </a>
+                </Link>
                 <a id='loginNav' className={navStyles.NMTI_SecInside_Link}>
                   <img
                     className={navStyles.NMTI_SecInside_LinkImg}

src/pages/settings.tsx

@@ -0,0 +1,886 @@
+import { Link, useLocation } from 'react-router-dom'
+import { InputField } from '../components/Inputs'
+import { ProfileSection } from '../components/ProfileSection'
+import { appRoutes } from '../routes'
+import '../styles/feed.css'
+import '../styles/innerPage.css'
+import '../styles/popup.css'
+import '../styles/profile.css'
+import '../styles/settings.css'
+import '../styles/styles.css'
+import '../styles/write.css'
+
+export const SettingsPage = () => {
+  const location = useLocation()
+
+  return (
+    <div className='InnerBodyMain'>
+      <div className='ContainerMain'>
+        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
+          <div className='IBMSMSplitMain IBMSMSplitMainThree'>
+            <SettingTabs />
+            {location.pathname === appRoutes.settingsProfile && (
+              <ProfileSettings />
+            )}
+            {location.pathname === appRoutes.settingsRelays && (
+              <RelaySettings />
+            )}
+            {location.pathname === appRoutes.settingsPreferences && (
+              <PreferencesSetting />
+            )}
+            {location.pathname === appRoutes.settingsAdmin && <AdminSetting />}
+            <ProfileSection />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const SettingTabs = () => {
+  const location = useLocation()
+
+  return (
+    <div className='IBMSMSplitMainSmallSide'>
+      <div className='IBMSMSplitMainSmallSideSec'>
+        <div className='IBMSMSplitMainSmallSideSec'>
+          <h3 className='IBMSMSMSSS_Text'>Settings</h3>
+        </div>
+        <div className='IBMSMSMSSS_Buttons'>
+          <Link
+            className={`btn btnMain btnMainAltText btnMainClear ${
+              location.pathname === appRoutes.settingsProfile
+                ? 'btnMainClearActive'
+                : ''
+            }`}
+            role='button'
+            to={appRoutes.settingsProfile}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-32 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M224 256c70.7 0 128-57.31 128-128s-57.3-128-128-128C153.3 0 96 57.31 96 128S153.3 256 224 256zM274.7 304H173.3C77.61 304 0 381.6 0 477.3c0 19.14 15.52 34.67 34.66 34.67h378.7C432.5 512 448 496.5 448 477.3C448 381.6 370.4 304 274.7 304z'></path>
+            </svg>
+            Profile
+          </Link>
+          <Link
+            className={`btn btnMain btnMainAltText btnMainClear ${
+              location.pathname === appRoutes.settingsRelays
+                ? 'btnMainClearActive'
+                : ''
+            }`}
+            role='button'
+            to={appRoutes.settingsRelays}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z'></path>
+            </svg>
+            Relays
+          </Link>
+          <Link
+            className={`btn btnMain btnMainAltText btnMainClear ${
+              location.pathname === appRoutes.settingsPreferences
+                ? 'btnMainClearActive'
+                : ''
+            }`}
+            role='button'
+            to={appRoutes.settingsPreferences}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M0 416C0 398.3 14.33 384 32 384H86.66C99 355.7 127.2 336 160 336C192.8 336 220.1 355.7 233.3 384H480C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H233.3C220.1 476.3 192.8 496 160 496C127.2 496 99 476.3 86.66 448H32C14.33 448 0 433.7 0 416V416zM192 416C192 398.3 177.7 384 160 384C142.3 384 128 398.3 128 416C128 433.7 142.3 448 160 448C177.7 448 192 433.7 192 416zM352 176C384.8 176 412.1 195.7 425.3 224H480C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H425.3C412.1 316.3 384.8 336 352 336C319.2 336 291 316.3 278.7 288H32C14.33 288 0 273.7 0 256C0 238.3 14.33 224 32 224H278.7C291 195.7 319.2 176 352 176zM384 256C384 238.3 369.7 224 352 224C334.3 224 320 238.3 320 256C320 273.7 334.3 288 352 288C369.7 288 384 273.7 384 256zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H265.3C252.1 156.3 224.8 176 192 176C159.2 176 131 156.3 118.7 128H32C14.33 128 0 113.7 0 96C0 78.33 14.33 64 32 64H118.7C131 35.75 159.2 16 192 16C224.8 16 252.1 35.75 265.3 64H480zM160 96C160 113.7 174.3 128 192 128C209.7 128 224 113.7 224 96C224 78.33 209.7 64 192 64C174.3 64 160 78.33 160 96z'></path>
+            </svg>
+            Preference
+          </Link>
+          <Link
+            className={`btn btnMain btnMainAltText btnMainClear ${
+              location.pathname === appRoutes.settingsAdmin
+                ? 'btnMainClearActive'
+                : ''
+            }`}
+            role='button'
+            to={appRoutes.settingsAdmin}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 -32 576 576'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M560 448H512V113.5c0-27.25-21.5-49.5-48-49.5L352 64.01V128h96V512h112c8.875 0 16-7.125 16-15.1v-31.1C576 455.1 568.9 448 560 448zM280.3 1.007l-192 49.75C73.1 54.51 64 67.76 64 82.88V448H16c-8.875 0-16 7.125-16 15.1v31.1C0 504.9 7.125 512 16 512H320V33.13C320 11.63 300.5-4.243 280.3 1.007zM232 288c-13.25 0-24-14.37-24-31.1c0-17.62 10.75-31.1 24-31.1S256 238.4 256 256C256 273.6 245.3 288 232 288z'></path>
+            </svg>
+            Admin
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ProfileSettings = () => {
+  return (
+    <div className='IBMSMSplitMainFullSideFWMid'>
+      <div className='IBMSMSplitMainFullSideSec'>
+        <div className='IBMSMSMBSS_Profile'>
+          <div className='IBMSMSMBSS_ProfilePreview'>
+            <div className='IBMSMSMSSS_Author_Top_Left'>
+              <div
+                className='IBMSMSMSSS_Author_Top_Banner'
+                style={{
+                  background: `url('https://primal.b-cdn.net/media-cache?s=m&amp;a=1&amp;u=https%3A%2F%2Fm.primal.net%2FHerB.png') center / cover no-repeat`
+                }}
+              ></div>
+              <a
+                className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
+                href='profile.html'
+              >
+                <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
+                  <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
+                    <div className='IBMSMSMSSS_Author_Top_PPWrapper'>
+                      <div
+                        className='IBMSMSMSSS_Author_Top_PP'
+                        style={{
+                          background: `url('assets/img/media-cache%20(4).png') center / cover no-repeat`
+                        }}
+                      ></div>
+                    </div>
+                  </div>
+                  <div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
+                    <div className='IBMSMSMSSS_Author_TopWrapper'>
+                      <p className='IBMSMSMSSS_Author_Top_Name'>Freakoverse</p>
+                      <p className='IBMSMSMSSS_Author_Top_Handle'>
+                        freakoverse@degmods.com
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </a>
+              <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
+                <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
+                  <p
+                    id='SiteOwnerAddress-1'
+                    className='IBMSMSMSSS_Author_Top_Address'
+                  >
+                    npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r
+                  </p>
+                </div>
+                <div className='IBMSMSMSSS_Author_Top_IconWrapper'>
+                  <div
+                    id='copySiteOwnerAddress-1'
+                    className='IBMSMSMSSS_Author_Top_IconWrapped'
+                  >
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='0 0 512 512'
+                      width='1em'
+                      height='1em'
+                      fill='currentColor'
+                      className='IBMSMSMSSS_Author_Top_Icon'
+                    >
+                      <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
+                    </svg>
+                  </div>
+                  <div className='IBMSMSMSSS_Author_Top_IconWrapped IBMSMSMSSS_Author_Top_IconWrappedQR'>
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='-32 0 512 512'
+                      width='1em'
+                      height='1em'
+                      fill='currentColor'
+                      className='IBMSMSMSSS_Author_Top_Icon'
+                    >
+                      <path d='M144 32C170.5 32 192 53.49 192 80V176C192 202.5 170.5 224 144 224H48C21.49 224 0 202.5 0 176V80C0 53.49 21.49 32 48 32H144zM128 96H64V160H128V96zM144 288C170.5 288 192 309.5 192 336V432C192 458.5 170.5 480 144 480H48C21.49 480 0 458.5 0 432V336C0 309.5 21.49 288 48 288H144zM128 352H64V416H128V352zM256 80C256 53.49 277.5 32 304 32H400C426.5 32 448 53.49 448 80V176C448 202.5 426.5 224 400 224H304C277.5 224 256 202.5 256 176V80zM320 160H384V96H320V160zM352 448H384V480H352V448zM448 480H416V448H448V480zM416 288H448V416H352V384H320V480H256V288H352V320H416V288z'></path>
+                    </svg>
+                  </div>
+                  <a
+                    className='IBMSMSMSSS_Author_Top_IconWrapped'
+                    href='https://primal.net/p/npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
+                    target='_blank'
+                  >
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='-32 0 512 512'
+                      width='1em'
+                      height='1em'
+                      fill='currentColor'
+                      className='IBMSMSMSSS_Author_Top_Icon'
+                    >
+                      <path d='M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z'></path>
+                    </svg>
+                  </a>
+                </div>
+              </div>
+              <div className='IBMSMSMSSS_Author_Top_Details'>
+                <p className='IBMSMSMSSS_Author_Top_Bio'>
+                  I guess I'm one of those #vtubers . Having fun talking about
+                  general topics, vrchat/similar, and games. Also #indiedev
+                  #gamedev You can call me: Freak فْرِيكٌ フリク (still learning
+                  Nihongo). #envtuber #podcast #gaming #gamedev
+                </p>
+                <div
+                  id='OwnerFollowLogin-1'
+                  className='IBMSMSMSSS_Author_Top_NostrLinks'
+                  style={{ display: 'flex' }}
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div className='IBMSMSMBSS_ProfileEdit'>
+            <InputField label='Name' placeholder='' name='name' />
+            <InputField label='Bio' placeholder='' name='bio' type='textarea' />
+            <InputField
+              label='Profile picture URL'
+              placeholder=''
+              name='profilePicture'
+              inputMode='url'
+            />
+            <InputField
+              label='Banner picture URL'
+              placeholder=''
+              name='bannerPicture'
+              inputMode='url'
+            />
+            <InputField label='Nip-05 address' placeholder='' name='nip05' />
+          </div>
+          <div
+            className='IBMSMSMBSS_ProfileActions'
+            style={{ padding: 'unset', border: 'unset', justifyContent: 'end' }}
+          >
+            <button className='btn btnMain' type='button'>
+              Publish Changes
+            </button>
+          </div>
+          <div className='IBMSMSMBSS_ProfileActions'>
+            <button className='btn btnMain' type='button'>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='0 0 512 512'
+                width='1em'
+                height='1em'
+                fill='currentColor'
+              >
+                <path d='M160 416H96c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h64c17.67 0 32-14.33 32-32S177.7 32 160 32H96C42.98 32 0 74.98 0 128v256c0 53.02 42.98 96 96 96h64c17.67 0 32-14.33 32-32S177.7 416 160 416zM502.6 233.4l-128-128c-12.51-12.51-32.76-12.49-45.25 0c-12.5 12.5-12.5 32.75 0 45.25L402.8 224H192C174.3 224 160 238.3 160 256s14.31 32 32 32h210.8l-73.38 73.38c-12.5 12.5-12.5 32.75 0 45.25s32.75 12.5 45.25 0l128-128C515.1 266.1 515.1 245.9 502.6 233.4z'></path>
+              </svg>
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const RelaySettings = () => {
+  return (
+    <div className='IBMSMSplitMainFullSideFWMid'>
+      <div className='IBMSMSplitMainFullSideSec'>
+        <div className='relayList'>
+          <div className='inputLabelWrapperMain'>
+            <label className='form-label labelMain'>Your relays</label>
+          </div>
+          {usersRelays.map((relay, index) => (
+            <RelayListItem key={index} item={relay} isOwnRelay />
+          ))}
+        </div>
+      </div>
+
+      <div className='IBMSMSplitMainFullSideSec'>
+        <InputField
+          label='Add Relays'
+          placeholder='wss://some-relay.com'
+          type='text'
+          name='relay'
+        />
+
+        <button className='btn btnMain' type='button'>
+          Add
+        </button>
+      </div>
+
+      <div className='IBMSMSplitMainFullSideSec'>
+        <div className='inputLabelWrapperMain'>
+          <label className='form-label labelMain'>DEG Mods Relays</label>
+          <p className='labelDescriptionMain'>
+            We recommend adding one of our relays if you're planning to
+            frequently use DEG Mods, for a better experience.
+          </p>
+        </div>
+        <div className='relayList'>
+          {degmodsRelays.map((relay, index) => (
+            <RelayListItem key={index} item={relay} />
+          ))}
+        </div>
+      </div>
+
+      <div className='IBMSMSplitMainFullSideSec'>
+        <div className='inputLabelWrapperMain'>
+          <label className='form-label labelMain'>Recommended Relays</label>
+          <p className='labelDescriptionMain'>
+            Relays we recommend using as they support the same functionalities
+            that our relays provide.
+          </p>
+        </div>
+        <div className='relayList'>
+          {recommendRelays.map((relay, index) => (
+            <RelayListItem key={index} item={relay} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const RelayListItem = ({
+  item,
+  isOwnRelay
+}: {
+  item: RelayItem
+  isOwnRelay?: boolean
+}) => {
+  return (
+    <div className='relayListItem'>
+      <div className='relayListItemSec relayListItemSecPic'>
+        <div
+          className='relayListItemSecPicImg'
+          style={{
+            background: item.backgroundColor
+          }}
+        ></div>
+      </div>
+      <div className='relayListItemSec relayListItemSecDetails'>
+        <p className='relayListItemSecDetailsText'>{item.url}</p>
+        <div className='relayListItemSecDetailsExtra'>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='-64 0 512 512'
+            width='1em'
+            height='1em'
+            fill='currentColor'
+            data-bs-toggle='tooltip'
+            data-bss-tooltip
+            aria-label={item.readTitle}
+          >
+            <path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z'></path>
+          </svg>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 -32 576 576'
+            width='1em'
+            height='1em'
+            fill='currentColor'
+            data-bs-toggle='tooltip'
+            data-bss-tooltip
+            aria-label={item.writeTitle}
+          >
+            <path d='M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V299.6L289.3 394.3C281.1 402.5 275.3 412.8 272.5 424.1L257.4 484.2C255.1 493.6 255.7 503.2 258.8 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM564.1 250.1C579.8 265.7 579.8 291 564.1 306.7L534.7 336.1L463.8 265.1L493.2 235.7C508.8 220.1 534.1 220.1 549.8 235.7L564.1 250.1zM311.9 416.1L441.1 287.8L512.1 358.7L382.9 487.9C378.8 492 373.6 494.9 368 496.3L307.9 511.4C302.4 512.7 296.7 511.1 292.7 507.2C288.7 503.2 287.1 497.4 288.5 491.1L303.5 431.8C304.9 426.2 307.8 421.1 311.9 416.1V416.1z'></path>
+          </svg>
+          {item.subscribedTitle && (
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+              data-bs-toggle='tooltip'
+              data-bss-tooltip
+              aria-label={item.subscribedTitle}
+            >
+              <path d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zm-141.651-35.33c4.937-32.999-20.191-50.739-54.55-62.573l11.146-44.702-27.213-6.781-10.851 43.524c-7.154-1.783-14.502-3.464-21.803-5.13l10.929-43.81-27.198-6.781-11.153 44.686c-5.922-1.349-11.735-2.682-17.377-4.084l.031-.14-37.53-9.37-7.239 29.062s20.191 4.627 19.765 4.913c11.022 2.751 13.014 10.044 12.68 15.825l-12.696 50.925c.76.194 1.744.473 2.829.907-.907-.225-1.876-.473-2.876-.713l-17.796 71.338c-1.349 3.348-4.767 8.37-12.471 6.464.271.395-19.78-4.937-19.78-4.937l-13.51 31.147 35.414 8.827c6.588 1.651 13.045 3.379 19.4 5.006l-11.262 45.213 27.182 6.781 11.153-44.733a1038.209 1038.209 0 0 0 21.687 5.627l-11.115 44.523 27.213 6.781 11.262-45.128c46.404 8.781 81.299 5.239 95.986-36.727 11.836-33.79-.589-53.281-25.004-65.991 17.78-4.098 31.174-15.792 34.747-39.949zm-62.177 87.179c-8.41 33.79-65.308 15.523-83.755 10.943l14.944-59.899c18.446 4.603 77.6 13.717 68.811 48.956zm8.417-87.667c-7.673 30.736-55.031 15.12-70.393 11.292l13.548-54.327c15.363 3.828 64.836 10.973 56.845 43.035z'></path>
+            </svg>
+          )}
+        </div>
+      </div>
+      <div className='relayListItemSec relayListItemSecActions'>
+        {isOwnRelay && (
+          <div
+            className='dropstart dropdownMain'
+            style={{ position: 'absolute' }}
+          >
+            <button
+              className='btn btnMain'
+              aria-expanded='false'
+              data-bs-toggle='dropdown'
+              type='button'
+            >
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='-192 0 512 512'
+                width='1em'
+                height='1em'
+                fill='currentColor'
+              >
+                <path d='M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z'></path>
+              </svg>
+            </button>
+            <div
+              className='dropdown-menu dropdownMainMenu'
+              style={{ position: 'absolute' }}
+            >
+              <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                Remove
+              </a>
+              <a className='dropdown-item dropdownMainMenuItem' href='#'>
+                Details
+              </a>
+            </div>
+          </div>
+        )}
+        {!isOwnRelay && (
+          <button className='btn btnMain' type='button'>
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-32 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+            </svg>
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// todo: use components from Input.tsx
+const PreferencesSetting = () => {
+  return (
+    <div className='IBMSMSplitMainFullSideFWMid'>
+      <div className='IBMSMSplitMainFullSideSec'>
+        <div className='IBMSMSMBS_Write'>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Notifications</p>
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                When someone follows you
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='notificationsSettings'
+                checked
+              />
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                When someone mentions you
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='notificationsSettings'
+                checked
+              />
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                When someone sends a reaction to your post
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='notificationsSettings'
+                checked
+              />
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                When someone Tips/Zaps you
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='notificationsSettings'
+                checked
+              />
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                When someone re-posts your post
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='notificationsSettings'
+                checked
+              />
+            </div>
+          </div>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Not Safe For Work (NSFW)</p>
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                Show all NSFW posts
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='NSFWPreference'
+              />
+            </div>
+          </div>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Web of Trust (WoT) level</p>
+            </div>
+            <p className='labelDescriptionMain'>
+              This affects what posts you see, reactions, DMs, and
+              notifications. Learn more:&nbsp;Link
+            </p>
+            <div className='inputLabelWrapperMainSliderWrapper'>
+              <input
+                className='form-range inputRangeMain inputRangeMainZap'
+                type='range'
+                max='100'
+                min='0'
+                value='10'
+                step='1'
+                required
+                name='WoTLevel'
+              />
+              <p className='ZapSplitUserBoxRangeText'>10</p>
+            </div>
+            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+              <label className='form-label labelMain'>
+                Consider those who zap/tip, regardless of WoT level
+              </label>
+              <input
+                type='checkbox'
+                className='CheckboxMain'
+                name='WoTZap'
+                checked
+              />
+            </div>
+          </div>
+          <div className='IBMSMSMBS_WriteAction'>
+            <button className='btn btnMain' type='button'>
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// todo: use components from Input.tsx
+const AdminSetting = () => {
+  return (
+    <div className='IBMSMSplitMainFullSideFWMid'>
+      <div className='IBMSMSplitMainFullSideSec'>
+        <div className='IBMSMSMBS_Write'>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Slider Featured Mods</p>
+              <button className='btn btnMain btnMainAdd' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='Note ID'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='Note ID'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Featured Games</p>
+              <button className='btn btnMain btnMainAdd' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='Game name'
+                value='Witcher 3: Wild Hunt'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='Game name'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Featured Mods</p>
+              <button className='btn btnMain btnMainAdd' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='Note ID'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='Note ID'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className='inputLabelWrapperMain'>
+            <div className='labelWrapperMain'>
+              <p className='labelMain'>Blog writers</p>
+              <button className='btn btnMain btnMainAdd' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='nPubs'
+                value='npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+            <div className='inputWrapperMain'>
+              <input
+                type='text'
+                className='inputMain'
+                inputMode='url'
+                placeholder='nPubs'
+              />
+              <button className='btn btnMain btnMainRemove' type='button'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-32 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                >
+                  <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className='IBMSMSMBS_WriteAction'>
+            <button className='btn btnMain' type='button'>
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface RelayItem {
+  url: string
+  backgroundColor: string
+  readTitle: string
+  writeTitle: string
+  subscribedTitle: string
+}
+
+const usersRelays: RelayItem[] = [
+  {
+    url: 'wss://relay.wibblywobbly.com',
+    backgroundColor: '#cd4d45',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: ''
+  },
+  {
+    url: 'wss://relay.wibblywobbly.com',
+    backgroundColor: '#60ae60',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: 'Paid (Subscribed)'
+  },
+  {
+    url: 'wss://relay.degmods.com',
+    backgroundColor: '#60ae60',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: ''
+  }
+]
+
+const degmodsRelays: RelayItem[] = [
+  {
+    url: 'wss://relay1.degmods.com',
+    backgroundColor: '#60ae60',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: ''
+  },
+  {
+    url: 'wss://relay2.degmods.com',
+    backgroundColor: '#60ae60',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: ''
+  }
+]
+
+const recommendRelays: RelayItem[] = [
+  {
+    url: 'wss://relay1.degmods.com',
+    backgroundColor: '#60ae60',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: ''
+  },
+  {
+    url: 'wss://relay2.degmods.com',
+    backgroundColor: '#60ae60',
+    readTitle: 'Read',
+    writeTitle: 'Write',
+    subscribedTitle: ''
+  }
+]

src/routes/index.tsx

@@ -3,6 +3,7 @@ import { BlogsPage } from '../pages/blogs'
 import { GamesPage } from '../pages/games'
 import { HomePage } from '../pages/home'
 import { ModsPage } from '../pages/mods'
+import { SettingsPage } from '../pages/settings'
 import { SubmitModPage } from '../pages/submitMod'
 import { WritePage } from '../pages/write'
 
@@ -14,7 +15,11 @@ export const appRoutes = {
   about: '/about',
   blog: '/blog',
   submitMod: '/submit-mod',
-  write: '/write'
+  write: '/write',
+  settingsProfile: '/settings-profile',
+  settingsRelays: '/settings-relays',
+  settingsPreferences: '/settings-preferences',
+  settingsAdmin: '/settings-admin'
 }
 
 export const routes = [
@@ -49,5 +54,21 @@ export const routes = [
   {
     path: appRoutes.write,
     element: <WritePage />
+  },
+  {
+    path: appRoutes.settingsProfile,
+    element: <SettingsPage />
+  },
+  {
+    path: appRoutes.settingsRelays,
+    element: <SettingsPage />
+  },
+  {
+    path: appRoutes.settingsPreferences,
+    element: <SettingsPage />
+  },
+  {
+    path: appRoutes.settingsAdmin,
+    element: <SettingsPage />
   }
 ]

src/styles/feed.css

@@ -0,0 +1,121 @@
+.IBMSMSplitMainFullSideFeedWrapper {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+  grid-gap: 25px;
+}
+
+@media (max-width: 992px) {
+  .IBMSMSplitMainFullSideFeedWrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+.IBMSMSplitMainFullSideFWSide {
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 11px;
+}
+
+.IBMSMSplitMainFullSideFWMid {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+  position: relative;
+}
+
+@media (max-width: 992px) {
+  .IBMSMSplitMainFullSideFWMid {
+    grid-row-start: 1;
+  }
+}
+
+.IBMSMSplitMainFullSideFWSideInside {
+  width: 100%;
+  position: sticky;
+  top: 25px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+.IBMSMSplitMainFullSideFWSideInsideActions {
+}
+
+.feedPostsPost {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  /*padding: 10px;*/
+  /*background: rgba(255,255,255,0.1);*/
+  /*border-radius: 10px;*/
+  /*border: solid 1px rgba(255,255,255,0.1);*/
+}
+
+.feedPostsPostInside {
+  width: 100%;
+  grid-gap: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  overflow: hidden;
+  border: solid 1px rgba(255,255,255,0.1);
+  position: relative;
+  background: #232323;
+  margin: 0 0 20px 0;
+}
+
+.inputMain.feedPostsPostInsideInput {
+  transition: unset;
+  border: unset;
+  border-radius: 0;
+  height: 85px;
+  padding: 10px 15px;
+  max-height: 100%;
+  min-height: 85px;
+  /*resize: unset;*/
+  /*overflow-y: hidden;*/
+  background: unset;
+  box-shadow: unset;
+}
+
+.inputMain.feedPostsPostInsideInput:focus {
+  outline: unset;
+  border: unset;
+}
+
+.feedPostsPostInsideAction {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px 10px 10px 15px;
+}
+
+.feedPostsPostInsideInputWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  background: rgba(0,0,0,0.1);
+  border-bottom: solid 1px rgba(255,255,255,0.1);
+  grid-gap: 0;
+}
+
+.feedPostsPostInsidePP {
+  height: 100%;
+  padding: 15px 0px 10px 15px;
+}
+
+.IBMSMSMBSSCL_CommentNoteReplies {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+  border-top: solid 1px rgba(255,255,255,0.1);
+  padding-top: 15px;
+}
+

src/styles/popup.css

@@ -0,0 +1,393 @@
+.popUpMain {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  background: rgba(0,0,0,0.5);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  padding: 5% 0%;
+  overflow: auto;
+}
+
+.popUpMainCard {
+  width: 100%;
+  max-width: 1000px;
+  border-radius: 15px;
+  box-shadow: 0 0 16px 0 rgba(0,0,0,0.5);
+  background: #232323;
+}
+
+.popUpMainCard.popUpMainCardQR {
+  max-width: 500px;
+}
+
+.popUpMainCardWrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.popUpMainCardTop {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-items: center;
+  padding: 15px 25px 10px 25px;
+  border-bottom: solid 1px rgba(255,255,255,0.05);
+}
+
+.popUpMainCardBottom {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  padding: 25px;
+  overflow: auto;
+  max-height: 70vh;
+}
+
+.popUpMainCardBottomQR {
+  width: 100%;
+  max-width: 250px;
+}
+
+.popUpMainCardTopClose {
+  transition: ease 0.4s;
+  width: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: end;
+  color: rgba(255,255,255,0.25);
+  padding: 10px;
+  border-radius: 10px;
+  font-size: 20px;
+  position: relative;
+  cursor: pointer;
+  border: solid 1px rgba(255,255,255,0);
+}
+
+.popUpMainCardTopClose:hover {
+  transition: ease 0.4s;
+  color: rgba(255,255,255,0.75);
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  border: solid 1px rgba(255,255,255,0.1);
+}
+
+.popUpMainCardTopInfo {
+  width: 100%;
+  color: rgba(255,255,255,0.75);
+}
+
+.popUpMainCardTopClose:hover::before {
+  transition: ease 0.4s;
+  opacity: 1;
+}
+
+.popUpMainCardTopClose::before {
+  transition: ease 0.4s;
+  opacity: 0;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  background: linear-gradient(to top right, #262626, #292929, #262626);
+  /*z-index: -1;*/
+  border-radius: 10px;
+}
+
+.pUMCB_PrimeComment {
+  width: 100%;
+  padding: 0 0 15px 0;
+  margin: 0 0 15px 0;
+  /*border-bottom: solid 1px rgba(255,255,255,0.1);*/
+}
+
+.pUMCB_RepliesToPrime {
+  width: 100%;
+  padding: 25px;
+  grid-gap: 25px;
+  display: flex;
+  flex-direction: column;
+  border: solid 1px rgba(255,255,255,0.1);
+  border-radius: 10px;
+}
+
+.pUMCB_CommentToPrime {
+  width: 100%;
+  margin: 0 0 25px 0;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.pUMCB_Zaps {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  padding: 25px;
+}
+
+.pUMCB_ZapsInside {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  grid-gap: 15px;
+}
+
+.btnMain.pUMCB_ZapsInsideElementBtn {
+  width: 100%;
+  background: rgba(255,255,255,0.05);
+}
+
+.btnMain.pUMCB_ZapsInsideElementBtn:hover {
+  transition: ease 0.4s;
+  color: yellow;
+  background: rgba(255,255,255,0.1);
+}
+
+.pUMCB_ZapsInsideAmount {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.pUMCB_ZapsInsideAmountOptions {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  text-align: center;
+}
+
+.btnMain.pUMCB_ZapsInsideAmountOptionsBtn {
+  transition: ease 0.4s;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  grid-gap: 10px;
+  color: rgba(255,255,255,0.5);
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 10px;
+  background: unset;
+}
+
+.btnMain.pUMCB_ZapsInsideAmountOptionsBtn:hover {
+  transition: ease 0.4s;
+  background: rgba(255,255,255,0.1);
+  color: yellow;
+}
+
+.dividerPopup {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 25px;
+  justify-content: center;
+  align-items: center;
+  color: rgba(255,255,255,0.5);
+}
+
+.dividerPopupLine {
+  height: 1px;
+  background: rgba(255,255,255,0.1);
+  flex-grow: 1;
+}
+
+.btnMain.btnMainPopup {
+  width: 100%;
+}
+
+.btnMain.pUMCB_Report:hover {
+  color: tomato;
+}
+
+.popUpMain.popUpMainGallery {
+}
+
+.popUpMainGalleryInside {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 25px;
+  height: 100%;
+  /*padding: 25px;*/
+  align-items: center;
+}
+
+.popUpMainGalleryInside {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+  height: 100%;
+  /*padding: 25px;*/
+  align-items: center;
+}
+
+.popUpMainGalleryInsideMid {
+  /*flex-grow: 1;*/
+  background: rgba(0,0,0,0.5);
+  /*height: 100%;*/
+  padding-top: 100% * (16 / 9);
+  width: 100%;
+}
+
+.btnMain.popUpMainGalleryInsideBtn {
+  background: #232323;
+  height: 100%;
+  max-height: 250px;
+  font-size: 24px;
+  flex-grow: 1;
+  max-width: 300px;
+}
+
+.popUpMainGalleryTop {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+}
+
+.popUpMainGalleryWrapper {
+  width: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+.btnMain.popUpMainGalleryTopBtn {
+  padding: 15px;
+  font-size: 24px;
+  background: #232323;
+}
+
+.popUpMainGalleryInsideControlls {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 15px;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.ZapSplitUserBox {
+  border-radius: 10px;
+  border: solid 1px rgba(255,255,255,0.1);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.ZapSplitUserBoxUser {
+  transition: ease 0.4s;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 15px;
+  width: 100%;
+  border-radius: 10px;
+  text-decoration: unset;
+  color: rgba(255,255,255,0.65);
+}
+
+.ZapSplitUserBoxUserPic {
+  border-radius: 10px;
+  height: 60px;
+  width: 60px;
+  min-height: 60px;
+  min-width: 60px;
+}
+
+.ZapSplitUserBoxUserDetails {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0;
+}
+
+.ZapSplitUserBoxUserDetailsName {
+}
+
+.ZapSplitUserBoxUserDetailsHandle {
+}
+
+.ZapSplitUserBoxText {
+  color: rgba(255,255,255,0.5);
+}
+
+.ZapSplitUserBoxRange {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+}
+
+.ZapSplitUserBoxRangeText {
+  white-space: nowrap;
+  color: rgba(255,255,255,0.5);
+}
+
+.keyGenerationTable {
+  width: 100%;
+  border-radius: 10px;
+  background: rgba(255,255,255,0.05);
+  display: flex;
+  flex-direction: column;
+  border: solid 1px rgba(255,255,255,0.1);
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.keyGenerationTableRow {
+  display: grid;
+  grid-template-columns: 30% 55% 15%;
+  grid-gap: 0;
+}
+
+.keyGenerationTableRowCol {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.keyGenerationTableRowColText {
+  color: rgba(255,255,255,0.75);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.keyGenerationTableRowColText.keyGenerationTableRowColTextStart {
+  font-weight: bold;
+}
+
+.keyGenerationTableRowCol.keyGenerationTableRowColStart {
+  background: rgba(255,255,255,0.1);
+}
+

src/styles/profile.css

@@ -0,0 +1,27 @@
+.IBMSMSMBSS_Profile {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 25px;
+}
+
+.IBMSMSMBSS_ProfileEdit {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.IBMSMSMBSS_ProfilePreview {
+  display: flex;
+  flex-direction: column;
+}
+
+.IBMSMSMBSS_ProfileActions {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  grid-gap: 10px;
+  padding: 10px 0 0 0;
+  border-top: solid 1px rgba(255,255,255,0.1);
+}
+

src/styles/settings.css

@@ -0,0 +1,65 @@
+.relayList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.relayListItem {
+  width: 100%;
+  border-radius: 10px;
+  background: rgba(255,255,255,0.1);
+  border: solid 1px rgba(255,255,255,0.1);
+  box-shadow: 0 0 8px 0 rgb(0,0,0,0.1);
+  display: flex;
+  flex-direction: row;
+  grid-gap: 0px;
+  overflow: hidden;
+}
+
+.relayListItemSec {
+  padding: 5px 15px;
+}
+
+.relayListItemSec.relayListItemSecPic {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255,255,255,0.1);
+}
+
+.relayListItemSecPicImg {
+  width: 25px;
+  height: 25px;
+  background: rgba(0,0,0,0.1);
+  border-radius: 5px;
+}
+
+.relayListItemSec.relayListItemSecDetails {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.relayListItemSec.relayListItemSecActions {
+  width: 75px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.relayListItemSecDetailsText {
+}
+
+.relayListItemSecDetailsExtra {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  grid-gap: 10px;
+  color: rgba(255,255,255,0.5);
+}
+