Skip to content

Commit

Permalink
Added dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@ihsraham
ihsraham committed Oct 28, 2024
1 parent 6c64884 commit 314b6c5
Show file tree
Hide file tree
Showing 5 changed files with 258 additions and 99 deletions.
10 changes: 10 additions & 0 deletions single-factor-auth-web/sfa-web-ton-telegram-example/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions single-factor-auth-web/sfa-web-ton-telegram-example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@web3auth/base": "^9.0.2",
"@web3auth/base-provider": "^9.0.2",
"@web3auth/single-factor-auth": "^9.0.0",
"lucide-react": "^0.454.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"source-map-loader": "^4.0.1",
Expand Down
230 changes: 167 additions & 63 deletions single-factor-auth-web/sfa-web-ton-telegram-example/src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,95 @@
/* Importing the Inter font with specified weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
--hover-bg: rgba(0, 0, 0, 0.05);
--box-shadow: rgba(0, 0, 0, 0.1);
}

.dark-mode {
--bg-color: #1a1a1a;
--text-color: #ffffff;
--border-color: #333333;
--hover-bg: rgba(255, 255, 255, 0.1);
--box-shadow: rgba(0, 0, 0, 0.2);
}

body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color, #ffffff);
color: var(--text-color, #333333); /* Default text color */
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main Container */
.container {
width: 90%;
max-width: 600px;
margin: auto;
padding: 20px;
background-color: var(--bg-color); /* Ensures background changes with theme */
background-color: var(--bg-color);
color: var(--text-color);
}

/* Header with Logo and Title */
.header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
margin-bottom: 20px;
gap: 20px;
margin-bottom: 30px;
position: relative;
width: 100%;
}

.logo-container {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.web3auth-logo {
width: 150px;
height: auto;
margin: 0 auto;
}

.theme-toggle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
padding: 8px;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: var(--bg-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.theme-toggle:hover {
background-color: var(--hover-bg);
}

.theme-toggle svg {
width: 20px;
height: 20px;
color: var(--text-color);
}

.title {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-color);
margin: 0;
color: var(--text-color);
}

.description {
Expand All @@ -50,7 +100,6 @@ body {
color: var(--text-color);
}

/* How It Works Section */
.how-it-works {
margin: 20px 0;
text-align: center;
Expand All @@ -60,120 +109,175 @@ body {
.how-it-works h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-color);
}

.how-it-works ul {
list-style-type: none;
padding: 0;
font-weight: 400;
color: var(--text-color);
}

.how-it-works li {
margin: 5px 0;
color: var(--text-color);
margin: 10px 0;
}

.grid {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0;
width: 100%;
}

/* Info Boxes for User and TON Account */
.user-info-box, .info-box {
padding: 15px;
margin: 10px 0;
border: 1px solid #ccc;
padding: 20px;
margin: 0;
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--bg-color); /* Uses theme variable */
background-color: var(--bg-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
color: var(--text-color);
transition: all 0.3s ease;
box-sizing: border-box;
}

.user-info-box {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
flex-wrap: wrap;
}

.info-box:hover {
background-color: var(--text-color);
color: var(--bg-color);
background-color: var(--hover-bg);
border-color: var(--text-color);
transform: translateY(-2px);
}

/* Avatar and Telegram Logo */
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
.user-info {
display: flex;
flex-direction: column;
gap: 8px;
}

.id-with-logo {
.user-info p {
margin: 0;
display: flex;
align-items: center;
gap: 4px;
max-width: fit-content;
margin: 0 auto;
gap: 8px;
}

.user-info strong {
color: var(--text-color);
}

.id-with-logo {
display: flex;
align-items: center;
gap: 8px;
}

.telegram-logo {
width: 20px;
height: 20px;
}

/* Ellipsis for Long Text */
.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}

.info-box-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
width: 100%;
}

.info-box-content p {
margin: 0;
flex: 1;
text-align: left;
min-width: 0;
}

.info-box-content strong {
display: block;
margin-bottom: 5px;
}

.ellipsed-text {
display: inline-block;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
display: block;
width: 100%;
word-wrap: break-word;
word-break: break-all;
font-family: monospace;
font-size: 0.9em;
text-align: left;
}

.copy-icon {
color: var(--text-color);
opacity: 0.6;
transition: all 0.2s ease;
flex-shrink: 0;
margin-top: 4px;
}

.copy-icon.success {
color: #4CAF50;
opacity: 1;
}

.info-box:hover .copy-icon {
opacity: 1;
}

/* Footer Button */
.footer {
display: flex;
justify-content: center;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
border-top: 1px solid var(--border-color);
margin-top: 30px;
background-color: var(--bg-color);
color: var(--text-color);
}

.learn-more-button {
padding: 10px 20px;
padding: 12px 24px;
font-weight: 600;
text-align: center;
border-radius: 5px;
border-radius: 8px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light and Dark Mode Styles for Button */
.light-mode {
transition: all 0.3s ease;
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
}

.dark-mode {
background-color: var(--text-color);
color: var(--bg-color);
border: 1px solid var(--text-color);
.learn-more-button:hover {
background-color: var(--hover-bg);
border-color: var(--text-color);
}

/* Responsive Design */
@media (max-width: 768px) {
.container {
width: 90%;
width: 95%;
padding: 15px;
}

.title {
font-size: 1.5rem;
}

.web3auth-logo {
width: 150px;
max-width: 100%;
height: auto;
margin-bottom: 8px;
width: 120px;
}
}

.user-info-box {
padding: 15px;
}
}
Loading

0 comments on commit 314b6c5

Please sign in to comment.