Change styles

src/app/app.component.html

@@ -3,10 +3,12 @@
     <nav>
       <ul>
         <li>
-          <a routerLink="/tweets">Tweets</a>
+          <a routerLink="/tweets"
+             routerLinkActive="active-link">Tweets</a>
         </li>
         <li>
-          <a routerLink="/moments">Moments</a>
+          <a routerLink="/moments"
+             routerLinkActive="active-link">Moments</a>
         </li>
       </ul>
       <div *ngIf="multi">

src/app/app.component.scss

@@ -5,6 +5,21 @@ body {
     font-family: Arial, Helvetica, sans-serif;
 }
 
+a {
+    color : var(--item-color);
+    text-decoration: none;
+
+    &:hover {
+        color :  var(--item-color-hover);
+        text-decoration: underline;
+    }
+
+    &.active-link{
+        color :  var(--item-color-selected);
+    }
+}
+
+
 footer,
 header {
     ul {
@@ -15,8 +30,7 @@ header {
         
         li {
             padding: 3px;
-            border: 1px solid var(--panel-bd-color);
-            background-color: var(--panel-bg-color);
+            margin: 0 3px;
         }
     }
 }
@@ -24,6 +38,10 @@ header {
 nav {
     display: flex;
     justify-content: space-between;
+    background: #D7D7D7;   
+    box-shadow: 0 0 7px 3px rgba(0,0,0, .5);
+    margin-bottom: 8px;
+    padding: 3px;
 }
 
 footer li {

src/app/tweets/tweets-calendar.component.scss

@@ -33,7 +33,7 @@
     display: flex;
     flex-direction: column-reverse;
     background-color: var(--panel-bg-color);
-    border: 1px solid var(--panel-bd-color);
+    box-shadow: var(--panel-shadow);
     padding: 5px;
     margin: 5px;
 
@@ -61,6 +61,10 @@
         align-items: end;
         background-color: var(--item-bd-empty-color);
         transition: background-color .4s;
+
+        &:hover span {
+            background-color: var(--item-color-hover);
+        }
     }
 
     span { 
@@ -81,6 +85,10 @@
 
     .selected {
         background-color: var(--item-bd-hover-color);
+
+        span {
+            background-color: var(--item-color-selected);
+        }
     }
 
     .disabled {
@@ -108,20 +116,20 @@
 .tweet {
     display: block;
     background-color: var(--panel-bg-color);
-    border: 1px solid var(--panel-bd-color);
-    margin: 5px;
-    padding: 5px;
+    box-shadow: var(--panel-shadow);
+    margin: 5px 5px 12px 5px;
 }
 
 .tweet-text {
+    padding: 5px;
     white-space: pre-wrap;
 }
 
 .tweet-infos {
-    border-bottom: 1px solid rgb(194, 194, 194);
-    padding-bottom: 3px;
-    margin-bottom: 3px;
     font-size: 85%;
+    background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0, 0, 0, 0.025));
+    margin:0 0  3px 0;
+    padding: 5px;
     
     time::before {
         content: ' - ';
@@ -134,12 +142,19 @@
     align-content: center;
     justify-content: center;
     align-items: center;
+    padding: 5px;
 
     img {
         max-width: calc(25% - 20px);
         height: auto;
         margin: 3px;
         box-shadow: 2px 2px 4px rgba(0,0,0, .5);
+        transition: all .4s;
+        cursor: pointer;
+
+        &:hover {
+            box-shadow: 2px 2px 4px rgba(0,0,0, .9);
+        }
     }
 
     video {
@@ -150,10 +165,10 @@
 }
 
 .tweet-actions {
-    border-top: 1px solid rgb(194, 194, 194);
-    padding-top: 3px;
-    margin-top: 3px;
     font-size: 85%;
+    background: rgba(0,0,0,.1);
+    margin: 3px 0 0 0;
+    padding: 5px;
     text-align: right;
 }
 
@@ -161,15 +176,15 @@
     grid-area: e;
 
     background-color: var(--panel-bg-color);
-    border: 1px solid var(--panel-bd-color);
+    box-shadow: var(--panel-shadow);
     position: relative;
     margin: 5px;
+    padding: 3px;
     text-align: center;
 
     input {
-        margin: 2px;
         padding: 2px 5px;
-        width: calc(100% - 4px);
+        width: 100%;
         display: block;
     }
 }
@@ -177,8 +192,9 @@
 .month-calendar {
     grid-area: f;
     background-color: var(--panel-bg-color);
-    border: 1px solid var(--panel-bd-color);
+    box-shadow: var(--panel-shadow);
     margin: 5px;
+    padding: 3px;
 
     table {
         width: 100%;
@@ -196,21 +212,33 @@
     }
 
     td:not(.current) {
-        color: #AAA;
+        color: #CBCBCB;
     }
 
     td.with-tweets {
-        background: #AAA;
+        background: #D2D2D2;
         cursor: pointer;
     }
-}
 
+    a {
+        display: block;
+        height: 18px;
+    }
+}
 
 .filter {
     grid-area: g;
     background-color: var(--panel-bg-color);
-    border: 1px solid var(--panel-bd-color);
+    box-shadow: var(--panel-shadow);
     margin: 5px;
+    padding: 3px;
+}
 
-
-}
\ No newline at end of file
+.month-calendar,
+.filter {
+    & > div {
+        background: linear-gradient(to right, rgba(0,0,0,.1), rgba(0, 0, 0, 0.025));
+        margin: -5px -5px 3px -5px;
+        padding: 5px;
+    }
+}

src/styles.scss

@@ -3,10 +3,13 @@
 :root{
     --panel-bg-color: rgb(237, 237, 237);
     --panel-bd-color: rgb(188, 188, 188);
+    --panel-shadow : 0 0 6px -1px rgba(0,0,0, 0.5);
 
     --item-bd-color: rgb(0, 0, 0, .1);
     --item-bd-empty-color: rgb(0, 0, 0, .05);
     --item-bd-disable-color: rgb(0, 0, 0, .01);
     --item-bd-hover-color: rgb(0, 0, 0, .2);
-    --item-color: rgb(165, 113, 154);
+    --item-color: #1a38dd;
+    --item-color-hover: #12570e;
+    --item-color-selected: #be14f3
 }
\ No newline at end of file