Add German translation (#77)

* Add German translation

popupMediaSelectCastLabel is intentionally left blank due to German grammar.

* Fix receiver selector spacing for blank labels

ext/src/ui/popup/index.tsx

@@ -115,10 +115,12 @@ class PopupApp extends Component<{}, PopupAppState> {
         return (
             <div>
                 <div className="media-select">
-                    { _("popupMediaSelectCastLabel") }
+                    <div className="media-select__label-cast">
+                        { _("popupMediaSelectCastLabel") }
+                    </div>
                     <select value={ this.state.mediaType }
                             onChange={ this.onSelectChange }
-                            className="media-select-dropdown">
+                            className="media-select__dropdown">
                         <option value={ ReceiverSelectorMediaType.App }
                                 disabled={ !(this.state.availableMediaTypes
                                         & ReceiverSelectorMediaType.App) }>
@@ -145,7 +147,9 @@ class PopupApp extends Component<{}, PopupAppState> {
                                 : _("popupMediaTypeFile") }
                         </option>
                     </select>
-                    { _("popupMediaSelectToLabel") }
+                    <div className="media-select__label-to">
+                        { _("popupMediaSelectToLabel") }
+                    </div>
                 </div>
                 <ul className="receivers">
                     { this.state.receivers && this.state.receivers.map(
@@ -238,16 +242,16 @@ class ReceiverEntry extends Component<ReceiverEntryProps, ReceiverEntryState> {
 
         return (
             <li className="receiver">
-                <div className="receiver-name">
+                <div className="receiver__name">
                     { this.props.receiver.friendlyName }
                 </div>
-                <div className="receiver-address"
+                <div className="receiver__address"
                      title={ !application.isIdleScreen && application.statusText }>
                     { application.isIdleScreen
                         ? `${this.props.receiver.host}:${this.props.receiver.port}`
                         : application.statusText }
                 </div>
-                <button className="receiver-connect"
+                <button className="receiver__connect"
                         onClick={ this.handleCast }
                         disabled={this.props.isLoading || !this.props.canCast}>
                     { this.state.isLoading

ext/src/ui/popup/styles/index.css

@@ -11,16 +11,28 @@ body {
     padding: 0.75em 0;
 }
 
-.media-select-dropdown {
+.media-select__label-cast,
+.media-select__label-to {
     display: inline-block;
-    margin: 0 0.5em;
 }
+.media-select__label-cast:not(:empty) {
+    margin-inline-end: 0.5em;
+}
+.media-select__label-to:not(:empty) {
+    margin-inline-start: 0.5em;
+}
+
+.media-select__dropdown {
+    display: inline-block;
+}
+
 
 .receivers {
     list-style: none;
     margin: initial;
     padding: initial;
 }
+
 .receiver {
     column-gap: 0.75em;
     display: grid;
@@ -35,30 +47,29 @@ body {
     position: relative;
 }
 
-
 .receiver:not(:last-child) {
     border-bottom: 1px solid rgba(0, 0, 0, 0.25);
 }
 
-.receiver-name,
-.receiver-address {
+.receiver__name,
+.receiver__address {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.receiver-name {
+.receiver__name {
     font-size: 1.1em;
     grid-area: name;
 }
-.receiver-address {
+.receiver__address {
     color: GrayText;
     grid-area: address;
 }
-.receiver-status {
+.receiver__status {
     grid-area: status;
 }
-.receiver-connect {
+.receiver__connect {
     align-self: center;
     grid-area: connect;
     justify-self: end;

ext/src/ui/popup/styles/mac.css

@@ -12,11 +12,11 @@ button:not([disabled]):hover:active {
     color: -moz-mac-buttonactivetext;
 }
 
-.receiver-address,
-.receiver-status {
+.receiver__address,
+.receiver__status {
     font: message-box;
 }
 
-.receiver-connect {
+.receiver__connect {
     height: 22px;
 }