Styling for Nad

res/css/views/dialogs/_RoomSettingsDialogBridges.scss

@@ -33,6 +33,22 @@ limitations under the License.
     border-style: solid;
     border-radius: 5px;
 
+    .column-icon {
+        float: left;
+        padding-right: 10px;
+
+        * {
+            border-radius: 5px;
+            border: 1px solid $input-darker-bg-color;
+        }
+
+        .noProtocolIcon {
+            width: 48px;
+            height: 48px;
+            background: $input-darker-bg-color;
+            border-radius: 5px;
+        }
+
         .protocol-icon {
             float: left;
             margin-right: 5px;
@@ -46,40 +62,39 @@ limitations under the License.
                 left: auto;
             }
         }
-
-    h3 {
-        margin-top: 0;
-        margin-bottom: 4px;
-        font-size: 16pt;
-        color: $primary-fg-color;
-    }
-
-    .column-icon {
-        float: left;
-        padding-right: 10px;
-
-        .noProtocolIcon {
-            width: 48px;
-            height: 48px;
-            background: $settings-profile-placeholder-bg-color;
-            border-radius: 5px;
-        }
     }
 
     .column-data {
         display: inline-block;
         width: 85%;
+
+        > h3 {
+            margin-top: 0px;
+            margin-bottom: 0px;
+            font-size: 16pt;
+            color: $primary-fg-color;
+        }
+
+        > * {
+            margin-top: 4px;
+            margin-bottom: 0;
         }
 
         .workspace-channel-details {
-        margin-top: 0;
             color: $primary-fg-color;
+            font-weight: 600;
 
             .channel {
-            margin-left: 15px;
+                margin-left: 5px;
             }
         }
 
+        .showMore {
+            display: block;
+            text-align: left;
+            margin-top: 10px;
+        }
+
         .metadata {
             color: $muted-fg-color;
             overflow: hidden;
@@ -94,3 +109,4 @@ limitations under the License.
             white-space: normal;
         }
     }
+}

src/components/views/settings/BridgeTile.js

@@ -105,7 +105,7 @@ export default class BridgeTile extends React.PureComponent {
                 <p className={metadataClassname}>
                     {creator} {bot}
                 </p>
-                <AccessibleButton kind="secondary" onClick={this._toggleVisible.bind(this)}>
+                <AccessibleButton className="showMore" kind="secondary" onClick={this._toggleVisible.bind(this)}>
                     { this.state.visible ? _t("Show less") : _t("Show more") }
                 </AccessibleButton>
             </div>

src/components/views/settings/tabs/room/BridgeSettingsTab.js

@@ -25,6 +25,8 @@ const BRIDGE_EVENT_TYPES = [
     // m.bridge
 ];
 
+const BRIDGES_LINK = "https://matrix.org/bridges/";
+
 export default class BridgeSettingsTab extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -66,7 +68,7 @@ export default class BridgeSettingsTab extends React.Component {
                     {
                         // TODO: We don't have this link yet: this will prevent the translators
                         // having to re-translate the string when we do.
-                        a: sub => sub,
+                        a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noopener">{sub}</a>,
                     },
                 )}</p>
                 <ul className="mx_RoomSettingsDialog_BridgeList">
@@ -80,7 +82,7 @@ export default class BridgeSettingsTab extends React.Component {
                 {
                     // TODO: We don't have this link yet: this will prevent the translators
                     // having to re-translate the string when we do.
-                    a: sub => sub,
+                    a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noopener">{sub}</a>,
                 },
             )}</p>;
         }