Skip to content

Commit

Permalink
format, optimizations
Browse files Browse the repository at this point in the history
  • Loading branch information
steffenkux committed Nov 29, 2023
1 parent f82e1da commit 7b2d312
Show file tree
Hide file tree
Showing 9 changed files with 78 additions and 64 deletions.
4 changes: 2 additions & 2 deletions packages/messenger-web/src/App.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
body {
background-color: #000000; /* Ersetzen Sie #yourColor durch die gewünschte Farbe */
background-color: #000000;
overflow: hidden;
}
}
17 changes: 9 additions & 8 deletions packages/messenger-web/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
// Import CSS and JS from Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// Import the global CSS file
import './App.css';

// Import the components
import Background from './Background';
import Dm3Widget from './Dm3Widget';
import Footer from './Footer';
import Header from './Header';



// The main component of the application
function App() {


// The components are rendered in the order they should appear
return (
<div className="App">
<Header />
<Background />
<Dm3Widget />
<Header />
<Footer />

<Dm3Widget />
</div>
);
}

export default App;
// Export the App component as the default export
export default App;
24 changes: 13 additions & 11 deletions packages/messenger-web/src/Background.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.background {
width: 100%;
height: 100%;

background: #000;
overflow:hidden;
overflow: hidden;
position: absolute;
}

Expand All @@ -12,9 +12,7 @@
position: absolute;
top: 50%;
width: 120vw;
/* Größe des Gradienten angepasst */
height: 120vw;
/* Größe des Gradienten angepasst */
transform: translate(-50%, -50%);
}

Expand All @@ -23,26 +21,31 @@
position: relative;
top: 30%;
width: 120vw;
/* Größe des Gradienten angepasst */
height: 120vw;
/* Größe des Gradienten angepasst */
transform: translate(-50%, -50%);
}

.gradient-left {
left: 30%;
background: radial-gradient(circle at 50% 50%, rgba(135, 44, 255, 0.4) 0%, transparent 60%);
background: radial-gradient(
circle at 50% 50%,
rgba(135, 44, 255, 0.4) 0%,
transparent 60%
);
animation: moveSmoothLeft 100s infinite alternate;
}

.gradient-right {
right: 30%;
background: radial-gradient(circle at 50% 50%, rgba(44, 166, 255, 0.4) 0%, transparent 60%);
background: radial-gradient(
circle at 50% 50%,
rgba(44, 166, 255, 0.4) 0%,
transparent 60%
);
animation: moveSmoothRight 80s infinite alternate;
}

@keyframes moveSmoothLeft {

0%,
100% {
transform: translate(-75vw, -50%) scale(1);
Expand Down Expand Up @@ -86,7 +89,6 @@
}

@keyframes moveSmoothRight {

0%,
100% {
transform: translate(75vw, -50%) scale(1);
Expand Down Expand Up @@ -127,4 +129,4 @@
90% {
transform: translate(60vw, -50vh) scale(1.1);
}
}
}
8 changes: 7 additions & 1 deletion packages/messenger-web/src/Background.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
// Import React and the CSS for this component
import React from 'react';
import './Background.css';

// Define the Background component
const Background: React.FC = () => {
// Return the JSX for this component
return (
// The main div that contains the background
// 2 different moving gradients
<div className="background">
<div className="gradient gradient-right" />
<div className="gradient gradient-left" />
</div>
);
};

export default Background;
// Export the Background component as the default export
export default Background;
10 changes: 4 additions & 6 deletions packages/messenger-web/src/Dm3Widget.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
.dm3widget {
width: calc(100% - 40px );
height: calc(100% - 70px - 40px) ;
background-color: #000000;
width: calc(100% - 40px);
height: calc(100% - 70px - 40px);
background-color: #1a1b22;
border: 1px solid #222222;
/* Weiße Umrandung hinzugefügt */
border-radius: 25px;
border-radius: 10px;
position: absolute;
top: 75px;
left: 20px;
Expand All @@ -14,4 +13,3 @@
/* margin-top: 30px; /* Adjust this value as needed */
overflow: hidden;
}

17 changes: 11 additions & 6 deletions packages/messenger-web/src/Dm3Widget.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
// Import React and the CSS for this component
import React from 'react';
import './Dm3Widget.css';

// Ignore TypeScript errors for the next line
//@ts-ignore
// Import the DM3 component from the 'messenger-widget' package
import { DM3 } from 'messenger-widget';

// Define the Dm3Widget component
const Dm3Widget: React.FC = () => {
// Define the props for the DM3 component
const props: any = {
defaultContact: 'help.dm3.eth',
defaultContact: 'receiver.beta-user.dm3.eth',
defaultServiceUrl: process.env.REACT_APP_DEFAULT_SERVICE,
ethereumProvider: process.env.REACT_APP_ETHEREUM_PROVIDER,
walletConnectProjectId: process.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
showAlways: true,
hideFunction: 'attachments,edit,delete', // OPTINAL PARAMETER : 'attachments,edit,delete' or undefined
hideFunction: 'attachments,edit,delete', // Optional parameter: 'attachments,edit,delete' or undefined
showContacts: true, // true for all contacts / false for default contact

};

// Return the JSX for this component
return (
// A div that contains the DM3 component
<div className="dm3widget">

<DM3 {...props} />

</div>
);
};

export default Dm3Widget;
// Export the Dm3Widget component as the default export
export default Dm3Widget;
32 changes: 16 additions & 16 deletions packages/messenger-web/src/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
// Import React
import React from 'react';

// Define the Footer component
const Footer: React.FC = () => {
return (
<nav
className="navbar fixed-bottom navbar-light "
style={{ backgroundColor: '#000000ff !important' }}
>
<div className="container-fluid text-center" style={{ justifyContent: 'flex-end', display: 'flex' }}>
// Define the styles for the navbar and the container
const navbarStyle = { backgroundColor: '#000000ff !important' };
const containerStyle = { justifyContent: 'flex-end', display: 'flex' };
const linkStyle = { marginRight: '10px' };

<div style={{ marginRight: '10px' }}>
<a
className="text-muted legal"
href="https://dm3.network/privacy-policy/"
>
// Return the JSX for this component
return (
// A fixed-bottom navbar with a black background
<nav className="navbar fixed-bottom navbar-light" style={navbarStyle}>
<div className="container-fluid text-center" style={containerStyle}>
<div style={linkStyle}>
<a className="text-muted legal" href="https://dm3.network/privacy-policy/">
Privacy Policy
</a>
<a
className="text-muted legal ms-4"
href="https://dm3.network/terms-and-conditions/"
>
<a className="text-muted legal ms-4" href="https://dm3.network/terms-and-conditions/">
Terms & Conditions
</a>
</div>
Expand All @@ -27,4 +26,5 @@ const Footer: React.FC = () => {
);
};

export default Footer;
// Export the Footer component as the default export
export default Footer;
23 changes: 16 additions & 7 deletions packages/messenger-web/src/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import React from 'react';

// Define the Header component
const Header: React.FC = () => {
// Define the handlers for the mouse over and mouse out events
const handleMouseOver = (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
e.currentTarget.style.transform = 'scale(1.2)';
};
const handleMouseOut = (e: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
e.currentTarget.style.transform = 'scale(1)';
};

// Return the JSX for this component
return (
<nav className="navbar fixed-top navbar-light" >
<a href="https://dm3.network" target="_blank" style={{ position: 'absolute', top: '26px', left: '21px' }}>
<nav className="navbar fixed-top navbar-light">
<a href="https://dm3.network" target="_blank" rel="noopener noreferrer" style={{ position: 'absolute', top: '26px', left: '21px' }}>
<img
src="/dm3-logo.png"
alt="dm3 Network Logo"
style={{ height: '29px', transition: 'transform 0.5s ease' }} // Stelle die Größe nach Bedarf ein
onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.2)'}
onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
style={{ height: '29px', transition: 'transform 0.5s ease' }}
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut}
/>
</a>
</nav>

);
};

export default Header;
export default Header;
7 changes: 0 additions & 7 deletions packages/messenger-web/src/dm3.module.css

This file was deleted.

0 comments on commit 7b2d312

Please sign in to comment.