fix: configs & home style

config.sample.json

@@ -1,19 +1,20 @@
 {
     "default_server_config": {
         "m.homeserver": {
-            "base_url": "https://matrix-client.matrix.org",
-            "server_name": "matrix.org"
+            "base_url": "https://matrix.superhero.com",
+            "server_name": "superhero.com"
         },
         "m.identity_server": {
             "base_url": "https://vector.im"
         }
     },
-    "bots_backend_url": "https://http://matrix.superhero.com/wallet",
+    "bots_backend_url": "https://matrix.superhero.com/walletbot",
+    "permalink_prefix": "https://chat.superhero.com",
     "disable_custom_urls": false,
     "disable_guests": false,
     "disable_login_language_selector": false,
     "disable_3pid_login": false,
-    "brand": "Element",
+    "brand": "Superhero",
     "integrations_ui_url": "https://scalar.vector.im/",
     "integrations_rest_url": "https://scalar.vector.im/api",
     "integrations_widgets_urls": [
@@ -47,5 +48,6 @@
         "brand": "Element Call"
     },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
-    "community_bot_user_id": "@communitybot:superhero.com"
+    "community_bot_user_id": "@communitybot:superhero.com",
+    "wallet_bot_user_id": "@walletbot:superhero.com"
 }

res/css/superhero/custom.css

@@ -105,7 +105,7 @@ h2 .sh_VerifiedIcon {
 
 .mx_AccessibleButton.mx_LegacyRoomHeader_button.mx_AccessibleButton_disabled {
     display: none;
-  }
+}
 
 .cpd-theme-dark .mx_SpacePanel .mx_AccessibleButton.mx_SpacePanel_toggleCollapse {
     background-color: white !important;
@@ -221,7 +221,7 @@ h2 .sh_VerifiedIcon {
     --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
     --cpd-color-pink-1200: #c81fb7 !important;
     --cpd-color-pink-300: #544352 !important;
-    --cpd-color-fuchsia-1200: #D538EE !important;
+    --cpd-color-fuchsia-1200: #d538ee !important;
     --cpd-color-fuchsia-300: #52424f !important;
     --cpd-color-purple-1200: #9a30fd !important;
     --cpd-color-purple-300: #443f4c !important;
@@ -269,22 +269,35 @@ h2 .sh_VerifiedIcon {
 }
 
 .mx_HomePage_title svg {
-    heigh: 44px;
+    height: 44px;
     width: 173.99px;
     margin-right: 8px;
 }
 
+.mx_HomePage_default_wrapper .chat_screen_shot {
+    max-width: 70%;
+}
+
 .mx_HomePage_default_buttons_title {
     font-size: 30px;
 }
+
 .cpd-theme-dark .mx_HomePage_default_buttons_title {
-    opacity: 0.7;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.cpd-theme-dark .mx_HomePage_default_buttons_title span {
+    color: rgba(255, 255, 255, 1);
 }
 
 .mx_HomePage_default .mx_HomePage_default_buttons {
     margin: 10px auto 0 !important;
 }
 
+.cpd-theme-dark .mx_HomePage_default .mx_HomePage_default_buttons.browsers .mx_HomePage_button_custom {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
 .mx_HomePage_default .mx_HomePage_default_buttons .mx_AccessibleButton.mx_HomePage_button_custom {
     width: auto !important;
     min-height: auto !important;

src/components/structures/HomePage.tsx

@@ -34,7 +34,7 @@ interface IProps {
 
 const HomePage: React.FC<IProps> = () => {
     const cli = useMatrixClientContext();
-    const config = SdkConfig.get();
+    const config: any = SdkConfig.get();
     const pageUrl = getHomePageUrl(config, cli);
 
     if (pageUrl) {
@@ -44,7 +44,7 @@ const HomePage: React.FC<IProps> = () => {
     return (
         <AutoHideScrollbar className="mx_HomePage mx_HomePage_default" element="main">
             <div className="mx_HomePage_default_wrapper">
-                <ChatScreenShot />
+                <ChatScreenShot className="chat_screen_shot" />
                 <div className="mx_HomePage_title">
                     <SuperheroLogo />
                     <div>is so much better with our Wallet</div>
@@ -52,7 +52,7 @@ const HomePage: React.FC<IProps> = () => {
                 <div className="mx_HomePage_default_buttons_title">
                     <span style={{ fontWeight: "bold" }}>1. </span>Download extension for your browser
                 </div>
-                <div className="mx_HomePage_default_buttons">
+                <div className="mx_HomePage_default_buttons browsers">
                     <AccessibleButton
                         onClick={(): void => {
                             window.open("https://addons.mozilla.org/en-US/firefox/addon/superhero-wallet/", "_blank");
@@ -81,7 +81,7 @@ const HomePage: React.FC<IProps> = () => {
                 <div className="mx_HomePage_default_buttons">
                     <AccessibleButton
                         onClick={(): void => {
-                            startDmOnFirstMessage(cli, [new DirectoryMember({ user_id: "@walletbot:superhero.com" })]);
+                            startDmOnFirstMessage(cli, [new DirectoryMember({ user_id: config.wallet_bot_user_id })]);
                         }}
                         className="mx_HomePage_button_custom"
                     >

src/context/SuperheroProvider.tsx

@@ -67,19 +67,10 @@ export const SuperheroProvider = ({ children, config }: any): any => {
     }
 
     function loadVerifiedBots(): void {
-        if (config.bots_backend_url) {
-            fetch(`${config.bots_backend_url}/ui/get-verified-bots`, {
-                method: "POST",
-            })
-                .then((res) => res.json())
-                .then(setVerifiedBots)
-                .catch(() => {
-                    setVerifiedBots({
-                        "@walletbot:superhero.chat": "true",
-                        "@communitybot:superhero.chat": "true",
-                    });
-                });
-        }
+        setVerifiedBots({
+            [config.community_bot_user_id]: "true",
+            [config.wallet_bot_user_id]: "true",
+        });
     }
 
     useEffect(() => {