diff --git a/src/client/components/Chat.js b/src/client/components/Chat.js index 6673be1..4f98445 100644 --- a/src/client/components/Chat.js +++ b/src/client/components/Chat.js @@ -60,7 +60,7 @@ export default class Chat extends React.PureComponent {
- arrow_forward +
Chat
@@ -95,7 +95,7 @@ export default class Chat extends React.PureComponent { )) ) : (
-
chat
+
No Notifications
)} diff --git a/src/client/components/Input.js b/src/client/components/Input.js index 6989d24..a38852e 100644 --- a/src/client/components/Input.js +++ b/src/client/components/Input.js @@ -68,7 +68,7 @@ export default class Input extends React.PureComponent { value={message} /> ) diff --git a/src/client/components/Toolbar.js b/src/client/components/Toolbar.js index ef1b0c6..66bea92 100644 --- a/src/client/components/Toolbar.js +++ b/src/client/components/Toolbar.js @@ -59,7 +59,7 @@ export default class Toolbar extends React.PureComponent { data-blink={messages.length !== totalMessages && !isChatOpen} title="Chat" > - chat +
{stream && ( @@ -67,8 +67,8 @@ export default class Toolbar extends React.PureComponent { className="button mute-audio" title="Mute audio" > - mic_off - mic + + )} @@ -77,8 +77,8 @@ export default class Toolbar extends React.PureComponent { className="button mute-video" title="Mute video" > - videocam_off - videocam + + )} @@ -86,15 +86,15 @@ export default class Toolbar extends React.PureComponent { className="button fullscreen" title="Enter fullscreen" > - fullscreen_exit - fullscreen + +
- call_end +
) diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss new file mode 100755 index 0000000..e5fe449 --- /dev/null +++ b/src/scss/_fonts.scss @@ -0,0 +1,88 @@ +@font-face { + font-family: 'icons'; + src: url('./fonts/icons.eot?ij9tsv'); + src: url('./fonts/icons.eot?ij9tsv#iefix') format('embedded-opentype'), + url('./fonts/icons.woff?ij9tsv') format('woff'), + url('./fonts/icons.ttf?ij9tsv') format('truetype'), + url('./fonts/icons.svg?ij9tsv#icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +// Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. +// Note, that will break hinting! In other OS-es font will be not as sharp as it could be +// @media screen and (-webkit-min-device-pixel-ratio:0) { +// @font-face { +// font-family: 'icons'; +// src: url('./fonts/icons.svg?ij9tsv#icons') format('svg'); +// } +// } + +[class^="icon-"], [class*=" icon-"] { + font-family: "icons"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-arrow_forward:before { + content: "\e5c8"; +} +.icon-call_end:before { + content: "\e0b1"; +} +.icon-question_answer:before { + content: "\e8af"; +} +.icon-fullscreen:before { + content: "\e5d0"; +} +.icon-fullscreen_exit:before { + content: "\e5d1"; +} +.icon-mic:before { + content: "\e029"; +} +.icon-mic_off:before { + content: "\e02b"; +} +.icon-more_vert:before { + content: "\e5d4"; +} +.icon-send:before { + content: "\e163"; +} +.icon-videocam:before { + content: "\e04b"; +} +.icon-videocam_off:before { + content: "\e04c"; +} diff --git a/src/scss/_toolbar.scss b/src/scss/_toolbar.scss index 1fe321d..5736b3d 100644 --- a/src/scss/_toolbar.scss +++ b/src/scss/_toolbar.scss @@ -6,7 +6,7 @@ /* on icons are hidden by default */ - .material-icons { + .icon { &.on { display: none; } @@ -24,7 +24,7 @@ /* on icons are displayed when parent svg has class 'on' */ .button { - &.on .material-icons { + &.on .icon { &.on { display: block; } diff --git a/src/scss/fonts/icons.eot b/src/scss/fonts/icons.eot new file mode 100755 index 0000000..332affc Binary files /dev/null and b/src/scss/fonts/icons.eot differ diff --git a/src/scss/fonts/icons.svg b/src/scss/fonts/icons.svg new file mode 100755 index 0000000..207143c --- /dev/null +++ b/src/scss/fonts/icons.svg @@ -0,0 +1,21 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/scss/fonts/icons.ttf b/src/scss/fonts/icons.ttf new file mode 100755 index 0000000..f6e94e2 Binary files /dev/null and b/src/scss/fonts/icons.ttf differ diff --git a/src/scss/fonts/icons.woff b/src/scss/fonts/icons.woff new file mode 100755 index 0000000..996841d Binary files /dev/null and b/src/scss/fonts/icons.woff differ diff --git a/src/scss/style.scss b/src/scss/style.scss index 11edcdb..2c70126 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,5 +1,5 @@ -@import './variables'; -@import url("https://fonts.googleapis.com/icon?family=Material+Icons"); +@import '_fonts'; +@import '_variables'; *, *:before, @@ -138,11 +138,11 @@ body.call { } .app { - @import './alert'; - @import './notification'; - @import './video'; - @import './chat'; - @import './toolbar'; + @import '_alert'; + @import '_notification'; + @import '_video'; + @import '_chat'; + @import '_toolbar'; } .fade-enter {