Skip to content

Commit

Permalink
UI: Clean up design of setting page.
Browse files Browse the repository at this point in the history 
This commit cleans up the design of setting page and
remove the inconsistency in the page design.

Few changes -
* Update the border-radius to 4px for all the buttons
* Better button UI
* Improve the layout of the setting page
* Cleaner toggle switch
  • Loading branch information
@akashnimare
akashnimare committed Sep 17, 2018
1 parent b4fa4ca commit 177bff6
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 58 deletions.
97 changes: 48 additions & 49 deletions app/renderer/css/preference.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ body {
kbd {
display: inline-block;
border: 1px solid #ccc;
border-radius: 3px;
border-radius: 4px;
font-size: 15px;
font-family: Courier New, Courier, monospace;
font-weight: bold;
Expand Down Expand Up @@ -129,7 +129,6 @@ td:nth-child(odd) {
content: '';
}


/* We don't want to show this in nav item since we have the + button for adding an Organization */

#nav-AddServer {
Expand Down Expand Up @@ -246,7 +245,7 @@ img.server-info-icon {
.setting-input-value {
flex-grow: 1;
font-size: 14px;
border-radius: 3px;
border-radius: 4px;
padding: 13px;
border: #ededed 2px solid;
outline-width: 0;
Expand Down Expand Up @@ -306,7 +305,7 @@ img.server-info-icon {
padding: 12px 30px;
margin: 10px 0 20px 0;
background: #fff;
width: 70%;
width: 80%;
transition: all 0.2s;
}

Expand All @@ -323,20 +322,37 @@ img.server-info-icon {
color: #ef5350;
padding: 8px;
border: rgba(239, 83, 80, 0.5) solid 1px;
border-radius: 4px;
border-color: #fff;
}

.red:hover {
color: #e63431;
border: rgba(239, 83, 80, 0.7) solid 1px;
;
background-color: rgba(230, 52, 49, 0.5);
color: #fff;
}

.blue {
color: #ffffff;
.green {
color: #fff;
background: #4EBFAC;
padding: 3px;
padding-right: 10px;
padding-left: 10px;
border-radius: 4px;
display: inline-block;
border: none;
padding: 10px;
width: 110px;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
transition: background-color 0.2s ease;
text-decoration: none;
}

.green:hover {
background-color: #3c9f8d;
color: #fff;
}

.w-200 {
width: 200px;
}

.grey {
Expand All @@ -363,28 +379,10 @@ i.open-tab-button {
cursor: pointer;
}

.reset-data-button,
.custom-css-button,
.download-folder-button {
display: inline-block;
border: none;
padding: 10px;
width: 120px;
cursor: pointer;
font-size: 13px;
transition: background-color 0.2s ease;
text-decoration: none;
}

.css-delete-action {
margin-bottom: 10px;
}

.reset-data-button:hover {
background-color: #3c9f8d;
color: #fff;
}

.selected-css-path,
.download-folder-path {
background: #eeeeee;
Expand Down Expand Up @@ -450,9 +448,12 @@ input.toggle-round+label:after {
}

input.toggle-round+label:before {
right: 2px;
background-color: #f1f1f1;
border-radius: 25px;
top: 0;
right: 0px;
left: 0px;
bottom: 0px;
}

input.toggle-round+label:after {
Expand All @@ -464,13 +465,16 @@ input.toggle-round+label:after {

input.toggle-round:checked+label:before {
background-color: #4EBFAC;
top: 0;
right: 0px;
left: 0px;
bottom: 0px;
}

input.toggle-round:checked+label:after {
margin-left: 25px;
}


/* Add new server modal */

.add-server-modal {
Expand All @@ -488,7 +492,6 @@ input.toggle-round:checked+label:after {
overflow: auto;
}


/* Modal Content */

.modal-container {
Expand Down Expand Up @@ -546,7 +549,7 @@ input.toggle-round:checked+label:after {
border: none;
width: 98%;
height: 46px;
border-radius: 3px;
border-radius: 4px;
cursor: pointer;
}

Expand All @@ -559,33 +562,31 @@ input.toggle-round:checked+label:after {
}

.certificates-card {
width:70%
width: 80%
}

.certificate-input {
width:100%;
margin-top: 10px;
display:inline-flex;
width: 100%;
margin-top: 10px;
display: inline-flex;
}

.certificate-input div {
align-self:center;
align-self: center;
}

.certificate-input .setting-input-value {
margin-left:10px;
margin-left: 10px;
max-width: 100%;
}

#add-certificate-button {
width:20%;
margin-right:0px;
height: 35px;
margin: 10px;
}

.tip {
background-color: hsl(46,63%,95%);
border: 1px solid hsl(46,63%,84%);
background-color: hsl(46, 63%, 95%);
border: 1px solid hsl(46, 63%, 84%);
border-radius: 4px;
}

Expand All @@ -604,7 +605,7 @@ input.toggle-round:checked+label:after {

@media (max-width: 650px) {
.selected-css-path,
.download-folder-path {
.download-folder-path {
margin-right: 15px;
}
#css-delete-action {
Expand Down Expand Up @@ -654,13 +655,11 @@ input.toggle-round:checked+label:after {
flex-direction: column;
align-items: center;
}

.server-info-right {
flex-direction: column;
align-items: center;
}

.action {
margin-top: 10px;
}
}
}
10 changes: 5 additions & 5 deletions app/renderer/js/pages/preference/add-certificate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ class AddCertificate extends BaseComponent {
}

template() {
return `
<div class="settings-card server-center certificates-card">
return `
<div class="settings-card certificates-card">
<div class="certificate-input">
<div>Organization URL :</div>
<div>Organization URL :</div>
<input class="setting-input-value" autofocus placeholder="your-organization.zulipchat.com or zulip.your-organization.com"/>
</div>
<div class="certificate-input">
<div>Custom CA's certificate file :</div>
<button id="add-certificate-button">Add</button>
<div>Custom CA's certificate file :</div>
<button class="green" id="add-certificate-button">Add</button>
</div>
</div>
`;
Expand Down
6 changes: 3 additions & 3 deletions app/renderer/js/pages/preference/general-section.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ class GeneralSection extends BaseSection {
<div class="setting-description">
This will inject the selected css stylesheet in all the added accounts
</div>
<button class="custom-css-button blue">Add</button>
<button class="custom-css-button green">Add</button>
</div>
<div class="setting-row" id="remove-custom-css">
<div class="setting-description">
Expand All @@ -105,7 +105,7 @@ class GeneralSection extends BaseSection {
<div class="setting-description">
Default download location
</div>
<button class="download-folder-button blue">Choose</button>
<button class="download-folder-button green">Choose</button>
</div>
<div class="setting-row">
<div class="setting-description">
Expand All @@ -119,7 +119,7 @@ class GeneralSection extends BaseSection {
<div class="setting-row" id="resetdata-option">
<div class="setting-description">This will delete all application data including all added accounts and preferences
</div>
<button class="reset-data-button blue">Reset App Data</button>
<button class="reset-data-button green w-200">Reset App Data</button>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/renderer/js/pages/preference/network-section.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class NetworkSection extends BaseSection {
<input class="setting-input-value" placeholder="e.g. foobar.com"/>
</div>
<div class="setting-row">
<div class="action blue" id="proxy-save-action">
<div class="action green" id="proxy-save-action">
<i class="material-icons">check_box</i>
<span>Save</span>
</div>
Expand Down

0 comments on commit 177bff6

Please sign in to comment.