From 40ed22d73634ea25f240a7493986b62d87fe5f48 Mon Sep 17 00:00:00 2001 From: daniyal Date: Fri, 12 Jul 2024 18:55:42 +0500 Subject: [PATCH] feat: implemented setting page --- src/layout/header.tsx | 7 +- src/pages/settings.tsx | 886 ++++++++++++++++++++++++++++++++++++++++ src/routes/index.tsx | 23 +- src/styles/feed.css | 121 ++++++ src/styles/popup.css | 393 ++++++++++++++++++ src/styles/profile.css | 27 ++ src/styles/settings.css | 65 +++ 7 files changed, 1517 insertions(+), 5 deletions(-) create mode 100644 src/pages/settings.tsx create mode 100644 src/styles/feed.css create mode 100644 src/styles/popup.css create mode 100644 src/styles/profile.css create mode 100644 src/styles/settings.css diff --git a/src/layout/header.tsx b/src/layout/header.tsx index 826bf2f..f4e93d3 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -70,10 +70,9 @@ export const Header = () => { Write - - { Settings - + { + const location = useLocation() + + return ( +
+
+
+
+ + {location.pathname === appRoutes.settingsProfile && ( + + )} + {location.pathname === appRoutes.settingsRelays && ( + + )} + {location.pathname === appRoutes.settingsPreferences && ( + + )} + {location.pathname === appRoutes.settingsAdmin && } + +
+
+
+
+ ) +} + +const SettingTabs = () => { + const location = useLocation() + + return ( +
+
+
+

Settings

+
+
+ + + + + Profile + + + + + + Relays + + + + + + Preference + + + + + + Admin + +
+
+
+ ) +} + +const ProfileSettings = () => { + return ( +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+

Freakoverse

+

+ freakoverse@degmods.com +

+
+
+
+ +
+
+

+ npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r +

+
+
+
+ + + +
+
+ + + +
+ + + + + +
+
+
+

+ 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 +

+
+
+
+
+
+ + + + + +
+
+ +
+
+ +
+
+
+
+ ) +} + +const RelaySettings = () => { + return ( +
+
+
+
+ +
+ {usersRelays.map((relay, index) => ( + + ))} +
+
+ +
+ + + +
+ +
+
+ +

+ We recommend adding one of our relays if you're planning to + frequently use DEG Mods, for a better experience. +

+
+
+ {degmodsRelays.map((relay, index) => ( + + ))} +
+
+ +
+
+ +

+ Relays we recommend using as they support the same functionalities + that our relays provide. +

+
+
+ {recommendRelays.map((relay, index) => ( + + ))} +
+
+
+ ) +} + +const RelayListItem = ({ + item, + isOwnRelay +}: { + item: RelayItem + isOwnRelay?: boolean +}) => { + return ( +
+
+
+
+
+

{item.url}

+
+ + + + + + + {item.subscribedTitle && ( + + + + )} +
+
+
+ {isOwnRelay && ( +
+ +
+ + Remove + + + Details + +
+
+ )} + {!isOwnRelay && ( + + )} +
+
+ ) +} + +// todo: use components from Input.tsx +const PreferencesSetting = () => { + return ( +
+
+
+
+
+

Notifications

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Not Safe For Work (NSFW)

+
+
+ + +
+
+
+
+

Web of Trust (WoT) level

+
+

+ This affects what posts you see, reactions, DMs, and + notifications. Learn more: Link +

+
+ +

10

+
+
+ + +
+
+
+ +
+
+
+
+ ) +} + +// todo: use components from Input.tsx +const AdminSetting = () => { + return ( +
+
+
+
+
+

Slider Featured Mods

+ +
+
+ + +
+
+ + +
+
+
+
+

Featured Games

+ +
+
+ + +
+
+ + +
+
+
+
+

Featured Mods

+ +
+
+ + +
+
+ + +
+
+
+
+

Blog writers

+ +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+ ) +} + +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: '' + } +] diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 48c7128..9892824 100644 --- a/src/routes/index.tsx +++ b/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: + }, + { + path: appRoutes.settingsProfile, + element: + }, + { + path: appRoutes.settingsRelays, + element: + }, + { + path: appRoutes.settingsPreferences, + element: + }, + { + path: appRoutes.settingsAdmin, + element: } ] diff --git a/src/styles/feed.css b/src/styles/feed.css new file mode 100644 index 0000000..4ec6549 --- /dev/null +++ b/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; +} + diff --git a/src/styles/popup.css b/src/styles/popup.css new file mode 100644 index 0000000..2dbb62e --- /dev/null +++ b/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); +} + diff --git a/src/styles/profile.css b/src/styles/profile.css new file mode 100644 index 0000000..c72d15a --- /dev/null +++ b/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); +} + diff --git a/src/styles/settings.css b/src/styles/settings.css new file mode 100644 index 0000000..6a943a8 --- /dev/null +++ b/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); +} +