From 7be4e8d9e28a71918341b24f47ad1267a7f7e118 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Sun, 19 May 2019 13:23:16 -0700
Subject: [PATCH] Make small tweaks to room list.

---
 src/Scylla/Views.elm   | 11 +++++++++--
 static/scss/style.scss | 26 +++++++++++++++++++-------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/Scylla/Views.elm b/src/Scylla/Views.elm
index 72f3fcb..1fc9b53 100644
--- a/src/Scylla/Views.elm
+++ b/src/Scylla/Views.elm
@@ -15,7 +15,7 @@ import Svg.Attributes
 import Url.Builder
 import Json.Decode as Decode
 import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, h3, table, td, tr, img, textarea, video, source, p)
-import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src)
+import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src, classList)
 import Html.Events exposing (onInput, onClick, preventDefaultOn)
 import Dict exposing (Dict)
 import Tuple
@@ -110,8 +110,15 @@ roomListElementView : Model -> String -> JoinedRoom -> Html Msg
 roomListElementView m s jr =
     let
         name = roomDisplayName m jr
+        isCurrentRoom = case currentRoomId m of
+            Nothing -> False
+            Just cr -> cr == s
     in
-        div [ class "room-link-wrapper" ]
+        div [ classList
+                [ ("room-link-wrapper", True)
+                , ("active", isCurrentRoom)
+                ]
+            ]
             [ a [ href <| roomUrl s ] [ text name ]
             , roomNotificationCountView jr.unreadNotifications
             ]
diff --git a/static/scss/style.scss b/static/scss/style.scss
index 1b734d8..0a0508e 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -2,14 +2,11 @@
 $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
-
 $background-color: #1b1e21;
 $background-color-light: lighten($background-color, 4%);
 $background-color-dark: darken($background-color, 4%);
-
 $error-color: #f01d43;
 $error-color-dark: darken(#f01d43, 10%);
-
 $inactive-input-color: lighten($background-color-light, 5%);
 $active-input-color: lighten($inactive-input-color, 5%);
 
@@ -17,6 +14,8 @@ $transition-duration: .250s;
 
 $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
 
+$border-radius: 3px;
+
 html, body {
     height: 100vh;
 }
@@ -31,7 +30,7 @@ body {
 
 @mixin input-common {
     padding: 5px;
-    border-radius: 3px;
+    border-radius: $border-radius;
     outline: none;
 
     font-family: inherit;
@@ -163,9 +162,22 @@ div.room-link-wrapper {
     whitespace: nowrap;
     display: flex;
     padding: 0px;
+    border-left: solid 2px $background-color-light;
+    padding-left: 5px;
+    margin: 3px;
+    align-items: center;
 
     span, a {
         margin-right: 5px;
+        color: lightgrey;
+    }
+
+    &:hover a {
+        color: $primary-color;
+    }
+
+    &.active {
+        border-left: solid 2px $primary-color;
     }
 }
 
@@ -176,7 +188,7 @@ div.reconnect-wrapper {
     display: flex;
     align-items: center;
     background-color: $inactive-input-color;
-    border-radius: 3px;
+    border-radius: $border-radius;
 
     .feather-icon {
         margin-right: 10px;
@@ -290,13 +302,13 @@ div.message {
         box-sizing: border-box;
         padding: 10px;
         background-color: $background-color-dark;
-        border-radius: 3px;
+        border-radius: $border-radius;
         box-shadow: $inset-shadow;
     }
 }
 
 span.sender-wrapper {
-    border-radius: 3px;
+    border-radius: $border-radius;
     padding-left: 5px;
     padding-right: 5px;
     display: inline-block;