PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use the right icons, sizing, and font families for things

Browse source
This commit is contained in:
Travis Ralston 2019-01-21 16:03:44 -07:00
parent a8ec40a8b0
commit c3692aa9ae
9 changed files with 49 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/structures/_TabbedView.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
} }
.mx_TabbedView_tabLabel { .mx_TabbedView_tabLabel {
vertical-align: middle; vertical-align: text-top;
cursor: pointer; cursor: pointer;
display: block; display: block;
border-radius: 3px; border-radius: 3px;
@ -46,23 +46,23 @@ limitations under the License.
} }
.mx_TabbedView_tabLabel_icon { .mx_TabbedView_tabLabel_icon {
width: 12px; width: 14px;
height: 12px; height: 14px;
margin-left: 6px; margin-left: 6px;
margin-right: 9px; margin-right: 9px;
position: relative; position: relative;
} }
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon { .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
width: 12px; width: 14px;
height: 12px; height: 14px;
display: inline-block; display: inline-block;
} }
.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before { .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
background-color: $tab-label-icon-bg-color; background-color: $tab-label-icon-bg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 12px; mask-size: 14px;
mask-position: center; mask-position: center;
content: ''; content: '';
position: absolute; position: absolute;

21
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -3,29 +3,29 @@
display: block; display: block;
text-align: center; text-align: center;
color: $dialog-title-fg-color; color: $dialog-title-fg-color;
margin-top: 23px; margin-top: 16px;
margin-bottom: 24px; margin-bottom: 24px;
padding: 0; padding: 0;
} }
.mx_UserSettingsDialog_close { .mx_UserSettingsDialog_close {
position: absolute; position: absolute;
top: 23px; top: 16px;
right: 25px; right: 25px;
} }
.mx_UserSettingsDialog_closeIcon { .mx_UserSettingsDialog_closeIcon {
width: 14px; width: 16px;
height: 14px; height: 16px;
display: inline-block; display: inline-block;
} }
.mx_UserSettingsDialog_closeIcon:before { .mx_UserSettingsDialog_closeIcon:before {
// TODO: Use real icon // TODO: Use real icon
mask: url('$(res)/img/feather-icons/video.svg'); mask: url('$(res)/img/feather-icons/cancel.svg');
background-color: $dialog-close-fg-color; background-color: $dialog-close-fg-color;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: 14px; mask-size: 16px;
mask-position: center; mask-position: center;
content: ''; content: '';
position: absolute; position: absolute;
@ -52,16 +52,13 @@
} }
.mx_UserSettingsDialog_preferencesIcon:before { .mx_UserSettingsDialog_preferencesIcon:before {
// TODO: Use real icon mask: url('$(res)/img/feather-icons/sliders.svg');
mask: url('$(res)/img/feather-icons/paperclip.svg');
} }
.mx_UserSettingsDialog_securityIcon:before { .mx_UserSettingsDialog_securityIcon:before {
// TODO: Use real icon mask: url('$(res)/img/feather-icons/lock.svg');
mask: url('$(res)/img/feather-icons/life-buoy.svg');
} }
.mx_UserSettingsDialog_helpIcon:before { .mx_UserSettingsDialog_helpIcon:before {
// TODO: Use real icon mask: url('$(res)/img/feather-icons/help-circle.svg');
mask: url('$(res)/img/feather-icons/share.svg');
} }

4
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -1,11 +1,15 @@
.mx_SettingsTab_heading { .mx_SettingsTab_heading {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: $primary-fg-color;
} }
.mx_SettingsTab_subheading { .mx_SettingsTab_subheading {
font-size: 14px; font-size: 14px;
display: block; display: block;
font-family: $font-family-semibold;
color: $primary-fg-color;
margin-bottom: 10px;
} }
.mx_SettingsTab_section { .mx_SettingsTab_section {

10
res/img/feather-icons/cancel.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="#" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#9fa9ba" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

6
res/img/feather-icons/help-circle.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<circle cx="6" cy="6" r="6"/>
<path d="M4.254 4.2a1.8 1.8 0 0 1 3.498.6c0 1.2-1.8 1.8-1.8 1.8M6 8.991"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 352 B

6
res/img/feather-icons/lock.svg Normal file
View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
<rect width="11" height="6.6" y="5.4" rx="1.2"/>
<path d="M2.444 5.4V3c0-1.657 1.368-3 3.056-3s3.056 1.343 3.056 3v2.4"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 369 B

5
res/img/feather-icons/sliders.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
<path d="M2.636 11V7.111M2.636 4.889V1M7 11V6M7 3.778V1M11.364 11V8.222M11.364 6V1M1 7.111h3.273M5.364 3.778h3.272M9.727 8.222H13"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 345 B

1
res/themes/dharma/css/_dharma.scss
View file

@ -5,6 +5,7 @@
horizontal mess. Arial empirically gets it right, hence prioritising horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */ Arial here. */
$font-family: 'Nunito', Arial, Helvetica, Sans-Serif; $font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
$font-family-semibold: 'Nunito SemiBold', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
$primary-fg-color: #454545; $primary-fg-color: #454545;

1
res/themes/light/css/_base.scss
View file

@ -4,6 +4,7 @@
horizontal mess. Arial empirically gets it right, hence prioritising horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */ Arial here. */
$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; $font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
$font-family-semibold: 'Open Sans', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
$primary-fg-color: #454545; $primary-fg-color: #454545;