make ui bigger
This commit is contained in:
@@ -58,9 +58,9 @@
|
||||
}
|
||||
|
||||
.contact-action-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 28px;
|
||||
background-color: #BB86FC;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -69,13 +69,13 @@
|
||||
}
|
||||
|
||||
.contact-action-icon img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.contact-action-label {
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
@@ -90,8 +90,8 @@
|
||||
}
|
||||
|
||||
.contact-info-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
@@ -100,7 +100,7 @@
|
||||
}
|
||||
|
||||
.contact-info-label {
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
@@ -114,9 +114,9 @@
|
||||
<body class="contact-detail-screen" onload="updateContactDetail()">
|
||||
<!-- App Bar -->
|
||||
<div class="app-bar">
|
||||
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
|
||||
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
|
||||
<span class="app-bar-title">Contact</span>
|
||||
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 24px; height: 24px;"/></div>
|
||||
<div class="btn-icon"><img src="../../icons/more.tga" style="width: 32px; height: 32px;"/></div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Header -->
|
||||
@@ -143,14 +143,14 @@
|
||||
<!-- Contact Info -->
|
||||
<div class="contact-info-section">
|
||||
<div class="contact-info-item">
|
||||
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
|
||||
<img src="../../icons/phone.tga" class="contact-info-icon" style="width: 28px; height: 28px;"/>
|
||||
<div class="contact-info-content">
|
||||
<div class="contact-info-label">Mobile</div>
|
||||
<div class="contact-info-value" id="contact-phone">+1 (555) 000-0000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-info-item">
|
||||
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 24px; height: 24px;"/>
|
||||
<img src="../../icons/message.tga" class="contact-info-icon" style="width: 28px; height: 28px;"/>
|
||||
<div class="contact-info-content">
|
||||
<div class="contact-info-label">Email</div>
|
||||
<div class="contact-info-value" id="contact-email">email@example.com</div>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
.contact-letter {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #BB86FC;
|
||||
background-color: #1E1E1E;
|
||||
@@ -42,14 +42,14 @@
|
||||
}
|
||||
|
||||
.contact-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@@ -63,19 +63,19 @@
|
||||
}
|
||||
|
||||
.contact-phone {
|
||||
font-size: 13px;
|
||||
font-size: 16px;
|
||||
color: #B3B3B3;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.contact-call-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
border-radius: 28px;
|
||||
}
|
||||
|
||||
.contact-call-btn:hover {
|
||||
@@ -83,8 +83,8 @@
|
||||
}
|
||||
|
||||
.contact-call-btn img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -92,14 +92,14 @@
|
||||
<body class="contacts-screen" data-model="contacts">
|
||||
<!-- App Bar -->
|
||||
<div class="app-bar">
|
||||
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 24px; height: 24px;"/></div>
|
||||
<div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
|
||||
<span class="app-bar-title">Contacts</span>
|
||||
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
|
||||
<div class="btn-icon"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="search-bar">
|
||||
<img src="../../icons/search.tga" class="search-icon" style="width: 20px; height: 20px;"/>
|
||||
<img src="../../icons/search.tga" class="search-icon" style="width: 28px; height: 28px;"/>
|
||||
<input class="search-input" type="text" placeholder="Search contacts"/>
|
||||
</div>
|
||||
|
||||
@@ -120,20 +120,20 @@
|
||||
</div>
|
||||
|
||||
<!-- FAB -->
|
||||
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 24px; height: 24px;"/></div>
|
||||
<div class="btn-fab"><img src="../../icons/add.tga" style="width: 32px; height: 32px;"/></div>
|
||||
|
||||
<!-- Bottom Navigation -->
|
||||
<div class="bottom-nav">
|
||||
<div class="bottom-nav-item" onclick="navigateTo('dialer')">
|
||||
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
|
||||
<img src="../../icons/dialpad.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
|
||||
<span class="bottom-nav-label">Keypad</span>
|
||||
</div>
|
||||
<div class="bottom-nav-item">
|
||||
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
|
||||
<img src="../../icons/history.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
|
||||
<span class="bottom-nav-label">Recent</span>
|
||||
</div>
|
||||
<div class="bottom-nav-item active">
|
||||
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 24px; height: 24px;"/>
|
||||
<img src="../../icons/contacts.tga" class="bottom-nav-icon" style="width: 32px; height: 32px;"/>
|
||||
<span class="bottom-nav-label">Contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user