From 85bcad0ea0e0a667de343efa81dac64e63c2cf85 Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 28 Jan 2020 14:42:58 +0000
Subject: [PATCH] Styling for Nad

---
 .../dialogs/_RoomSettingsDialogBridges.scss   | 100 ++++++++++--------
 src/components/views/settings/BridgeTile.js   |   2 +-
 .../settings/tabs/room/BridgeSettingsTab.js   |   6 +-
 3 files changed, 63 insertions(+), 45 deletions(-)

diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
index ab54fb777b..d77e019cbf 100644
--- a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
+++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
@@ -33,64 +33,80 @@ limitations under the License.
     border-style: solid;
     border-radius: 5px;
 
-    .protocol-icon {
-        float: left;
-        margin-right: 5px;
-        img {
-            border-radius: 5px;
-            border-width: 1px 1px;
-            border-color: $primary-hairline-color;
-        }
-        span {
-            /* Correct letter placement */
-            left: auto;
-        }
-    }
-
-    h3 {
-        margin-top: 0;
-        margin-bottom: 4px;
-        font-size: 16pt;
-        color: $primary-fg-color;
-    }
-
     .column-icon {
         float: left;
         padding-right: 10px;
 
+        * {
+            border-radius: 5px;
+            border: 1px solid $input-darker-bg-color;
+        }
+
         .noProtocolIcon {
             width: 48px;
             height: 48px;
-            background: $settings-profile-placeholder-bg-color;
+            background: $input-darker-bg-color;
             border-radius: 5px;
         }
+
+        .protocol-icon {
+            float: left;
+            margin-right: 5px;
+            img {
+                border-radius: 5px;
+                border-width: 1px 1px;
+                border-color: $primary-hairline-color;
+            }
+            span {
+                /* Correct letter placement */
+                left: auto;
+            }
+        }
     }
 
     .column-data {
         display: inline-block;
         width: 85%;
-    }
 
-    .workspace-channel-details {
-        margin-top: 0;
-        color: $primary-fg-color;
+        > h3 {
+            margin-top: 0px;
+            margin-bottom: 0px;
+            font-size: 16pt;
+            color: $primary-fg-color;
+        }
 
-        .channel {
-            margin-left: 15px;
+        > * {
+            margin-top: 4px;
+            margin-bottom: 0;
+        }
+
+        .workspace-channel-details {
+            color: $primary-fg-color;
+            font-weight: 600;
+
+            .channel {
+                margin-left: 5px;
+            }
+        }
+
+        .showMore {
+            display: block;
+            text-align: left;
+            margin-top: 10px;
+        }
+
+        .metadata {
+            color: $muted-fg-color;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-bottom: 0;
+        }
+
+        .metadata.visible {
+            overflow-y: visible;
+            text-overflow: ellipsis;
+            white-space: normal;
         }
     }
-
-    .metadata {
-        color: $muted-fg-color;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-bottom: 0;
-    }
-
-    .metadata.visible {
-        overflow-y: visible;
-        text-overflow: ellipsis;
-        white-space: normal;
-    }
 }
diff --git a/src/components/views/settings/BridgeTile.js b/src/components/views/settings/BridgeTile.js
index 6902639879..1759c0f58d 100644
--- a/src/components/views/settings/BridgeTile.js
+++ b/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>
diff --git a/src/components/views/settings/tabs/room/BridgeSettingsTab.js b/src/components/views/settings/tabs/room/BridgeSettingsTab.js
index 12a72ab8f9..d66732de55 100644
--- a/src/components/views/settings/tabs/room/BridgeSettingsTab.js
+++ b/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>;
         }