718 configurable image (#726)

* configured image & border radius of widget

* new signin image added

* Fixed responsiveness of Signi page

* Fixed responsiveness of Sign In page

Author: Bhupesh-mfsi

packages/messenger-demo/src/App.tsx

@@ -13,6 +13,7 @@ function App() {
         hideFunction: undefined, // OPTINAL PARAMETER : 'attachments,edit,delete' or undefined
         showContacts: true, // true for all contacts / false for default contact
         theme: undefined, // OPTINAL PARAMETER : undefined/themeColors
+        signInImage: undefined, // OPTINAL PARAMETER : string URL of image
     };
 
     return (

packages/messenger-widget/src/assets/base64/home-image.ts

@@ -149,16 +149,17 @@ function DM3(props: Dm3Props) {
     }, []);
 
     return (
-        <div id="data-rk-child" className="border-radius-8 h-100">
+        <div id="data-rk-child" className="h-100">
             <Storage />
             {!isLoggedIn ? (
                 <SignIn
                     hideStorageSelection={props.config.hideStorageSelection}
                     defaultStorageLocation={props.config.defaultStorageLocation}
                     miniSignIn={props.config.miniSignIn}
+                    signInImage={props.config.signInImage as string}
                 />
             ) : (
-                <div className="h-100 rounded background-container">
+                <div className="h-100 background-container">
                     <Dashboard getContacts={getContacts} dm3Props={props} />
                 </div>
             )}

packages/messenger-widget/src/components/DM3/DM3.tsx

@@ -8,7 +8,6 @@
 
 .profile-name-container {
     padding: 0.5rem;
-    border-top-right-radius: 8px;
 }
 
 .default-profile-pic {

packages/messenger-widget/src/components/RightHeader/RightHeader.css

@@ -1,11 +1,8 @@
 .home-image-container {
-    border-top-left-radius: 20px;
-    border-bottom-left-radius: 20px;
-}
-
-.signin-container {
-    border-top-right-radius: 20px;
-    border-bottom-right-radius: 20px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100%;
 }
 
 .content-data-container {
@@ -33,14 +30,9 @@
     margin-bottom: 0;
 }
 
-.home-image {
-    border-radius: 20px;
-    height: 100%;
-}
-
 .sign-in-logo {
-    height: 4rem !important;
-    width: fit-content !important;
+    height: auto !important;
+    width: 100% !important;
     fill: var(--text-primary-color) !important;
 }
 
@@ -95,3 +87,15 @@
         margin-top: 1rem !important;
     }
 }
+
+@media only screen and (max-height: 700px) {
+    .content-data {
+        margin-top: 1rem !important;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .home-image-container {
+        height: 0% !important;
+    }
+}

packages/messenger-widget/src/components/SignIn/SignIn.css

@@ -3,14 +3,14 @@
 import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
 import { useContext } from 'react';
 import { useAccount } from 'wagmi';
-import { homeImage } from '../../assets/base64/home-image';
 import { AuthContext } from '../../context/AuthContext';
 import { SignInProps } from '../../interfaces/web3';
 import { ButtonState } from '../../utils/enum-type-utils';
 import { LoginButton } from './LoginButton';
 import './SignIn.css';
 import { changeSignInButtonStyle } from './bl';
 import DM3Logo from './DM3Logo';
+import { signInImage } from '../../assets/base64/home-image';
 
 export function SignIn(props: SignInProps) {
     const { address, isConnecting, isDisconnected, isConnected } = useAccount();
@@ -41,15 +41,17 @@ export function SignIn(props: SignInProps) {
     return (
         <>
             <div className="row m-0 p-0 h-100">
-                <div className="h-100 col-lg-7 col-md-7 col-sm-12 p-0 home-image-container background-container">
-                    <img
-                        src={homeImage}
-                        className="img-fluid home-image w-100"
-                    />
-                </div>
+                <div
+                    style={{
+                        backgroundImage: `url(${
+                            props.signInImage ?? signInImage
+                        })`,
+                    }}
+                    className="col-lg-7 col-md-7 col-sm-0 p-0 home-image-container background-container"
+                ></div>
                 <div
                     className="h-100 col-lg-5 col-md-5 col-sm-12 p-0 d-flex flex-column 
-                justify-content-center signin-container background-container"
+                justify-content-center background-container"
                 >
                     <div className="d-flex justify-content-end rainbow-connect-btn">
                         {isConnected ? (

packages/messenger-widget/src/components/SignIn/SignIn.tsx

@@ -18,6 +18,7 @@ export interface Config {
     ethereumProvider: string;
     walletConnectProjectId: string;
     hideFunction?: string;
+    signInImage?: string;
 }
 
 export interface Dm3Props {

packages/messenger-widget/src/interfaces/config.ts

@@ -20,4 +20,5 @@ export interface SignInProps {
     hideStorageSelection: boolean;
     miniSignIn: boolean;
     defaultStorageLocation: StorageLocation | undefined;
+    signInImage: string;
 }

packages/messenger-widget/src/interfaces/web3.ts

@@ -1,5 +1,6 @@
 import { StorageLocation } from '@dm3-org/dm3-lib-storage';
 import { Config } from '../interfaces/config';
+import { signInImage } from '../assets/base64/home-image';
 
 // The default configuration of the app
 const DefaultConfig: Config = {
@@ -19,6 +20,7 @@ const DefaultConfig: Config = {
     ethereumProvider: '' as string,
     walletConnectProjectId: '' as string,
     hideFunction: '',
+    signInImage: signInImage,
 };
 
 export function getConfig(overwrite: Partial<Config>): Config {

packages/messenger-widget/src/utils/config-utils.ts

@@ -1,7 +1,7 @@
 .chat-screen-container {
     display: flex;
     flex-direction: column;
-    border-radius: 0px 8px 8px 0px;
+    border-radius: 0px !important;
 }
 
 .right-view-outer-container {

packages/messenger-widget/src/views/RightView/RightView.css

@@ -15,7 +15,7 @@ export default function RightView(props: HideFunctionProps) {
 
     return (
         <>
-            <div className="col-12 p-0 h-100 border-radius-8 background-chat chat-screen-container">
+            <div className="col-12 p-0 h-100 background-chat chat-screen-container">
                 <RightHeader showContacts={props.showContacts} />
                 {state.uiView.selectedRightView ===
                     RightViewSelected.Default && (